いまWebがすごい!参考にしたい話題の最新ウェブデザイン37個まとめ

plink

 

この記事では、デザイン制作のインスピレーションや参考にしたい、2020年に入って注目を集めている最新ウェブサイトデザイン37個をまとめています。

 

2019年の暮れに公開されたサイトも含み、多彩なアニメーションや鮮やかな配色カラーパレット、ストーリーテリング手法など注目のスタイルを揃えました。また、高級感のあるサイトデザインが特に多いシリーズとなりました。

 

 

いまWebがすごい!参考にしたい話題の最新ウェブデザイン37個まとめ

 

Sussex Royal

イギリス王室からの離脱や、王室を連想させる「サセックス・ロイヤル」の商標登録など、なにかと話題となっているサイト。閲覧できるのは今のうちかも。

sussex-royal

 

 

 

Spotify for Pets

自分の聴いている音楽、ジャンルをもとに、愛犬などのペットに合ったプレイリストを自動生成してくれるオンラインサービス。

spotify-for-pets

 

 

 

Coachella

毎年チケット販売とともに完売の超人気音楽フェスCoachellaの公式ページ。手書きイラストでイベント会場周辺の様子を描いたヒーローイメージが素敵。

coachella

 

 

 

あおば会計事務所

事業に集中できる環境をつくり、会社の成長を支える広島の会計事務所の公式ページ。フレンドリーな配色やイラストが素敵で、分かりやすくポイントを伝えています。

aoba-kaikei

 

 

 

きりんの戸建売買

暮らしを豊かにする魅力があふれる戸建てに限定し、紹介している福岡の不動産サイト。

fukuoka-kodate

 

 

 

The Bear and His Scarf

まるで絵本を読んでいるような感覚でコンテンツを進めるウェブサイト。手書きイラストを使い、随所にアニメーションを盛り込んだ体験型サイト。

the-bear-and-his-scarf-1

 

 

 

2020 Creative Trends

世界最大級の写真ストックサイトで検索されたキーワードから分析する、2020年のクリエイティブに関するトレンド予想を、各コンテンツごとにユニークなグラフィックと一緒にまとめています。

2020-creative-trends

 

 

 

Monokai

2019年の春に訪れた日本の風景を外国人らしい目線で撮影し、オシャレなプロジェクトページとして完成させています。日本中回ってますね。

monokai

 

 

 

AirPods Pro

スクロールを続けることでコンテンツが進んでいく、ストーリーテリング手法を採用したプロダクトページ。

apple-airpods-pro-1

 

 

 

MaxMara

クリスマスのギフトシーズンに向けて作成された特設サイト。かわいいクマのぬいぐるみをつかって、各商品を紹介しており、実際に購入することも可能。

maxmara

 

 

 

Ready Judy

もしものときに備える防災キットで、鮮やかなオレンジ色のブランドカラーをサイト全体に利用しています。

readyjudy

 

 

 

LegalizeWeed

legalise-regulate

 

 

 

Meatable

雄大で美しい風景をヘッダーとフッターの背景に使用し、自然をテーマとした配色カラーパレットや手書きイラストなど参考にしたいサイトのひとつ。

meatable

 

 

 

Leaf

カミソリの歯部分のみを交換する、新しいカタチの商品を提案するページで、ブランディングに合わせて配色やフォント選びにも注目です。

leaf

 

 

 

Helixes

東京、台東区にあるデザイン事務所の公式サイト、スクロールに応じてコンテンツの画像が歪ませたり、ユニークなホバーエフェクト、マウスカーソルのカスタマイズなどオリジナリティあふれるデザイン。

helixes-site

 

 

 

David William Baum

画面全体に無造作に並べられたサムネイル画像をクリックすると、これまでに撮影した写真をプロジェクトごとに閲覧できます。

david-william-baum-website

 

 

 

Organic Basics.

環境問題に配慮した下着づくりを目指したブランドで、年間レポートではさまざまな取り組みについて紹介されています。

organicbasics

 

 

 

Defeat B.O.C.O.

UXデザインの基本についてイラスト図解で伝える体験型サイト、スクロールが止まりません。

defeatboco-1

 

 

 

Elena Saharova

グリッドを意識しない自由なレイアウトに、鮮やかな配色や考え抜かれたアニメーションが魅力的なポートフォリオサイト。

elena-saharova-portfolio

 

 

 

Furrow Studio

マウスカーソルをなぞったエリアから背景の動画が見えるユニークなトップページに注目です。

furrow-studio

 

 

 

Gin no Mori

岐阜にあるお菓子屋さんで、まるで森に迷い込んだような独自の世界観を演出した公式サイト。

ginnomori

 

 

 

Helias

波がユラユラと動く様子を背景とスライダーに採用し、商品とウェブサイトの配色を一緒にすることで統一感のあるデザインに。

helias

 

 

 

Hello Today

水彩絵の具でペイントしたようなローディングアニメーションにはじまり、水平スクロールで展開するコンテンツやデザイン性の高いフォントや配色選びなどセンス抜群なウェブサイト。

hello-today-1\

 

 

 

Jesper Landberg

マウスカーソルに合わせて画像がぐにゃりと曲がるグリッチ風エフェクトに、なめらかすぎるアニメーションを随所に採用したポートフォリオサイト。

jesper

 

 

 

Longshot Features

映像プロダクションらしく、コミカルで独創性の高いイラストアニメーションでできたポートフォリオサイト。

longshotfeatures

 

 

 

Madame Turfu

かわいい手書きイラストとなめらかなアニメーションが目を引く、ストーリーテリング手法をつかったウェブサイト。控えめで落ち着いた配色も素敵。

madame-turfu

 

 

 

Glasgow International Festival

スコットランドで4月に行われるビジュアルアートのイベント紹介ページ。ページを縦半分に2分割したスプリットレイアウトを採用。

glasgow-international-festival

 

 

 

Nightingale

ダークな背景に鳥が羽ばたいているようなアニメーションをつかったインタラクティブなデザイン。アンティークなディスプレイ書体を採用している点もポイント。

nightingale

 

 

 

Obys

文字と画像を中心に、使いやすさにこだわったわかりやすいUIデザインなど、サイト制作のお手本にしたいポートフォリオ。

obys-agency-website

 

 

 

Oliviero Photographie

余白スペースたっぷりに配置されたセリフ書体のフォントが、美しくスタイリッシュな雰囲気を演出した、フランス拠点のフォトグラファーのポートフォリオ。

oliviero-photographie-1

 

 

 

Pantheone

画像や文字テキスを重ねるレイアウトに、スクロールに応じたパララックスやズームなどのアニメーションを採用した、高級感のあるエレガントなサイトデザイン。

pantheone-audio-website

 

 

 

Red Company

コンテンツがマウス操作に応じたアニメーションで切り替わり、思わずページを下までスクロールしたくなってしまいます。

red-company-1

 

 

 

Talia

水面のように画像が歪みながら切り替わるイメージスライダーを、フルスクリーンで採用したショッピングサイト。

talia-ecommerce

 

 

 

Ultima Gstaad

スイスにある高級リゾートホテルの公式ホームページ。エレガントなセリフ書体に、ゴールドとむらさき色を基調としたラグジュアリー感満点なサイトデザイン。

ultimagstaad-site

 

 

 

Unreal

マウスカーソルの動きに合わせて中毒性たっぷりのアニメーションをつかったブルータリズム・デザイン。

unreal

 

 

 

Weird Christmas

不思議なイラストスタイルのクリスマスカードを送信できるサービス。もらったらずっとする、もはやホラーのようなイラストも。

weird-christmas

 

 

2019年のウェブデザインも振り返ろう

 

以下は、2019年にかけて特に話題となったウェブサイトをまとめたエントリーとなります。2020年のトレンドにもつながる部分が多いため、一度目を通しておくと良いかもしれません。

【総まとめ】2019年印象に残った世界のベストWebデザイン厳選50個

 

サムネイル@ : Plink – Create payment links and send them to your clients