Webデザイナーが参考にしたい、世界の最新ウェブデザイン34個まとめ

I-Killed-Custus

 

この記事は、世界中からセレクトしたWebデザイン制作の参考にしたい最新サイトリンク集です。

 

国内外を問わず集められた良質なサイトは、デザイン性はもちろん配色選びやレイアウトの見本にも最適。

 

2022年の人気デザイントレンドも意識した、素敵なWebサイトを中心にまとめています。

 

 

Webデザイナーが参考にしたい、世界の最新ウェブデザイン35個まとめ

 

Norwegian Soda Company

ブランドのテーマカラーでもある黄色を見事に反映した、参考にしたい配色カラーパレットが美しいデザイン。

Norwegian_Soda_Co_

 

 

 

Gloutir

ピンクカラー好きにおすすめしたい、フラミンゴのイラストがかわいいサイト。コントラストの強いセリフ書体が、サイトデザインを際立たせます。

gloutir

 

 

 

Steffie de Leeuw

ヴィンテージなボタニカルイラストが印象的なサイトデザインで、レイヤーの重なり具合やパララックスエフェクト、クラシカルなセリフ書体などを使用。

steffiedeleeuw

 

 

 

moooi

物語を伝えるようなコンテンツの表現テク「ストーリーテリング」手法によって、インテリアのトータルでの提案、販売を促進するランディングページ。実際に商品も購入できます。

moooi

 

 

 

Sea Mirror

Sea_Mirror

 

 

 

BryBry Visuals

画面上でマウスを動かすだけでコンテンツが切り替わり、制作実績などをまとめて見せたいときにも魅力的。

BryBry_–_Visuals_

 

 

 

玉川釉薬

絶妙な淡い配色、タイル状に並べられた画像レイアウト、絶えず変化するグラデーションをつかった背景など、細部までこだわったデザインが素敵。

tamagaway

 

 

 

まくらのキタムラ

ページスクロールに合わせて、さまざまなベッドでの過ごし方をインタラクティブに見せるヘッダーが印象的なウェブサイト。水平スクロールも取り入れ、思わず最後までスクロールしてしまう秀悦デザインで、落ち着いた配色も素敵。

makura-no-kitamura

 

 

 

Barうきは

シンプルになりがちな白の背景に、木漏れ日のような淡い影がユラユラとアクセントになったデザイン。余白スペースもたっぷり確保。

bar-ukiha

 

 

 

Wanderful Chalet

フランスにあるホテルの紹介ページは、ウェブサイトを閲覧する時間によってヘッダーの景色が変わるという面白い仕掛けも。

wanderful-chalet

 

 

 

House of Gucci

マウススクロールの動きに合わせて、金色の鍵がくるくると回転しながらコンテンツ全体を追従することで、いつの間にかページ最下部まで進んでしまうデザイン。

house-of-gucci

 

 

 

Land of Ride

世界中での冒険を存分にたのしむ、これまでになかった旅行ツアーの提案。各ツアー毎に異なるレイアウトが採用されていて、まるで雑誌をめくっているような感覚にさせてくれます。

Land_of_Ride___Land_of_Ride

 

 

 

Awwwards Conference

動くイラストが目を引くレトロな配色カラーパレットに、柔軟なレイアウト組みを参考にしたいカンファレンスの特設ランディングページ。

Awwwards_Conference

 

 

 

Antonio Segurado

フォントの太さやサイズなどを動きをつけて変化させることで、自然と視線を集めることができるアニメーションをつかったテクニック。太めのボーダ線や鮮やかなイラストなど、トレンディーなつくりも参考にできそう。

Segurado_—_Illustrator__Designer__and_Animator

 

 

 

Study Hall

レトロな配色やオシャレな書体えらびなど、シンプルでミニマルながらコンテンツにうまく注目を集めることができるレイアウト。ローディング画面のスマイルマークも◎。

Study-Hall-Design-Studio

 

 

 

Life Label

家を、暮らしをもっとエンターテインメントに楽しむための記事をお届け中。サムネイルにSVGマスクで縁取るなど、遊び心ビンビンなサイトデザイン。

life-label

 

 

 

ウポポイマガジン

アイヌ文化を見て!触れて!学ぶこれまでになかったタイプのポータルサイト。雑誌のような楽しいコンテンツの並べ方やレイアウトにも注目です。

upopoi-magazine

 

 

 

Jean Michel Basquia

28歳の若さでこの世を去った、20世紀における最も重要なアメリカ人アーティスト、バスキア。彼の作品や歴史をスクラップブックのようにまとめた特設ページ。

jean-michel-basquia

 

 

 

Nathan Riley

制作した作品を画面いっぱいに並べ、スピードの異なるパララックスエフェクトをグリッド毎に採用。無限スクロールで作品をいつまでもたのしむことができます。

Nathan_Riley_—_Portfolio__22

 

 

 

Sougen

3Dの世界観にいつの間にか入り込んだような、不思議な感覚を体験できるメタバースを題材にしたサイト。

Sougen

 

 

 

Jantana Hennard

絶えず動きのある背景にマウスで触れると、波動のような中毒性たっぷりな動きが追加されるデザイン。

Jantana_Hennard_-_Portfolio

 

 

 

Persol Work Style Awards 2022

鮮やかなグラデーションカラーとオーガニックなBlobシェイプをページ全体に利用し、レイヤーの重なりによって奥行き感を演出したデザイン。
PERSOL_Work-Style_AWARD_2022

 

 

 

Sophias

ネイビーとクリーム色の配色がブランドカラーとマッチし、美しい店内の様子を撮影した写真で魅力をたっぷり伝えるシンプルレイアウト。高級感のあるセリフ書体が利用されています。

sophias

 

 

 

re_

夕方5時までに注文すれば、次の日には届けてくれるロサンゼルス発のオーガニックなフードのデリバリーサービス。

re_

 

 

 

FruOats

植物由来のシンプルな素材をつかった美味しいお菓子の販売サイト。清潔感たっぷりで陽気なオレンジ色がおしゃれ。

oatmeal-fruoats

 

 

 

Cowboy: Ready for the ride

ページ上でマウスを長押しすると、サンフランシスコやシカゴ、マイアミなどさまざまなアメリカの街を、音で体験ができる新しい試み。

Ready_for_the_ride_-_Cowboy__United_States_

 

 

 

Garden Eight

癖のあるフォントを見事に生かし、3Dイラストで描かれた動物のキャラクターたちがふわふわと浮遊したヒーローセクションが注目を集めます。

Garden_Eight___About

 

 

 

Circus Shanghai

スクロールに追従しながら変化するアニメーションイラストがインパクト大。大胆な配色カラーパレットと信頼感のあるフォント選びも参考にしたいところ。

circusshanghai

 

 

 

Sizzer

アムステルダムにある音楽メディア向け代理店で、ページ上部のナビメニューにカーソルを合わせると、派手なネオンカラーがグリッチ状に点滅します。

sizzer

 

 

 

MekaVerse

ページ状を自由に動き回る3Dグラフィクを随所に利用し、未来を感じるNFTサイト。

makaverse

 

 

 

Philosophical Foxes

philosophical-foxes

 

 

 

ThoughtLab

マウスの動きに追従するように、七色に輝くシャボン玉が画面を動き回り、コンテンツに応じて画像を透けて表示させるなど、インタラクティブな体験型サイト。

thoughtlab

 

 

 

The Race by Montblanc

矢印キーを操作しながら最速タイムを目指して競うオンライン・レーシングゲーム。光のラインに沿って走ることでスピードアップ。

Montblanc_Legend_Red_-_The_Race

 

 

およそ2ヶ月前の前回まとめでもそうでしたが、メタバースやNFT関連のウェブサイトが増えており、3Dデザイングラデーションレトロスタイルも人気ですね。

Webデザインに携わるすべての人へ!アイデアの参考になる世界の最新Webサイト37選

 

サムネイル@ : A simple guide to houseplants for the horticulturally challenged from Mallard and Claret – I Killed Cactus