アイデアの宝庫、すごい最新Webデザイン40個まとめ

「ウェブサイトのアイデアが浮かばない」

「刺激的なインスピレーションが欲しい」

「打ち合わせでイメージをすり合わせたい」

そんなときに目を通したい、世界で話題の最新Webデザインをまとめてご紹介します。

2023年のデザイントレンドを意識した作品から、時代に関係なく愛されるシンプルなスタイルまで、幅広いセレクションを取り揃えています。

レイアウトや配色などの参考にできるのはもちろん、魅力的な動きのアニメーション探しにもおすすめです。

最新ウェブデザインまとめ

teto.design

Tote.design

カラフルなグラデーションで埋め尽くされた空間を移動しながら、制作実績を見つけ出す超ポップなポートフォリオサイト。ハンバーガーメニューは、まさにハンバーガーそのまま。

チルするすゝめ

チルするすゝめ

ノスタルジックで幻想的な色使いのイラストが特長のランディングページ。モバイルでの閲覧に最適化されており、想定ユーザーに刺さる、読みたくなるコンテンツも素敵なサイト。

Bollina Avanti

Bollina Avanti

「あなたのバスタイムを一新するシャワーヘッド」をコンセプトにした商品のランディングページでは、高級感のある美しさと、汚れを落とす実用性もうまく表現。

A Re-creation of Former PM Abe's Assassination

安倍元総理”襲撃の記憶”

安倍晋三元総理銃撃事件。あの日、あの場所で、何が起きたのか。安倍晋三元総理や山上徹也被告は、どんな光景を目にしていたのか。このサイトは事件当時の空間を3つの異なる視点で再現した、「75秒の記憶」です。

the search for work happiness

The Search for Work Happiness

「仕事のよろこび」を求めて、リーダーが自分自身と部下を幸せにし、精神的に健康に保つのに役立つ逸話をまとめた面白サイト。

マウスでページ中を移動しながら、ためになるアドバイスを見つけだそう。

Fluffy Hugs

Fluffy Hugs

顔にモコモコとした犬や猫がくっついた、ユニークなイラストが揃うNFTアートギャラリー。

服装や髪型、肌の色などで絞り込みができ、お気に入りの一枚を見つけることができます。

Claska House

クラスカハウス

サイト全体に広がるグラデーションの図形シェイプやイラスト、目に優しい配色など、親しみやすさを感じる不動産向けページ。

tigermilk

Tigermilk

店内の様子を撮影した動画を、画面いっぱいに表示したヒーローデザインで、メニューを表示すると、思わずクリックしたくなるホバーアニメーションが実装され、さまざまな動物たちが隠れています。

sophie studio

Sophie Studio

カーソルを合わせるたびにグリッチ風に切り替わるヒーローイメージや、ピクセルドットのページ遷移アニメーション、バツ印に展開するナビメニューなど、こだわり満載のポートフォリオサイト。

maison egea

Maison Egea

一瞬で目を奪うおしゃれなヒーロー画像が、高級感あふれる壁紙を販売するブランドイメージにも合ったショップサイト。

Discovery Builders

Discovery Builders

マウススクロールに合わせたアニメーション付きのコンテンツ表示や遷移が魅力的なウェブサイト。

グリッドを無視したような、ジグザグに画像を配置したり、迫ってくるような没入感を追加するなど、最後までユーザーを飽きさせません。

casa mami portfolio

Casa Mami

カリフォルニアにある民泊施設の紹介ページは、無駄を省いたミニマルスタイルで、オシャレ度満点。

シンプルですが、伝えたい内容はきっちりまとめられており、情報量の少ないコンテンツでの制作の参考に。

Bavet

Bavet

ずっと見ていたくなるようなストーリー性あふれるコンテンツは、どれも遊び心たっぷりに表現されており、思わず訪れてみたくなるベルギーにあるスパゲティレストラン。

うおみこども園

うおみこども園

切り抜かれた子供たちがサイト全体で暴れまわる、個性たっぷりな鹿児島のこども園公式サイト。

トップページのほか、園の生活ページなどどれも個性的で、思わずスクロールしたくなる、イラストを多用したコンテンツ構成の参考に。

metamask

MetaMask

画面全体に表示されるマップを移動させながら、Web3の知識をついて知る学習型コンテンツ。気になるイラストをクリックすると、各詳細が表示されます。

wallpaper magic

Wallpaper Magic

かわいい動物キャラクターイラストが印象的なサイトで、レトロな日本語フォントや配色ともうまくマッチしています。

the race explorer interparfums

The Race Explorer Platinum

矢印キーで操作して最高タイムに挑戦する、中毒性たっぷりな車のミニゲーム。光るラインをたどると、スピードアップで加速します。

search inc

Search Inc

考古学の世界的リーダー企業で、 海洋考古学、およびあらゆる文化遺産サービスに精通し、特殊な業務をこなす様子を動画をつかって、うまく伝えています。

qino

QINO

「気の新しい使い道を発明する地域共創プロジェクト」公式ウェブサイトで、メッセージから活動内容、商品の販売まで行います。

個人的に背景色として使われていた、「薄みどり色(#E3EAE0)」を参考メモとして。

mimiguri

Mimiguri

サイト全体を通して利用されているイラストが統一感だけでなく、コンテンツの理解度を深めるのにも大きく貢献。ちょうどよい余白スペースや文字の大きさなども、実践的に参考にしたいところ。

mikiya kobayashi

Mikiya Kobayashi

フルスクリーンで写真が展開するポートフォリオは、余計なUIなどを一切省いたミニマルスタイルで、制作実績をメインに据えたデザインで、心地よいコンテンツ遷移アニメーションつき。

Hotel Odisej

Hotel Odisej

クロアチアにあるホテルの宿泊サイトで、落ち着いたおしゃれな配色に、高級感のあるセリフ書体を用いることで、統一感のあるデザインに仕上げています。

roboto entertainment

Roboto Entertainment

香港を拠点としたゲームクリエイティブ制作会社のホームページで、オレンジ色をアクセントカラーに、デジタル感のある太字フォントが印象的。

Haunted House Outlanders

Haunted House Outlanders

マウススクロールに合わせて、3Dパーツの周りを移動しながら、コンテンツの内容を表示する、ダイナミックな見せ方。

Escape Plan

Escape Plan

万が一、火事になってしまった時の脱出ルートを確認しておくことの重要さを伝えるサイトで、5分以内に建物のなかからの避難を体験するゲームによるコンテンツ構成。

Little Red Riding Hood

Little Red Riding Hood

アーケードゲームさながらの高詳細な動きを表現したミニゲームを楽しむことができるサイトで、キャラクターの動きに合わせてコンテンツとストーリーが展開していきます。

sandy shore

Sandy Shore

アスパラガスや玉ねぎなどの栽培を行うカナダの会社で、ビジョンや行っている内容を分かりやすいイラストで紹介、スクロールしたくなる仕掛けが随所に。

スクロールに合わせて字幕風に字が表示されるエフェクト、いろいろなサイトで増えてます。

the cube hosue

The Cube House

ビルに向かって吸い込まれるような没入感のあるアニメーションで幕をあける、アムステルダムにある貸しオフィスの紹介ランディングページ。

鮮やかでコントラスト比の高い、黄緑色(#E5F77D)のアクセントカラーも印象的。

はるni

はるni

スマホアプリやPCゲームを中心としたゲーム開発を行う、鹿児島に拠点を構えるゲーム開発会社のウェブサイト。

立体的な3Dイラストを回転させると、行っている事業や採用情報、お問い合わせなどを表示することができます。

IKEA Empresas Deseos

IKEA Wish Network

クリックでショールームの扉をくぐり、海外旅行などの豪華プレゼント企画の会場へと進む、体験型オンラインサイト。

賞品をえらぶ際に利用する画像カルーセルには、浮遊感たっぷりな3Dイラストにアニメーションが追加され、マウスの動きが光源となり、インテリアを照らします。

senses bang olufsen

Senses Bang Olufsen

自分のお気に入りの楽曲データをもとに、複雑な動きで踊るミュージカルアバターを作成できるサイト。各アバターのスライダーによる遷移アニメーションが斬新。

Dior Mother's Day 2023

Dior Mother’s Day

2023年の母の日を記念した特設サイトでは、特別なギフトをタロットカード占いのように探すことができる、ゲーム要素を取り込んだショッピングサイトの好例サンプル。

sector 32

Sector 32

まるでビデオテープを再生しているようなノイズ感を画面全体で表現、さらにざらつきの強弱もカスタマイズできるなど、クリエイティブな個性がひかるポートフォリオサイト。

plantica

plantica

花に関係するアート、ファッション、ライフスタイル、メディア…それぞれの領域を繋げながら、スペースデザイン、インスタレーションアート、テキスタイルデザイン、プロダクトデザイン、アートディレクションまで手がけています。

仙台で暮らす、湖山で働く。

仙台で暮らす、湖山で働く。

太めフォントやイラスト、レトロっぽい配色カラーパレットなどトレンド要素を詰め込んだウェブサイトで、ポップでフレンドリーな雰囲気づくりにぴったり。

Kuya Design Agency

Kuya Creative Studio

文字を主体としながら、ブランドのポップさを配色とフォントの配置や大きさをつかい、見事に表現したポートフォリオサイト。シンプルですが効果的に、かつ確実にユーザーの視線を誘導できるテクニック。

Envy

Envy™

超リアルなりんごがマウススクロールに合わせて、くるくると回転したり、八つ切りや真っ二つになったりしながら、コンテンツが進行していく体験型ウェブサイト。

Diamond Journey

Diamond Journey

きらりと輝く本物そっくりなダイヤモンドが、マウススクロールに合わせて形を変えながら、コンテンツ展開する、ストーリーテリング手法を用いたランディングページ。

第一交通産業グループ

第一交通

立体的なアイソメトリック・イラストをサイト全体に利用した、親しみやすいデザインが素敵なサイト。

コンテンツの端など、「必要ではないけど、あったらうれしい」、そんなイラストが随所にちりばめられているので、探してみましょう。