Webデザインのすごいアイデアや細かいこだわりがいっぱい!素晴らしいUXを堪能できるサイトのまとめ

デザインの細かいこだわりがすごい! こんな面白いアイデアはどこから生まれるんだろう? CSSやSVGでこんなこともできるのか! 次のプロジェクトのヒントになるような素晴らしいUXを堪能できるWebサイトを紹介します。

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

サイトのキャプチャ

In Pieces (音有り)

CSSの進化がやばいです。CSS Clip Pathsを使ったインタラクティブな博物館です。
解説記事:The Making Of “In Pieces”

サイトのキャプチャ

Werkstatt

カラースキームにホワイトを使った非常に美しいデザインです。ホワイトを使ってると言っても単に背景が白ということではありません。優雅なアニメーションやソリッドなエフェクトが引き立てています。

サイトのキャプチャ

Hermes Tocchetti

このサイトの全てを楽しむには、デスクトップとモバイルで同時にアクセスする必要があります。こういうこともできるんですね。

サイトのキャプチャ

RD Construction

4等分、四角、四面にこだわったデザイン、アニメーションがかっこいいです。配下ページの4分割のグリッドを活かしたレイアウトも遊び心が満載。

サイトのキャプチャ

American Genius (音有り)

Steve JobsとBill Gates、アメリカから生まれた天才二人のこれまでの功績をまとめたインタラクティブなインフォグラフィックサイト。

サイトのキャプチャ

Uber Brand Guide

Uberのブランドガイド。こんなにかっこいいガイドラインサイトは初めて見ました。

サイトのキャプチャ

DreamTeam Katarzyna Konkowska (音有り)

Canvasで描かれた美しいアニメーションの背景が目を引きますが、各エレメントの動きや遷移に伴う動きが非常に快適で、操作性にも優れています。

サイトのキャプチャ

Dock by Cresty!

4面、2面、回転、横スクロールを使った面白いサイトで、プロダクトだけでなくマップ・ニュース・コンタクトなどにも面白いインタラクションが仕込まれています。

サイトのキャプチャ

Work & Co

トップページは一見、普通に見えます。リスト状に並んでいるコンテンツも普通です。面白い仕掛けは、左上のロゴをクリックしてみてください。

サイトのキャプチャ

Totem

ブラックとホワイトをベースにしたデザインはかっこよく、立体を上下左右、そして斜めにアニメーションさせるのは非常に印象に残ります。

サイトのキャプチャ

Teamgeek

トップのロゴだけで楽しいですが、タイポグラフィ主体のコンテンツの見せ方が日本ではないかっこいいデザインです。

サイトのキャプチャ

Ende

このサイトのタイポグラフィもなかなかです。monospace系のフォント使いがかわいいです。また、縦長スクロールでコンテンツごとに異なる背景色を使うのはよく見ますが、このサイトではすこし違ったテクニックを使用しています。

サイトのキャプチャ

L'Avenir Dental Clinic

フランスの歯医者さんのサイト。めちゃくちゃおしゃれです。

サイトのキャプチャ

Fornasetti (音有り)

定規や鉛筆やコンパスを使ったインタラクションがかわいく、配下ページのhistroyは大作コンテンツとなっています。

サイトのキャプチャ

STYKI

カラフルな落ち着いたパステルがかわいいデザインで、各コンテンツごとに気持ちいいアニメーションを使用しています。

サイトのキャプチャ

ECHO

デザイナーユニットのポートフォリオ。シンプルなデザインながら細部までかなりこだわりを感じます。

サイトのキャプチャ

Resonate '15

ページ上にランダムに表示されるエレメント、なかなか面白いですね。

サイトのキャプチャ

Upturn

SVGのかわいいグラフィックをふんだんに使ったサイトで、操作も軽快で、各デバイスごとの表示にもさまざまな工夫が取り入れられています。パネルの形状も3つ角丸1つ矩形というシンプルなテクニックですが、矩形の位置を変えるだけで面白いデザインになっています。

サイトのキャプチャ

Masahiro Maruyama

アイウェアブランド「マサヒロマルヤマ」のサイト。メガネをかけている姿を360度から見ることができるという利便性だけでなく、プロダクトのスライダーの細かくて丁寧な演出など見所がたくさんです。

サイトのキャプチャ

QED Group

イラストとSVGをメインにしたデザインはすっきりしており、アローをホバーするとすっ飛んでいったり、What We Doにある羅針盤など、気持ちいいインタラクションが満載です。

サイトのキャプチャ

Kurokaaw Wonderland (音有り)

黒川温泉の世界プロジェクト用のサイトで、パノラマの美しい写真や映像が心地よいBGMとともに楽しめます。制作はLetters, Inc.

サイトのキャプチャ

Plasticbionic

ページ全体、コンテンツ、エレメントを上下左右にスライドさせるインタラクションが非常に面白いです。こんなのもスライドするのか!とスライドの達人になれます。

サイトのキャプチャ

Lounge Lizard

インパクトのあるトップの画像、特大サイズの見出し、ブラックとオレンジ、非常に力強い魅力的なデザインのサイトです。

サイトのキャプチャ

De Haus

センスのよい動画(↑)と画像がかっこいい横スクロールのサイト。注目はそのナビゲーション、まるで動画を見ているかのように横スクロールコンテンツをナビゲートできます。

サイトのキャプチャ

Dogstudio

窓の形状がどんどん変化し、マウスに反応して中の様子が動くのは面白いですね。

サイトのキャプチャ

株式会社 闇 (音有り)

株式会社 闇のホラーテクノロジー 縦長スクロールサイト。心臓が弱い方や怖いのが苦手な方は絶対見ないでください。

top of page

©2017 coliss