Webデザインのすごいアイデアや細かいこだわりがいっぱい！素晴らしいUXを堪能できるサイトのまとめ
Post on:2015年6月12日
sponsors
デザインの細かいこだわりがすごい！ こんな面白いアイデアはどこから生まれるんだろう？ CSSやSVGでこんなこともできるのか！ 次のプロジェクトのヒントになるような素晴らしいUXを堪能できるWebサイトを紹介します。
時間のある時に、じっくりお楽しみください！
In Pieces (音有り)
CSSの進化がやばいです。CSS Clip Pathsを使ったインタラクティブな博物館です。
解説記事：The Making Of “In Pieces”
カラースキームにホワイトを使った非常に美しいデザインです。ホワイトを使ってると言っても単に背景が白ということではありません。優雅なアニメーションやソリッドなエフェクトが引き立てています。
このサイトの全てを楽しむには、デスクトップとモバイルで同時にアクセスする必要があります。こういうこともできるんですね。
4等分、四角、四面にこだわったデザイン、アニメーションがかっこいいです。配下ページの4分割のグリッドを活かしたレイアウトも遊び心が満載。
American Genius (音有り)
Steve JobsとBill Gates、アメリカから生まれた天才二人のこれまでの功績をまとめたインタラクティブなインフォグラフィックサイト。
Uberのブランドガイド。こんなにかっこいいガイドラインサイトは初めて見ました。
DreamTeam Katarzyna Konkowska (音有り)
Canvasで描かれた美しいアニメーションの背景が目を引きますが、各エレメントの動きや遷移に伴う動きが非常に快適で、操作性にも優れています。
4面、2面、回転、横スクロールを使った面白いサイトで、プロダクトだけでなくマップ・ニュース・コンタクトなどにも面白いインタラクションが仕込まれています。
トップページは一見、普通に見えます。リスト状に並んでいるコンテンツも普通です。面白い仕掛けは、左上のロゴをクリックしてみてください。
ブラックとホワイトをベースにしたデザインはかっこよく、立体を上下左右、そして斜めにアニメーションさせるのは非常に印象に残ります。
トップのロゴだけで楽しいですが、タイポグラフィ主体のコンテンツの見せ方が日本ではないかっこいいデザインです。
このサイトのタイポグラフィもなかなかです。monospace系のフォント使いがかわいいです。また、縦長スクロールでコンテンツごとに異なる背景色を使うのはよく見ますが、このサイトではすこし違ったテクニックを使用しています。
フランスの歯医者さんのサイト。めちゃくちゃおしゃれです。
Fornasetti (音有り)
定規や鉛筆やコンパスを使ったインタラクションがかわいく、配下ページのhistroyは大作コンテンツとなっています。
カラフルな落ち着いたパステルがかわいいデザインで、各コンテンツごとに気持ちいいアニメーションを使用しています。
デザイナーユニットのポートフォリオ。シンプルなデザインながら細部までかなりこだわりを感じます。
ページ上にランダムに表示されるエレメント、なかなか面白いですね。
SVGのかわいいグラフィックをふんだんに使ったサイトで、操作も軽快で、各デバイスごとの表示にもさまざまな工夫が取り入れられています。パネルの形状も3つ角丸1つ矩形というシンプルなテクニックですが、矩形の位置を変えるだけで面白いデザインになっています。
アイウェアブランド「マサヒロマルヤマ」のサイト。メガネをかけている姿を360度から見ることができるという利便性だけでなく、プロダクトのスライダーの細かくて丁寧な演出など見所がたくさんです。
イラストとSVGをメインにしたデザインはすっきりしており、アローをホバーするとすっ飛んでいったり、What We Doにある羅針盤など、気持ちいいインタラクションが満載です。
Kurokaaw Wonderland (音有り)
黒川温泉の世界プロジェクト用のサイトで、パノラマの美しい写真や映像が心地よいBGMとともに楽しめます。制作はLetters, Inc.
ページ全体、コンテンツ、エレメントを上下左右にスライドさせるインタラクションが非常に面白いです。こんなのもスライドするのか！とスライドの達人になれます。
インパクトのあるトップの画像、特大サイズの見出し、ブラックとオレンジ、非常に力強い魅力的なデザインのサイトです。
センスのよい動画（↑）と画像がかっこいい横スクロールのサイト。注目はそのナビゲーション、まるで動画を見ているかのように横スクロールコンテンツをナビゲートできます。
窓の形状がどんどん変化し、マウスに反応して中の様子が動くのは面白いですね。
株式会社 闇 (音有り)
株式会社 闇のホラーテクノロジー 縦長スクロールサイト。心臓が弱い方や怖いのが苦手な方は絶対見ないでください。
sponsors
