この記事では、デザイン制作のインスピレーションや参考にしたい、2020年に入って注目を集めている最新ウェブサイトデザイン37個をまとめています。
2019年の暮れに公開されたサイトも含み、多彩なアニメーションや鮮やかな配色カラーパレット、ストーリーテリング手法など注目のスタイルを揃えました。また、高級感のあるサイトデザインが特に多いシリーズとなりました。
いまWebがすごい！参考にしたい話題の最新ウェブデザイン37個まとめ
イギリス王室からの離脱や、王室を連想させる「サセックス・ロイヤル」の商標登録など、なにかと話題となっているサイト。閲覧できるのは今のうちかも。
自分の聴いている音楽、ジャンルをもとに、愛犬などのペットに合ったプレイリストを自動生成してくれるオンラインサービス。
毎年チケット販売とともに完売の超人気音楽フェスCoachellaの公式ページ。手書きイラストでイベント会場周辺の様子を描いたヒーローイメージが素敵。
事業に集中できる環境をつくり、会社の成長を支える広島の会計事務所の公式ページ。フレンドリーな配色やイラストが素敵で、分かりやすくポイントを伝えています。
暮らしを豊かにする魅力があふれる戸建てに限定し、紹介している福岡の不動産サイト。
まるで絵本を読んでいるような感覚でコンテンツを進めるウェブサイト。手書きイラストを使い、随所にアニメーションを盛り込んだ体験型サイト。
世界最大級の写真ストックサイトで検索されたキーワードから分析する、2020年のクリエイティブに関するトレンド予想を、各コンテンツごとにユニークなグラフィックと一緒にまとめています。
2019年の春に訪れた日本の風景を外国人らしい目線で撮影し、オシャレなプロジェクトページとして完成させています。日本中回ってますね。
スクロールを続けることでコンテンツが進んでいく、ストーリーテリング手法を採用したプロダクトページ。
クリスマスのギフトシーズンに向けて作成された特設サイト。かわいいクマのぬいぐるみをつかって、各商品を紹介しており、実際に購入することも可能。
もしものときに備える防災キットで、鮮やかなオレンジ色のブランドカラーをサイト全体に利用しています。
雄大で美しい風景をヘッダーとフッターの背景に使用し、自然をテーマとした配色カラーパレットや手書きイラストなど参考にしたいサイトのひとつ。
カミソリの歯部分のみを交換する、新しいカタチの商品を提案するページで、ブランディングに合わせて配色やフォント選びにも注目です。
東京、台東区にあるデザイン事務所の公式サイト、スクロールに応じてコンテンツの画像が歪ませたり、ユニークなホバーエフェクト、マウスカーソルのカスタマイズなどオリジナリティあふれるデザイン。
画面全体に無造作に並べられたサムネイル画像をクリックすると、これまでに撮影した写真をプロジェクトごとに閲覧できます。
環境問題に配慮した下着づくりを目指したブランドで、年間レポートではさまざまな取り組みについて紹介されています。
UXデザインの基本についてイラスト図解で伝える体験型サイト、スクロールが止まりません。
グリッドを意識しない自由なレイアウトに、鮮やかな配色や考え抜かれたアニメーションが魅力的なポートフォリオサイト。
マウスカーソルをなぞったエリアから背景の動画が見えるユニークなトップページに注目です。
岐阜にあるお菓子屋さんで、まるで森に迷い込んだような独自の世界観を演出した公式サイト。
波がユラユラと動く様子を背景とスライダーに採用し、商品とウェブサイトの配色を一緒にすることで統一感のあるデザインに。
水彩絵の具でペイントしたようなローディングアニメーションにはじまり、水平スクロールで展開するコンテンツやデザイン性の高いフォントや配色選びなどセンス抜群なウェブサイト。
\
マウスカーソルに合わせて画像がぐにゃりと曲がるグリッチ風エフェクトに、なめらかすぎるアニメーションを随所に採用したポートフォリオサイト。
映像プロダクションらしく、コミカルで独創性の高いイラストアニメーションでできたポートフォリオサイト。
かわいい手書きイラストとなめらかなアニメーションが目を引く、ストーリーテリング手法をつかったウェブサイト。控えめで落ち着いた配色も素敵。
Glasgow International Festival
スコットランドで4月に行われるビジュアルアートのイベント紹介ページ。ページを縦半分に２分割したスプリットレイアウトを採用。
ダークな背景に鳥が羽ばたいているようなアニメーションをつかったインタラクティブなデザイン。アンティークなディスプレイ書体を採用している点もポイント。
文字と画像を中心に、使いやすさにこだわったわかりやすいUIデザインなど、サイト制作のお手本にしたいポートフォリオ。
余白スペースたっぷりに配置されたセリフ書体のフォントが、美しくスタイリッシュな雰囲気を演出した、フランス拠点のフォトグラファーのポートフォリオ。
画像や文字テキスを重ねるレイアウトに、スクロールに応じたパララックスやズームなどのアニメーションを採用した、高級感のあるエレガントなサイトデザイン。
コンテンツがマウス操作に応じたアニメーションで切り替わり、思わずページを下までスクロールしたくなってしまいます。
水面のように画像が歪みながら切り替わるイメージスライダーを、フルスクリーンで採用したショッピングサイト。
スイスにある高級リゾートホテルの公式ホームページ。エレガントなセリフ書体に、ゴールドとむらさき色を基調としたラグジュアリー感満点なサイトデザイン。
マウスカーソルの動きに合わせて中毒性たっぷりのアニメーションをつかったブルータリズム・デザイン。
不思議なイラストスタイルのクリスマスカードを送信できるサービス。もらったらずっとする、もはやホラーのようなイラストも。
2019年のウェブデザインも振り返ろう
以下は、２０１９年にかけて特に話題となったウェブサイトをまとめたエントリーとなります。2020年のトレンドにもつながる部分が多いため、一度目を通しておくと良いかもしれません。
サムネイル@ : Plink – Create payment links and send them to your clients
