「Webデザインのアイデアが見つからない」
「デザインの制作に自信が持てない」
「Webデザインの最新トレンドを知りたい」
Webサイト制作に関わるひとなら、誰もが一度は遭遇したことがある悩みかもしれません。
当サイトでは2009年から15年ちかく、その当時の最新ウェブデザインを定期的にまとめてきました。
これまで紹介したサイト数で言えば、2000サイト以上。
ちょっとした言葉や見せ方、色の違いで、サイトのアクセス数が何倍にも変わるなんてことも。
この記事では、目まぐるしく変化するWebデザインを追いかける、世界で話題の最新Webデザインをまとめてご紹介します。
Webアイデアの救世主、真似したくなる最新デザイン一覧【36サイト】
新潟市内に店舗を構える、チャーシューが自慢のラーメン店。まるで雑誌でも見ているようなレイアウトは、一度見ると忘れないデザインに。
Snapchat がクライアントの視聴者にリーチし、結果を促進するのにどのように役立つかを示すように設計されたゲーム。
コピーライターの糸井重里がゲームデザインとシナリオを手掛けた、あのRPGゲームのような世界観。
みなさんの生活の中で明電舎がどう活躍しているのか。明電舎の事業内容をQ＆A形式で紹介するスペシャルコンテンツ。
カラフルなグラデーションとイラストによって分かりやすく解説しており、親近感もアップ。
ファッションブランドの新しいEコマースの形として参考にしたいランディングページ。落書きのような手描き要素を採用、グリッドを無視した自由なレイアウトも◎。
Spaceキーを押すことで上下に移動しながら、星を集めてゴールクリアを目指すゲーム形式のブランディングに脱帽。
Elysium – A Tranquil 3D Nature World
十字キーとマウスを使いながら３Dマップを自由に駆け巡ることができるインタラクティブなWebサイト。音が出ます、ご注意ください。
Pebble | Where Home Meets the Road
最新テクノロジーを駆使した電動キャンピングカーの特設ページ。画像と動画をうまく利用しながら、特長や機能を伝えるなど、思わず最後までスクロールしたくなるサイト設計。
Units™ – Investments in future of living
一年中、大自然に囲まれ、現代的な生活を満喫できる移動型の最新コンテナハウス。スクロールでコンテナが回転するなど、見た目もおしゃれ。
Discover the Polaroid I-2 Instant Camera
インスタントカメラ独特の風合いを追求するために作られた、マニュアルコントロールが内蔵された初のアナログインスタントカメラ。
実際に撮影された写真サンプルを使いながら、機材を詳しく紹介するストーリーテリングのお手本として。
エナジーブロックを探しながら、映画さながらの３D空間を自由に旅するゲーム形式のインタラクティブサイト。
写真を選ぶように画像を切り替えるヒーロースライダーの他、About Meページではより自由なレイアウトを展開。高級感やエレガントさが欲しいときの参考として。
アメリカのカレッジスタイルに影響を受けたファッションブランドのEコマースサイト。リアルタイムでの時間やカーソルの位置、利用中のプラットフォームやアクセス位置を表示する、ギークな仕掛けも見どころ。
TAG Heuer Carrera Skipper – 39mm
広大な海の上をヨットを走らせながら、製品の特長や機能を伝える体験型サイト。
SHINYA OKANO / Art Directer_Visual Designer
アートディレクター/ビジュアルデザイナーの岡野真也さんのポートフォリオ。ユーザビリティに配慮しながら、美しさとクリエイティブに満ちた感動デザイン。
大きく表示された手書き文字やSVGアニメーション付きのイラストが目を引く観光サイトで、左側に固定されたナビメニューもイラスト付きで親近感がわくデザインに。
九州の内陸部で一番人口の少ない村、五木村。五木村に遊びにくる、関わる、移住する、帰る、そのために必要な情報をまとめたサイト。
画像が歪むグリッチエフェクトを採用したヒーローイメージや、ネオンカラーの色使いなど、Z世代を意識したY2Kデザイン。
Voila — Creative Studio based in Austin,Tx
ページスクロールに合わせて、ほんの少しだけ画像コンテンツが伸縮しながら表示されるアニメーションが心地よい滑らかさ。
Givingli – Level Up Your Gifting
画面全体にペタペタと張られたステッカーが、スクロールに合わせてスマホ画面に移動するなど、アニメーションを随所に活用した好例サンプルとして。
トレンドのBento UIデザインも利用し、コンテンツがはみ出るギミックも素敵。
スクロール速度の異なるパララックス効果を活用したサイドバーは、ドラッグで幅も自由に変更できる無限ループコンテンツ。
オシャレで高級感のあるセリフ書体を活用しながら、デザイン性の高い合字リガチャが魅力をアップします。
Yerba Mate | Montreal & Toronto, Canada | Mate Libre
スクロール駆動アニメーションで再現できる、水平方向へのコンテンツ展開など、ページの最後までスクロールしたくなる仕掛けがたくさん。丸みをもたせたUIデザインも今っぽい。
Krew – Creative & Production house
ページスクロールに合わせアニメーション付きでコンテンツが展開。海外サイトではよく見かける巨大なタイポグラフィーが素敵。上スクロール時のみナビメニューが表示されます。
BrewDistrict24 | Enjoy the moment | Klassieke craft bieren
オランダ生まれのクラフトビールの公式ページで、画面中央に描かれたビール缶がくるくる回転しながら、スクロールに応じて追従。背景と一緒に切り替わる商品紹介スライダーは、何度も見たくなるテクニック。
マウスカーソルの動きに合わせてロゴがぐにゃりと歪んだり、レトロなガジェットが光り輝くエフェクトなど、ヒーローイメージの重要性がよく分るサイトのひとつ。
Barber Hauler Capital Advisers
落ち着いたネイビー色のアクセントカラーに、読みやすいクリーム色の背景カラーは配色の参考にも。フランス発のウェブサイトより。
シンプルなレイアウトの中に、うまくアニメーションを加えることで劇的な変化をもたらすという例として。
Ethnocare — Air volume management solution for transtibial amputee
ページスクロールに合わせてコンテンツが展開するストーリーテリング手法を用いた、没入感たっぷりな体験型サイト。
３D空間にゆらゆらと輝くスフィア、球体がスクロールによって形を変えながらコンテンツを紹介していく、未来的で画期的なWebデザイン。
フランスの高級腕時計の公式ページ。プレゼント箱から時計が出てくるヒーロー動画や商品画像など、どれも丸みのあるシェイプを採用し、統一感のあるすっきりした印象。
Polestar – Electric cars | Polestar
先進的な機能や性能をフルチャージした未来の電気自動車のランディングページ。購買意欲をかき立てる圧倒的なグラフィックが魅力的。
NFT Play&Earn Game – Explore, Farm, Breed & Battle
神秘的な森の渓谷を探検し、チュンビと呼ばれるNFTの愛らしい生き物を育てながら、ゆったりとした時間を過ごす新感覚のゲームサイト。
ヴィンテージ感のある手描きイラストに少しだけ動きをつけることで、ユーザーの注目を自然を集めることができるテクニック。すべてのイラストに赤い気球を用いているのも、統一感があって◎。
シンプルなレイアウトを思いきや、スクロールを開始するとアニメーション付きの３Dモデリングが画面全体に展開します。ペンキを塗るようなユニークなコンテンツ遷移も目を引きます。
Frank Gehry and the Walt Disney Concert Hall | Sculpting Harmony
アメリカのロサンゼルスにあるコンサートホールの歴史を伝える特別サイト。ヒーローイメージの太字フォントにカーソルを合わせると、びよーんと伸縮。
コンサートホールに入場するように始まり、退出するようにサイトが終わるというデザインも没入感たっぷり。
進化し続けるWebデザイン
さまざまなデザインのトレンドをまるっとまとめているので、時間が足りないという人にもおすすめの記事。
参照記事 : 【2023年版】いろんなデザイントレンドを調査、まとめてみた。
およそ1か月半ぶりとなった今回ですが、前回のまとめも一緒にいかがでしょう。
参照記事 : 売れるWebサイトは、第一印象が9割？最新デザイン事情39選
参照記事 : アイデアの宝庫、すごい最新Webデザイン40個まとめ
参照記事 : 要注目の最新Webデザイン見本サイト34選まとめ
Adobe Stockを無料でお試し
画像、イラスト、ミュージックなど、体験期間中に10点無料で入手できます。
