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