Web制作者はチェックしておきたい、デザインやアイデアが素晴らしいWebサイトのまとめ -2016年3月

デザインの細部に至るまでの徹底的なこだわり、気持ちのいいインタラクションやアニメーション、次のプロジェクトのヒントになる素晴らしいアイデア満載のUIを備えたWebサイトを紹介します。

時間がある時にじっくりお楽しみください!

サイトのキャプチャ

Mikiya Kobayashi

小林幹也氏のポートフォリオサイト。
氏のプロダクトが美しいのですが、その画像が大胆なレイアウトによって、更に魅力的に見えます。画面遷移やちょっとしたインタラクションに仕込まれたアニメーションも非常に気持ちよいデザインです。

サイトのキャプチャ

FirstTouch, Inc.

タッチすることからはじまるサイト。そのローディングから既に一味違います!
Worksに使われているナビゲーションは面白いアイデアです。

サイトのキャプチャ

Love Notes

音楽ストリーミングサービスのSpotifyのバレンタインコンテンツ。
背景のうねうねが自在に変化し、バレンタインのメッセージを作成していきます。

サイトのキャプチャ

Active Theory

トップページから配下ページまで、動画をただ配置するだけでなく、うまくコンテンツとして利用されています。トップのインタラクションも面白く、配下の縦長ページでの静止画から動画の遷移もストレスなく楽しめます。

サイトのキャプチャ

Sway Water

米テキサス州オースティンの飲料水屋さんのサイト。
トップのデザインから既にこれは何だろうと思わせ、ほんのちょっとした動きで清潔感のあるかわいらしさを演出しています。

サイトのキャプチャ

Designer's Block

クリエイティブに役立つワンポイントアドバイスを集めたサイト。
スペースバーを押すと、メッセージが次々と表示され、色の組み合わせも変化します。

サイトのキャプチャ

Somerset

Webデザイナーではなく、紙デザイナーのポートフォリオ。
紙へのこだわりは見た目だけでなく、インタラクションも楽しませてくれます。

サイトのキャプチャ

Rotate°

イギリスのデジタルスタジオのポートフォリオで、ドーナツ状の(レコード盤かな)エレメントを使い、シンプルにかっこよくコンテンツを魅せていきます。

サイトのキャプチャ

G A L A X I A (音有り)

ソーシャルネットワーク用のスマホアプリのサイト。
宇宙をイメージしたデザインは、サウンドもインタラクションも壮大で、非常に美しく楽しめます。

サイトのキャプチャ

Oxtral

アーティストをマネジメントしているプロポーション会社のサイトで、繊細な視差効果がいい感じです。各アーティストのコンテンツで下からスクロールさせるのも面白いですね。

サイトのキャプチャ

Spring/Summer

空白スペースをたっぷり使った縦長ページで、注目は左にあるサイドバー。ロゴと各コンテンツのタイトルを表示し、ナビゲーション機能も備えています。

サイトのキャプチャ

12 Dishes

世界中のおいしい一皿を取り上げているサイトで、キャプチャは「塩かつお茶漬け」。生産者からレシピまで、美しいレイアウトで見ることができます。各セクションに「Read More」をつける発想はなかったです。

サイトのキャプチャ

L'Avenir

歯医者さんのサイトでいいんだよね、さすがフランス!
デザインもインタラクションも非常に洗練されており、先生たちもイケメン・美人さんばかりです。

サイトのキャプチャ

NudeAudio

モバイル用のオーディオ機器を販売しているサイトで、デスクトップでも楽しめますが、スマホやタブレットで見ることをオススメします。

サイトのキャプチャ

Because Recollection. (音有り)

Because TVのプロモーションサイトで、音楽をインタラクティブに楽しめます。使い方は、スペースバーをホールド。Aboutの見せ方もかっこいいです。

サイトのキャプチャ

The Forecaster

ドキュメンタリー映画のキャンペーンサイトで、レイアウトやカラーも斬新ですが、左上Menuのキーイベントやフィルタといった機能面でも非常に充実しています。

サイトのキャプチャ

Public 90

スタートアップやデジタルプロジェクトをサポートするサイトで、レイアウトはただの中央分割に見えますが、スクロールするとさまざまなアニメーションでコンテンツを楽しみながら見ることができます。

サイトのキャプチャ

TryMore Inc

日本のWeb制作会社のサイト。ポップなイラスト、斜めのストライプとアニメーションが気持ちよく、左のナビゲーションやコンテンツの要素などに仕込まれたマイクロインタラクションも非常に気持ちいい動きをします。

サイトのキャプチャ

株式会社 ユニメディア

日本のプロモーション会社で、爽やかなグリーンをベースにしたカラースキームと面白いグラフィックが印象に残るサイトです。四隅の矩形ボタンがなかなか使いやすいです。

サイトのキャプチャ

Act of Love (音有り)

サガミオリジナルのプロモーション、究極の愛のかたちである、どうぶつの求愛行動をまとめた図鑑サイト。ピクトグラム化された動物のデザインもかわいいです。

top of page

©2016 coliss
o