Web制作者はチェックしておきたい、デザインやアイデアが素晴らしいWebサイトのまとめ -2016年3月
Post on:2016年3月24日
sponsors
デザインの細部に至るまでの徹底的なこだわり、気持ちのいいインタラクションやアニメーション、次のプロジェクトのヒントになる素晴らしいアイデア満載のUIを備えたWebサイトを紹介します。
時間がある時にじっくりお楽しみください！
小林幹也氏のポートフォリオサイト。
氏のプロダクトが美しいのですが、その画像が大胆なレイアウトによって、更に魅力的に見えます。画面遷移やちょっとしたインタラクションに仕込まれたアニメーションも非常に気持ちよいデザインです。
タッチすることからはじまるサイト。そのローディングから既に一味違います！
Worksに使われているナビゲーションは面白いアイデアです。
音楽ストリーミングサービスのSpotifyのバレンタインコンテンツ。
背景のうねうねが自在に変化し、バレンタインのメッセージを作成していきます。
トップページから配下ページまで、動画をただ配置するだけでなく、うまくコンテンツとして利用されています。トップのインタラクションも面白く、配下の縦長ページでの静止画から動画の遷移もストレスなく楽しめます。
米テキサス州オースティンの飲料水屋さんのサイト。
トップのデザインから既にこれは何だろうと思わせ、ほんのちょっとした動きで清潔感のあるかわいらしさを演出しています。
クリエイティブに役立つワンポイントアドバイスを集めたサイト。
スペースバーを押すと、メッセージが次々と表示され、色の組み合わせも変化します。
Webデザイナーではなく、紙デザイナーのポートフォリオ。
紙へのこだわりは見た目だけでなく、インタラクションも楽しませてくれます。
イギリスのデジタルスタジオのポートフォリオで、ドーナツ状の（レコード盤かな）エレメントを使い、シンプルにかっこよくコンテンツを魅せていきます。
G A L A X I A (音有り)
ソーシャルネットワーク用のスマホアプリのサイト。
宇宙をイメージしたデザインは、サウンドもインタラクションも壮大で、非常に美しく楽しめます。
アーティストをマネジメントしているプロポーション会社のサイトで、繊細な視差効果がいい感じです。各アーティストのコンテンツで下からスクロールさせるのも面白いですね。
空白スペースをたっぷり使った縦長ページで、注目は左にあるサイドバー。ロゴと各コンテンツのタイトルを表示し、ナビゲーション機能も備えています。
世界中のおいしい一皿を取り上げているサイトで、キャプチャは「塩かつお茶漬け」。生産者からレシピまで、美しいレイアウトで見ることができます。各セクションに「Read More」をつける発想はなかったです。
歯医者さんのサイトでいいんだよね、さすがフランス！
デザインもインタラクションも非常に洗練されており、先生たちもイケメン・美人さんばかりです。
モバイル用のオーディオ機器を販売しているサイトで、デスクトップでも楽しめますが、スマホやタブレットで見ることをオススメします。
Because Recollection. (音有り)
Because TVのプロモーションサイトで、音楽をインタラクティブに楽しめます。使い方は、スペースバーをホールド。Aboutの見せ方もかっこいいです。
ドキュメンタリー映画のキャンペーンサイトで、レイアウトやカラーも斬新ですが、左上Menuのキーイベントやフィルタといった機能面でも非常に充実しています。
スタートアップやデジタルプロジェクトをサポートするサイトで、レイアウトはただの中央分割に見えますが、スクロールするとさまざまなアニメーションでコンテンツを楽しみながら見ることができます。
日本のWeb制作会社のサイト。ポップなイラスト、斜めのストライプとアニメーションが気持ちよく、左のナビゲーションやコンテンツの要素などに仕込まれたマイクロインタラクションも非常に気持ちいい動きをします。
日本のプロモーション会社で、爽やかなグリーンをベースにしたカラースキームと面白いグラフィックが印象に残るサイトです。四隅の矩形ボタンがなかなか使いやすいです。
Act of Love (音有り)
サガミオリジナルのプロモーション、究極の愛のかたちである、どうぶつの求愛行動をまとめた図鑑サイト。ピクトグラム化された動物のデザインもかわいいです。
sponsors
