Webデザインの引き出しを増そう!細部までこだわったUIデザインが参考になるDribbbleアートワークのまとめ

Webデザインのセンスを磨くには、いいものをたくさん見て引き出しを増やすこと。
最近公開されたUIデザインのアートワークをDribbbleから紹介します。

人気が高いのは、写真をより魅力的に見えるようにレイアウトすること、またアニメーションを使ったユーザーを楽しませるインタラクションも面白いものばかりです。
各アートワークは大きいサイズの画像やPSDをダウンロードできるので、気になったものはリンク先をチェックしてみてください。

デザインのキャプチャ

Potato landing page

ジャガイモを使ったランディングページのスタディ。芋をプロダクトやサービスに例え、さまざまなコンテンツとしてデザインをしています。
全デザイン:full version

デザインのキャプチャ

Smart Rope

スタディの題材に「縄跳び」を選択、それをいかに魅力的に見せるかデザインしたランディングページ。
全デザイン:full version

デザインのキャプチャ

Into The Rift

背景に大きな写真画像を使った、全画面タイプのナビゲーション。更にスタディを重ねたバージョンもあります。どう手を加えるか考えてみてください。
次のバージョン:Vista Del Mar

デザインのキャプチャ

Walls

ブラウザいっぱいに表示されるコンテナを一枚の壁に例えてレイアウト。ウォール状のレイアウトは見かけますが、それらとは異なり、これは文字通り壁面に要素を配置したデザイン。
全デザイン:full version

デザインのキャプチャ

Bank Transfer Deck

ナビゲーションと半透明のコンテンツから構成されたタブレット用デザイン。コンテンツによってはこういった全面半透明はアリですね。
全デザイン:full version

デザインのキャプチャ

Food Delivery Website

フードデリバリーのランディングページで、食べ物の写真とテキストに邪魔することなく見出しとアイコンがうまく配置されています。
全デザイン:full version

デザインのキャプチャ

Food Delivery App Design

上記のスマホ時のレイアウト。

デザインのキャプチャ

BYND X MDLS Full

ブラックとホワイトと「X」が印象的なデザイン、下部のちょっとずらしたグリッドにタイポグラフィを重ねるのかっこいいですね。
全デザイン:full version

デザインのキャプチャ

Faicco's Italian Restaurant(アニメ)

イタリアン レストランのランディングページ。おいしそうな料理や食材をスクロールエフェクトやアニメーションで美しく、そして楽しく見せています。
全デザイン:full version

デザインのキャプチャ

90° The Last Appventure(アニメ)

休暇でアラスカに行った際、マッキンリー山脈の雄大さにうけた感動をデザインに起こしたページデザイン。
全デザイン:full version

デザインのキャプチャ

Product page interaction for GSM Nation(アニメ)

プロダクトのディテールを紹介するページデザイン。斬新に配置されたレイアウトは、気持ちいいアニメーションで表示されます。
全デザイン:full version

デザインのキャプチャ

Product Features

イラストとSVGを使ったプロダクトの機能紹介ページ。こんな感じでアニメーションするかなと思うとワクワクします。
全デザイン:full version

デザインのキャプチャ

Protectwise Home

ブルーとホワイト、そしてグレーを使った美しいレイアウトのページデザイン。ホワイトスペースを効果的に使い、非常に上品なデザインになっています。
全デザイン:full version

デザインのキャプチャ

UENO We'sre Hiring

コンテンツごとに異なるカラーを使った縦長ページのレイアウト。
全デザイン:full version

デザインのキャプチャ

Economist landing page

レスポンシブ対応のさまざまなアニメーションを取り入れたランディングページ。動作は実際のサイトで試すことができます。
サイト:Economist

デザインのキャプチャ

gone.

写真が美しく見えるようレイアウトされたEコマースサイト用のデザイン。
全デザイン:full version

デザインのキャプチャ

Conference Calling Inner Pages

カンファレンス用の内部ページのレイアウトで、アクセントカラーのパープルがとても印象的です。
全デザイン:full version

デザインのキャプチャ

Online business card

オンラインの名刺をモチーフにデザインしたポートフォリオページ。ミニマルなデザインはレスポンシブでうまく機能しています。
サイト:Vnn

デザインのキャプチャ

Product Homepage

モバイルアプリのランディングページ。日本でもイラストを使ったデザインが少しずつ増えてきましたね。
全デザイン:full version

デザインのキャプチャ

Ambiance Models Home Page

モノクロのショット使い、ブラック・ホワイト・グレーでデザインされたページデザイン。
全デザイン:full version

デザインのキャプチャ

Translucent Navigation

美しい半透明のヘッダをもったナビゲーションのデザイン。
全デザイン:full version

デザインのキャプチャ

Nav Icons

ナビゲーションアイコンのホバー時の表現方法。

デザインのキャプチャ

Anchor Menu

スマホでも機能するページ内アンカー用のナビゲーションデザイン。

デザインのキャプチャ

Open Closed Navigation

省スペース用にナビゲーションを開いた時と閉じた時のデザイン。

デザインのキャプチャ

Unusual Menu Concept(アニメ)

アニメーションが楽しいちょっと新しいタイプのタブ型ナビゲーション。

デザインのキャプチャ

Social App Navigation(アニメ)

コンテンツの切り換えを流れるようなスムーズな操作で切り換えるナビゲーションデザイン。

デザインのキャプチャ

Login Home Screen(アニメ)

ログイン時に弾けるような気持ちいいアニメーションで遷移するコンセプト。

デザインのキャプチャ

Add to cart interraction(アニメ)

気持ちいいアニメーションで、プロダクトをカートに入れます。分かりやすい!

デザインのキャプチャ

Handsome Site Team Page(アニメ)

ハンサムガイのページデザインで、サムネイルからの個別ページ、ネクストバックの流れが非常にスムーズにデザインされています。

デザインのキャプチャ

Uniquer Blog Site

Mediumにインスパイアされたブログデザイン。ナビゲーションやサイドバーなど、美しくデザインされています。
全デザイン:full version

sponsors

top of page

©2024 coliss