Webデザイン最前線、流行先取りの注目ホームページ見本47選

Chérie-Healey

 

この記事では、ホームページ制作のデザインアイデアが浮かばないときに便利な、最新ウェブデザイン47個をまとめてご紹介します。

 

特に注目を集めるヒーローデザインや、各種コンテンツの見せ方やボタンエフェクトなど、「突き抜けた」他と差のつくデザインが欲しいときに重宝するデザインを集めています。

 

ますます進化するウェブデザインの最先端を体感でき、レイアウトや配色えらび、フォントなどサイト制作の参考としてもオススメです。

 

 

Webデザイン最前線、流行先取りの注目ホームページ見本47選

 

Van Gogh Museum

ゴッホ美術館の公式サイトがリニューアル。ちなみにゴッホのコレクション油彩画200点以上、素描画約500点、書簡約750点は、すべて無料ダウンロードできます。

Van-Gogh-Museum

 

【2022年版】パブリックドメインで無料!世界の名画550万枚をダウンロードできる美術館サイト19個まとめ

 

 

Mashiro Maruyama

マウスをクリックしながら左右に動かすと、頭も360度回転する面白い仕掛け。ナビメニューよりモデル名を選択してみましょう。

 

 

 

Beechhouse

ヴィンテージな手描きイラストとピンク色の配色が印象的だったサイトデザイン。

Beechhouse

 

 

 

Lunchbox

目を引くポップなカラーリング、書体えらび、イラストが揃った、ブランドイメージをうまく表現したデザイン。

lunchbox

 

 

 

オツモ株式会社

「過去と未来の融合」をコンセプトにしたライフスタイルブランド、「HUMAN MADE」を手掛ける会社の公式サイト。

otsumo

 

 

 

Brutus

雑誌でもおなじみのブルータスのウェブメディア。思わず読みたくなる、クリックにも仕掛けが。

brutus-jp

 

 

 

わとび

料理人のための和食専門ウェブマガジン。注目の料理人が、最新の技術から古い仕事までを大公開。食材や日本の酒のこと、うつわの知識、雑学。和食の「旬の話題」をお届け。

watobi

 

 

 

西都はじめるプロジェクト

新しい暮らしをはじめることは、新しい楽しみをはじめること。それが、宮崎県西都市が考える移住のカタチです。

saito-hajimeru

 

 

 

Leroy Merlin Inspirational Mag

各コンテンツを切り替えると、360度回転できる超リアルな3Dレンダリングを体験できます。

Leroy-Merlin-Inspirational-Mag

 

 

 

Skolkovo Business District

マウスの動きに合わせて、照明を当てることで、ビルでできる影を操ったり、マウスを左右に動かし、3Dモデリングを360度回転できます。コンテンツを読み進めたくなる、スクロールに合わせたアニメーションや、コンテンツの切り替えなど、参考にしたいポイント多数。

Skolkovo-Business-District

 

 

 

Lemkus

スニーカーのショッピングサイトで、大きく表示されたモデルやブランド名が目を引く、横スクロールを主体としたデザイン。

Lemkus

 

 

 

Fanzone36

マップ上に表示されているポイントをクリックし、ゲームに参加し、ポイントを競いましょう。没入感の高いデザイン。

fanzone36

 

 

 

Gucci Flora Gorgeous Gardenia

画面上を自由に動き回り、各ポイントをクリックすることで、商品を確認できるプロモーション。

gucci-flora-share

 

 

 

Gucci Burst

マウスカーソルを上下に動かし、迫ってくる障害物を避けて高得点を狙うオンラインゲーム。高級ブランドGucciによるプロモーションサイト。

Gucci-Burst

 

 

 

Mission Ionosphere Web Game Experience

矢印キーを左右に小刻みにずらし、障害物を避け、上へ上へと向かい点数を競うウェブゲーム。

mission-ionosphere-web-game-experience

 

 

 

Popcorn SyFy

画面上のディストピアな世界イラストから、SF映画に関連するものを探し、キーボードで入力し、ポイントを競うオンラインゲーム。

PopCorn-SyFy

 

 

 

FCXV Fabienne Chapot

スクロールで浮き上がるようなアニメーションが注目を集めるデザインで、手描きの水彩イラストとうまくマッチしたエフェクトと言えるでしょう。

FCXV-FABIENNE-CHAPOT

 

 

 

Cowboy

街乗りにも便利な電動アシスト自転車の公式ページ。各モデルのランディングページのつくりがとてもユニーク。

Cowboy

 

 

 

Tether

英国発の電動アシスト自転車で、地面に緑色のLEDライトを映し出し、安全性を高めたスタイル。運転しているドライバーにも認識しやすいメリットが。

tether

 

 

 

Hyer

個人向けフライトサービスで、自家用機を丸ごと貸し切るゴージャスさ。スクロールすると、ジェット機が飛んでいきます。

Hyer®

 

 

 

Platoon Aviation

ページのスクロールに合わせて、コンテンツがふわりと表示される気持ちの良いアニメーションに、自由なグリッドレイアウトが目を引くデザイン。

Platoon-Aviation

 

 

 

GSoft

シンプルなレイアウトですが、落書きのような手描きを加えることで、オリジナル度の高いデザインに。

Gsoft

 

 

 

Are You OKOK?

立体的にレンダリングされたプロダクトを実際に体験できるサイト、まさに未来。

ARE_YOU_OKOK

 

 

 

Thinkingbox

文字テキストが中心のミニマルなデザインですが、書体えらびから随所のライン線をつかった遊び心を詰め込んでいます。

Thinkingbox

 

 

 

Humain

超極細なセリフ書体と、オレンジ色の配色カラーパレットが高級感のある雰囲気に。

humain

 

 

 

Rainlight

クリエイティブエージェンシーの公式サイトで、スクロールに応じて変化するロゴデザインが素敵。

rainlight

 

 

 

DNA Capital

遺伝子DNAのようにねじれたSFアニメーションが、スクロールに応じてくるくる回転するエフェクトは必見。

DNA-CAPITAL

 

 

 

Ballade N°12 at Vendome

240年以上続くパリの宝石店の公式サイト。まるでお店を訪れている感覚にさせるナレーションと動画をヒーローイメージに使用しています。

Ballade-N°12-at-Vendome

 

 

 

Bureau Benjamin

回転寿司のようにフロアライトがくるくると回った動画をヒーローセクションに。

Bureau_Benjami

 

 

 

Maison Egea

写真にフォーカスを集めるようなレイアウトに、高級感のあるセリフ書体の見出しタイトルが目を引くインテリアサイト。

maisonegea

 

 

 

Papier

高級感、信頼感のある緑色をメインカラーにした、ノート手帳の販売サイト。セリフ書体の見出しタイトルも美しいです。

papier

 

 

 

Websmith Studio

シンプルに並んだ文字のリストにカーソルを合わせると、背景色が変更され、関連するサムネイルが表示されます。ノイズのテクスチャ感がミニマルで印象的でした。

websmith-studio

 

 

 

ニッポニア
都心から約2時間。多摩川源流をさかのぼる山あいの村、山梨県小菅村。700人の村がひとつのホテルになった、ユニークなコンセプト。

NIPPONIA

 

 

 

猫壁 にゃんぺき

壁パネルを取付けるだけで、ご自宅の壁がキャットウォークに。動画をつかったヒーローセクション、かわいいイラストが猫好きにはたまりません。

nyanpeki

 

 

 

Gir

サステナブルな素材で作成した、スパチュラなどのキッチン用品の販売サイト。シンプルでわかりやすく、ブランドイメージにも合った、 目に優しい配色が特長。

gir

 

 

 

Langmobile

キッズ向けコンテンツに合わせた色使いやイラスト、シェイプによる画像の切り抜きなど、デザインアイデアが欲しいときに。

Langmobile

 

 

 

Madbox

かわいい3Dアイコンをつかったポップなデザイン。ヒーローデザインは、Spaceバーをクリックすると、各ゲームをプレイしているユーザー数が表示されます。

Madbox

 

 

 

Spotify Culture Next 2021

業種やジャンルに応じて、人気の高い音楽を分析した、Spotifyによる特別ページ。立体感のあるアイソメトリックなイラストアニメーションが素敵。右上メニューよりコンテンツに進むことができます。

Spotify-Culture-Next-2021

 

 

 

Sell Anything by Squarespace

サンセリフとセリフ書体の組み合わせ、控えめな配色カラーパレットを採用したコンテンツ、巨大な文字サイズなど、デザイントレンド満載。

Sell-Anything-by-Squarespace

 

 

 

Gastronomical

アメリカ発のワッフル、パンケーキミックスのショッピングサイト。日本ではあまり見かけない、ポップで大胆な色使いや書体えらび。スクロールでコンテンツがアニメーション展開、最近このパターンが主流となりつつあるのでしょう。

Gastronomical-

 

 

 

Foam

プロカメラマンのポートフォリオサイトで、マウスを上下に動かすことで、コンテンツが水平スクロールで閲覧できます。

Foam_Talent_2021

 

 

 

Karman

画面の奥から迫ってくるようなスライドエフェクトが印象的なダークデザインに、カスタムマウスポインターのオレンジが映えます。

The-Space-that-makes-us-Human

 

 

 

Musotoku

ネオングリーンをアクセントカラーに、ややレトロデジタルな雰囲気を演出したサイトデザイン。

Musotoku

 

 

 

きなりと

奈良県にある下北山村の暮らしと関わりを届けるウェブメディア。おしゃれなレイアウトで、わかりやすく情報がまとめられています。

kinarito

 

前回のウェブデザインまとめも一緒にいかがでしょう。

脱まんねりデザイン!注目の最新ホームページ見本厳選36個まとめ

 

サムネイル@ : Chérie Healey