Advertisement

 

当サイトでは、定期的に新しく公開された最新Webサイトデザインをまとめています。今回は、2021年のベスト・オブ・Webデザイン50個を厳選、ピックアップしご紹介します。

 

配色えらびやレイアウトの参考にぴったりで、2022年予想の人気デザイントレンドも意識した素敵なWebサイトを中心にまとめています。

 

 

【総まとめ】2021年話題になった世界のベストWebデザイン厳選50個

 

Rockwool

トップ画面に表示されたビルをクリック、スクロールで進んでいくと、壁や床、排水管にいたるまで細部まで細かくアニメーション付きで説明する、新しすぎる制作実績の見せ方。ぜひ一度サイトを開いて体験してみましょう。

rockwool

 

 

 

Skolkovo Business District

マウスの動きに合わせて、照明を当てることで、ビルでできる影を操ったり、マウスを左右に動かし、3Dモデリングを360度回転できます。スクロールに合わせたアニメーションや、コンテンツの切り替えなど、参考にしたいポイント多数。

 

 

 

The Longest Road Out

手描きのイラスト地図をつかったローディング画面から、詳細に描かれたイギリスとアイルランドを巡る体験型ウェブサイト。ショッピング機能も違和感ありません。

the-longest-road-out

 

 

 

Niarra Travel

マウスカーソルに合わせて視点が立体的に動くヒーローデザインや縦型サムネイル画像を利用したユニークなレイアウト、山の頂上に登るフッターなどユニークさ満点。

Niarra-Travel-1

 

 

 

Singita

アフリカにあるサファリロッジの公式サイト。動画と画像を効果的に活用することで、壮大な自然を感じることができるつくりに。

singita

 

 

 

Airshifumi

カメラを起動することで、手や顔など写ったオブジェクトをイラスト化して画面に表示する、ARテクノロジーを活用したサイト。

airshifumi-1

 

 

 

Kazuki Noda Portfolio

まるで本物の木漏れ日がウェブサイトにかかっているようなエフェクトにはじまり、ブルーを基調とした落ち着いた配色、フォント選びまでセンスが光るポートフォリオサイト。

kazukinoda-1

 

 

 

Mama Joyce Peppa Sauce

ウェブサイト全体がデザインのようなホットソースの販売サイト。ページをスクロールするあいだ、ホットソースがゆらゆらと視線の周りに追従します。購入ボタンにも細かいアニメーションとテクニックが。

Mama-Joyce-Peppa-Sauce

 

 

 

Wild Souls

コンテンツの切り替わりに合わせてカラフルな背景デザインがポップな雰囲気のサイト。パッケージデザインともマッチしたフレッシュさが特長。

wildsouls

 

 

 

How many Plants

ステイホームで育てるひとも増えた観葉植物について、かわいい手書きイラストで紹介しているサイト。植物にカーソルを合わせると水をあげることができる工夫も。

How-Many-Plants

 

 

 

Polo Ralph Lauren | The Holiday Run

ロンドン、パリ、東京、ニューヨークからステージを選び、かわいいテディベアをジャンプで障害物を避けながら、コインを獲得していくミニゲーム。

polo-raph-lauren

 

 

 

212 Skate Heroes

矢印キーでスケートボードを操り、障害物をジャンプで避けながらポイントを稼ぐオンラインゲーム。ニューヨークのリアルな街の風景が描かれています。

212-heros-skate-game

 

 

 

Popcorn SyFy

画面上のディストピアな世界イラストから、SF映画に関連するものを探し、キーボードで入力し、ポイントを競うオンラインゲーム。

PopCorn-SyFy

 

 

 

Plunt

お好みの観葉植物のサイズを選択すると、スライダー形式で植物とプランターを選び、パーソナライズされた植物をお手元までお届けする新サービス。金額もその場で確認でき便利です。

pluntの画像

 

 

 

Wax Poetics

音楽情報メディアとして新しくリニューアルされた老舗音楽サイト。音楽好きにはたまらない濃い内容を紹介しています。目を引くアニメーションエフェクト。

waxpoetics-1

 

 

 

Planet of Lana

ページをスクロールするときの画像の表示アニメーションにも注目したいランディングページ。

19_planetoflana

 

 

 

La Nouvelle

コンテンツが切り替わり時に、消しゴムで消したり、ゆらゆらと水面のように揺れるなど、オーガニックな見た目を演出しています。ピンク色を中心とした落ち着いた配色も素敵。

La-Nouvelle

 

 

 

養老ミート

自社牧場をもつ飛騨牛をメインに扱う肉屋のウェブサイト。ひと目見たら忘れないインパクトのあるビジュアルはもちろん、目玉の横綱セットは、千人前百九十七kgでお値段310万円など、面白い企画とコンテンツ力にも脱帽です。

飛騨牛養老ミートの画像

 

 

 

Mashiro Maruyama

マウスをクリックしながら左右に動かすと、頭も360度回転する面白い仕掛け。ナビメニューよりモデル名を選択してみましょう。

 

 

 

ニッポニア
都心から約2時間。多摩川源流をさかのぼる山あいの村、山梨県小菅村。700人の村がひとつのホテルになった、ユニークなコンセプト。

NIPPONIA

 

 

 

De Bijenkorf

マウスをスクロールすると、蜂がキラキラと軌跡を描きながら、森の中を進み、商品アイテムを発見していくストーリーテリング手法を採用したサイト。実際に商品の購入もできるインタラクティブさに注目。

de-bijenkorf-bewonder

 

 

 

Finely Crafted

スタジオを3D空間で再現したゲーム要素を取り入れた、インタラクティブな没入型サイトで、スニーカーができるまでを詳しく解説したストーリーテリングが素敵。

jack-daniels-the-snhoe-surgeon

 

 

 

Paper Play

商品プロダクトの特長で、折り目のあるプリーツ柄をサイト全体にうまく適用しブランディングし、商品コレクションの紹介、販売も行うEコマースサイトのランディングページ。

Paper-Play

 

 

 

Crusta C

スクロールに合わせて1本のラインがページ下まで導くユニークな仕掛け。

crusta-c

 

 

 

Evernest

スタイリッシュな住宅を圧倒的なビジュアルで紹介するウェブサイト。思わず住んでみたいと思わせる動画や内装インテリアの魅せ方などもゴージャス。

selected-evernest

 

 

 

Discover Boat Tail

世界に一台しかない自分だけのクルマを制作するコーチビルド制度でデザインされた、ロールス・ロイスによる特別なランディングページ。夕焼けを連想させる高級感のある配色やフォント使い、レイアウトも参考に。

DISCOVER_BOAT_TAIL

 

 

 

Platoon Aviation

ページのスクロールに合わせて、コンテンツがふわりと表示される気持ちの良いアニメーションに、自由なグリッドレイアウトが目を引くデザイン。

Platoon-Aviation

 

 

 

Miti Navi

自分だけの夢のボートをオーダーできるフランスの画期的なサービス。全長26mから50mまでの4タイプのヨット。

Miti-Navi

 

 

 

VW: Virtual Test Driving

まずは「海岸」または「山」コースを選ぶと、実際にクルマでテスト走行ができる体験型ウェブサイト。クルマの購入を検討しているユーザーを虜にするブランディング。

vw-virtual-test-driving

 

 

 

Zoox

ドライバーではなく、クルマに乗るひとのことを第一に考えた自動運転する未来のモビリティサービス。

zoox

 

 

 

Pernod Ricard Embiez 2021

さまざまなエンターテイメントをオンライン上で実現するプラットフォームづくりといった、新型コロナウイルスの影響で生まれた新しいサービス体型。

pernod-ricard-embiez-2021

 

 

 

Yamauchi No.10 Family Office

任天堂の創業家・山内家一族によるゲーム世界をそのまま表現したようなサイト。ボクセルアートによるアニメーションが随所に。左側のアイコンで、通常レイアウトへの切り替えが可能です。

yamauchi-no10-family-office

 

 

 

Lunchbox

目を引くポップなカラーリング、書体えらび、イラストが揃った、ブランドイメージをうまく表現したデザイン。

lunchbox

 

 

 

EASOL

太字の見出しタイトルが目を引くユニークなレイアウト。随所にアニメーションを追加したり、画像をレイヤー状に重ねるなど、レイアウトに悩んだときに参考にしたいサイト。

easol

 

 

 

Spotify Culture Next 2021

業種やジャンルに応じて、人気の高い音楽を分析した、Spotifyによる特別ページ。立体感のあるアイソメトリックなイラストアニメーションが素敵。右上メニューよりコンテンツに進むことができます。

Spotify-Culture-Next-2021

 

 

 

Sandland

美しいグラデーションカラーのヒーローイメージや、リアル感たっぷりなドロップシャドウ、美しいパステルカラーの配色、シンプルなサンセリフ書体など真似しやすいポイントもたくさん。

sandland

 

 

 

Black Madre

ブラジル、サンパウロにあるデザイン制作会社の公式サイトで、余白スペースをたっぷり活用したミニマルなレイアウトが、ビジュアルに最大限スポットを当てることで、制作実作ページなど他への遷移を促します。

blackmadre-1

 

 

 

Homunculus

マウスの動きに合わせて水面のような歪みを加えたり、ユニークなページ遷移体験などクリエイティブで新しいユーザー体験を提供しているポートフォリオサイト。

homunculus_Inc-2

 

 

 

Vivid + Co

光にキラキラと反射するテトリスブロックが、スクロールに応じて画面中を縦横無尽に移動する3Dアニメーションが印象的。

VividCo

 

 

 

DNA Capital

遺伝子DNAのようにねじれたSFアニメーションが、スクロールに応じてくるくる回転するエフェクトは必見。

DNA-CAPITAL

 

 

 

Life in Vogue

サイトを開くと、飛び出す絵本のようにストーリーが展開する体験型ウェブサイト。

life-in-vogue

 

 

 

Penderecki’s Garden

ポーランドの著名な作曲家、クシシュトフ・ペンデレツキと出会うことができるバーチャル空間。画面上に散らばった無数のアイコンをクリックすると詳細ページへと移動します。

Penderecki's

 

 

 

Atypikal Creative

フォントをつかった遊び心のあるローディングにはじまり、まるで飛び出し絵本のようなコンテンツ展開が素敵なコーポレートサイト。

Atypikal-Creative

 

 

 

Levitate

アスリート向けの義足の開発、販売を行っているデンマークの会社の公式ウェブサイト。

06-levitate

 

 

 

Club Local

カナダのモントリオールで造られている、おしゃれなラベルのアルコール飲料の販売を行う会社のホームページ。素材写真の美しさはもちろん、文字サイズや画像の配置などもシンプルでおしゃれ。

Club_local_-_Cocktails___Spirits-2

 

 

 

Wisr

スクロールに合わせて複雑な装置が動き出し、レール上をボールが転がりながらコンテンツも展開していく、ステーリーテリング手法を取り入れた体験型サイト。@オーストラリア

wisr-2

 

 

 

21 Reflect of Dostoevsky

ロシアの思想家・小説家だったドストエフスキーの歴史をたどる特設ページ。スクロールで物語が展開する、ストーリーテリング手法の代表サンプルとして。

21-Reflections-of-Dostoevsky-in-Pop-Culture

 

 

 

The LA Art Box

スクロールで水平方向にコンテンツが展開するアートイベント用特設サイト。レトロな配色や書体えらびもおしゃれで、2022年のトレンドを意識したデザインに。

the-la-art-box

 

 

HITOTOKI by 旅する2人

「すごもり・ホテルステイ」 の需要が高まっているいま、ホテルの魅力が存分に伝わるメディア。おしゃれなホテル選びはもちろん、タイムラインによる過ごし方のススメが素敵。

 

 

 

Naomi Osaka

女子プロテニスプレイヤー大坂なおみ選手の公式ホームページ。日本版とはデザインやコンテンツなども全く異なり、彼女のパーソナリティを全面に演出した素敵なサイト。

Naomi_Osaka

 

 

 

Elons Toilet

イーロン・マスク氏の50歳の誕生日を祝うファンサイトで、ローンチボタンをクリックすると火星まで仮設トイレを打ち上げるユニークなプロジェクト。

14-elonstoilet

 

 

 

2021年に紹介したWebデザイン一覧まとめ

 

2021年に紹介したWebサイトは、全部で235個でした。

 

最新技術を駆使し、話題となったサイトを中心に集めています。ますます進化するウェブサイトの世界を体験してみましょう。

 

この記事では、ホームページ制作のデザインアイデアが浮かばないときに便利な、最新ウェブデザイン47個をまとめてご紹介します。 特に注目を集めるヒーローデ
「ホームページのデザインが決まらない」「配色や書体などトレンドを意識したデザインって何?」「見本イメージとしてアイデアをふくらませたい」 この記事では、そんなときに役
トレンドが目まぐるしく変わるWebデザインでは、できるだけたくさんの優れたデザインのサイトを見て、触れることが重要で、次のアイデアにもつながります。
「ウェブデザインのアイデアが決まらない」「なんとなくイメージはあるけど、どう作ればいいかわからない」「打ち合わせでのサンプル見本が欲しい」 この記事で
この記事では、Webデザイン制作の参考にしたい最新ウェブサイト50個をセレクトしています。 さまざまなサイトを実際に見ることで、配色やレイアウト、フォ
この記事では、進化を続けるWebデザインの最新の実例サンプル33点をまとめてご紹介します。 世界中の優れた実例サンプルを実際に見ることで、印象や配色、レイアウ

 

 

表現力をアップする動くデザインアイデアまとめ

 

最近見かける最新Webデザインでは、「動き」を効果的に活用したアニメーションテクニックが注目されています。

 

アニメーションの基本ルールを理解しておけば、より効率的に動きを加えることができ、「次こんな動き入れてみよう」「この動き入れたら見やすいかも」など、具体的な実装アイデア出しにもオススメです。

 

最近見かける最新Webデザインでは、「動き」を効果的に活用したアニメーションテクニックが注目されています。 この記事では、表現力をアップする動きのある
この記事では、ウェブサイトの印象が決まる「動き」に注目した参考Webアニメーション45個をまとめてご紹介します。 動きを取り入れることで、注目度がアッ
ウェブデザインが目まぐるしく変化するなか、アニメーションを効果的に利用し、動きを取り入れたUIデザインがますます重要となっています。 この記事では、思
この記事では、ウェブサイトやスマホアプリ制作の参考にしたい最新アニメーションやUIインタラクションをまとめてご紹介します。 今まででは考えもつかなかっ
この記事では、ウェブデザイン制作で活用したいユーザーの視線を釘付けにする最新UIインタラクション、アニメーションをまとめてご紹介します。 Webサイト
これまで平面的に捉えられていたウェブサイトやアプリに、吸い込まれるような没入感を演出するクリエイティブなアニメーションが、いま注目を集めています。 こ
ウェブテクノロジーが進化するほど、年を追って重要になっているアニメーション。 効果的にユーザーの視線を目的のエリアに誘導できるだけでなく、見た目も魅力的に演出