アイコンフォントを使ってレスポンシブかつRetina対応のUIメニューを作るチュートリアル:phpspot開発日誌
Responsive Retina-Ready Menu | Codrops アイコンフォントを使ってレスポンシブかつRetina対応のUIメニューを作るチュートリアル アイコンフォントなら拡大縮小しても劣化はないということで、CSSとJavaScriptを使ってうまくアイコンもリサイズして綺麗にレスポンシブに、更にRetinaにまで対応してくれるデモです。 UIデザイナーな方はやること増えて大変ですが、チュートリアルをベースにライブラリも出てくれば対応は楽になりそうですね。 それにしても色んなテクニックやディスプレイが出てきたりと、この業界考えることが増えて大変ですね 関連エントリ 3DのソーシャルメディアボタンをCSS3で作成するチュートリアル モダンなサイトを作成するためのCSS3チュートリアル集 テキストを円形に描画するチュートリアル WEBデザイナーなら見ておくべきCSS3のアニ
画像クリックでその場で色々な形でズームできるjQueryプラグイン「Nivo Zoom」:phpspot開発日誌
Nivo Zoom - jQuery Image Zoomer 画像クリックでその場で色々な形でズームできるjQueryプラグイン「Nivo Zoom」 5種類のズームタイプ、HTMLキャプションを画像に重ねたりできる画像ズームプラグインです 定番のズームプラグインも既にありますが、比較検討の際に検証してみるのもいいかもですね。 関連エントリ 製品画像等のズームが非常に簡単に行えるjQueryプラグイン「Image Zoom」 マウスホバーだけの簡単操作で画像をズームできて便利な「jQuery Zoom」
iTunesストアのトップのスライドショー風ウィジェットを実装できるjQueryサンプル:phpspot開発日誌
Apple rotator banner effect with jQuery | jQuery Plugins iTunesストアのトップのスライドショー風ウィジェットを実装できるjQueryサンプル 左にメイン画像、右にサムネイルで３つあるあのiTunesストアのインタフェースをjQueryを使ってサイトで再現できます 解説ページはこちら シンプルなマークアップで実現できています Appleの製品のユーザインタフェースは色々なところに影響を与えていてそういうところもやっぱりさすがだなぁというところですね。 関連エントリ Apple.comの新スライダーエフェクトを実装するjQueryプラグイン Apple関連のフリーのアイコンや素材集２０
綺麗にデザインされたピクトグラムアイコン100個セット:phpspot開発日誌
Dribbble - Free 16px Broccolidryiconsaniconsetitisfullof…icons by Visual Idiot 綺麗にデザインされたピクトグラムアイコン100個セット。 次のようなシンプルだけど綺麗なPSD形式のアイコンセットがダウンロードできます。 PSDファイルですが、ベクター形式なので拡大しても劣化がありません。Retinaディスプレイ対応も可能。 種類も汎用に使えそうなものが多いです 関連エントリ フリーでシンプルなピクトグラムアイコン６０個セット「Jigsoar icons」 いい感じのOpenType形式ピクトグラムアイコン集100個「Entypo」 ピクトグラム等、ミニマムなアイコンが２４個まとまったアイコンまとめ ピクトグラムが７００種類以上集まったアイコンセット「Pictodeck Icon Set」
スマホのタッチイベントを一気に実装できる13KBの軽量ライブラリ「QUOjs」:phpspot開発日誌
QUOjs - Micro JavaScript Library スマホのタッチイベントを一気に実装できる13KBの軽量ライブラリ「QUOjs」 タップ、ダブルタップ、ホールド、スワイプ、スワイプ上下左右、ドラッグといったイベントを実装するのに使えそう モバイルということで3G回線にも配慮した13KBは嬉しい。 今後はローテートやピンチイン・アウトにも対応予定だそう 実装はjQueryライクで超簡単。 関連エントリ たった2KBで動作するスマホ用マルチタッチジェスチャーライブラリ「Hammer.js」 スマートフォンでの指ジェスチャの説明に使えるアイコンセット「Cue」
これは必見のWEBデザインの近未来。HTML5で構築されたサイト45:phpspot開発日誌
45 Examples Of Websites Designed With HTML5 | Free and Useful Online Resources for Designers and Developers これは必見のWEBデザインの近未来。HTML5で構築されたサイト45 CSS3なんかも取り入れてデザインは去ることながら、動きもいい感じに実装されています。 WEB業界に身を置く方ならばデザイナーならずとも、出来ることを知っておくという意味で必見のサイトが多数。 多くのプロフェッショナルなサイトにおいてこうした物が近い未来当たり前になっていきそうな予感。 今後、より多くの知識と動かし方に関する引き出しを身に付けた上でクリエイティブな仕事が求められそうで大変な反面、面白いことにもチャレンジできそうな可能性を感じます。 ソニーのタブレットのサイト。超カッコいいです 他にも多数の動き
リアルなドラッグ＆ドロップが実現できるjQueryプラグイン「pep.jquery.js」:phpspot開発日誌
pep.jquery.js - put a little pep in your step リアルなドラッグ＆ドロップが実現できるjQueryプラグイン「pep.jquery.js」 ドラッグして移動しながら勢い良く離すと徐々にスピードが弱まるようなドラッグ＆ドロップ要素を実装できます。 スマートフォンでも動作します。 $('#peppable').pep(); ですぐに使えるみたいです 使いどころがアイデア次第というところはあるんですが１サンプルとして知っておくと思わぬアイデアの１要素として使えるかもしれませんね。 関連エントリ 画像のキャプションが美しいスライダー実装jQueryプラグイン「RefineSlide」 高機能なカルーセルを実装するjQueryプラグイン５０まとめ 見た目がクールなグラフ描画用jQueryプラグイン「Morris.js」
これは超カッコいい!CSS3を使ったアニメーションするボタン実装サンプル集:phpspot開発日誌
Animated Buttons with CSS3 これは超カッコいい!CSS3を使ったアニメーションするボタン実装サンプル集 ボタンといえば、マウスオーバーした時に色が変わって、押した時に凹みエフェクトが付くようなものが一般的ですがCSS3によってその自由度は大きく上がるようです 使わずとも一度はかならず見ておきたいボタン集となってます アイコン付きのボタン カーソルを合わせるとアイコンが拡大しながらフェードアウトしてプライスが表示されます アイコンからプライスへの変更に併せて右側の矢印色もアニメーションさせながら変更するサンプル アニメーションさせないなら画像のすり替えだけですがアニメーションさせているところがポイントですね 登録ボタンみたいなものにカーソルを合わせるとボタンが徐々に大きくなり矢印の角度なんかもアニメーションされる例 ボタンが大きくなり、更に文言を追加する例。色の変更
秀逸なテーブルデザインのパターン集:phpspot開発日誌
Ultimate guide to table UI patterns 秀逸なテーブルデザインのパターン集をまとめたエントリのご紹介です。 デザインだけでなく、見やすさや分かりやすさという点にも気を配りたいテーブルデザインは比較的難しいものになりますね。 テーブルデザインの例を知っておくことで、難しいテーブルのデザインをする際にも参考に出来そうです。 Apple のデザインっぽいテーブル 複雑なデータをわかりやすくスタイリッシュにまとめたテーブル 画像なども盛り込みつつ見やすいテーブル シンプルに見やすいテーブル JavaScript の入ったものも入ってきますが色々なテーブルを見てストックしておくと後に役立ちそうです。 関連エントリ CSSでデザインしたクールなテーブルのサンプル集 CSSでデザインされたテーブルレスでクールなフォームサンプル
異なるサイズの画像を並べて瞬時にサイズを揃えられるjQueryプラグイン「MyThumbnail」:phpspot開発日誌
異なるサイズの画像を並べて瞬時にサイズを揃えられるjQueryプラグイン「MyThumbnail」 2011年06月27日- Official Demo page for MyThumbnail jquery plugin 異なるサイズの画像を並べて瞬時にサイズを揃えられるjQueryプラグイン「MyThumbnail」。 画像は普通に並べると高さやサイズも一定ではなくかといってサイズしていで縮めちゃったとしても幅は一定になりません。 このプラグインを使えば指定のサイズにまるめてくれるだけでなく、トリミングもして画像が変な方向に伸縮しないようにも調整してくれます 次のような画像を並べただけの状態があったとして。 次のように、指定したサイズに調整した上でトリミングもしてくれます（角丸はCSSで指定してます）。 HTMLは次のようにかなり単純に<a>付きの<img>を並べただけです。 <div
フレッシュで高品質な写真加工Photoshopチュートリアル１９:phpspot開発日誌
19 Fresh and Quality Photo-Manipulation Tutorials in Photoshop | Artfans Design フレッシュで高品質な写真加工Photoshopチュートリアル１９ 次のようなかなりクオリティが高く新しめのPhotoshopチュートリアルが沢山。これらテクニックを学べば確実に表現力がアップしそうです。 反射的にPhotoshop起動しそうなぐらいにクオリティが高いです。 関連エントリ 3Dエフェクトを使った綺麗なグラフィックを作るPhotoshopチュートリアル集 動画で学べるPhotoshopチュートリアル２０ 光のエフェクトを与えたクールなイメージ作成Photoshopチュートリアル２５ 広告デザインのためのPhotoshopチュートリアル１５
ECサイトで使えそうな画像のレンズズームを超簡単に実装できるjQueryプラグイン「Lens Zoom」:phpspot開発日誌
ECサイトで使えそうな画像のレンズズームを超簡単に実装できるjQueryプラグイン「Lens Zoom」 2011年06月23日- A jQuery plug-in for Lens Effect Image Zooming ECサイトで使えそうな画像のレンズズームを超簡単に実装できるjQueryプラグイン「Lens Zoom」。 次のように、画像の特定部分の円形のみをズームするようなUIが簡単に作れちゃいます。 ECサイトなどで商品を拡大するように実装されていたらお客さんに喜んでもらえるかも。 レンズの大きさもピクセル指定で自由自在です。 白黒写真がレンズを入れることでカラーになるみたいな効果も。 レンズの色やサイズも選べます。 実装の容易さも素晴らしくて、.imageLensで初期化するだけです。 関連エントリ タイマーを作る際に便利なjQueryプラグイン「jQuery Timer」
これで木や草をイメージに入れたい場合は困らなそうなPhotoshopブラシのまとめ:phpspot開発日誌
これで木や草をイメージに入れたい場合は困らなそうなPhotoshopブラシのまとめ。 次のような、実に様々な木や草のPhotoshop用ブラシが３６セットも紹介されているエントリのご紹介。 リンク先は以下のエントリより参照してください。 36 Free Photoshop Tree Brushes - Geek Sucks サイトの背景パターンなんかにしてもよいですね。 どういう時に使うかなぁ、という方も、知っておけばいつかは使えそうなブラシセットになってます。 関連エントリ これは絶対覚えておいた方がよいシルエットの素材集 Photoshop用アニメの髪のブラシセット 木、葉っぱ、雲、水など自然に関するPhotoshopブラシセット
Androidアプリ等に使えそうなPhotoshopのシェイプ形式41アイコンセット:phpspot開発日誌
Android Icons ? Shape Package Androidアプリ等に使えそうなPhotoshopのシェイプ形式41アイコンセット 次のようなアイコンセットが公開されていて、形式がPhotoshopのシェイプということで、拡大縮小しても品質は下がらず、シェイプということで扱いやすくなっています。 サイコロとかの変わり種も入ってますが、基本的に汎用に使えそうなアイコンセットですね。 スマートフォン用のアイコンまとめということで以下のエントリも参考にしてみて下さい。 iPhone・Androidアプリ等に使えるアイコンセット総まとめ：2010 Photoshopシェイプ関連エントリ デザインを楽にしてくれるPhotoshop用カスタムシェイプ色々 PhotoShopのアクションやシェイプなどリソース一杯「Ladyoak.com」 サイトのちょっとした修飾に使えるPhotoshop
Webのテキストをもっと分かりやすく出来そうなラベル作成用jQueryプラグイン「jQLabel」。:phpspot開発日誌
Webのテキストをもっと分かりやすく出来そうなラベル作成用jQueryプラグイン「jQLabel」。 2011年03月09日- jQLabel jQuery Plugin - Create Beautiful Labels Webのテキストをもっと分かりやすく出来そうなラベル作成用jQueryプラグイン「jQLabel」。 文字列を<span class="label">好きな文字</span>として囲えば次のように文字修飾できます。 ワードごとに色分けしてテキストを分かりやすくすることができそうです。 コードは次のように書きます。ワードと、その色を連想配列で定義してあげる感じです。 $(".label").jQLabel({"pointer":true, "labels":{ "awesome":"#FF9E00", "gmail":"#A65D03", "labels":"#A4977
超クールなスモークのPhotoshopブラシ３３:phpspot開発日誌
33 Sets of Free Smoke Photoshop Brushes 超クールなスモークのPhotoshopブラシ３３。 スモークというと自分では撮影がしにくかったりするものですが、ブラシを使って簡単に描画できますね。 実に様々なブラシはバックグラウンドやテクスチャとして利用できそうです。 インパクトのある画像作成に役立てられそうですね。 関連エントリ ハイクオリティなPhotoshopブラシをダウンロードできるサイト色々まとめ 100以上のクールなPhotoShop用ブラシがダウンロードできる「getbrushes.com」 動物に関するPhotoshopブラシ色々 これは覚えておいたほうがいい！というPhotoshopのブラシ５０セット
CSSでリアルでクールなドロップシャドウ効果を描画するサンプル例色々:phpspot開発日誌
CSS drop-shadows without images ? Nicolas Gallagher CSSでリアルでクールなドロップシャドウ効果を描画するサンプル例が色々公開されています。 一昔前なら、どう考えても画像を使っていると思ってしまうこうしたグラフィックもCSSで実現できてしまいます。 パターンも多くて実用的です。ヘッダ、メニュー等、ありとあらゆる部分に応用できそう。 画像編集ツールは一切不要です。 例えば、1個の要素を見てみましょう。 HTML では <div> にclassをふって中身は<p>のみだけというのに、これだけのデザインが実現します。 当然、要素を回転させることも出来ますが綺麗に描画できています。 なんとも夢のような話ですが、CSS3対応の Firefox 3.5+, Chrome 5+, Safari 5+, Opera 10.6+, IE 9+ という大体の
オンライン上で簡単にAndroidアプリが作れる「WPAndroid」:phpspot開発日誌
WPAndroid.com | Free Web-Based Android App Creator オンライン上で簡単にAndroidアプリが作れる「WPAndroid」。 ログインして、WYSIWYGなエディタに内容を書きこんでいくだけでAndroidアプリケーションが作れます。 アプリ編集画面。アプリ名と内容を入れていって「Create Your App」ボタンを押せば完了。 アプリケーション一覧から「Download App」をクリックすれば、Android用の .apk ファイルがダウンロード出来ます。 今のところ4ページしか作れませんが、お手軽にHTMLベースで作れるので便利ですね。 関連エントリ iPhone・Androidアプリ等に使えるアイコンセット総まとめ：2010 iPhoneやAndroid等クロスプラットフォーム上で動くスマートフォンアプリを作る仕組み色々 iPh
フレッシュな50のPhotoshopテキストエフェクトチュートリアル集:phpspot開発日誌
50 Best Photoshop Text Effect Tutorials | CreativeFan フレッシュな50のPhotoshopテキストエフェクトチュートリアル集。 新しめなテキストエフェクト作成用チュートリアルが沢山で参考になります。 次のようなかなり壮大なものから汎用的に使えるものまで揃っています。 これは覚えておくとよさそうですね。 関連エントリ 最近公開されたNewなPhotoshopロゴデザイン70のチュートリアル集 あの有名プロダクトのロゴを作るPhotoshopチュートリアルいろいろ クールなネオン風ロゴを作成するPhotoshopビデオチュートリアル クールな惑星っぽいテキストロゴ作成Photoshopチュートリアル
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
音楽関連のサービスを作る際に使えそうなフリーのPhotoshopブラシ３２:phpspot開発日誌