良質Webデザイン見本帳!創造力を高める最新サイト47個まとめ

kikk-festivval-2017

 

ウェブデザインに関わる全てのひとにオススメしたい、デザインや発想、アイデアの糧になる優れた最新Webサイトの実例をまとめています。配色やレイアウトの他にも、書体や印象、業種など目的別に探せて、すぐに使えるアイデア集です。

 

これからウェブサイトを作ろうというひとや、クライアントとの打ち合わせの参考資料として、またアイデア出しに困ったときなど幅広く参考にできるウェブデザインを厳選してご紹介します。

 

アイデアに困ったら確認したい!最新ウェブデザイン良質見本47選 2017年9月度

現役デザイナーも注目!最近話題のウェブデザイン50個まとめ 2017年7月度

 

 

良質Webデザイン見本帳!創造力を高める最新サイトまとめ

 

久米島インスタTrip

人気インスタグラマーたちが久米島のインスタ映えする写真を投稿して、島の観光につなげる新しい試み。

kumejima-instatrip

 

 

 

Air Jordan Coilection

歴代のAir Jordanシリーズを500種類以上揃えた、世界最大級のコレクションサイトで、知りたい情報と豊富な画像と一緒に楽しむことができます。

jordan-collection

 

 

 

Bamboo Shoots Wear

アパレル商品をひとつずつスライダー形式で紹介する、シンプルでブランド性の高いデザイン。

bambooshootswear

 

 

 

G Star Elwood Jeans

各ジーンズにマウスカーソルを合わせると、絶妙な動きとともに詳細情報を表示してくれるギミックも。

g-star-elwood-jeans

 

 

 

Coulee Creative

ストーリーテリングを得意としたデザイナーで、プロジェクトの具体的な進め方を体感できるサイト。

coulee-creative

 

 

 

A L’heure Du Lait

フランスで酪農を行う家族の一日のタイムスケジュールを、ビデオ動画を使ってよりインタラクティブに表現した体感型ウェブサイト。

a-lheure-du-lait

 

 

 

ひとり鍋しゃぶしゃぶ り山

お店の様子を短いビデオ動画にまとめたヘッダーデザインによって、より効果的なブランディングにも役立ちます。

rizan-s

 

 

 

 

More Trees

音楽家・坂本龍一が代表を務める森林保全団体のウェブサイト。

more-trees

 

 

 

Matter Interiors

グリッドを無視した自由なレイアウトが今っぽい、シンプルでデザイン性に優れたインテリア向けウェブサイト。

matter-interiors

 

 

 

Rottefella

スクロールに応じてコンテンツが進んでいくストーリーテリング手法を活用したサイトで、商品のポイントはズームアップで表示されます。

rottefella

 

 

 

Zoomanity

マウススクロールに応じて縦横無尽にコンテンツが展開され、ユニークなイラストが印象的なウェブサイト。

zoomanity

 

 

 

The Engine

ダーク系の背景とカラフルな配色のコントラストが美しいサイトで、随所にマイクロインタラクションを活用しています。

the-engine

 

 

 

Simply Chocolate

商品とマッチしたカラフルな配色と、アニメーションを組み合わせたシンプルでインタラクティブなサイト。

simply-chocolate

 

 

 

Westward Leaning

実物大より大きな商品画像を利用することで、より分かりやすく直感的に商品を体感できます。

westwardleaning

 

 

 

Air France Music

フランス航空が毎月お届けるする音楽プレイリストで、パララックスエフェクトやSVGアニメーションなど、魅力的なマイクロインタラクションが素敵。

air-france-music

 

 

 

Haruki Murakami

世界的にも人気の村上春樹の公式サイトで、ラインアニメーションや画面分割スライダーなど、ちょっとしたギミックを盛り込んだ繊細なウェブサイト。

haruki-murakami

 

 

 

Running on Experience

マーケティング戦略をランニングに例え、アニメーションや鮮やかな配色で分かりやすく伝えるウェブサイト。

adobe-digital-marketing-study

 

 

 

From Here to Everywhere

画面全体に表示されるクルクルと回る地球儀を使い、各都市の情報をインタラクティブに伝えるテクニック。

from-here-to-everywhere

 

 

 

Tender to Art

革新的なデザイン作品やアーティストをまとめたデータベース的ウェブサイトで、スクロールに応じたアニメーションも素敵なレイアウト。

tender-to-art

 

 

 

viennese Modernism 2018

モノクロのグリッドレイアウトが新聞のような雰囲気を演出したサイトで、部分的にアニメーションを利用することで、ナチュラルに視線を集めることができます。

viennese-modernism

 

 

 

モンダミン

販売開始から30年を迎えるロングセラー商品を、分かりやすく図解で紹介する公式ウェブサイト。

mondahmin

 

 

 

司法書士 青木事務所

統一された配色が親しみやすい雰囲気を演出し、誰にでも分かりやすいレイアウトも参考に。

aoki-jimusho

 

 

 

情報科学芸術大学院大学

シンプルで見やすいデザインで、随所に散りばめられたアニメーションを使ってうまく視線を誘導します。

institute-of-advanced-media-arts-and-sciences

 

 

 

Kidori

和室にも洋室にも合う盆栽のような観葉植物を販売しているサイトで、植物の基本知識がわかる植物図鑑も個人的にツボ。

ki-do-ri

 

 

 

二子玉インターナショナルスクール

鮮やかなグラデーションカラーを全面に利用したサイトで、読んで欲しいコンテンツをうまく強調しています。

nicotame-is

 

 

 

熱川バナナワニ園

atsukawa-banan-wani

 

 

 

Serverlessconf

ネオンカラー配色のイラストやブラシフォントを使うなど、2017年のデザイントレンドを盛り込んだ作品。

serverlessconf

 

 

 

Fanny Myard

画面を二分割した状態でコンテンツが切り替わるスライダーを用いることで、直感的にコンテンツを探すことができます。

fanny-myard

 

 

 

Epicurrence

スクロールに合わせてコンテンツがアニメーション付きで展開し、グリッドにとらわれない自由なレイアウトが魅力的。

epicurrence

 

 

 

Cafe Du Tocadero

フランスはパリにある高級感たっぷりのレストラン・カフェの公式サイト。お店の様子をうまく伝える写真を多用し、マイクロインタラクションでオリジナル性もアップ。

cafe-du-trocadero

 

 

 

Killing of a Sacred Deer

マウスカーソルをプルプルと震える人体模型がインパクト大。質問を進めながら楽しむストーリーテリングを効果的に使っています。

the-killing-of-a-sacred-deer

 

 

 

Andre Ribeiro

無駄を一切省いたミニマルスタイルで、制作実績をシンプルな写真のみで伝えます。

andre-ribeiro

 

 

 

Polaroid Originals

新しく復刻されたポラロイドカメラの特設販売ページで、虹色のテーマカラーが印象的でカメラの詳しい使い方やテクニックを分かりやすく解説しています。

polaroid-original

 

 

 

Joy

モバイルアプリの紹介用ランディングページで、スタイリッシュな書体選びと適度なアニメーションを利用することで、コンセプトを的確に伝えます。

joy2

 

 

 

Inculerate

inculerate

 

 

 

Thymia

thymia

 

 

 

U Sports

u-sports

 

 

 

Iitala

スッキリとしたグリッドレイアウトを利用することで、初めての訪れたひとでも迷わずに目的のコンテンツにたどり着く設計。

iittala

 

 

 

Aristide Benoist

aristide-benoist

 

 

 

Made Tight

フォントと配色の使い方の参考にしたいウェブサイトで、シンプルながら要点を押さえたレイアウトは、幅広いプロジェクトに対応できます。

made-tight

 

 

 

Yeti Cycles

ビデオ動画を利用することで、商品の良さをより直感的に伝えるウェブサイトで、スポーツ関連の案件の参考に。

yeti-cycles

 

 

 

Inside the Head

inside-the-head

 

 

 

Joop Fragrances

パララックスエフェクトと鮮やかなブランディングカラーで、見ているだけでも楽しいウェブ体験を提供します。

joop-fraggrances

 

 

 

Face the Music

カメラ機能を利用し、表情や感情に合わせて曲をリミックスできるユニークなサイト。

face-the-music

 

 

 

Neematic

次世代の電動バイクを紹介するランディングページで、スクロールに応じて詳細を分かりやすく伝えるアニメーション。

neematic

 

 

 

The Gigi

マウスを下方向に移動させることで、次々とコンテンツがふわりと表示されるアニメーションが印象的なサイト。

the-gigi

 

 

サムネイル@ : Kikk Festival – Home