以前HubSpotブログでは「卓越したホームページデザイン 15の実例」という記事を公開しました。
おかげさまで、この記事、かなり読まれております！公開してから3週間足らずで、すでに36,000ビューを記録しました。......何もその数字を自慢しようというわけではありません。実はこれにはちょっとした余話があります。
実は、記事は確かに大成功だったのですが、ブログにいただいたコメントを見てみるとガッカリしていた読者も多かったようなのです。というのも実例として取り上げたホームページの大部分がソフトウェア企業のもので、多様な業界をカバーしていなかったためです。
そこでマーケターとしてHubSpotはどうするのか？読者の苦情を無視するのか、あるいはザ・キンクスのアルバムに倣って「Give the People What They Want（人々が望むものを与える）」のか？
もちろん後者のほうが望ましいという結論になり、早速、「卓越したホームページデザイン 54の実例」をダウンロード可能なコレクションとしてまとめました。ソフトウェア業界以外にもさまざまな業界のホームページを取り上げています。
また、ferretさんがこちら「目移りするほどイケてる！海外デザインギャラリーサイト24選」でも魅力的なデザインのウェブサイトを紹介しています。
今回はその中から特にHubSpotがお気に入りのホームページを紹介し、それらのページのどこが優れているのかを検証していきたいと思います。皆さんがホームページを一新する際の参考になれば幸いです。
5ステップでパフォーマンスの高いウェブサイトを作成、管理する方法
HubSpotとCanvaは共同で、パフォーマンスが高く見栄えの良いウェブサイトを作成、管理する手順を詳しく説明する無料のガイドを作成しました。
- オーディエンスとそのニーズについて理解する
- オーディエンスに合ったコンテンツを作成する
- ウェブサイトを最適化し最大限の成果を上げる
- パフォーマンスレポートの作成、分析、継続的な改善
今すぐダウンロードする
全てのフィールドが必須です。
「卓越」したホームページデザインとは？
実例を見ていく前に、優れたホームページデザインに欠かせない要素とはどのようなものか考えてみたいと思います。これについては「卓越したホームページデザイン 15の実例」の記事で詳しく書きましたが、ここで簡単におさらいしておきましょう。
「卓越した」という評価には主観が含まれるのも確かですが、それでも優れたホームページには総じて以下のような要素が見られるはずです。
- 「どんな企業なのか」「どんな事業を行っているのか」「訪問者がウェブサイトでできることは何か」という疑問に明確に答えている
- ターゲットオーディエンスに共鳴している
- 説得力のあるバリュープロポジションがなされている
- 操作性、ユーザビリティが優れており、モバイルにも最適化されている
- Call-To-Action（CTA）を組み込み、訪問者を次のステップへ誘導している
- 訪問者のニーズ、問題、疑問を反映して常に変化している（ここに挙げる実例やコレクション内の実例で、すでにウェブ上で見つけられないものがあるのは、これが理由です！）
- 全体的な見た目とセンスが良い
実例の中には、上記の要素をすべて満たしていないものもあるかもしれませんが、特定の要素において優れているものとして取り上げています。ホームページをデザインし直そうと考えているのであれば、十分にリサーチを行い、他のウェブサイトを参考にしてみてください。
この記事やダウンロードコレクションに含まれている実例以外にも、ウェブ上には素晴らしいホームページが山ほどあります。ウェブサイトを作成する際は、見た目に美しく、ブランドを反映したホームページをデザインするだけでなく、訪問者にユーザーフレンドリーなエクスペリエンスを提供することも忘れてはいけません。
もちろんWebデザインの観点からも機能的である必要性があります。こちらの「美しく（そして機能的な）Webデザイン受賞サイト15選」ではそのようなウェブサイトもご紹介しています。
時間をかけてターゲットオーディエンスに関する調査を行い、オーディエンスのニーズに合った素晴らしいエクスペリエンスを提供するようにしましょう。
魅力的な海外のホームページデザイン16の実例
1）Austin Beerworks
Austin Beerworksはアメリカのテキサス州を拠点とする地ビール醸造会社です。
このホームページの優れている点：
何といってもAustin Beerworksの商品のカラーリングとプレゼンテーションに惹きつけられます。白の背景に高解像度の商品画像。喉が渇いているときに見たら思わず飲みたくなるデザインですね。
2）Oliver Russell
Oliver Russellは「新規企業や社会貢献している企業のブランディング」を行っているエージェンシーです。
このホームページの優れている点：
絶妙な色合いや背景に配置された繊細なデザインは、主要コンテンツを損なわずに魅力的なビジュアルを実現している好例です。
3）Evel
Evelは音楽やその他関連商品の販売を行っているウェブサイトです。
このホームページの優れている点：
ウェブサイトで販売されているものが何なのか一目で分かります。また、さまざまなアイテム、魅力的なスライド、価格タグなどが見やすいように整然と配置されているのもいいですね。
4）Scotch & Soda
Scotch & Sodaはアムステルダムを拠点とするアパレル企業です。
このホームページの優れている点：
ホームページの異なる領域をタイル表示することですっきりと見せています。ソーシャルアイコンも整然と配置されてSNSで共有しやすくなっていますし、「最新投稿（Latest Posts）」から追加コンテンツにも簡単にアクセスできるように工夫されています。
5）Sagmeister Walsh
Sagmeister Walshはニューヨークを拠点とするデザイン会社です。
このホームページの優れている点：
実際の社内の様子を上から撮影した写真画像を使うというのは、とてもクリエイティブなアイデアですね。オフィスの床に描かれたメニューをクリックするとそれぞれのページに飛ぶことができます。他のデザイン会社に一歩差をつけたウェブサイトと言えるでしょう。
6）Jacqui Co.
Jacqui Co.はシンガポールでケーキとカップケーキを販売しているショップです。
このホームページの優れている点：
HubSpotが特にお気に入りのホームページです。ウェブサイトの見た目も雰囲気もケーキショップにぴったりにデザインされており、インタラクティブな要素もあって遊び心のある楽しいページになっています。
7）Fit for a Frame
Fit for a Frameは大きなサイズのオリジナルスクリーンプリントをネット販売しているウェブサイトです。
このホームページの優れている点：
おすすめの商品をホームページに上手く並べて表示しているところが評価できます。またトップに表示されているスライドショーもシンプルかつ魅力的です。スライドショーにすることで、ホームページをごちゃごちゃさせずに多彩な情報を提示することに成功しています。
8）Buffalo Wild Wings
Buffalo Wild Wingsはレストラン、グリル、バーをチェーン展開している企業です。
このホームページの優れている点：
統一されたブランドイメージを念頭に作成されたウェブページの好例です。色使い、デザイン、スタイル、フォントがすべて企業のブランドイメージと整合しています。
9）Prezi
Preziはクラウドベース（SaaS）のプレゼンテーションソフトウェアです。ストーリーに焦点をあて、バーチャルキャンバスを使ってアイデアを共有する新しいスタイルを提案しています。
このホームページの優れている点：
ホームページのメインバナーに動画を埋め込んでいるところが秀逸です。プレゼンテーション作成ツールを提供している企業ですから、自社製品のプレゼンがこれだけ優れていれば説得力もあるというもの。Preziブランドの専門知識と信頼性を裏打ちするページに仕上がっています。
10）SilkTricky
SilkTrickyは双方向性とエンタテインメントに特化した専門デジタルエージェンシーです。
このホームページの優れている点：
こちらも、ビジュアルタイルを使うことで、コンテンツをすっきりと表示している好例です。コンテンツを表示するエリアが限られているため、ほとんどスクロールせずに記事の詳細が読めるのも快適です。
11）Blind Barber
The Blind Barberは、昔ながらの理髪店をコンセプトとして、ニューヨークとロサンゼルスに店舗を構える理髪店＆ラウンジで、ヘアプロダクトや男性化粧品も展開しています。
このホームページの優れている点：
ローディング時間は多少長めではあるものの、ウェブサイトの最も重要な要素をページの中央に配しているところが注目に値します。訪問者の視線は自然と中央のボタンに引き寄せられますね。このボタンをクリックすると動画が埋め込まれた「About」ページが開き、訪問者にBlind Barberのコンセプトが伝わるようになっています。
12）Jib
Jibはトロントに拠点を置くデザイン広告エージェンシーです。
このホームページの優れている点：
動画を使って明確なバリュープロポジションを打ち出しています。またサイトの色使いもそれぞれの色が補完し合うような良い色使いですね。背景のテクスチャもブランド全体のテーマと一貫しています。
13）Luhse Tea
Luhse Teaはオンラインでお茶を販売しているネットショップです。
このホームページの優れている点：
ユニークな見た目と雰囲気のあるウェブサイトで、ブランドに個性を持たせ、競合他社と差別化しています。
14）Ride for the Brand
Ride for the Brandはテキサス州のフォートワースおよびダラスで事業展開しているウェブデザイン会社です。
このホームページの優れている点：
レトロなスタイルのホームページが目を引きます。カスタムデザイン要素で他とは一線を画し、横に自動スクロールする作りで、ユニークなユーザーエクスペリエンスを提供しています。
15）Ryan Edy
Ryan Edyはプロのフォトグラファーです。
このホームページの優れている点：
プロの写真撮影サービスを提供するウェブサイトとして、このデザインは訪問者にずばりアピールする作りと言えます。左側にシンプルなナビゲーションがあり、中央ではさまざまな写真が楽しめるようになっています。
16）Grey Goose
Grey Gooseはウォッカのブランドで、フランスのコニャック地方の伝統的な製造プロセスと原料を用いたフレイバーウォッカを製造、販売しています。
このホームページの優れている点：
プレゼンテーションがすべてと言えるでしょう。洗練された高解像度の画像と滑らかなライアウトで、ハイエンドをターゲットとしたブランドイメージを実現しています。Grey GooseのラインアップとレシピへリンクしたCall-To-Action（CTA）がページのメイン要素であり、それを邪魔するようなコンテンツは配置されていません。
また、HubSpotのCMSをご利用いただきますとデフォルトでレスポンシブであったり、海外ホームページデザインに見受けることのできるシンプルでクリーンなウェブサイトを構築することができます。
いかがでしたでしょうか。皆さんが素晴らしいと思うホームページデザインには他にどんなものがありますか？
上記に加えてさらに業界業種別に秀逸な海外ホームページデザインを50選しました。よろしければ無料サンプルはこちらからダウンロードください。
画像クレジット：cdrummbk
編集メモ：この記事は、2013年1月に投稿した内容に加筆・訂正したものです。Pamela Vaughanによる元の記事はこちらからご覧いただけます。
