ウェブ制作者がチェックしておきたいアイデア満載のUIを備えたウェブデザインのまとめ -2014年上半期

うまくトレンドを取り入れ、デザインの細部まで徹底的にこだわり、気持ちのいいインタラクションとアイデア満載のUIを備えた素晴らしいウェブサイトを紹介します。

画像の一部だけ動くシネマグラフを使ったコンテンツ、ペルソナを使ったユーザー中心のレイアウトなど、最新のトレンド情報もお見逃しなく!

サイトのキャプチャ

VOTD.tv

シンプルですっきりしたデザインだけでも素敵ですが、ロゴ、ナビゲーションやサムネイルやコンテンツなどの随所に仕掛けたインタラクションの芸が非常に細かく、楽しませてくれます。

サイトのキャプチャ

GREY GROUP

ポーランドの代理店のサイト、動画と縦長スクロールコンテンツをうまく融合されています。また、サムネイルの見せ方がうまい。

サイトのキャプチャ

STYLEPIT

ファッション関係のオンラインショップ、画像の一部だけがアニメーションするシネマグラフのモデルさんからファッションアイテムを購入できます。シネマグラフをこういう風に使ってるの初めて見ました。

サイトのキャプチャ

The new Mercedes-Benz GLA

メルセデスベンツのキャンペーンサイト、縦長のスクロールページに動画やシネマグラフを使いブランドを見せています。映画の1シーンを見ているようです。

サイトのキャプチャ

foodisforeating

食料廃棄の現状を伝えるコンテンツ、さまざまなインフォグラフィックをスクロールエフェクトで見せていきます。どのデザインもかわいく、細部までしっかり作られています。

サイトのキャプチャ

Imagina nas Ferias

パステルカラーがかわいいカード状のレイアウトで、各カードのホバー時のエフェクトが気持ちよく、イラストのキャラもちょこちょこ動きます。カードから動画コンテンツに遷移するのもまた気持ちいいです。

サイトのキャプチャ

Squarespace

Squarespaceのストーリーコンテンツ、最近のトレンドとしてもよく見かける複数のツールを配置しています。ペルソナを使ったユーザー中心のデザインですね。
水平に8つのコンテンツがあり、しばらく表示していると動くのも面白い演出です。

サイトのキャプチャ

Archie Wilkinson

イギリスの自転車屋さんのサイト、かっこええ!
これも複数のツールをかっこよく配置しています、信頼感や安心感が伝わりますね。

サイトのキャプチャ

Build in Amsterdam

オランダのウェブ制作会社のサイト、随所にさまざまなインタラクションを備えており、見慣れたフラットなスタイルも非常に刺激なデザインに見えます。プロジェクトを見せる際もアロー、サムネイル、スクロール、キーボード操作とどれもが一体化されているのが気持ちいいです。

サイトのキャプチャ

Siena

ボストンの制作会社「36creativeが作成したサイト、カードを使ったレイアウトにパララックスで不思議な浮遊感を演出しています。非常にシンプルなデザインがかっこいいですね。

サイトのキャプチャ

Zulu

ノルウェーのUIデザイナーのポートフォリオ、キャプチャだとカードを使ったシンプルなデザインだけのように見えますが、このカードは3Dでぐりぐり動き、次のカードに変わるというより作られる時もちょっと面白いアニメーションになっています。補足情報が三段階で表示され、それがまたかっこいい。

サイトのキャプチャ

NZK

フランスのフロントエンド開発者のポートフォリオ、背景にうすく見えているのは自分を象徴するツールでしょうか。各プロジェクトの紹介は映画のワンシーンを見ているようで美しいです。

サイトのキャプチャ

Benoit Challand

ヨーロッパを中心に活動しているクリエイターのポートフォリオ、スクロールコンテンツにさまざまな繊細なエフェクトやアニメーションを取り入れたデザインがきれいにまとまっています。

サイトのキャプチャ

soniarentsch

アメリカのアートディレクターのポートフォリオ、英語ながら縦書きを使ったちょっと面白いデザインで、サムネイルのキョロちゃんがかわいいですw

サイトのキャプチャ

1979

1979年を振り返るコンテンツ(かな)、コンテンツの見せ方が非常に美しいです。特にhistoryのテキストのデザインはこんなこともできるんだ、という感じです。

サイトのキャプチャ

Samuel Rivers

キャプチャは間違ってフォルダにアクセスしたものではありません、オーストラリアのデザイナーのポートフォリオで、アコーディオンと横スクロールを使ってさまざまなコンテンツを表示します。

サイトのキャプチャ

yoshiko-pg

日本のWebエンジニアのポートフォリオ、スクロールするとさまざまな演出で楽しませてくれます。

サイトのキャプチャ

Patatap

最後はインタラクティブコンテンツ、キーボードを叩くとそれに合わせてさまざまなサウンド、アニメーションが流れます。iPadだと画面全体のタップ操作に対応しているので、もっと気持ちいいです。

sponsors

top of page

©2018 coliss