時々、はっとさせられ、考えさせられるサイトに出会うことがあります。従来のウェブの限界を打ち破ったサイトです。
美的デザイン、ユーザビリティ、インタラクティビティ、サウンドデザイン、あるいはサイトが提供する価値など、抜きん出ているものが何であれ、最高傑作のサイトに出会えたときの感動というのは格別です。
驚くまでもなく、こうしたサイトや、それらのウェブ全体への貢献を評価している組織や賞というのが多数存在します。
今回は最もインスピレーションを与えてくれるサイトの一部を皆さんにご紹介するため、Awwwards、UX Awards、The Webby Awards、SiteInspire、Think with Google、 BestWebsiteGallery、FWAといった主要な賞を受賞した、最近注目のサイトを15ほどご紹介したいと思います。
以下のリストをご覧いただく際に注意していただきたいのが、各サイトにはそれぞれ特有の秀逸さがあり、独自の目的を追求しているという点です。ビジュアルデザインで秀でているサイトもあれば、インタラクティビティで突出しているサイトもあります。
つまり、これらのサイトすべてが、すぐにコピーしてそのまま使える「コンバージョン製造機」やアイデアの青写真ではないということです。
むしろ、ウェブデザインのインスピレーションを得たり、インターネット上で繰り広げられている最先端のマーケティングに触れたりする、素晴らしい手段の1つとして考えてください。
また、ferretさんがこちら「目移りするほどイケてる！海外デザインギャラリーサイト24選」で海外のWebデザインについて紹介しています。
もしも2017年のWebデザインのトレンドをお探しの場合はこちらの記事をご覧ください。
5ステップでパフォーマンスの高いウェブサイトを作成、管理する方法
HubSpotとCanvaは共同で、パフォーマンスが高く見栄えの良いウェブサイトを作成、管理する手順を詳しく説明する無料のガイドを作成しました。
- オーディエンスとそのニーズについて理解する
- オーディエンスに合ったコンテンツを作成する
- ウェブサイトを最適化し最大限の成果を上げる
- パフォーマンスレポートの作成、分析、継続的な改善
今すぐダウンロードする
全てのフィールドが必須です。
インスピレーションを与えてくれるウェブサイトデザイン15選
1）Feed
Feedはコンセプトが面白いだけでなく、ウェブで何が可能かという私たちの常識を覆す出来栄えのサイトになっています。アニメーションと動画をクリエイティブに組み合わせ、ユーザーを非常にエンゲージングなエクスペリエンスに没頭させてくれます。
また普通のサイトと違い、スクロール進捗バーとしても機能するナビゲーションなど、数々のユニークなユーザビリティ要素も取り入れています。
2）ETQ
ETQは非常にミニマリスティックなアプローチを取っているeコマースサイトで、余計なものをそぎ落とした背景に、プロダクトの魅力的な画像を大きく表示しています。シンプルでフラット、カラーベースの背景に、効果的なタイポグラフィーを用い、ユーザーがサイトを訪れた理由である「靴」から焦点がぶれないようにしています。
3）Mikiya Kobayashi
Mikiya Kobayashi氏はプロダクトデザイナー。そのミニマリスティックなポートフォリオでは、印象的な写真と控えめなアニメーションを使用して作品を紹介しています。Kobayashi氏のフルサイトは元々日本語で作成され、英語に翻訳されており、同氏のデザインが国際的に通用するものであることを裏付けています。
4）地球温暖化の歴史
Wild Touchのサイトでは、「皇帝ペンギン」の仏映画監督Luc Jacquet氏と協力し、地球温暖化に関する教育的なビジュアルジャーニーを提供しています。歴史的なメディアと独特のアニメーションで展開されるストーリーが心に響きます。
5）Virgin America
多くの航空会社のウェブサイトにユーザビリティの問題が見られる中、ヴァージン・アメリカのウェブサイトはユーザビリティ、アクセシビリティ、レスポンシブデザインで一段上を行くサイトです。事実、航空会社のウェブサイトとしては初めて、真にレスポンシブなウェブサイトとして取り上げられました。業界の新しい先例となるサイトだと言えます。
6）スイス航空の世界
意外かも知れませんが、もう1つ航空会社のウェブサイトを紹介しましょう。スイス航空は、非常に没入感のあるサイトを作成して、スイス航空で旅をする素晴らしさをアピールしています。その秀逸な仕上がりは無視することができません。
強力な視覚要素とアニメーションを使ってサイトの異なるセクションを紹介しており、そこでは、今日あまりにも当たり前になったセールス＆マーケティングピッチ以上の豊富な情報が提供されています。
7）ロサンゼルス・タイムズ紙
通常ニュースサイトと言えば、デザインやユーザビリティはそれほど期待されませんが、最近アップデートされたロサンゼルス・タイムズ紙のサイトは、新聞形式のデザインで読みやすい上、操作も簡単です。
8）Minimums
Minimumsは、コンテンツの表示方法に非常に大胆なアプローチを用いています。グリッド形式のデザインに大きなタイポグラフィー、表示幅をフルに使った高品質な画像。同社のサイトは、デザイン内の視覚階層を保ちつつ、グリッド構成を上手く仕上げる優れた実例と言えます。
9）Guillaume Tomasi
モントリオールの写真家Guillaume Tomasi氏は、自らの独特で印象的な写真を見せるのにぴったりのポートフォリオを作成しています。同氏のシュールなフォトスタイルと好対照を成す、シンプルかつフラットでたっぷりとスペースを使ったミニマリスティックなポートフォリオデザインは、主役である写真をより一層際立たせています。
写真はシリーズごとに分けられ、アートギャラリー風の説明が付けられています。各シリーズを横にスクロールして1枚ずつ写真を見ていく操作は、まるで本当にギャラリーで写真を観ているかのようなエクスペリエンスを提供してくれます。
10）ケネディ暗殺
多くのメディアが、故ジョン・F・ケネディ元米大統領暗殺50周年の特集を行いましたが、その中でもナショナル・ジオグラフィック誌の秀逸なデザインは目を引きました。パララックス・スクローリングを使用して、動画、音声、歴史的事実を表示したサイトでは、ジョン・F・ケネディ元大統領とリー・ハーヴェイ・オズワルド暗殺犯の生涯とそのストーリーに、思わず入り込んでしまいます。
11）Big Cartel
オンラインショップのプラットフォームを提供しているBig Cartelは比較的大規模な企業であるにも関わらず、そのウェブサイトは非常にシンプルで分かりやすく、説得力のあるエクスペリエンスを提供しています。
トップページにあるのはクリエイティブなヘッドラインと動画・・・他にはほとんど何もありません。シンプルなナビゲーションとBig Cartelを使ったサイト例が、同社のプラットフォームでできることを雄弁に物語っています。
Featured by BestWebsiteGallery
12）Beagle
提案書作成プラットフォームのBeagleは、自社プロダクトのストーリーをシンプルかつ消化しやすい形で、視覚的かつ段階的に表現することに見事に成功しています。これは多くのスタートアップ企業が悩むところで、特に既存の市場に新しいアイデアをうまく紹介するのはそう簡単ではありません。
人々が知りたがるのは、「どんなプロダクトなのか？ どのように機能するのか？ なぜそれが重要なのか？」ということです。Beagleはこれらの質問全てに答えると同時に、プロダクトの魅力を効果的にアピールし、説得力を持って購入を促しています。さらに、「スクロールハイジャック」機能を適切に実装している数少ないサイトの1つでもあります。
Featured by BestWebsiteGallery
13）Woven Magazine
Wovenはアーティスト、職人、作り手などを特集するオンラインマガジンです。個人的には、出版社や発行者が読みやすいコンテンツを提供する美しくエンゲージングなサイトを持つことが可能である（そしてそうすべきである）ことを再確認させてくれるサイトだと思っています。ポップアップや邪魔になるような広告はなく、コンテンツ自体のエクスペリエンスを最重視しています。
Featured by BestWebsiteGallery
14）アビー・ロード・スタジオの内側
Googleが素晴らしい仕事をしているのが、アビー・ロード・スタジオのサイトです。アビー・ロード・スタジオはビートルズやピンク・フロイドなどが録音を行ったスタジオとして有名です。優れたサウンドデザイン、秀逸なナビゲーション、視覚効果、おなじみのGoogleらしいセンスが相まって、訪問者をサイトの世界観に引き込みます。
15）JOHO's Bean
JOHO’s Beanのウェブサイトは、他に類を見ない、画像、インタラクティビティ、ストーリーテリング、視覚デザイン、そして何より素晴らしいサウンドエンジニアリングを備えています。
これらすべてが一体となって、感情に訴えかける、エンゲージングで説得力のあるサイトを作り上げ、上質なコーヒー豆が丁寧に栽培され店頭に並ぶまでのストーリーを美しく語っています。
いかがでしたか？Webデザインを新しくされたい方はワードプレスなどのCMSや、HubSpotのCMSを活用し美しいウェブサイトの構築などを行うことオススメしています。
機能的でかつ秀逸なホームページデザインをこちらに無料サンプルとしてご用意させていただきましたので、興味がある方はこちらからどうぞ。
編集メモ：この記事は、 2015年8月に投稿した内容に加筆・訂正したものです。Austin Knightによる元の記事はこちらからご覧いただけます。
