ホームページは間違いなく、ウェブサイトで最も重要なページの1つです。なぜなら、第一印象を後から変えることは絶対にできないからです。
ホームページは、たとえるなら企業の表玄関です。ホームページの印象が悪ければ、訪問者はすぐに「戻る」ボタンをクリックしてどこかへ行ってしまいます。
書店で、表紙だけ見て本を選んでしまうことってありますよね。あれと同じです。
では、素晴らしいホームページとそうでないものとの違いは何でしょうか。実は、見た目だけではなく、機能的であることも必要です。
この記事でも単に美しいだけでなく、スマートに作られたホームページを、素晴らしい例として選んでいます。
この記事では、最初にホームページデザインのベストプラクティスをご紹介し、続いて16の素晴らしい実例をお見せします。
また、ferretさんがこちら「目移りするほどイケてる！海外デザインギャラリーサイト24選」で海外のWebデザインについて紹介しています。
もしも2017年のWebデザインのトレンドをお探しの場合はこちらの記事をご覧ください。
5ステップでパフォーマンスの高いウェブサイトを作成、管理する方法
HubSpotとCanvaは共同で、パフォーマンスが高く見栄えの良いウェブサイトを作成、管理する手順を詳しく説明する無料のガイドを作成しました。
- オーディエンスとそのニーズについて理解する
- オーディエンスに合ったコンテンツを作成する
- ウェブサイトを最適化し最大限の成果を上げる
- パフォーマンスレポートの作成、分析、継続的な改善
今すぐダウンロードする
全てのフィールドが必須です。
優れたホームページデザインの要件
ここでは優れたホームページの要件を説明します。この記事で紹介しているホームページは、これらの要件をいくつか必ず満たしています。要件を多く満たしていれば、それだけホームページの質も高くなります。
1）何の企業で、何を提供していて、ホームページで何を紹介しているかが明確であること。
有名な大手企業であれば、この要件は必要ないかもしれません。ですが、実際にはほとんどの企業で、訪問者に概要がすぐに伝わるように、ホームページを作成する必要があります。
このことについて、Steven Krugg氏によるベストセラー本、「Don't Make Me Think」にわかりやすく次のように書かれています。「何の企業かが数秒以内にわからなければ、訪問者はすぐに去ってしまいます。」
2）オーディエンスのターゲットが明確であること
ホームページのターゲットが的確に絞られていること、そして、そのオーディエンスにわかりやすい言葉で書かれていることが重要です。専門用語を多用したり、流行り言葉を入れたりするのは避けましょう。
3）魅力的な価値を提案していること
ホームページを訪問した人がその場をすぐに離れてしまわないように、説得力のある何かを伝えなくてはなりません。ホームページは企業の価値を提案するための絶好の場所です。その魅力がきちんと伝われば、競合する他社のホームページに移動することなく、その場にとどまってくれるはずです。
4）どのデバイスでも適切に表示できること
この記事で紹介しているホームページには、表示の妨げになるもの（フラッシュバナー、アニメーション、ポップアップ、あるいは意味もなく複雑な要素など）が何もなく、非常に扱いやすく作られています。また、最近では多くの人がモバイルを利用するため、モバイルに最適化することも必須の条件と言えます。
5）Call-To-Action（CTA）を表示すること
後ほどご紹介するホームページには、「無料トライアル」、「デモを依頼する」、「ここで購入する」、「詳しく見る」などと書かれたCall-To-Action（CTA）が、プライマリとセカンダリの2つを揃えて効果的に配置されています。
ホームページの目的は、訪問者を惹きつけ、ウェブサイトの他のページに移動してもらい、ファネルの下の方に訪問者を移動させることです。そのため、訪問者に次に何をしてもらいたいかを、CTAを利用して伝える必要があります。そして何よりも、ホームページを単なるパンフレットではなく、セールスまたは見込み客を獲得する有効な機能を備えたページにするために、CTAが非常に重要な役割を果たします。
6）定期的に更新されていること
質の高いホームページには、常に変更が加えられています。Whitehouse.govなどのように、ニーズや問題点、あるいは訪問者からの質問に応じて定期的に更新されるホームページもあれば、A／Bテストの結果やパーソナライゼーションによって変更されるホームページもあります。
7）全体的なデザインが優れていること
訪問者に信頼感を与え、価値を提案し、次のステップへと促すために、ホームページのデザインは非常に重要です。レイアウトやCTAの配置、余白、配色、フォントなどの要素にまで工夫を凝らす必要があります。
それでは、次からはいよいよ素晴らしいホームページの実例を16点ご紹介し、その理由をご説明します。
お手本にしたいホームページデザイン16の実例
1）FreshBooks
お手本にしたいポイント：
- 閲覧しやすい。ホームページの長さについてはさまざまな議論がありますが、長くするのであれば、スクロールして読みやすいよう構成する必要があります。このサイトがまさにそうで、ストーリーを読むようにスクロールして見ることができます。
- プライマリCTAと背景の色のコントラストが見事です。訪問者にコンバージョンを期待していることが明らかにわかるよう、効果的に配置されています。
- CTAのテキスト、「Try it Free for 30 Days（30日間無料トライアル）」のインパクトが強い。
- タイトルの下のテキスト、「Join 5 million people usig FreshBooks...（ユーザー数500万人のFreshBooksで、請求書の発行や時間の管理、出費の記録を簡単に行いましょう。）」は、FreshBooksのターゲットオーディエンスであるフリーランサーや小規模企業の悩み（会計ソフトの多くは複雑過ぎて使いづらいこと）を的確に突いていて良いと思います。
2）Airbnb
お手本にしたいポイント：
- ホームページの画面全体が非常に豪華に作られています。旅行者が旅先で現地に暮らす人のようにふるまう様子（台所で料理をしたり、お店でチーズを選んだり、通りを原付で走行するなど）が、高解像度で美しく全画面表示されており、人間味やリアリティが感じられます。
- 多くの人が旅行に出かけたいと思うような行先や日程を検索フォームに表示することで、訪問者の気持ちを次のステップに向かわせています。
- ログインして検索を行うユーザーに前回の内容が自動入力されるなど、検索フォームがスマートに作成されています。
- プライマリCTA（検索フィールド）が、背景とのコントラストで目立って表示されています。また、セカンダリCTA（「ホストになる」のボタン）も、画面の上の方にあります。
3）Mint
お手本にしたいポイント：
- 極めてシンプルに作られているものの、ヘッドラインなどのコピーは専門用語なしで印象的に作られています。
- 堅実でありながらもリラックスした雰囲気。とりわけ金融情報を扱う製品のホームページでは、このような雰囲気が望ましいと思います。
- CTAのテキスト、「Sign up free」もシンプルかつダイレクトで説得力があります。また、CTAのデザインに鍵のアイコンが含まれている点も、安全なイメージを与えるため効果が高いと思います。
4）Dropbox（個人用）
お手本にしたいポイント：
- Dropboxのホームページおよびウェブサイトは、シンプルさに徹底的にこだわり、白いスペースを大きく取るために、テキストや画像の量を制限しています。
- 上のスクリーンショットではわかりにくいかもしれませんが、画像にちょっとした可愛らしいアニメーションが含まれていて、見る人を喜ばせています。
- タイトルの下のテキストも、「Get to all your files from...（どこにいようと、どのデバイスからであろうと、すべてのファイルにアクセスでき、誰とでもシェアが可能です。）」と、シンプルかつ印象強く書かれています。難しい用語を使用せず、Dropboxのサービスをわかりやすく説明しています。
- プライマリCTA（Sign up for free.）を目立つように配置してはいますが、Googleでサインアップすることも可能で、登録用のフォームに入力する手間を嫌う訪問者の負担を減らしています。
５）Dropbox（ビジネス用）
お手本にしたいポイント：
- オーディエンスを2つに分け、それぞれに効果的なホームページを用意している素晴らしい例です。個人ユーザー向けに作られたメインのホームページ（上の例）とは異なり、ビジネスユーザー向けでは、Dropboxが安全でスケーラブルに利用できることをホームページで説明およびアピールする必要があります。
- 個人用のホームページと同様、ビジネス用でもシンプルなブランドイメージを保っています。大きくて製品との関連が高い画像、わかりやすいコピー、「Try fee for 30 days」と書かれたCTAボタンの3つだけ、つまり重要なものだけを置くという点が共通しています。
６）Whitehouse.gov
お手本にしたいポイント：
- Whitehouse.govのように、全米を網羅するウェブサイトを運営するのは簡単ではないはずです。このウェブサイトは、国民の関心事や優先事項に応じて定期的に更新されており、ホームページだけでも何百回と変更されています。ホームページの質を高めるために、鍵を握るのはテストと最適化です。
- Whitehouse.govが特に素晴らしいのは、クリーンなデザインでコミュニティを育成するなど、政府が運営する他の多くのウェブサイトとは、様子がまったく異なるところです。
- 必要な情報は、ホームページの画面から簡単に探すことができます。すぐに見つからなければ、検索フィールドを使って探すことも可能です。
７）4 Rivers Smokehouse
お手本にしたいポイント：
- この画面を最初に見たとき、美味しそうなお肉に目を奪われました。写真もさることながら、「Brisket. 18 years to master. Yours to savor.（18年かけて完成させた味。ブリスケットをご賞味ください。）」というコピーを見ると、無性に食べたくなります。
- スクロールして進むと、サービス、メニュー、そして人々が食事を楽しんでいる様子が次々と現れてきます。トレンドになっている人気のページデザインを上手く活用しています。
- 唯一のマイナスポイントは、このレストランが家の近くにないことでしょうか。
8）Cobb Pediatric Therapy Services
お手本にしたいポイント：
- このホームページのタイトル、「Work With a Company That Gets It（頼りになる会社を選ぶ）」、およびサブタイトル「Trust us. We've been there too! We'll find jobs where you can thrive.（実際、私たちも大変な経験をしました。あなたの人生を変える仕事を見つけましょう。）」で、ユニークで魅力的な価値を提案しています。訪問者の感情をよく理解してアピールできていると思います。
- 上のスクリーンショットではわかりませんが、このタイトルとサブタイトルは、仕事を探している人と、学校のセラピストを募集している人という複数のペルソナ向けにいくつかのバージョンがあり、ローテーションで表示されます。
- これらのCTAはいずれも適切に配置されており、シンプルなテキストや、背景とのコントラストが素晴らしいと思います。
9）Jill Konrath
お手本にしたいポイント：
- 非常にシンプルで、要点をダイレクトに突いています。タイトルとサブタイトルを見ただけで、Jill Konrath氏の職業（およびサービス）をすぐに理解できます。
- また、このページから彼女のソートリーダーシップが発揮された多数のコンテンツを簡単に入手できます。これは、キーノートスピーカーとして信頼を得るために非常に効果的です。
- 2つのプライマリCTAで、ニュースレターを購読することと、Jill Konrath氏へ連絡を取ることが簡単にできます。
- 新聞社や雑誌社のロゴが、ソーシャルプルーフとして表示されています。
10）Evernote
お手本にしたいポイント：
- Evernoteは数年間かけて、シンプルなメモを保存するアプリから、ビジネススイート製品へと変化しました。これをホームページで表現することは簡単ではないでしょう。ですが、Evernoteはたくさんのメッセージを短い言葉に込めて見事に伝えています。
- 色数は豊富でありながら落ち着いた色彩のビデオの上に、ブランドカラーであるグリーンと白のハイライトを利用して、コンバージョンを効果的に促しています。
- 「Remember Everything」というシンプルなヘッドラインに始まり、「Sign Up For Free.」と書かれたCTAまでの流れが見事です。
11）Telerik by Progress
お手本にしたいポイント：
- Telerikは数々のテクノロジー製品を提供する企業ですが、ホームページからは、堅苦しい企業のイメージはまったく感じられません。明るい色使いや楽しいデザイン、そしてビデオもあり、Googleに似た雰囲気です。訪問者を歓迎するムードから、企業の人間味が十分に感じられます。
- 6つの製品の概要が簡潔に説明されていて素晴らしいと思います。どのような製品があるか、その詳細を見る（Lean more）にはどうすればよいかが一目瞭然です。
- テキストの量が多過ぎず読みやすい。また、カスタマーに馴染みのある言葉でわかりやすく書かれています。
12）Boxbee
お手本にしたいポイント：
- ヘッドラインが、そのまま倉庫業で起業しようとしている人をターゲットとしたCTAになっています。
- デザインが非常にクリーンでシンプル。ほとんどヘッドラインとプライマリCTAしかなく、無駄が一切ありません。
- プライマリCTAはコントラストが素晴らしく、非常に目立って見えます。
13）eWedding
お手本にしたいポイント：
- eWeddingはウェディングの計画を立てているカップルが、ウエディングウェブサイトを自分で作成できるサービスです。このホームページはすっきりとした構成で、利用者がウェブサイトの作成を始めるために必要となる要素しか含まれていません。
- サブヘッドラインの「Over 750,000 wedding websites built!（75万件以上のウェディングウェブサイトを作成！）」は、素晴らしいソーシャルプルーフです。
- 製品の画像もヘッドラインも秀逸です。また、「Start website」と書かれたCTAをクリックするだけで、簡単に利用を開始できます。
14）Basecamp
お手本にしたいポイント：
- Basecampはかなり以前から、実に素晴らしいホームページを作り続けている企業で、この例もその1つです。秀逸なヘッドラインや巧みに作られた漫画が持ち味です。
- 印象深いCTAがフォールドの上部に配置されています。
- この例では、ブログのようなスタイルで（つまり、1ページだけで構成された）ホームページを作成することにより、製品について非常に多くの情報を提供しています。
15）charity: water
お手本にしたいポイント：
- ビジュアル要素が多く、クリエイティブなコピーや、インタラクティブなウェブデザインであるなど、一般的な非営利団体のウェブサイトとは大きく異なっています。
- ヘッドラインにアニメーションを使用し、多くのメッセージを1行で表示させています。
- ビデオと写真を非常に効果的に利用し、見る人をアクションを起こしたいという気持ちにさせています。
16）TechValidate
お手本にしたいポイント：
- デザインが美しい。特に、白いスペースの使い方や色のコントラスト、顧客中心のデザインが素晴らしいと思います。
- ヘッドラインやCTAが明確で惹きつけられます。
- ページの構成が見事で内容を簡単に理解できます。
これらのホームページをどのように感じましたか。
いかがでしたから？Webデザインを新しくされたい方はワードプレスなどのCMSや、HubSpotのCMSを活用し美しいウェブサイトの構築などを行うことオススメしています。
機能的でかつ秀逸なホームページデザインをこちらに無料サンプルとしてご用意させていただきましたので、興味がある方はこちらからどうぞ。
