時々、はっとさせられ、考えさせられるサイトに出会うことがあります。従来のウェブの限界を打ち破ったサイトです。

→ダウンロード: 5ステップでパフォーマンスの高いウェブサイトを作成、管理する方法

美的デザイン、ユーザビリティ、インタラクティビティ、サウンドデザイン、あるいはサイトが提供する価値など、抜きん出ているものが何であれ、最高傑作のサイトに出会えたときの感動というのは格別です。

驚くまでもなく、こうしたサイトや、それらのウェブ全体への貢献を評価している組織や賞というのが多数存在します。

今回は最もインスピレーションを与えてくれるサイトの一部を皆さんにご紹介するため、Awwwards、UX Awards、The Webby Awards、SiteInspire、Think with Google、 BestWebsiteGallery、FWAといった主要な賞を受賞した、最近注目のサイトを15ほどご紹介したいと思います。

以下のリストをご覧いただく際に注意していただきたいのが、各サイトにはそれぞれ特有の秀逸さがあり、独自の目的を追求しているという点です。ビジュアルデザインで秀でているサイトもあれば、インタラクティビティで突出しているサイトもあります。

つまり、これらのサイトすべてが、すぐにコピーしてそのまま使える「コンバージョン製造機」やアイデアの青写真ではないということです。

むしろ、ウェブデザインのインスピレーションを得たり、インターネット上で繰り広げられている最先端のマーケティングに触れたりする、素晴らしい手段の1つとして考えてください。

また、ferretさんがこちら「目移りするほどイケてる!海外デザインギャラリーサイト24選」で海外のWebデザインについて紹介しています。

もしも2017年のWebデザインのトレンドをお探しの場合はこちらの記事をご覧ください。

5ステップでパフォーマンスの高いウェブサイトを作成、管理する方法

インスピレーションを与えてくれるウェブサイトデザイン15選

1)Feed

Feedはコンセプトが面白いだけでなく、ウェブで何が可能かという私たちの常識を覆す出来栄えのサイトになっています。アニメーションと動画をクリエイティブに組み合わせ、ユーザーを非常にエンゲージングなエクスペリエンスに没頭させてくれます。

また普通のサイトと違い、スクロール進捗バーとしても機能するナビゲーションなど、数々のユニークなユーザビリティ要素も取り入れています。

Feedのウェブデザイン例Featured by Awwwards

2)ETQ

ETQは非常にミニマリスティックなアプローチを取っているeコマースサイトで、余計なものをそぎ落とした背景に、プロダクトの魅力的な画像を大きく表示しています。シンプルでフラット、カラーベースの背景に、効果的なタイポグラフィーを用い、ユーザーがサイトを訪れた理由である「靴」から焦点がぶれないようにしています。

ETQのウェブデザイン例

Featured by Awwwards

3)Mikiya Kobayashi

Mikiya Kobayashi氏はプロダクトデザイナー。そのミニマリスティックなポートフォリオでは、印象的な写真と控えめなアニメーションを使用して作品を紹介しています。Kobayashi氏のフルサイトは元々日本語で作成され、英語に翻訳されており、同氏のデザインが国際的に通用するものであることを裏付けています。

Mikiya Kobayashiのウェブデザイン例Featured by Awwwards

4)地球温暖化の歴史

Wild Touchのサイトでは、「皇帝ペンギン」の仏映画監督Luc Jacquet氏と協力し、地球温暖化に関する教育的なビジュアルジャーニーを提供しています。歴史的なメディアと独特のアニメーションで展開されるストーリーが心に響きます。

地球温暖化の歴史のウェブデザイン例Featured by Awwwards

5)Virgin America

多くの航空会社のウェブサイトにユーザビリティの問題が見られる中、ヴァージン・アメリカのウェブサイトはユーザビリティ、アクセシビリティ、レスポンシブデザインで一段上を行くサイトです。事実、航空会社のウェブサイトとしては初めて、真にレスポンシブなウェブサイトとして取り上げられました。業界の新しい先例となるサイトだと言えます。

Virgin Americaのウェブデザイン例Featured by UX Awards

6)スイス航空の世界

意外かも知れませんが、もう1つ航空会社のウェブサイトを紹介しましょう。スイス航空は、非常に没入感のあるサイトを作成して、スイス航空で旅をする素晴らしさをアピールしています。その秀逸な仕上がりは無視することができません。

強力な視覚要素とアニメーションを使ってサイトの異なるセクションを紹介しており、そこでは、今日あまりにも当たり前になったセールス&マーケティングピッチ以上の豊富な情報が提供されています。

スイス航空の世界のウェブデザイン例Featured by The Webby Awards

7)ロサンゼルス・タイムズ紙

通常ニュースサイトと言えば、デザインやユーザビリティはそれほど期待されませんが、最近アップデートされたロサンゼルス・タイムズ紙のサイトは、新聞形式のデザインで読みやすい上、操作も簡単です。

ロサンゼルス・タイムズ紙のウェブデザイン例Featured by The Webby Awards

8)Minimums

Minimumsは、コンテンツの表示方法に非常に大胆なアプローチを用いています。グリッド形式のデザインに大きなタイポグラフィー、表示幅をフルに使った高品質な画像。同社のサイトは、デザイン内の視覚階層を保ちつつ、グリッド構成を上手く仕上げる優れた実例と言えます。

Minimumsのウェブデザイン例Featured by SiteInspire

9)Guillaume Tomasi

モントリオールの写真家Guillaume Tomasi氏は、自らの独特で印象的な写真を見せるのにぴったりのポートフォリオを作成しています。同氏のシュールなフォトスタイルと好対照を成す、シンプルかつフラットでたっぷりとスペースを使ったミニマリスティックなポートフォリオデザインは、主役である写真をより一層際立たせています。

写真はシリーズごとに分けられ、アートギャラリー風の説明が付けられています。各シリーズを横にスクロールして1枚ずつ写真を見ていく操作は、まるで本当にギャラリーで写真を観ているかのようなエクスペリエンスを提供してくれます。

Guillaume Tomasiのウェブデザイン例Featured by SiteInspire

10)ケネディ暗殺

多くのメディアが、故ジョン・F・ケネディ元米大統領暗殺50周年の特集を行いましたが、その中でもナショナル・ジオグラフィック誌の秀逸なデザインは目を引きました。パララックス・スクローリングを使用して、動画、音声、歴史的事実を表示したサイトでは、ジョン・F・ケネディ元大統領とリー・ハーヴェイ・オズワルド暗殺犯の生涯とそのストーリーに、思わず入り込んでしまいます。

ケネディ暗殺のウェブデザイン例Featured by Think with Google

11)Big Cartel

オンラインショップのプラットフォームを提供しているBig Cartelは比較的大規模な企業であるにも関わらず、そのウェブサイトは非常にシンプルで分かりやすく、説得力のあるエクスペリエンスを提供しています。

トップページにあるのはクリエイティブなヘッドラインと動画・・・他にはほとんど何もありません。シンプルなナビゲーションとBig Cartelを使ったサイト例が、同社のプラットフォームでできることを雄弁に物語っています。

Big Cartelのウェブデザイン例Featured by BestWebsiteGallery

12)Beagle

提案書作成プラットフォームのBeagleは、自社プロダクトのストーリーをシンプルかつ消化しやすい形で、視覚的かつ段階的に表現することに見事に成功しています。これは多くのスタートアップ企業が悩むところで、特に既存の市場に新しいアイデアをうまく紹介するのはそう簡単ではありません。

人々が知りたがるのは、「どんなプロダクトなのか? どのように機能するのか? なぜそれが重要なのか?」ということです。Beagleはこれらの質問全てに答えると同時に、プロダクトの魅力を効果的にアピールし、説得力を持って購入を促しています。さらに、「スクロールハイジャック」機能を適切に実装している数少ないサイトの1つでもあります。

Beagleのウェブデザイン例Featured by BestWebsiteGallery

13)Woven Magazine

Wovenはアーティスト、職人、作り手などを特集するオンラインマガジンです。個人的には、出版社や発行者が読みやすいコンテンツを提供する美しくエンゲージングなサイトを持つことが可能である(そしてそうすべきである)ことを再確認させてくれるサイトだと思っています。ポップアップや邪魔になるような広告はなく、コンテンツ自体のエクスペリエンスを最重視しています。

Woven Magazineのウェブデザイン例Featured by BestWebsiteGallery

14)アビー・ロード・スタジオの内側

Googleが素晴らしい仕事をしているのが、アビー・ロード・スタジオのサイトです。アビー・ロード・スタジオはビートルズやピンク・フロイドなどが録音を行ったスタジオとして有名です。優れたサウンドデザイン、秀逸なナビゲーション、視覚効果、おなじみのGoogleらしいセンスが相まって、訪問者をサイトの世界観に引き込みます。

アビー・ロード・スタジオの内側のウェブデザインの例Featured by FWA

15)JOHO's Bean

JOHO’s Beanのウェブサイトは、他に類を見ない、画像、インタラクティビティ、ストーリーテリング、視覚デザイン、そして何より素晴らしいサウンドエンジニアリングを備えています。

これらすべてが一体となって、感情に訴えかける、エンゲージングで説得力のあるサイトを作り上げ、上質なコーヒー豆が丁寧に栽培され店頭に並ぶまでのストーリーを美しく語っています。

JOHO's Beanのウェブデザイン例Featured by FWA

いかがでしたか?Webデザインを新しくされたい方はワードプレスなどのCMSや、HubSpotのCMSを活用し美しいウェブサイトの構築などを行うことオススメしています。

機能的でかつ秀逸なホームページデザインをこちらに無料サンプルとしてご用意させていただきましたので、興味がある方はこちらからどうぞ。

HubSpotではこの他にもマーケティングやセールスに役立つ資料を無料で公開していますので、ぜひこちらからご覧ください。

 

5ステップでパフォーマンスの高いウェブサイトを作成、管理する方法

編集メモ:この記事は、 2015年8月に投稿した内容に加筆・訂正したものです。Austin Knightによる元の記事はこちらからご覧いただけます。

 5ステップでパフォーマンスの高いウェブサイトを作成、管理する方法

元記事発行日: Apr 19, 2016 7:30:00 PM、最終更新日: 2023年8月22日

トピック::

ウェブデザイン