Webデザインの引き出しを増そう！細部までこだわったUIデザインが参考になるDribbbleアートワークのまとめ
Post on:2015年5月18日
sponsors
Webデザインのセンスを磨くには、いいものをたくさん見て引き出しを増やすこと。
最近公開されたUIデザインのアートワークをDribbbleから紹介します。
人気が高いのは、写真をより魅力的に見えるようにレイアウトすること、またアニメーションを使ったユーザーを楽しませるインタラクションも面白いものばかりです。
各アートワークは大きいサイズの画像やPSDをダウンロードできるので、気になったものはリンク先をチェックしてみてください。
ジャガイモを使ったランディングページのスタディ。芋をプロダクトやサービスに例え、さまざまなコンテンツとしてデザインをしています。
全デザイン：full version
スタディの題材に「縄跳び」を選択、それをいかに魅力的に見せるかデザインしたランディングページ。
全デザイン：full version
背景に大きな写真画像を使った、全画面タイプのナビゲーション。更にスタディを重ねたバージョンもあります。どう手を加えるか考えてみてください。
次のバージョン：Vista Del Mar
ブラウザいっぱいに表示されるコンテナを一枚の壁に例えてレイアウト。ウォール状のレイアウトは見かけますが、それらとは異なり、これは文字通り壁面に要素を配置したデザイン。
全デザイン：full version
ナビゲーションと半透明のコンテンツから構成されたタブレット用デザイン。コンテンツによってはこういった全面半透明はアリですね。
全デザイン：full version
フードデリバリーのランディングページで、食べ物の写真とテキストに邪魔することなく見出しとアイコンがうまく配置されています。
全デザイン：full version
上記のスマホ時のレイアウト。
ブラックとホワイトと「X」が印象的なデザイン、下部のちょっとずらしたグリッドにタイポグラフィを重ねるのかっこいいですね。
全デザイン：full version
Faicco's Italian Restaurant（アニメ）
イタリアン レストランのランディングページ。おいしそうな料理や食材をスクロールエフェクトやアニメーションで美しく、そして楽しく見せています。
全デザイン：full version
休暇でアラスカに行った際、マッキンリー山脈の雄大さにうけた感動をデザインに起こしたページデザイン。
全デザイン：full version
Product page interaction for GSM Nation（アニメ）
プロダクトのディテールを紹介するページデザイン。斬新に配置されたレイアウトは、気持ちいいアニメーションで表示されます。
全デザイン：full version
イラストとSVGを使ったプロダクトの機能紹介ページ。こんな感じでアニメーションするかなと思うとワクワクします。
全デザイン：full version
ブルーとホワイト、そしてグレーを使った美しいレイアウトのページデザイン。ホワイトスペースを効果的に使い、非常に上品なデザインになっています。
全デザイン：full version
コンテンツごとに異なるカラーを使った縦長ページのレイアウト。
全デザイン：full version
レスポンシブ対応のさまざまなアニメーションを取り入れたランディングページ。動作は実際のサイトで試すことができます。
サイト：Economist
写真が美しく見えるようレイアウトされたEコマースサイト用のデザイン。
全デザイン：full version
Conference Calling Inner Pages
カンファレンス用の内部ページのレイアウトで、アクセントカラーのパープルがとても印象的です。
全デザイン：full version
オンラインの名刺をモチーフにデザインしたポートフォリオページ。ミニマルなデザインはレスポンシブでうまく機能しています。
サイト：Vnn
モバイルアプリのランディングページ。日本でもイラストを使ったデザインが少しずつ増えてきましたね。
全デザイン：full version
モノクロのショット使い、ブラック・ホワイト・グレーでデザインされたページデザイン。
全デザイン：full version
美しい半透明のヘッダをもったナビゲーションのデザイン。
全デザイン：full version
ナビゲーションアイコンのホバー時の表現方法。
スマホでも機能するページ内アンカー用のナビゲーションデザイン。
省スペース用にナビゲーションを開いた時と閉じた時のデザイン。
Unusual Menu Concept（アニメ）
アニメーションが楽しいちょっと新しいタイプのタブ型ナビゲーション。
コンテンツの切り換えを流れるようなスムーズな操作で切り換えるナビゲーションデザイン。
Login Home Screen（アニメ）
ログイン時に弾けるような気持ちいいアニメーションで遷移するコンセプト。
気持ちいいアニメーションで、プロダクトをカートに入れます。分かりやすい！
ハンサムガイのページデザインで、サムネイルからの個別ページ、ネクストバックの流れが非常にスムーズにデザインされています。
Mediumにインスパイアされたブログデザイン。ナビゲーションやサイドバーなど、美しくデザインされています。
全デザイン：full version
sponsors
