Advertisement

flyingcat

 

この記事では、今後のWeb制作で参考にしたい最新Webサイトデザイン50個をまとめてご紹介します。

 

世界中の優れた実例サンプルを実際に見ることで、印象や配色、レイアウト、書体などの新しいアイデアや発想を手に入れましょう。

 

2020年に注目されているデザイントレンドも盛り込んだサイトを中心に、見ているだけで楽しくなる体験型のインタラクティブなデザインが増えています。過去のサンプル例と一緒にいかがでしょう。

 

この記事では、デザイン制作のインスピレーションや参考にしたい、2020年に入って注目を集めている最新ウェブサイトデザイン37個をまとめています。 20
当サイトでは、定期的に新しく公開された最新Webサイトデザインをまとめていますが、今回はいつもとは異なり、2019年のベストWebデザイン50個を厳選、ピックアップ

 

 

Web参考アイデアに!注目の最新ウェブデザイン50個まとめ

 

Yoichi Kobayashi

燃えるドクロで海外でも話題となっている、日本人Webデベロッパーのポートフォリオサイト。コンテンツを切り替えるたびに、まるで紙が燃えているようなエフェクトが。

yoichi-kobayashi

 

 

 

空とぶネコ合同会社

オリジナリティあふれるアニメーション付きイラストをページ全体に利用したユニークなデザインが魅力的なサイト。

flyingcat

 

 

 

Emol Work

ストーリーテリング手法を用いた分かりやすい図解イラストの他、スライドが少しだけグニャッと曲がったようなアニメーションが印象的なサイト。

emol-work

 

 

 

3.14 ジュニアエリート

かわいい手書きイラストでコンテンツを整理することで、統一感のあるページデザインを演出しています。動気のあるヘッダー見出しも素敵。

314je-junior-elite

 

 

 

Zenly

モバイルアプリの使い方を多彩なアニメーションを利用して紹介するランディングページ。3Dオブジェクトのカラフルでトレンディーなデザインに。

zenly

 

 

 

Opening New Horizon – Digital Horizon Ventures

digital-horizon-ventures

 

 

 

PANAMÆRA

ディレクションを行った制作実績の動画を、フルスクリーンで表示することで、圧倒的なブランディングに。

panamaera

 

 

 

Cellular Agriculture Society

スクロールに応じて形を立体的に変化させながら、コンテンツが遷移するストーリーテリングを採用したウェブサイト。

cellular-agriculture-society

 

 

 

Open Platform

青とむらさき色を基調とした鮮やかなグラデーションカラーを背景の写真に重ね、アニメーションさせたヒーローヘッダーが印象的。

op-open-platform

 

 

 

Kota

ロンドンにあるデザイン事務所は、トレンドのグラデーションカラーとアニメーションを見事に利用したヒーローイメージが特徴的。

kota

 

 

 

Mango Media

まさにマンゴーカラーをコンセプトに作成されており、グラデーションアニメーションなど個性をうまく演出したサイト。

mago-media

 

 

 

Mad River

mad-river

 

 

 

Flowers

スクロールに応じたスライダーアニメーションが、まるで花が動いているような錯覚に。圧倒的な写真スタイルは必見。

flowers

 

 

 

Ultima Corfu

ultima-corfu

 

 

 

Calexo

自由なレイアウトにカラフルで鮮やかな配色、ユニークなナビゲーションなどブランディングともマッチしたスタイルが素敵。

calexo

 

 

 

56k Cloud

2020年のウェブトレンドのひとつ、イラストレーションを全面に利用したサイトで、スクロールに応じたイラストの表示などアニメーションがポイントに。

56k-cloud-1

 

 

 

Birch Community

ページの随所に配置されたミニチュア人形。スクロールを止めるとなんと動き出します。

birchcommunity

 

 

 

Incharge

incharge

 

 

 

The Carbonation

トニックウォーターの泡を表現したアニメーションをページ全体に利用したモノクロデザイン。

carbonation

 

 

 

Socialclub

目を引くヒーロー動画にはじまり、グリッドを無視した自由なレイアウトは、2020年に注目したいスタイルのひとつ。カスタマイズされたマウスカーソルも◎。

socialclub

 

 

 

1917 Intro the Trenches

映画のオフィシャル公式サイトは、マウススクロールの地図上を歩き回りながら、映画のストーリーを知る体験型ウェブサイト。

1917-intro

 

 

 

Acura Beat That

歴代の車に乗ってドライブコースを自分の操作で走破するインタラクティブなゲームを体験しましょう。

acura-beat-that

 

 

 

Vogue 80s Fever

ネオン色の配色やグリッチエフェクトなど、80年代のレトロなスタイルを通してファッションを振り返るコンテンツ。

80s-fever

 

 

 

Our Stories in STEM

マウスの動きに合わせて、中央に配置されたロゴを崩して自由に動かすことができます。モダンレトロな配色カラーパレットにも注目。

our-stories-in-stem

 

 

 

Bite TOothpates Bits

bite-toothpaste

 

 

 

Brother Film Co

brother-film-co

 

 

 

Bruno Ortolland

コンテンツが切り替わるごとに、ユニークな3D動物キャラクターが立体的なカンバスに登場します。

bruno-ortolland

 

 

 

Circus Inc

コンテンツと余白のバランスが絶妙なレイアウトで、スクロールに合わせてテキストエフェクトも効果的。

circus-inc

 

 

 

Rouser Lab

マウスをスクロールしていくと、本物そっくりのシャボン玉がどんどん大きくなり、最後はパンと弾けます。

rouser

 

 

 

mercenaire

フルスクリーンで表示される動画が印象的な、フランス、パリにあるタレント事務所の公式ページ。

mercenaire

 

 

 

大阪芸術大学大学院

絶え間なく変化し続ける流動的なアニメーションをヒーローイメージ全体に利用しています。

osaka-geidai-grad

 

 

 

Nekoshoku

おいしさを追求して、水分は100%ミルクのみ。猫型のかわいいパンがいかがでしょう。

nekoshoku

 

 

 

Olive Village

olivevillage

 

 

 

ch.books

旅とアートがテーマの新刊書店は、長野県にあるお店。トップに戻るボタンもチャーミング。

ch-books

 

 

 

pen 特別編集号

思わずクリックしたくなるグリッドレイアウトに囚われない自由な配置が印象的だったメディアサイト。

pen-special

 

 

 

Happy Eggs

オーガニックで無農薬の卵を販売しているサイトは、まるで卵を溶いたようなユラユラエフェクトを随所に採用しています。

happyegg-1

 

 

 

Connect homes

コンテンツをつなげて家をつくるをコンセプトにしたサイトで、コンテンツごとに色分けすることで、ページを最後まで読み進めたくなる工夫がされています。

connect-homes

 

 

 

Pest Stop Boys

ブランドイメージに合わせたカラフルな配色が特長のページデザイン。

pest-stop-boys

 

 

 

Snooze Eatery

雑誌のようなレイアウトでコンテンツを整理、まとめたレストランの公式サイト。どんなお店が思わず言ってみたくなる仕掛けがたくさん。

snooze-am-eatery

 

 

 

Madies

madies

 

 

 

Throwback Music

オンライン型ジュークボックスとでも言えるこのサイトは、ずらりと並んだアーティストを選ぶと、代表曲や経歴などのディスコグラフィを確認できます。

throwback-music

 

 

 

IEA: International Energy Agency

international-energy-agency

 

 

 

Odunpazar Modern Museum

odunpazar-modern-museum

 

 

 

James Warner

マウスに合わせて視線が追いかけてくる、立体的に動く未来的なヘッダーデザイン。

james-warner

 

 

 

Lecapell

はじめて訪れたユーザーにも分かりやすい、シンプルでクリエイティブなレイアウトが素敵。フルスクリーン表示のナビメニューも美しいアニメーションが特長。

lecapell

 

 

 

Made by Field

サムネイル画像の大きさに規則性を持たせることで、シンプルでも魅力的なレイアウトを実現したミニマルなウェブデザイン。

made-by-field

 

 

 

Viens La

viens-sl

 

 

 

Wealth Simple

3枚の金貨がコロコロと転がるアニメーションをヒーローヘッダーに活用することで、訪れたユーザーの注目をぐっと掴みます。

wealthsimple

 

 

 

Wirewerks

複雑になりがちな情報やデータを、余白スペースたっぷりのレイアウトで並べることで分かりやすくなっています。

wirewerks