Webデザイン独学の参考アイデアに!話題の最新ウェブサイト46個まとめ

home_-_mollydooker_wines

 

この記事では、Web制作アイデアに困ったら参考にしたい最新ウェブデザイン46個をまとめてご紹介します。

 

世界中のトップクリエイターによる、最新鋭のデザイン技術を駆使したサンプルを確認しながら、レイアウトや配色、フォントの選び方、アニメーションの実装など、今後のデザイン制作で検討できる、実用的なデザインアイデアを見つけてみましょう。

 

 

絶賛進化中!参考にしたい最新Webサイトデザイン46個まとめ

 

Robin Noguier

制作実績をまとめたフラン人フリーランサーのポートフォリオ。画面左下に各サイトの詳細をビデオ動画で紹介、スクロールに応じてユラユラと揺れるカルーセル、ロゴのマイクロインタラクション、ユニークなスライド式ココンテンツバーの表示など、参考にしたいたくさんの機能が実装。

ueno-1

 

 

 

Modern Recovery

アルコールとの付き合い方をイラストと、元アルコール依存症のひとのインタビューを交えて紹介する新しい試み。

modern-recovery

 

 

 

Nolii

用途によって組み合わせて利用できるスマホケースのランディングページ。使い方を動画で見せることで、プロダクトの詳細が手にとるようにわかります。

nolii

 

 

 

Project Turntable

電源ボタンを押すとターンテーブルが周りだし、曲が実際にされます。ボリュームや曲の選択などができ、すごいのがすべてをコード不要のWebサイトビルダー、Webflowで作成されていること。

project-turntable

 

 

 

Fabric of America

世界を変えるイノベーターたちの「声」を集めてできたアメリカンフラッグ。各サムネイルにマウスホバーすると、メッセージが再生されます。

fabric-of-america

 

 

 

Pioneer Plants

信州伊那谷のアカマツで作った軽くて折りたためる無垢の家具の公式サイト。ラフなイラストと手描き文字が、ブランドイメージとも見事にはまっています。

pioneerplants

 

 

 

チワワnowa

チワワのための特化した情報提供を行っているサイトで、ページの随所に犬好きにはたまらない仕掛けも。

chihuahua

 

 

 

Superfood Gin

カラフルでポップな配色で統一されたイラストやフォント、カラーパレットなど、オーガニックでナチュラルな雰囲気を表現しています。

superfood-gin

 

 

 

Highcourt

ラインアートに細かい控えめなアニメーションを追加したことで、フォーカル・ポイントをうまく活用したレイアウト。サウナやトレーニングスタジオ、ワークスペース、ラウンジを活用できる、新しい形のレジャースタイルを提案しているニューヨークのコアワーキングスペース。

highcourt

 

 

 

ÆBELE INTERIORS

余白スペースをたっぷり確保した、ミニマルですっきりとしたページデザインに、ページスクロールにあわせて表示される、まるで手書きしているような筆記体エフェクトにも注目。

aelele-intrriors

 

 

 

SDU

十字キーでロボットを操作して、ページ内のさまざまなキャラクターを訪ね歩く体験型ウェブサイト。まさに未来。

sdu

 

 

 

Your World Your Way

ニュージランドにある大学の公式ホームページ。入学することの利点を、分かりやすい3Dイラストをつかって、インタラクティブに紹介しています。

your-world-your-way

 

 

 

Folklore

ダークテーマのウェブサイトの参考に。文字テキストのシンプルで、効果的なホバーエフェクトやトレンドんの書体えらび。

folklore

 

 

 

Gusto Play 2

gusto-play2

 

 

 

Revista El Duende

revista-el-duende

 

 

 

Witness to History Keepers of Memory

歴史の悲しいできごとにスポットを当て、現存する生存者のインタビューをインタラクティブにまとめています。

witness-to-history

 

 

 

Riffyn

メディカル、医療関係のウェブサイト制作の参考。青色をベースとした落ち着いた、信頼感のもてる配色に、伝えたいメッセージや内容をセクションごとに簡潔にまとめています。

riffyn

 

 

 

Bien Fonde

黄色をアクセントカラーに、レイヤーの重なり方に工夫を凝らしたレイアウト。サンセリフ書体がシンプルでおしゃれ。

bien-fonde

 

 

 

Maggie Rose

パステルカラーの落ち着いた配色に、やや細めの高級感のあるセリフ書体、美しい写真素材が見事に組み合わさったデザイン。

maggie-rose

 

 

 

Celebrating 10 Years with Blind Barber

ブランドの10年間の道のりを、スクロールするだけで楽しめる体験型ストーリーテリング形式で紹介したい特別サイト。

celebrating-10-years-with-blind-barber

 

 

 

Ikea Catalogue 2021

北欧スウェーデン発祥の世界最大の家具メーカー、Ikeaが公開中の2021年の商品カタログ。3Dアニメーションを活用し、鳥となったカタログを操ります。

ikea-catalogue-2021

 

 

 

Gucci Bloom

光を照らしながら迫ってくる花を撃ち落とし、コスメグッズを獲得するオンラインゲーム。はじめてでも簡単な操作性で、はまってしまう可能性大。

gucci-bloom

 

 

 

Gucci: Off The Grid

環境に配慮した100%リサイクル可能な素材のみを扱う、Gucciの新コレクションの特設ランディングページ。簡単な質問に答えながら、自分だけのツリーハウスを建てていきます。

gucci-off-the-gird

 

 

 

Gliath Entertainment

90年代のポップカルチャーをサイトに活かしたつくりで、鮮やかな配色カラーパレットやオリジナルのイラストなど、キャッチーな要素が満載。

goliath-entertainment

 

 

 

808303 Studio

RolandのTR-808ドラムマシーンとベースシンセサイザーTB-303をデジタルで体感できるエミュレーター。マウスカーソルで直感的に音色やBPMを変更できる本格的なつくり。中毒性が高い、体験型ウェブサイトのお手本。

808303studio

 

 

 

Una Europa

8つのヨーロッパの大学の連合Una Europaの公式ページ。三角やサークル円といったシンプルな図形をつかい、視線をうまく誘導します。

una-europa

 

 

 

Chris Wilcock

chris-wilcock

 

 

 

Brews & Grooves

レトロ感を演出する美しい配色カラーパレットや、エレガントで落ち着いたサンセリフ書体の選び方の参考に。

brews-grooves

 

 

 

Kirk Whayman

まるで本物のようなガラスのキューブが背景を透かしてみせる、目を引くヘッダーデザイン。制作実績ページにも、スクロールに合わせて画像が歪むエフェクト効果など、多彩なアニメーションを実装しています。

kirk-whayman

 

 

 

Mario Sanchez Maselli

制作実績を完結にまとめた個人ポートフォリオサイト。ヘッダーに表示された巨大タイポグラフィーと細かいアニメーションの組み合わせに注目。

mariosmaselli

 

 

 

Discovered Wildfoods

落ち着いたフレンドリーな配色に、可読性の良いサンセリフ書体、スクロールに合わせたパララックスエフェクトなど、さまざまな機能を盛り込んでいます。

discovered-wildfoods

 

 

 

Fledge

2020年に入りよく見かけるようになった、巨大タイポグラフィーと鮮やかな配色を活用したサイトデザイン。カルーセルの特殊な動きにも注目です。

fledge

 

 

 

Atelier.M

グリッドを無視した柔軟なレイアウトに、高級感のある配色とサンセリフ書体の組み合わせが、ブランドイメージと見事にマッチ。シンプルながら、たくさんの写真を効果的に魅せたいときの参考に。

atelierm

 

 

 

Wonderland

平面的なデザインの一部に3Dデザインを追加することで、圧倒的な奥行き感を表現したサンプル例。シンプルなレイアウトのおかげで、作品がより輝く仕様。

wonderland

 

 

 

When We Were Kids

スクロールに応じてじわりと縦に伸縮しながら表示されるサムネイルは、思わずページを下までスクロールしたくなるテクニック。

when-we-were-kids

 

 

 

Dark Netflix Official

Netflixの人気シリーズの登場人物の相関図をインタラクティブにまとめた特設サイト。各キャラクターをクリックすると、ストーリーの流れを確認できます。

dark-official-page

 

 

 

Simon Daufresne

マウススクロールに合わせて、サムネイル画像がひらりと立体的に切り替わり、シームレスなページ遷移を実現するアニメーションが素敵。

simon-daufrensne

 

 

 

House of Maserati

高級車マセラティの特別サイトで、ユーザーが視点を変更したり、カスタマイズが可能な、パーソナライズを重要視したサイトデザイン。

house-of-maserati

 

 

 

Alessandro Romangnoli

スクロールに合わせて動くカルーセルスライダー、実は対角線状にアニメーション展開します。

alessandro-romagnoli-ph

 

 

 

Maison Louis Marie

まるで光が反射しているような感覚のエフェクトをヒーローヘッダーに実装し、ブランドイメージにもうまくマッチ。エレガントで美しいサンセリフ書体も素敵。

maison-louis-marie

 

 

 

BMS United

bms-united

 

 

 

KIKK Festival 2020

新型コロナウイルスの影響でイベントは中止になってしまいましたが、さまざまなオブジェクトをページ全体に散りばめたシュールなランディングページ。

kikk-festival

 

 

 

Virgin Hyperloop

飛行機よりも新しい移動手段として開発中のHyperloopのプロモーションサイト。最高速度1,080キロ/時での走行が可能になるそう。

virgin-hyperloop

 

 

 

Kolor

kolor

 

 

 

Lucciano’s

美味しそうなアイスクリーム・ジェラートを手作りする工程を、フルスクリーン動画のヒーローヘッダーで展開。ログと重ねることで、ブランディング効果も抜群です。

luccianos

 

 

サムネイル@ : Mollydooker Wines