Advertisement

 

トレンドが目まぐるしく変わるWebデザインでは、できるだけたくさんの優れたデザインのサイトを見て、触れることが重要で、次のアイデアにもつながります。

 

この記事では、Webデザインの創造力を高める最新良質サイト36個をまとめてご紹介します。

 

Webサイトの雰囲気や印象づくりはもちろん、配色や利用フォント、レイアウトなどの参考にもぴったりで、Webデザインに関わる全てのひとにオススメの内容。

 

前回のWebデザインまとめも一緒にどうぞ。

 

「ウェブデザインのアイデアが決まらない」「なんとなくイメージはあるけど、どう作ればいいかわからない」「打ち合わせでのサンプル見本が欲しい」 この記事で

 

 ;

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

 

Vita Architecture

七色に輝くヒーローイメージの他に、スクロール追従アニメーションを効果的に活用した要素の表示テクニックや、シンプルでミニマルなグリッドレイアウトなどデザインの参考に。

 

 

 

養老ミート

自社牧場をもつ飛騨牛をメインに扱う肉屋のウェブサイト。ひと目見たら忘れないインパクトのあるビジュアルはもちろん、目玉の横綱セットは、千人前百九十七kgでお値段310万円など、面白い企画とコンテンツ力にも脱帽です。

飛騨牛養老ミートの画像

 

 

 

Crisp Corp

美味しくて満足できるサラダを、一つひとつ手づくりで提供するカスタムサラダ専門のレストランで、美しいウェブデザインも必見。

crisp-corp

 

 

 

Konel

気象データと連動した実食できる「サイバー和菓子」など、アートとテクノロジーを融合させた新しい体験を表現したサイト。白黒のみのモノクロデザインで、マウスをホバーすると画像が美しいカラーに。

konel

 

 

 

The Tokyo Toilets

トイレは日本が世界に誇る「おもてなし」文化の象徴。渋谷区の17カ所で、順次公共トイレが生まれ変わっていきます。

tokyotoilet

 

 

 

Homunculus

マウスの動きに合わせて水面のような歪みを加えたり、ユニークなページ遷移体験などクリエイティブで新しいユーザー体験を提供しているポートフォリオサイト。

homunculus_Inc-2

 

 

 

Planet of Lana

ページをスクロールするときの画像の表示アニメーションにも注目したいランディングページ。

19_planetoflana

 

 

 

Lamborghini Huracan STO

マウスの動きに合わせてスポーツカーを360度、自分の好きな角度で眺めたり、運転席に座ったりといったバーチャル3D体験ができるウェブサイト。

 

 

 

Mama Joyce Peppa Sauce

ウェブサイト全体がデザインのようなホットソースの販売サイト。ページをスクロールするあいだ、ホットソースがゆらゆらと視線の周りに追従します。購入ボタンにも細かいアニメーションとテクニックが。

Mama-Joyce-Peppa-Sauce

 

 

 

Plunt

お好みの観葉植物のサイズを選択すると、スライダー形式で植物とプランターを選び、パーソナライズされた植物をお手元までお届けする新サービス。金額もその場で確認でき便利です。

pluntの画像

 

 

 

Go Love Yourself

やさしく肌をマッサージするボディーバターの紹介ランディングページ。Love と Rub(こする)をかけた言葉遊びも素敵。

Go-Love-Yourself

 

 

 

Sandland

美しいグラデーションカラーのヒーローイメージや、リアル感たっぷりなドロップシャドウ、美しいパステルカラーの配色、シンプルなサンセリフ書体など真似しやすいポイントもたくさん。

sandland

 

 

 

Palais

手書きフォントとイラストを効果的に利用し、ブランドカラーに合ったポップな配色が独創性のあるウェブサイトに仕上がります。Blobなどのシェイプ要素の配置の参考にも。

15-palais

 

 

 

Capsul in Zero Impact

使い終わったらそのまま堆肥となるコーヒーフィルターを紹介したランディングページ。スクロールに合わせてフィルターがくるくると回転しながら、コンテンツを表示していきます。

Capsulin_Zero_Impact-3

 

 

 

by Humankind

詰め替えタイプの香水など環境にも配慮した商品展開を行うブランドは、ナチュラルでオーガニックな雰囲気をパステルカラーを中心とした配色で見事に表現しています。

0by Humankindの画像

 

 

 

Pernod Ricard Embiez 2021

さまざまなエンターテイメントをオンライン上で実現するプラットフォームづくりといった、新型コロナウイルスの影響で生まれた新しいサービス体型。

pernod-ricard-embiez-2021

 

 

 

VW: Virtual Test Driving

まずは「海岸」または「山」コースを選ぶと、実際にクルマでテスト走行ができる体験型ウェブサイト。クルマの購入を検討しているユーザーを虜にするブランディング。

vw-virtual-test-driving

 

 

 

Hulu Pride

マルチカラーのグラデーションや3Dデザインなど奥行き感のある没入型のウェブサイト。

Hulu-Pride

 

 

 

Zoox

ドライバーではなく、クルマに乗るひとのことを第一に考えた自動運転する未来のモビリティサービス。

zoox

 

 

 

DES

マウスをつかってドローンを操作し、ウェブページ上に設置されたコンテンツまで飛行する、ゲーム要素を取り入れたポートフォリオサイト。

des-custom-3d-portfolio-website

 

 

 

E11even

画面全体に表示される動画をつかったヒーローイメージは、中心の円形ナビメニューを選ぶことで背景も一緒に切り替わります。アメリカのマイアミにあるホテルのウェブサイトで、高級感のある配色やフォントえらびも参考に。

e11even-3

 

 

 

Friesday

フランスのポテトフライをつかった美味しそうなテイクアウトメニュー。カラフルでポップな配色や書体、イラストの使い方なども参考になりそうなレイアウト。

10-friesday

 

 

 

Crazy About Eggs

育て方にとことんこだわった新鮮な卵を生産、販売しているオランダはアムステルダムの企業向けサイト。オリジナルのかわいいイラストや、青をベースとした配色カラーパレット、手書きフォントもかわいいです。

Crazy-About-Eggs

 

 

 

Haleys Beauty

コスメティックブランドの商品プロモーション用ランディングページで、スクロールすることで詳しく紹介が進むストーリーテリング手法

17_haleysbeauty

 

 

 

RC Victory Park Residences

セリフ書体と筆記体の組み合わせや、高級感のある配色カラーパレットが印象的で、控えめなパララックスエフェクトを採用したサイト。

RC_Victory_Park_Residences-3

 

 

 

Seventh Movement

画面全体に広がるサムネイルをクリックすると、各プロジェクトの詳細を確認できるインタラクティブな制作実績ページ。

Seventh-Movement

 

 

 

Wanda

wanda

 

 

 

Floema Jewelry

Floema-Jewelry

 

 

 

Levitate

アスリート向けの義足の開発、販売を行っているデンマークの会社の公式ウェブサイト。

06-levitate

 

 

 

Marnie Hawson

グリッドではなく、視線フローに合わせた画像要素の配置、目に優しい配色カラーパレットを利用したオーストラリアのプロ写真家のポートフォリオサイト。

08_marniehawson

 

 

 

Elons Toilet

イーロン・マスク氏の50歳の誕生日を祝うファンサイトで、ローンチボタンをクリックすると火星まで仮設トイレを打ち上げるユニークなプロジェクト。

14-elonstoilet

 

 

 

AirPods Max

プロダクト商品の紹介でストーリーテリング手法を取り入れるときに参考にしたいサンプルページ。ページのスクロールに合わせて縦横無尽に配置されたデザイン要素、たっぷりの余白スペースなど目からウロコのデザインテクニックが満載。

airpods-max-1

 

 

 

Christopher Melgram

ウェブページが立体的に「折り曲がる」ユニークなエフェクトに、文字テキストにカーソルを合わせることでサムネイルを表示するなど、シンプルながら魅力的なエフェクトを随所につかったポートフォリオ。

CHRISTOPHER_MELGRAM-3

 

 

 

Cristobal Balenciaga Museoa

ブランドのコンセプトや歴史などを伝えるときは、平行方向のスクロールを実装することでより自然にコンテンツを見せることができる実例サンプル。

Cristobal_Balenciaga_Museoa-3

 

 

 

Laboratorio Permanente

イタリア、ミラノにあるデザイン制作会社の公式ページで、文字テキストを中心としたシンプルなミニマルレイアウト。

01-laboratoriopermanente

 

 

 

Sometimes Always

オレンジ色のロゴに合わせた、レトロでどこか懐かしいノスタルジックな配色が特長のウェブサイト。使用されている書体もレトロ。

02-sometimesalways