ウェブ制作者がチェックしておきたいアイデア満載のUIを備えたウェブデザインのまとめ -2014年上半期
Post on:2014年6月13日
うまくトレンドを取り入れ、デザインの細部まで徹底的にこだわり、気持ちのいいインタラクションとアイデア満載のUIを備えた素晴らしいウェブサイトを紹介します。
画像の一部だけ動くシネマグラフを使ったコンテンツ、ペルソナを使ったユーザー中心のレイアウトなど、最新のトレンド情報もお見逃しなく!
![サイトのキャプチャ](/wp-content/uploads-201402/2014061301-01.png)
シンプルですっきりしたデザインだけでも素敵ですが、ロゴ、ナビゲーションやサムネイルやコンテンツなどの随所に仕掛けたインタラクションの芸が非常に細かく、楽しませてくれます。
![サイトのキャプチャ](/wp-content/uploads-201402/2014061301-02.png)
ポーランドの代理店のサイト、動画と縦長スクロールコンテンツをうまく融合されています。また、サムネイルの見せ方がうまい。
![サイトのキャプチャ](/wp-content/uploads-201402/2014061301-03.png)
ファッション関係のオンラインショップ、画像の一部だけがアニメーションするシネマグラフのモデルさんからファッションアイテムを購入できます。シネマグラフをこういう風に使ってるの初めて見ました。
![サイトのキャプチャ](/wp-content/uploads-201402/2014061301-12.png)
メルセデスベンツのキャンペーンサイト、縦長のスクロールページに動画やシネマグラフを使いブランドを見せています。映画の1シーンを見ているようです。
![サイトのキャプチャ](/wp-content/uploads-201402/2014061301-04.png)
食料廃棄の現状を伝えるコンテンツ、さまざまなインフォグラフィックをスクロールエフェクトで見せていきます。どのデザインもかわいく、細部までしっかり作られています。
![サイトのキャプチャ](/wp-content/uploads-201402/2014061301-19.png)
パステルカラーがかわいいカード状のレイアウトで、各カードのホバー時のエフェクトが気持ちよく、イラストのキャラもちょこちょこ動きます。カードから動画コンテンツに遷移するのもまた気持ちいいです。
![サイトのキャプチャ](/wp-content/uploads-201402/2014061301-05.png)
Squarespaceのストーリーコンテンツ、最近のトレンドとしてもよく見かける複数のツールを配置しています。ペルソナを使ったユーザー中心のデザインですね。
水平に8つのコンテンツがあり、しばらく表示していると動くのも面白い演出です。
![サイトのキャプチャ](/wp-content/uploads-201402/2014061301-06.png)
イギリスの自転車屋さんのサイト、かっこええ!
これも複数のツールをかっこよく配置しています、信頼感や安心感が伝わりますね。
![サイトのキャプチャ](/wp-content/uploads-201402/2014061301-07.png)
オランダのウェブ制作会社のサイト、随所にさまざまなインタラクションを備えており、見慣れたフラットなスタイルも非常に刺激なデザインに見えます。プロジェクトを見せる際もアロー、サムネイル、スクロール、キーボード操作とどれもが一体化されているのが気持ちいいです。
![サイトのキャプチャ](/wp-content/uploads-201402/2014061301-08.png)
ボストンの制作会社「36creativeが作成したサイト、カードを使ったレイアウトにパララックスで不思議な浮遊感を演出しています。非常にシンプルなデザインがかっこいいですね。
![サイトのキャプチャ](/wp-content/uploads-201402/2014061301-10.png)
ノルウェーのUIデザイナーのポートフォリオ、キャプチャだとカードを使ったシンプルなデザインだけのように見えますが、このカードは3Dでぐりぐり動き、次のカードに変わるというより作られる時もちょっと面白いアニメーションになっています。補足情報が三段階で表示され、それがまたかっこいい。
![サイトのキャプチャ](/wp-content/uploads-201402/2014061301-11.png)
フランスのフロントエンド開発者のポートフォリオ、背景にうすく見えているのは自分を象徴するツールでしょうか。各プロジェクトの紹介は映画のワンシーンを見ているようで美しいです。
![サイトのキャプチャ](/wp-content/uploads-201402/2014061301-15.png)
ヨーロッパを中心に活動しているクリエイターのポートフォリオ、スクロールコンテンツにさまざまな繊細なエフェクトやアニメーションを取り入れたデザインがきれいにまとまっています。
![サイトのキャプチャ](/wp-content/uploads-201402/2014061301-16.png)
アメリカのアートディレクターのポートフォリオ、英語ながら縦書きを使ったちょっと面白いデザインで、サムネイルのキョロちゃんがかわいいですw
![サイトのキャプチャ](/wp-content/uploads-201402/2014061301-17.png)
1979年を振り返るコンテンツ(かな)、コンテンツの見せ方が非常に美しいです。特にhistoryのテキストのデザインはこんなこともできるんだ、という感じです。
![サイトのキャプチャ](/wp-content/uploads-201402/2014061301-18.png)
キャプチャは間違ってフォルダにアクセスしたものではありません、オーストラリアのデザイナーのポートフォリオで、アコーディオンと横スクロールを使ってさまざまなコンテンツを表示します。
![サイトのキャプチャ](/wp-content/uploads-201402/2014061301-20.png)
日本のWebエンジニアのポートフォリオ、スクロールするとさまざまな演出で楽しませてくれます。
![サイトのキャプチャ](/wp-content/uploads-201402/2014061301-09.png)
最後はインタラクティブコンテンツ、キーボードを叩くとそれに合わせてさまざまなサウンド、アニメーションが流れます。iPadだと画面全体のタップ操作に対応しているので、もっと気持ちいいです。
sponsors