時折、素晴らしいデザインのウェブサイトを目にし、作業の手が止まってしまうことがあります。デザインの美しさや使いやすさ、インタラクティブ性、サウンドデザイン、利用者に提供する価値など、心をつかむ要素は違っても、完成度の高いウェブサイトに出会ったときの感動は誰もが知っています。

当然ながら、こうした素晴らしいウェブサイトデザインやWeb業界への貢献を表彰する組織は数多く存在しています。そこでハブスポットでは、最もインスピレーションに満ちたトップクラスのデザインに注目すべく、主要アワード(AwwwardsやUX Awards、The Webby Awards、SiteInspire、Think with Google、BestWebsiteGallery、FWAなど)で受賞作品に選ばれた「傑作」10点を集めました。

リストに挙げられたウェブサイトをご覧になる際に覚えておいていただきたいのが、どの作品にも独自の素晴らしさがあり、特異的な目的を果たすためにデザインされているという点です。ビジュアルデザインに優れているウェブサイトもあれば、インタラクティブ機能に優れているものもあります。

デジタルマーケティングを解説した無料資料はこちらからダウンロード

つまり、ここに選ばれたウェブサイトがすべて、皆さんのウェブサイトで簡単に真似できる青写真だというわけではありません。ウェブサイトデザインのアイディアとして参考にしたり、別の業界で注目を浴びている最先端のマーケティングを学んだりするのに役立てていただければと思います。

1. Feed(フィード)

Feedは面白いコンセプトであるだけでなく、私たちがもっている「ウェブで何ができるか」という固定観念を覆すような斬新なデザインが魅力です。アニメーションと動画をクリエイティブに複合させたウェブサイトは、ユーザーをその世界に引き込みます。

標準的な企業ウェブサイトとは異なり、スクロール量を示すプログレスバーとしても機能するナビゲーションなど、ユニークな機能を備えています。

Screen_Shot_2015-08-04_at_4.50.49_PM.pngAwwwards選出

2. ETQ

ETQは非常にミニマリストなアプローチを採用し、無駄な要素を一切なくし、製品の魅力を伝える大きな写真を載せたウェブサイトを制作しました。シンプルでフラットな、色だけを使った背景に力強いタイポグラフィを組み合わせることで、ユーザーの目的である靴を主役にしたデザインになっています。

Screen_Shot_2015-08-04_at_5.16.53_PM.pngAwwwards選出

3. 株式会社小林幹也スタジオ

プロダクトデザイナー小林幹也氏のウェブサイトは、美しい写真と繊細なアニメーションを使って彼のミニマリストな作品の魅力を伝えるポートフォリオになっています。このウェブサイトははじめ日本語で制作され、その後で英語に翻訳されました。彼のデザインが国境を超えて通用することを実感させてくれます。

Screen_Shot_2015-08-04_at_5.26.55_PM.pngAwwwards選出

4.World of SWISS(スイス インターナショナル エアラインズ)

SWISS航空では、ストーリー性をもたせてSWISS航空のフライト体験を表現した、まるで疑似体験のようなウェブサイトを実現しています。注目を浴びずにはいられない、非常に優れたデザインです。美しい写真とアニメーションでユーザーをサイト内の様々なセクションへ誘導し、ありふれた売り文句以上の情報を提供してくれます。

Screen_Shot_2015-08-04_at_5.48.31_PM.pngThe Webby Awards選出

5. L.A. Times(ロサンゼルス・タイムズ)

ニュースサイトは決して魅力的なデザインや使い勝手の良さで知られる分野ではありませんが、Los Angeles Timesのウェブサイトは、読みやすくわかりやすい、シンプルで新聞の紙面のようなデザインに刷新されています。

Screen_Shot_2015-08-04_at_5.53.05_PM.pngThe Webby Awards選出

6. Minimums(ミニマムズ)

Minimumsでは、グリッド状のウェブサイトデザインと大きなタイポグラフィ、そして画面を端から端まで埋める高品質な画像を駆使して、大胆にコンテンツを見せるアプローチがとられています。デザインの明確な視覚的な階層を維持しつつグリッド構造を作るお手本としても参考にしたいウェブサイトです。

Screen_Shot_2015-08-04_at_5.59.54_PM.pngSiteInspire選出

7. Guillaume Tomasi(ギヨーム・トマジ)

モントリオールを拠点に活躍するGuillaume Tomasi氏は、個性的で見る人を圧倒する彼の作品を展示するのにぴったりなポートフォリオを立ち上げました。シンプルでフラットな、何もないミニマリストなポートフォリオデザインが非現実的な作風とのコントラストを生み、見る人の視線が作品に集中するように構成されています。

シリーズごとに作品を見せるユニークなナビゲーションの冒頭にはギャラリーをヒントにした作品解説が添えられ、横にスクロールしながら作品を見ていくと、まるで本物のギャラリーを訪れているかのような気持ちにさせられます。 

Screen_Shot_2015-08-11_at_4.56.41_PM.pngSiteInspire選出

8. Big Cartel(ビッグ・カーテル)

比較的規模の大きな企業でありながら、Big Cartelは非常にシンプルで単刀直入な、見る人の心をつかむウェブ体験を作り上げました。ここで使われているのはクリエイティブなヘッドラインと動画…それだけです。同社のプラットフォームを使って制作されたウェブサイトの例がシンプルなナビゲーションで表示され、ストーリーの語り手として機能しています。

Screen_Shot_2015-08-04_at_6.16.10_PM.pngBestWebsiteGallery選出

9. Woven Magazine(ウーヴン・マガジン)

Wovenは、アーティストや手工芸家、作家などのために作られたオンライン雑誌です。私にとってWovenは、雑誌にも読みやすいコンテンツと美しいデザインの魅力的なウェブサイトは可能であり、そうあるべきなのだと確信させてくれる存在です。ポップアップや目障りな広告に邪魔されることもなく、コンテンツそのものをじっくり体験できます。

Screen_Shot_2015-08-11_at_5.44.09_PM.png<削除>BestWebsiteGallery選出

10. JOHO's Bean(ジョホーズ・ビーンズ)

JOHO's Beanのウェブサイトは、映像とインタラクティブ性、ストーリー性、視覚デザイン、そして何よりもサウンドデザインが見事です。こういったいくつもの要素がひとつになって、コーヒー豆の旅の物語を語る、見る人の心と感情に訴えるウェブサイトが完成しています。

Screen_Shot_2015-08-11_at_5.23.01_PM.pngFWA選出

以上、参考になりましたら幸いです。

デジタルマーケティングを解説した無料資料はこちらからダウンロード

元記事発行日: 2018/11/25 19:30:00, 最終更新日: