Webデザインのセンスを磨く!2014年上半期洗練されたディテールのUIデザインのまとめ
Post on:2014年7月3日
2014年上半期、チェックしておきたいUIデザインをDribbbleから紹介します。
各アートワークは大きいサイズの画像やPSDをダウンロードできるので、気になったものはリンク先をチェックしてみてください。
アートワークにはアニメーションgifも多いのですが、ページサイズが大変なことになるため最初の一つだけです、アニメーションはリンク先で。
![サイトのキャプチャ](/wp-content/uploads-201403/2014070301-01.gif)
リフレッシュ時はプリローダーのくるくるっとしたアニメーションが多いですが、こーゆう遊び心のあるのもいいですね。
![サイトのキャプチャ](/wp-content/uploads-201403/2014070301-05.png)
3つのパネルがジェスチャーに対してそれぞれ別々のアニメーションをします。めちゃ気持ちいい!
![サイトのキャプチャ](/wp-content/uploads-201403/2014070301-02.png)
気持ちのいいアニメーションでメニューが表示します。
![サイトのキャプチャ](/wp-content/uploads-201403/2014070301-03.png)
予約テーブルのコンセプトデザイン、デザインにあったフォントの使い方が素敵です。
![サイトのキャプチャ](/wp-content/uploads-201403/2014070301-04.png)
サイドバーがはじけるようなアニメーションで気持ちよく表示されます。
![サイトのキャプチャ](/wp-content/uploads-201403/2014070301-06.png)
クリーンでシンプルなUI、美しいですね。
![サイトのキャプチャ](/wp-content/uploads-201403/2014070301-07.png)
ソーシャルサービスのFeedを表示したレイアウト、背景のグラデーションがいい演出。
![サイトのキャプチャ](/wp-content/uploads-201402/2014063010-01.png)
OS Xをリデザインしたビジュアルコンセプト、アクティブではないウインドウにブラーの効果を与えています。
![サイトのキャプチャ](/wp-content/uploads-201402/2014063010-02.png)
画像の使い方、カラースキーム、アイコン、レイアウトと非常に美しくデザインされています。
![サイトのキャプチャ](/wp-content/uploads-201402/2014063010-03.png)
ヘキサゴンを使ったかわいいエレメント。
![サイトのキャプチャ](/wp-content/uploads-201402/2014063010-04.png)
写真や動画をサムネイルで表示したシンプルなUI。
![サイトのキャプチャ](/wp-content/uploads-201402/2014063010-05.png)
ソリッドなラインを使ったボタンやプルダウンが最近増えてきました。
![サイトのキャプチャ](/wp-content/uploads-201402/2014063010-07.png)
ブラーな背景と半透明のパネルの組み合わせは、これからどんどん増えそうです。
![サイトのキャプチャ](/wp-content/uploads-201402/2014063010-08.png)
半透明ではなく、同系色のパネルもいい感じです。
![サイトのキャプチャ](/wp-content/uploads-201402/2014063010-09.png)
1ページで構成された縦長ページのさまざまなコンポーネントが含まれています。
![サイトのキャプチャ](/wp-content/uploads-201402/2014063010-10.png)
縦長ページのコンセプトで非常に美しくデザインされています。リンク先では全コンテンツのファイルがダウンロードできます。
![サイトのキャプチャ](/wp-content/uploads-201402/2014063010-11.png)
折り畳みやバウンドなど、操作して気持ちいいアニメーションをたくさん備えています。
![サイトのキャプチャ](/wp-content/uploads-201402/2014063010-12.png)
エレメントごとに半透明の濃度を変えた美しいパネル。
![サイトのキャプチャ](/wp-content/uploads-201402/2014063010-13.png)
こんなステキなデバイスが近い将来、現実になるかもしれませんね。
![サイトのキャプチャ](/wp-content/uploads-201402/2014063010-14.png)
フラット、ブラー、ソリッド、サークルの組み合わせは、やっぱりいいですね。
![サイトのキャプチャ](/wp-content/uploads-201402/2014063010-15.png)
Android L Gmail User Interface
先日アナウンスされたばかりのAndroid LのGmailのコンセプトデザイン。
![サイトのキャプチャ](/wp-content/uploads-201402/2014063010-16.png)
スクリーン全体をナビゲーションにして、コンテンツを表示します。
![サイトのキャプチャ](/wp-content/uploads-201402/2014063010-17.png)
iOS7用のタイマーのデザイン、パステルのグラデーションが美しい。
![サイトのキャプチャ](/wp-content/uploads-201402/2014063010-22.png)
パステルを使ったカラースキームとソリッドなアイコンが洗練されています。
![サイトのキャプチャ](/wp-content/uploads-201402/2014063010-24.png)
ソリッドなグラフとグラデーションの組み合わせがマッチしています。
![サイトのキャプチャ](/wp-content/uploads-201402/2014063010-25.png)
白に白って難しいと思うのですが、これは非常に美しく分かりやすいですね。
![サイトのキャプチャ](/wp-content/uploads-201402/2014063010-26.png)
日本でも最近こういったイラストを使ったサイトが増えてきました。
![サイトのキャプチャ](/wp-content/uploads-201402/2014063010-28.png)
非常に大胆な色使いが、印象的です。
![サイトのキャプチャ](/wp-content/uploads-201402/2014063010-30.png)
iPad Magazine Table of Contents
iPadに最適化された雑誌風コンテンツの見せ方、背景と透明パネルがパララックスになっており、めくる動作が非常に気持ちいいです。リンク先のアニメーションをチェックしてください。
![サイトのキャプチャ](/wp-content/uploads-201402/2014063010-32.png)
ブラックとホワイトをベースに、アクセントのオレンジが映えます。
![サイトのキャプチャ](/wp-content/uploads-201402/2014063010-33.png)
幾何学的なパターンを淡い配色で使うのも面白いですね。
![サイトのキャプチャ](/wp-content/uploads-201402/2014063010-34.png)
Stats screen of a online football
サッカーの試合の状況を表示するコンセプトデザイン。
![サイトのキャプチャ](/wp-content/uploads-201402/2014063010-36.png)
telemarketing365 Landing Page design
ブルーグリーンの使い方が非常に効果的です。
![サイトのキャプチャ](/wp-content/uploads-201402/2014063010-38.png)
細部まで丁寧にかわいくデザインされたエレメントはセンスが光ります。
![サイトのキャプチャ](/wp-content/uploads-201402/2014063010-39.png)
ランディングページとそのワイヤーフレームのセット。
![サイトのキャプチャ](/wp-content/uploads-201402/2014063010-41.png)
Footprints Final User Interface
OS X用アプリのUI、少ない色数で美しくデザインされています。
![サイトのキャプチャ](/wp-content/uploads-201402/2014063010-42.png)
写真画像にさまざまなカラーをオーバーレイさせるのも面白いですね。
![サイトのキャプチャ](/wp-content/uploads-201402/2014063010-43.png)
斜めのラインを効果的に使ったアニメーションが面白いです。
![サイトのキャプチャ](/wp-content/uploads-201402/2014063010-44.png)
ブラックとブルーの半透明、かっこいいですね。
![サイトのキャプチャ](/wp-content/uploads-201402/2014063010-45.png)
パネル型のレイアウトもちょっと手を加えるだけで、面白く仕上がります。
![サイトのキャプチャ](/wp-content/uploads-201402/2014063010-46.png)
きらっと光るのも最近見かけるようになりました。
![サイトのキャプチャ](/wp-content/uploads-201402/2014063010-48.png)
大胆なレイアウトが非常に魅力的です。
![サイトのキャプチャ](/wp-content/uploads-201402/2014063010-50.png)
スマフォ用ランディングページ、デザインもかっこいいですが見せ方もかっこいいです。
![サイトのキャプチャ](/wp-content/uploads-201402/2014063010-51.png)
カード、フラット、パステル、ソリッドなど、トレンドを更に進化させた使い方がすごいですね。
![サイトのキャプチャ](/wp-content/uploads-201402/2014063010-53.png)
Yosemite風のスタイルを取り入れたレイアウト。
![サイトのキャプチャ](/wp-content/uploads-201402/2014063010-54.png)
写真とタイポグラフィが非常にマッチした素敵なデザインです。
![サイトのキャプチャ](/wp-content/uploads-201402/2014063010-55.png)
ブルーとホワイト、半透明の組み合わせは清潔で信頼感を与えます。
![サイトのキャプチャ](/wp-content/uploads-201402/2014063010-56.png)
サークルとソリッドのエレメントがデザインにアクセントを与えています。
![サイトのキャプチャ](/wp-content/uploads-201402/2014063010-57.png)
シンプルなアイコンとUIが、コンテンツの写真を引き立てています。
![サイトのキャプチャ](/wp-content/uploads-201402/2014063010-58.png)
サークルのエレメントの使い方が絶妙です。
![サイトのキャプチャ](/wp-content/uploads-201402/2014063010-59.png)
Apple Storeをリデザインしたコンセプト、Yosemiteがリリースされるこの秋にサイトのデザインも変わるかな。
sponsors