神は細部に宿る、デザインの徹底的なこだわりがすごいクリエイターたちのポートフォリオサイトのまとめ
Post on:2017年3月30日
Webデザインのセンスを磨く方法の一つは、優れたデザインを数多く見ること。
デザインの細部に至るまでの徹底的なこだわり、気持ちのいいインタラクションやアニメーション、素晴らしいアイデア満載のUIを備えたWebサイトを紹介します。
時間がある時にじっくりお楽しみください!
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201702/2017033002-01.png)
Alex Motzenbecker
たくさんのパネルが3Dのアニメーションで気持ちよくコンテンツを生成します。メニューにある5つのコンテンツは、どれも異なるアニメーションです。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201702/2017033002-02.png)
Armand Biteau
2分割されたレイアウトをスクロールのタイミングをずらして効果的に見せています。スクロールというより、スライドさせるのは面白いアイデア。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201702/2017033002-03.png)
Alexandra Fomicheva
トップのインパクトがすごいですね! クジラも海も空もパララックスでうねうね動き、記憶に残ります。イラストやタイポグラフィなどの作品も刺激的です。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201702/2017033002-04.png)
Adrian Zumbrunnen
一見、非常にシンプルです。矩形で囲まれたテキストは、チャットのように会話型でコンテンツが表示されます。グリーンのボタンをクリックしてみてください。しかも、ページをリロードする度に、会話の内容が変化します。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201702/2017033002-05.png)
Baptiste Briel
静止画だとシンプルに見えますが、背景の球体がうねうねしており、非常に美しいデザインです。そして、作品の見せ方が非常に面白いです。スクロールして次々に見せるのですが、それぞれがスライドしており、不思議な感覚を楽しめます。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201702/2017033002-06.png)
Bell Brothers
双子のクリエイターならではのデザインですね。Aboutでは双子の特徴を活かした自己紹介がされています。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201702/2017033002-07.png)
Bruno Imbrizi
完全に新感覚のナビゲーションです。操作性も気持ちよく、アイテムを選択する時も、戻る時も非常に快適に設計されています。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201702/2017033002-08.png)
Cihad Turhan
こういう見せ方もあるんですね、2分割レイアウトですが、普通のとかなり違います。次のコンテンツはどうなってるんだろう、とワクワクしながら楽しめます。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201702/2017033002-09.png)
Claudio Calautti
六角形(ヘキサゴン)をつかったレイアウトが特徴的なデザインです。六角形の使いどころは、いろいろあるんですね。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201702/2017033002-10.png)
Corentin Fardeau
半透明を重ねるデザインは見かけますが、さらにアニメーションが加わると非常に優雅な印象を与えます。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201702/2017033002-11.png)
Daniel Eden
準備中のデザインでシンプルですが、センスが高いです。天地左右に配置されたテキストもいいですね。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201702/2017033002-12.png)
Damien Seguin
このパララックスのエフェクトは新鮮でかっこいいです。平面なのに、奥行き感と疾走感が気持ちいいです。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201702/2017033002-13.png)
Denys Nevozhai
トップの美しいヘッダエフェクトだけでなく、コンテンツに使われている幾何学型のエレメント、特にサークルが面白いです。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201702/2017033002-14.png)
Du Haihang
なんじゃこりゃw スクロールとドラッグ、スワイプで操作する新感覚のUXが楽しめます。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201702/2017033002-15.png)
Daniel Sternlicht
ドラクエ風のマップを歩きながら、コンテンツを探検するサイトです。船で旅にでると、、、
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201702/2017033002-16.png)
Denis Smirnov
映画のワンシーンのような迫力ある背景のアニメーションは必見です。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201702/2017033002-17.png)
Guillaume Juvenet
水平スクロールすると、コンテンツを次々にSVGのラインで書き込み、生成します。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201702/2017033002-18.png)
Georg Fischer
ジオメトリックを使ったデザインで、きびきびしたアニメーションが気持ちいいです。コンテンツに対応したナビゲーションのアイデアも面白いですね。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201702/2017033002-19.png)
Gabrielle Wee
美しいグラデーションとくるくる回るボックスがかわいいサイトです。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201702/2017033002-20.png)
Giulian Drimba
縦長スクロールと水平スライダーを組み合わせており、ナビゲーションが非常におしゃれです。ちょっと小さいので、操作が難しいかもしれません。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201702/2017033002-21.png)
Jake Albaugh
意味深く置かれた椅子、心臓が弱い方はご注意ください。
私は油断していたので、ちびりましたw
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201702/2017033002-22.png)
Jean Helfenstein
2分割レイアウトで区切りが斜めはあまり見かけませんね。中のコンテンツにもこの斜めが活かされています。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201702/2017033002-23.png)
Jenny Johannesson
基本的なレイアウトのパターンは限られているのですが、アニメーションが加わることで非常に新鮮に見えることができます。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201702/2017033002-24.png)
Jonathan Patterson
トップは非常にシンプルな6つのパネルのレイアウト、そして各コンテンツのレイアウトがシンプルながら非常に凝っています。見出しやボックス状の要素の実装がかっこいいです。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201702/2017033002-25.png)
Keiran Lovett
さすがはゲームUIデザイナーのサイトと思わせる気持ちいいUIが揃っています。Worksの見せ方やArticlesのぱらぱら感、好きです。
sponsors