世界で最もデザインされたウェブサイトの44(2021)

公開: 2021-09-26

Webデザインは、ユーザーがWebサイトにとどまるかどうかを決定する主な要因の1つです。 実際、第一印象の94%は、Webサイトのデザインに関連しています。

優れたウェブサイトのデザインは、シンプルで機能的で、会社のブランドと一致している必要があります。 より具体的には、最適に設計されたWebサイトは、グリッドベースのレイアウト(共有するコンテンツのタイプに合わせてレイアウトを調整する必要があります)を使用して、コンテンツの配置を維持し、読み込み時間を最適化し、モバイルフレンドリーで、魅力的なコピーを使用します。

ウェブデザインの多くの要素は業界や共有するコンテンツの種類によって異なるため、ウェブサイトのデザインのインスピレーションを見つけることができるように、世界で最もデザインの良いウェブサイトのコレクションを作成しました。

1. Avoriaz 1800 –訪問者Virtuelle

「最高の360度デザイン」と書かれたアナグマのあるAvoriazウェブサイトのホームページ

Avoriaz 1800は、フランスのモルジヌにあるスキーリゾートで、息を呑むような景色を眺めることができます。

ウェブサイトでは、ユーザーは冬のツアーと夏のツアーのどちらかを選択して、 360度のパノラマバーチャルツアーを通じて村のアパートやスキー場を探索できます。 このWebサイトを世界で最も優れたデザインのWebサイトのひとつにしているのは、360度のビューを提供しているため、ユーザーは自分が体験の一部であると感じることができます。

旅行やホスピタリティ業界にいる場合は、同様のものを作成するために投資することを検討してください。 予約前に目的地を体験できるバーチャルツアーを提供すると、予約が16%から67%増加する可能性があります。

ウェブサイトタイプ:ホスピタリティ

デザインの特徴:アニメーション、360度、ストーリーテリング、写真、ビデオ

使用したテクノロジー:CSS3、HTML5、Apache

使用色:青

2.プレイブック

「ベストクリーンデザイン」と書かれたバッジが付いたプレイブックのウェブサイトのホームページ

Playbookは、デザイナー向けのクラウドストレージプラットフォームです。 このウェブサイトを見ると、ユーザーの注意を引くのはデザインがどれほどきれいかということがわかります。 これは、Webデザインの重要な側面に従うだけでなく、会社の製品、つまり視覚的に整理された方法でファイルとフォルダーを管理する方法とも一致します。

デザイナーをターゲットにしているテクノロジー企業にとって、すっきりとしたデザインを持つことで、ユーザーはあなたが何ができるのか、そしてなぜユーザーはあなたの製品やサービスを信頼すべきなのかを知ることができます。 このWebサイトには、ユーザーにとってよりパーソナライズされた魅力的なエクスペリエンスを作成する双方向性の要素も組み込まれています。

ウェブサイトの種類:スタートアップ、テクノロジー

デザインの特徴:クリーン、写真、ギャラリー、UIデザイン

使用したテクノロジー:Ruby、GraphQL、React

使用色:赤

3.アニムススタジオ

「ビデオに最適なウェブサイト」と書かれたバッジ付きのアニムスウェブサイトのホームページ

Animus Studiosは、クライアントとの仕事を楽しく整理することに取り組んでいるビデオエージェンシーです。 彼らはストーリーテリングに焦点を当てたオリジナルのビデオコンテンツを作成することによってそうします。

このウェブサイトを際立たせているのは、それが提供するカラフルなアニメーションです。 アニメーションは他のウェブサイトから目立つための優れた方法であるだけでなく、ここでは、ビデオ制作の観点から会社の能力を間接的に示す方法でもあります。

ウェブサイトの種類:ビジネス、代理店

デザインの特徴:アニメーション、カラフル、ビデオ

使用するテクノロジー:Craft CMS

使用色:青、赤、黄

4.パブリックドメイン

「最高の珍しいコンテンツ構造」と書かれたバッジが付いたパブリックドメインのウェブサイトのホームページ

パブリックドメインは、ヴァージルアブローがコレクション(特にオフホワイトxナイキコラボレーション)を紹介し、今後の製品発売をからかうために設立した革新的でインタラクティブな実験的なウェブサイトです。 彼のウェブサイトはカタログではなく、Virgil自身のデスクトップのように見えるように設計されています。

このウェブサイトがこれまでに見た他のウェブデザインと異なるのは、珍しいコンテンツ構造、つまりサイトでの情報の表示方法と整理方法、特にさまざまなページの階層です。 パブリックドメインには異なるページがなく、コンテンツは非常にインタラクティブな方法で編成されています。

ウェブサイトの種類:ファッション

デザインの特徴:大きな背景画像、ギャラリー、水平メニュー、コンテンツアーキテクチャ

使用するテクノロジー:JavaScript、HTML5

使用色:黒、銀、白

5.グローバランスワールド

「最高のインタラクティブなデータの視覚化」と書かれたバッジ付きのGlobalance世界のウェブサイトのホームページ

Globalance Worldは、ユーザーが気候、フットプリント、メガトレンド、リターンなどの経済的、社会的、環境的要因に基づいて投資決定を下せるようにするインタラクティブな投資プラットフォームです。 このサイトは、Web上で最もシンプルで最適に設計されたインタラクティブエクスペリエンスの1つを提供します。 また、非常にレスポンシブデザインであるため、コンテンツとデザインはすべてのデバイスで適切に機能するように調整されています。 双方向性に加えて、このWebサイトでは、適切な配色(特に黄色)を使用して、楽しい側面を伝えています。

たとえば、ユーザーは実際のポートフォリオまたは市場インデックスを選択し、さまざまなビュー(地球、都市、地図など)を通じてさまざまなタイプのデータを視覚化するか、2つの市場インデックス(S&P500やNasdaq100など)を比較することを選択できます。 これらのインタラクティブな要素の目標は、投資家に長期的な意思決定を行うための楽しい方法を提供することです。

ビジネスや金融などの競争の激しい業界では、Webサイトでインタラクティブな体験をすることで、群衆から目立ち、ユーザーの関心を維持することができます。

ウェブサイトの種類:ビジネス、金融

設計特性:インタラクティブ、レスポンシブ、データ視覚化、3D

使用するテクノロジー:next.js、CSS3、Three.js、React、D3、GraphQL

使用色:黒、灰色、黄色

6.UXPERT

「最高のユーザーインターフェース」と書かれたバッジが付いたUxpertウェブサイトのホームページ

UXPERTは、美しいユーザーエクスペリエンスの設計に焦点を当てたデジタルエージェンシーです。 この代理店が提供するサービスの種類を考えると、このWebサイトが比類のないユーザーエクスペリエンスを備え革新的なユーザーインターフェイスを誇っていることは驚くことではありません。

ユーザーインターフェイスは非常にシンプルです。ホームページでは、ユーザーは短いショーリールを再生してブランドについて学ぶことができます。 その後、下にスクロールして、サービス、作品、賞について詳しく知ることができます。 B2Bマーケターの71%がビデオマーケティングを使用していることをご存知ですか? 短いショーリールを使用すると、特に忙しいユーザーをターゲットにしている場合に、ユーザーエクスペリエンスを向上させることができます。

タイプ:ビジネス、代理店

デザインの特徴:アニメーション、クリーン、グラフィックデザイン、革新的なUI

使用したテクノロジー:WordPress、CSS3、HTML5

使用色:黒、白、黄

7. MAD

「最高のインタラクティブデザイン」と書かれたバッジ付きの狂ったウェブサイトのホームページ

MADはクリエイティブなデジタルデザインエージェンシーです。 このウェブサイトは、双方向性に創造的なアプローチを取り、ユーザーの注意を引くのに役立つ珍しいデザインを作成します。 ユーザーは、MADロゴで遊んだり、オブジェクトを移動したりできます。 その結果、彼らはサイトに長く滞在し、創造的な仕事のために信頼できる最先端の会社と見なし、ビジネスのためにサイトとつながる可能性が高くなります。

これらの予期しないインタラクティブ効果を使用することにより、MADはユーザーエクスペリエンスを向上させ、興味と好奇心を生み出すことができます。

ウェブサイトの種類:ビジネス、代理店

設計特性、実験的、異常な設計、遷移、フィルターと効果、革新的なUI設計、マイクロインタラクション

使用するテクノロジー:CSS3、HTML5、WebGL、Nginx、React

使用色:黒、オレンジ、白

8.グロブ

「フィルターとエフェクトに最適なウェブサイト」と書かれたバッジ付きのグロブウェブサイトのホームページ

Globは、プラスチックを使わないライフスタイルのための再利用可能なバッグを販売するeコマースサイトです。

このウェブサイトは、フィルターとエフェクトをクリエイティブに利用して、デザインをより面白くすることでユーザーの注意を引き付けます。 特に、ユーザーはWebサイトをスクロールしながら、マウスを使用して液化効果を介してデザインを操作できます。 これにより、Globでのショッピング体験は、従来のWebデザインと比較してより魅力的になります。

ウェブサイトの種類:eコマース、ファッション

デザインの特徴:インタラクティブで大きな背景画像、アニメーション、フィルター、エフェクト

使用するテクノロジー:WebGL

使用色:黒、オレンジ

9.グッチビューティーファンデーション

「最高のインタラクティブゲームウェブサイト」と書かれたバッジ付きのグッチビューティーファンデーションウェブサイト

グッチビューティーファンデーションは、人気のファンデーション製品に特化したグッチのウェブサイトのサブドメインです。 このページには、クイズゲーム、インタラクティブな色合いパレット、およびその使用法を面白い方法で発見するための短いビデオチュートリアルが用意されています。

グッチと同じように、ウェブサイトのサブドメインまたはサブフォルダーを専用にして、特定の製品をインタラクティブな方法で提示し、業界で話題を作り、視聴者の関心を維持することを検討できます。

ウェブサイトの種類:プロモーション、ファッション

デザインの特徴:クリーン、カラフル、シングルページ、ジェスチャー、インタラクティブ

使用するテクノロジー:CSS3、HTML5、React、Anime.js

使用色:グリーン、ピンク、イエロー

10.マリオ・ルッソアーカイブ

「タイポグラフィに最適なウェブサイト」と書かれたバッジ付きのマリオ・ルッソ・アーカイブのウェブサイト

アートポートフォリオのウェブデザインのインスピレーションを探しているなら、アーティストのマリオルッソのアーカイブはあなたの作品を表示するシンプルで革新的な方法を提示します。

このウェブサイトはレスポンシブデザインで、シンプルで美しいタイポグラフィを使用してストーリーを伝えています。 タイポグラフィ(フォントのスタイル、外観、構造を含む)は、ユーザーエクスペリエンスに影響を与える最も重要な要素の1つです。 ある調査によると、消費者の46%が、ウェブサイトの信頼性に関する決定を、その視覚的な魅力と美学に基づいています(ユーザーの約90%は、タイポグラフィのみに基づいています)。

ウェブサイトの種類:ポートフォリオ、アート

デザインの特徴:レスポンシブデザイン、魅力的なタイポグラフィ、ストーリーテリング

使用するテクノロジー:CSS3、HTML5、jQuery、Typekit

使用色:ブラック、シルバー

11.福永裕介

「最高の視差スクロールウェブサイト」と書かれたバッジ付き福永裕介ウェブサイトホームページ

福永裕介のポートフォリオは、開発者ポートフォリオなどの動的コンテンツポートフォリオのWebデザインのインスピレーションを探している場合に一見の価値があります。

視差効果(さまざまな角度から見たときにオブジェクトの位置が異なるように見える)と無限スクロールテクノロジーを使用して、東京を拠点とするこのフリーランサーのフロントエンド開発者は、彼のWebサイトのポートフォリオを示しています。

ウェブサイトのデザインはシンプルですが(1つのメインページ、概要と連絡先のセクションがあります)、同時に、これはこのリストで最も革新的なウェブサイトのデザインの1つです。

ウェブサイトの種類:ポートフォリオ、開発者

デザインの特徴:無限スクロール、視差、スクロール、フィルター、エフェクト

使用するテクノロジー:WebGL、GSAPアニメーション、Three.js

使用色:黒

12. IdeaRocket

「最高のアニメーションウェブサイト」と書かれたバッジ付きのIdeaRocketウェブサイトホームページ

IdeaRocketは、ニューヨークを拠点とするアニメーションスタジオです。 彼らのウェブサイトを最高にデザインされたウェブサイトの1つにしているのは、卓越したユーザーエクスペリエンスと仕事の例の提示方法です。

「作品」セクションでは、ユーザーはカテゴリ(2Dアニメーション、3Dアニメーションなど)を選択し、プロジェクトをクリックして高品質のビデオを開くことができます。 Webサイトにビデオを追加する場合は、IdeaRocketがこれを行う方法を確認する必要があります。

ウェブサイトの種類:ビジネス、代理店

デザインの特徴:アニメーション、ビデオ、スクロール、イラスト、ストーリーテリング

使用されているテクノロジー:WordPress、CSS3、HTML5。 GSAPアニメーション

使用色:黒、青、オレンジ

13.オメガファンド

「マイクロインタラクションに最適なウェブサイト」と書かれたバッジが付いたオメガファンドのウェブサイトのホームページ

あなたがB2Bの分野にいるのなら、この投資会社が医学の未来に投資するという使命をどのように提示しているかを見る価値があります。

Omega Funds Webサイトでは、マイクロインタラクション(ユーザーがWebサイトを操作するときに表示されるアニメーション)を特別に使用して、ユーザーを退屈させたり気を散らしたりせずに情報を伝達できます。

ナビゲーションメニューが表示される革新的な方法を見るだけで、これがこのリストで最も優れたデザインのWebサイトの1つである理由がわかります。

ウェブサイトの種類:ビジネス、企業

デザインの特徴:アニメーション、トランジション、インタラクティブ、マイクロインタラクション

使用されているテクノロジー:WordPress、CSS3、GSAP Animation、Three.js、Matter.js

使用色:黒、赤

14.ローファイブブリューイング

「最高のシングルページウェブサイト」と書かれたバッジ付きのローファイブブリューイングウェブサイトのホームページ

シンプルな(しかし面白くて革新的な)デザインのLow Five Brewingは、私たちのお気に入りの1ページのWebサイトの1つです。 このタイプのWebサイトは、メニューを使用せずに、すべてのコンテンツを1ページに表示します。 これにより、ナビゲーションが簡単になり、Webサイトの読み込み時間が改善され、Webサイトの応答性が向上します。

ユーザーは、Webページをスクロールするだけで、このアムステルダムを拠点とする醸造所について学ぶことができます。 下部に、ユーザーはWebショップへのリンクを見つけることができます。これにより、ビールを購入できる別のサイト(非常にシンプルでミニマルなサイト)に移動できます。

eコマースの分野にいる場合(特に数個の商品しか販売していない場合)、1ページでコンバージョンを37.5%増やすことができるため、このWebサイトのデザインからインスピレーションを得ることをお勧めします。

ウェブサイトの種類:eコマース、食品、飲料

デザインの特徴:単一ページ、異常なナビゲーション、レスポンシブ

使用したテクノロジー:Vue.js、Nuxt.js

使用色:グリーン、ピンク、イエロー

15.スイスデント

「最高のミニマルなeコマースウェブサイト」と書かれたバッジ付きのスイスデントウェブサイトのホームページ

プレミアム歯科製品ブランドSwissdentは、優れた写真を使用してストーリーを伝えるWebサイトを作成しました。 ミニマルで印象的なクリーンなWebデザインは、ユーザーに優れたショッピング体験を提供します。 いくつかのアイテムとミニマルなデザインに焦点を当てることは、eコマースサイトにとって重要です。eコマースサイトでは、あまりにも多くのオプションを避け、気を散らすものを制限すると、多くの場合、売り上げが増加します。

ウェブサイトの種類:eコマース

デザインの特徴:写真、アニメーション、クリーン、ミニマル、視差、トランジション

使用されているテクノロジー:WordPress、CSS3、HTML5、GSAPアニメーション、PHP

使用色:黒、赤、白

16.グッドファイト

「最高の水平レイアウトのウェブサイト」と書かれたバッジが付いたGoodfightウェブサイトのホームページ

Goodfightは、ロサンゼルスを拠点とするクリエイティブなファッションブランドです。 水平方向のメニューとレイアウトの無限スクロールテクノロジーにより、このWebサイトは、ブランドについてもっと知りたいユーザーにとって魅力的なエクスペリエンスを作成することができます。 すべてのeコマース売上の72.9%がモバイルデバイスで発生することを考えると、無限スクロールなどの単純なレイアウトを追加すると、Webサイトのコンバージョン率に貢献する可能性があります。

ウェブサイトの種類:eコマース、ファッション

デザインの特徴:水平メニュー、水平レイアウト、レスポンシブデザイン、トランジション、フィルター、エフェクト

使用色:黒、銀、白

17.ハンワグ– 100年

Hanwag –「ストーリーテリングに最適なウェブサイト」と書かれたバッジ付きの100年のウェブサイト

Hanwagはドイツの靴会社です。 ストーリーテリングWebデザインを使用することになると、Hanwag – 100Yearsサブドメインが私たちの一番の選択でした。

1ページで構成され、1921年の最初の靴屋から2021年に製造される予定の40万足の靴まで、Hanwagブランドの歴史を詳しく説明しています。ストーリーテリングを使用すると、ブランドを人間味のあるものにし、潜在的な顧客が思い出す機会を増やすことができます。あなたの会社。

ウェブサイトの種類:eコマース、ファッション

デザインの特徴:実験的、レトロ、スクロール、イラスト

使用色:赤、白、青

18. Vintageria

「最高のレトロなデザイン」と書かれたバッジが付いたVintageriaのウェブサイトのホームページ

eコマースサイトのレトロなウェブデザインをお探しの場合は、ヴィンテージリアのウェブサイトをご覧になり、インスピレーションを得てください。

このヴィンテージで持続可能なファッションブランドは、ピクセルアートとアニメーションをレトロなウェブデザインとフォントと組み合わせて、ヴィンテージスタイルが特徴のブランドアイデンティティを表現しています。 あなたがファッションeコマースブランドである場合、あなたのウェブサイトのデザインがあなたが宣伝しているブランドスタイルとトレンドと一致していることを確認してください。

ウェブサイトの種類:eコマース、ファッション

デザインの特徴:カラフル、アイコン、レトロ、ストーリーテリング、革新的なUIデザイン

使用されているテクノロジー:Node.js、GSAP Animation、PixiJS、Webpack、Vue.js、Nuxt.js

使用色:緑、白、黄色

19. Fabulatorij

「最高のベクターグラフィックデザイン」と書かれたバッジ付きのFabulatorijウェブサイト

幾何学的形状を使用して画像を作成するベクターグラフィックスのファンの場合は、このイベントエージェンシーのWebサイトをスクロールして、サイトデザインのアイデアを見つけることをお勧めします。

Fabulatorijは、ハードなラインと斬新なスタイルで、会社のサービスと作業サンプル(ビデオで紹介)に焦点を当てた、モダンでエッジの効いた外観のWebサイトを作成しました。

ウェブサイトの種類:ビジネス、イベント

デザインの特徴:アニメーション、カラフル、ベクター、イラスト、レスポンシブ、フィルター、効果

使用されているテクノロジー:GSAP Animation、VideoJS、Vue.js、Nuxt.js、Netlify

使用色:グリーン、ピンク、イエロー

20.ハンバーガーとソース

「最高の大きな背景画像デザイン」と書かれたバッジが付いたBURGER&SAUCEのWebサイト

BURGER&SAUCEのWebサイトでは、見事な大きな背景画像を使用して手作りのハンバーガーを共有し、ユーザーに印象的で思い出に残る体験を提供しています

82%の人が写真の見た目だけで食事を買うことをご存知ですか? レストランのウェブデザインのアイデアを探しているなら、BURGER&SAUCEが高品質の写真でユーザーの興味を引くストーリーをどのように伝えているかを見逃すことはできません。

ウェブサイトの種類:ビジネス、レストラン

デザインの特徴:大きな背景画像、ベクター、レスポンシブ

使用されているテクノロジー:WordPress、SVG、Cloudflare

使用色:黒、白、黄

21. Westbound Mag –ストーリーと場所

Westbound Mag –「最高のミニマリスト雑誌のデザイン」と書かれたバッジが付いたStories AndPlacesのWebサイト

Westbound Magは、ブログや雑誌のWebデザインに関しては私たちの一番の選択です。 このサイトを作成するとき、開発者は読者の注意を引くミニマリストスタイルを作成しました。

このオンラインマガジンは、ココナッツホワイトの背景色と高品質の画像が特徴で、楽しい読書体験を生み出します。 オンラインマガジンをデザインするときは、適切なフォント、色、ビジュアルアセットを選択して、読者の体験をできるだけ楽しくすることが重要です。

ウェブサイトの種類:ブログ

デザインの特徴:写真、クリーン、ミニマル、タイポグラフィ、レスポンシブ、ストーリーテリング

使用されているテクノロジー:WordPress、Bootstrap、WooCommerce

使用色:赤、黒、白、銀

22. 4月グループ

「最高の不動産ウェブサイトのデザイン」と書かれたバッジ付きの4月のグループウェブサイト

不動産投資会社のエイプリルグループは、不動産業界で最高のデザインのウェブサイトの1つを作成しました。

ウェブデザインは非常に専門的で、写真やビデオを使用して、シンプルで整理された方法でプロパティを表示します。 高品質でプロフェッショナルな写真を掲載している家は、32%速く販売され、44%の確率で定価以上で販売されることを考えると、不動産業界の場合は、写真をWebサイトのデザインの焦点にします。

ウェブサイトの種類:ビジネス(不動産)

デザインの特徴:大きな背景画像、クリーン、ミニマル、垂直メニュー

使用色:黒

23. USAF ECHO

「最高の3Dグラフィックデザイン」と書かれたバッジが付いたUSAFECHOのWebサイト

アメリカ空軍は、集中力、落ち着き、反応などのスキルをテストするためにユーザーが課題に直面するUSAFECHOと呼ばれる映画のウェブサイトを作成しました。

Enhanced Cognitive Human Ops Webサイトは、WebGL(Web Graphics Library)APIを使用して、高性能3Dグラフィックスを使用して魅力的でインタラクティブなユーザーエクスペリエンスを作成します。 Webサイトの訪問者を引き付けるには、3Dグラフィックスの使用を検討してください。これを使用して製品やサービスを表示したり、ブランドについてのストーリーを伝えたりできるため、ゲームを提供する必要はありません。

ウェブサイトの種類:ゲームとエンターテインメント

設計特性:クリーン、トランジション、3D、フィルターとエフェクト、マイクロインタラクション

使用するテクノロジー:WebGL

使用色:黒、青、銀

24.ワックスポエティックス

「最高のアニメーション雑誌のデザイン」と書かれたバッジが付いたWaxPoeticsのWebサイト

アニメーションとインタラクティブな要素を使用することで、Wax Poeticsの音楽ジャーナルコミュニティは、音楽愛好家のための非常に魅力的なオンラインマガジンを作成しました。

ブログ、オンラインマガジン、または投稿の多い任意の種類のWebサイトがある場合は、このWebサイトを探索て、ユーザーの関心を維持するための革新的な記事の表示方法からインスピレーションを得ることをお勧めします。

ウェブサイトの種類:雑誌、音楽

デザインの特徴:アニメーション、カラフル、インタラクティブなデザイン、マイクロインタラクション

使用色:黒、緑、赤

25.衛星のアトラス

「最高のインタラクティブ3Dデザイン」と書かれたバッジが付いたAtlasofMoonsのWebサイト

NationalGeographicのAtlasof Moons Webサイトは、アニメーションまたはモーショングラフィックス最大限に活用したWebby Awards 2020の受賞者であり、アニメーションを統合してユーザーエクスペリエンスを向上させるWebサイトにアクセスします。

この受賞歴のあるウェブサイトでは、ユーザーは事実上月を飛んで、比類のないインタラクティブな設定で月についてすべてを学ぶことができます。

ウェブサイトの種類:学習

デザインの特徴:3D、インタラクティブ、アニメーション、スクロールナビゲーション

使用するテクノロジー:WebGL、JavaScript、GSAP、React、three.js、Python

使用色:黒

26.身体の問題–すべての身体には物語があります

ボディの問題–すべてのボディには「最高のビジュアルデザイン機能」と書かれたバッジが付いたストーリーウェブサイトがあります

ESPNの「EveryBodyHas a Story」ウェブサイトは、シームレスなユーザーエクスペリエンスを作成するためにビジュアルデザイン要素に依存するサイトに贈られる、Webby Awards2020のベストビジュアルデザイン機能賞を受賞しました。

このウェブサイトは、インタラクティブなインターフェースと見事な写真を使用して、世界最高のアスリートを紹介しています。 聞いたことを覚えている人はわずか10%ですが、見たり行ったりしたことを覚えている人は80%です。 結果として、高品質の画像に焦点を当てることは、あなたのウェブサイトで物語を語る最良の方法です。

ウェブサイトの種類:メディア、スポーツ

デザインの特徴:インタラクティブ、写真、トランジション、フィルター、エフェクト

使用するテクノロジー:GSAP(Greensock)、Hammer.JS

使用色:黒、赤、白

27. FGMの終了–私の一部

Ending FGM –「動画のベストユース」と書かれたバッジが付いたPiece of MeのWebサイト

UNFPAは、ビデオまたは動画を最大限に活用したことで2020年ウェビー賞を受賞した「EndingFGM – A piece ofme」ウェブサイトを作成しました。

このウェブサイトは、アニメーションと驚くべき写真やビデオを使用して、すべての妊娠が望まれる世界を提供するという使命に焦点を当てたインパクトのあるストーリーを伝えています。

ウェブサイトの種類:保健機関

デザインの特徴:レスポンシブデザイン、ビデオ、動画

使用色:イエロー、オレンジ、ピンク

28.Rooに会う

「チャットボットの最適な使用法」と書かれたバッジが付いたRooのWebサイトに会います

PlannedParenthoodによる「MeetRoo」ウェブサイトで、ユーザーはAIを利用した性教育チャットボットであるRooと接触します。

珍しい独創的なデザインが特徴のこのウェブサイトは、最高のユーザーエクスペリエンスを獲得したWebby Awards2020の受賞者です。 ウェブサイトをチャットボット専用にする必要はありませんが、同様のソフトウェアをウェブサイトに追加して、変換を自動化し、ユーザーにコンテキストサポートを提供することを検討してください。

ウェブサイトの種類:教育、プロモーション

デザインの特徴:チャットボット、珍しいデザイン、AI

使用するテクノロジー:チャットボット

使用色:青

29.レブロン・ジェームズのロサンゼルス

「最高のインタラクティブユーザーインターフェース」と書かれたバッジが付いたレブロンジェームズのロサンゼルスのウェブサイト

スポーツの大国ESPNによって作成された「WelcometoBron Bron Land」ウェブサイトは、2020年に最高のユーザーインターフェイスの称号をWebbyAwardsから授与されました。

インタラクティブなウェブサイトは、レブロンのルーツが彼の成長する帝国の基盤をどのように設定したかについての教育的な旅です。 優れたユーザーインターフェースを作成すると、あなたとあなたのウェブサイトの訪問者との間の相互作用が容易になり、最終的にはコンバージョンが増加します。 たとえば、Forrester Researchが実施した調査では、優れたインターフェースによってコンバージョン率が最大200%向上することがわかりました。

ウェブサイトの種類:メディア、スポーツ

デザインの特徴:インタラクティブ、トランジション、フィルターとエフェクト、革新的なUI

使用色:パープル、ゴールド、ホワイト、ブラック

30. Lusion

「最高の美的ビジュアルデザイン」と書かれたバッジ付きのLusionウェブサイト

クリエイティブスタジオLusionLtdによるLusionWebサイトは、美的に感情的で美しいサイトに授与される、最高の美的ビジュアルデザインのWebby Awards2020受賞者です。 このサイトは、ユーザーの注意を引く見事なグラフィックと効果を備えています。 あなたのウェブサイトを目立たせるために同様のアニメーションを使用することを検討してください。

ウェブサイトの種類:ビジネス、代理店

デザインの特徴:インタラクティブ、アニメーション、3D

使用するテクノロジー:WebGL、Three.js

使用色:黒、白

31. 2019:写真の年

2019年:「写真のベストユース」と書かれたバッジが付いたYear InPicturesのウェブサイト

2019年の特徴であるニュース、エンターテインメント、スポーツを写真でまとめたCNNの「2019:The Year In Pictures」ウェブサイトは、写真画像に依存してユーザーエクスペリエンスを向上させるウェブサイトに授与される、写真最大限の活用に対して2020 WebbyAwardを受賞しました。 。 あなたが情報ウェブサイトを持っているならば、写真は露出を増やすためにあなたが焦点を合わせるべき要素の1つです。

ウェブサイトの種類:情報(ニュース、エンターテインメント、スポーツ)

デザインの特徴:写真、大きな背景画像、1ページ

使用色:黒、青、緑、赤

32.ヒューマンインタラクションカンパニー

「全体的に最高の体験」と書かれたバッジが付いたHumanInteractionCompanyのWebサイト

ヒューマンインタラクションカンパニーは、人間とコンピュータ間のインタラクションをより楽しくすることに専念しています。

この会社のWebサイトは、最も革新的で高度なWebサイトデザインを備えたWebサイトに与えられるベストプラクティス賞のWebby Awards2020受賞者です。 特に、ベストプラクティスとは、コンテンツ、構造、ナビゲーション、ビジュアルデザイン、双方向性、機能、および全体的なエクスペリエンスを指します。 特にビジネス分野にいる場合は、このWebサイトを技術設計のインスピレーションのモデルとして使用してください。

ウェブサイトの種類:ビジネス、代理店

デザインの特徴:インタラクティブ、コンテンツアーキテクチャ、コピーデザイン、写真とビデオ、UIデザイン

使用するテクノロジー:CSSフレームワーク、React

使用色:赤、黄

33.ドローンVR

「最高のウェブ技術」と書かれたバッジ付きのドローンVRウェブサイト

Very BigThingsのDroneVR Webサイトは、Webby Awards2020の技術的成果の受賞者です。 革新的なWebテクノロジーを通じて、ユーザーエクスペリエンスに新しい業界標準を設定することができました。 このWebサイトにより、Very Big Thingsは、パイロット認証プロセスをより楽しくするという目標を達成しました。

3Dビデオグラフィックスを使用することは、クリエイティブなWebサイトとして目立ち、それを実現するための珍しい方法です。 ソフトウェア会社の場合、Webサイトに3Dビデオグラフィックを追加すると、最新かつオリジナルに見えるようになります。

ウェブサイトの種類:ビジネス、ソフトウェア

設計特性:3D、インタラクティブ

使用するテクノロジー:WebGL、Three.js、React

使用色:緑、赤、黄

34.コーデックスアトランティックス

「最高のデータ視覚化」と書かれたバッジが付いたCodexAtlanticusのWebサイト

VisualAgencyのCodexAtlanticus(Biblioteca Ambrosianaと共同)は、Webby Awards2020の最優秀データ視覚化賞を受賞しています。 このウェブサイトでは、ユーザーはレオナルドダヴィンチの著作や図面のコレクションを探索できます。 Codex Atlanticusは、複雑なデータセットを革新的で視覚的に魅力的でわかりやすい方法で説明することに関しては、主要なWebサイトです。

ウェブサイトタイプ:データ

デザインの特徴:イラストレーション、インタラクティブ、データの視覚化、ストーリーテリング、コンテンツアーキテクチャ

使用したテクノロジー:Vue.js

使用色:黒、緑

35. Spotify:2019年のラップ

Spotify:「最高のユーザーエクスペリエンス」と書かれたバッジが付いた2019年のラップされたウェブサイト

2019 Wrapped by Spotifyは、2020年に3つのWebby Awardsを受賞しました。最高のデータ視覚化、最高のユーザーエクスペリエンス、音楽業界で最高のWebサイトです。

このウェブサイトを作成するために、Spotifyは複雑なデータセットを使用し、それらを理解しやすくナビゲートしやすい視覚的に魅力的な表現に変換しました。 ユーザーが見ることで恩恵を受けるデータがある場合は、同様のインタラクティブなデータ視覚化Webデザインを使用できます。

ウェブサイトの種類:音楽

デザインの特徴:インタラクティブ、アニメーション、トランジション、データの視覚化、レスポンシブ

使用するテクノロジー:WebGL

使用色:黒、緑、ピンク

36.気候科学、リスク、ソリューション

「ストーリーテリングに最適なインタラクティブデザイン」と書かれたバッジが付いたClimateScience、Risk&SolutionsのWebサイト

マサチューセッツ工科大学のClimateScience、Risk&Solutions Webサイトは、革新的なインタラクションデザインとマルチメディアストーリーテリングコンポーネントを使用するWebサイトで、最高の個人編集機能2020 WebbyAwardを受賞しました。 このウェブサイトの目的は、誰もが気候情報にアクセスできるようにすることです。 より良いストーリーテリングのために、MITによるこれに似たインタラクティブなデザインを使用することができます。

ウェブサイトの種類:組織

デザインの特徴:インタラクティブデザイン、ストーリーテリング

使用したテクノロジー:Elasticsearch、Vue.js

使用色:青

37.パターンラジオ:クジラの歌

パターンラジオ:「最高のデザイン構造」と書かれたバッジが付いたクジラの歌のウェブサイト

Google Creative Labによって開発されました—米国海洋大気庁(NOAA)太平洋諸島水産科学センター(PIFSC)の研究海洋学者Ann Allenと共同で、Pattern Radio Webサイトは、革新的なコンテンツを提供するWebサイトで2020年のベストナビゲーション/構造Webby賞を受賞しましたユーザーエクスペリエンスを向上させるアーキテクチャ。

このウェブサイトは人工知能を使用しており、ユーザーは何千時間ものザトウクジラの歌を簡単に探索して、誰もがこの興味深い現象に参加できるようにしています。

ウェブサイトの種類:政府、AI

設計特性:ナビゲーション、サイト構造、ヒートマップ

使用するテクノロジー:WebGL、Pixi.js、ResNet-50

使用色:黒

38. Buero112

「ストーリーテリングに最適なビデオ」と書かれたバッジ付きのBuero112Webサイト

デジタルデザインおよびブランディングエージェンシーのBuero112は、ビデオおよび画像アニメーションを使用した並外れたストーリーテリングを特徴とするWebサイトを作成しました。 これは非常に強力です。ユーザーがメッセージをビデオで見ると95%を保持するのに対し、メッセージを読むと10%を保持するからです。

このウェブサイトにアクセスすると、すぐにビデオが再生され、人目を引く動画を通して会社の仕事が示されます。 このように、ユーザーはクリック、スクロール、またはその他のアクションを実行する必要がありません。 どの業界にいても、同様の機能を利用て、ユーザーがサイト上の情報を簡単に利用できるようにすることができます

ウェブサイトの種類:ビジネス、代理店

デザインの特徴:ビデオ、動画、アニメーション、レスポンシブ、シングルページ

使用するテクノロジー:jQuery

使用色:白

39. NexBank

「最良の3Dパス遷移」と書かれたバッジが付いたNexBankWebサイト

最高のパフォーマンスを誇るUSBank NexBankのウェブサイトは、機関投資家、商業銀行、住宅ローンの銀行サービスを特徴としています。 このWebサイトは、3Dパス遷移とアニメーションの使用のおかげで魅力的な体験を提供します。 ビジネス関連の業界に3Dグラフィックスを追加すると、Webサイトがより面白く視覚的に魅力的になります。

ウェブサイトの種類:ビジネス、銀行

デザインの特徴:アニメーション、クリーン、視差、3Dパス遷移、オーバーレイメニュー、

使用したテクノロジー:CSS3、HTML5、jQuery、SVG

使用色:黒、白

40.カンタマナナス国際アーバンアートフェスティバル

カンタマナナス国際アーバンアートフェスティバルのウェブサイトに「最高のイベントウェブサイトのデザイン」と書かれたバッジが付いています

Cantamananasは国際的な都市芸術祭です。 ウェブサイトでは、ユーザーはインタラクティブな360度のビューで今後のイベントについて学ぶことができます。 このウェブサイトは、イベントの情報を提示するために大胆なアプローチを採用しています。 A user can use their mouse to explore the location, upcoming events, artists, and more.

Website Type : Event

Design Characteristics : Experimental, 360, Graphic design, Typography, Unusual Navigation

Colors Used : Black, Green

41. Pennsylvania Academy of Fine Arts

Pennsylvania Academy of Fine Arts website with badge that says

Celebrating the museum's best art collections and exhibitions, the Pennsylvania Academy of Fine Arts website is the Webby Awards winner of the best school website in 2020. This website is all about minimal design and clear navigation. If you want to simply share useful information without too many distractions or fancy animations, a simple and clean web design like this is the best choice for you.

Website Type : Education, Culture

Design Characteristics : Colorful, Responsive, Simple

Colors Used : Black

42. Bugaboo

Bugaboo website with badge that says

Iconic stroller brand Bugaboo is the Webby Awards 2020 Winner of the best shopping website . With the use of interaction and a clean and simple design, the Bugaboo website is all about offering a seamless online shopping experience.

Users can quickly compare different products and explore each through high-quality video and photos. The “customize” option is an example of how you can make your eCommerce website more interactive for visitors.

Website Type : eCommerce

Design Characteristics : Interactive, Big Background Images, Clean, Graphic Design, Interactive 3D models

Technologies Used : Dept SFRA, PWA

Colors Used : Black, Silver, White

43. BASIC Culture Manual

BASIC Culture Manual website with badge that says

BASIC is a branding and experience design agency. The BASIC Culture Manual website was the Webby Awards 2020 winner of the employment award , given to websites that feature job and employment listings, services, or information.

The Culture Manual website serves both as a guide to understand the brand and as a tool for recruiting and onboarding new employees.

Website Type : Agency, Design, Culture

Design Characteristics : Interactive, Experimental, Flashing images loading animation, Overlay menu flag effect animation

Technologies Used : WebGL, GSAP (Greensock), Nginx, Hammer.JS

Colors Used : Black, Silver, White

44. Nike Purpose Website

Nike Purpose Website with badge that says

Created by Owen Jones and Partners, the Nike Purpose website is the Webby Awards 2020 corporate communications website winner.

The goal of corporate communication websites is to create a favorable point of view among the company's — in this case, Nike's — stakeholders (employees, media, customers, etc.) by sharing the core mission and values.

This website is characterized by a simple and colorful design and uses videos and animations to invite users to learn more about the brand.

Website Type : Fashion, Communication

Design Characteristics : Colorful, Simple, Animation, Engaging

Technologies Used : WordPress, React, Redux, Docker, Express server, Webpack, Atom

Colors Used : Black, White, Red, Blue, Pink

まとめ

Having an original and cohesive design is fundamental whether you're launching a new website or redesigning an existing one, but the characteristics you'll include and the technology you'll use will vary depending on your industry and on your website's goals.

We hope that, after reading this guide, you found inspiration from some of the best designed websites in the world. If you have any web design ideas or additional examples, let us know in the comments below. To help you choose the best web design for your company, we created an infographic with the best design tips and trends for 2021.

10 website design tips and trends for 2021