ウェブサイトの訪問者に素晴らしい第一印象を与えるチャンスは、たった一度しかありません。ウェブサイト上にいくつもあるページのうち、ホームページが最も重要なページの1枚であることはそのためです。
どのような会社でも、ホームページはバーチャル世界での会社の顔です。初めて訪問した人がホームページを気に入らなかったら、反射的に取る行動は「戻る」ボタンをクリックすることです。
そう、残念なことに、いまだに多くの人が表紙のデザインで本を選びます。
ウェブサイトのホームページデザインを、つまらないものではなく魅力的なものにする要素はいったい何でしょう？見た目だけでは不十分です。よく機能することも重要です。
このリストで挙げたもっとも素晴らしいホームページのほとんどが、見た目の美しさだけではなく、その内容の素晴らしさで群を抜いていることからもよくわかると思います。
サンプルをひとつひとつ見ていく前に、どのようなホームページデザインを成功例と言えるのか、詳細を分析してみましょう。
5ステップでパフォーマンスの高いウェブサイトを作成、管理する方法
HubSpotとCanvaは共同で、パフォーマンスが高く見栄えの良いウェブサイトを作成、管理する手順を詳しく説明する無料のガイドを作成しました。
- オーディエンスとそのニーズについて理解する
- オーディエンスに合ったコンテンツを作成する
- ウェブサイトを最適化し最大限の成果を上げる
- パフォーマンスレポートの作成、分析、継続的な改善
今すぐダウンロードする
全てのフィールドが必須です。
ウェブサイトのホームページデザインを素晴らしいものにする要素とは
ここで紹介しているホームページデザインはどれも、以下の要素の組み合わせを使用しています。すべてのページが完璧だとは言いませんが、どのページのデザインも多くの要素を効果的に取り入れています。
1）デザインを見るだけで、ウェブサイトの企業が「誰なのか」、「何をしている企業なのか」、そして「訪問者はサイト内で何ができるのか」といった情報が明確にわかる
誰もが知っている有名な企業であれば（例えばCoca-Colaなど）、自己紹介や営業内容などは省いても問題がないかもしれません。ただし現実は、省略できるような企業は数えるほどしかなく、そういった内容を明確にすることで、訪問者は自分が「正しいホームページ」を開いたと確認することができるのです。
Steven Krugg氏が、ベストセラーである著書『Don't Make Me Think（考えさせないで）』の中でわかりやすくまとめてくれています。ホームページの企業が何をしている企業なのか、ページを開いて数秒間でわからなければ、ほとんどの訪問者はページから離れていきます。
2）ターゲットオーディエンスが共鳴できるデザインにする
ホームページのターゲットは絞り込む必要があります。正しいターゲットに対し、ターゲットに合った言葉で語りかけてください。素晴らしいホームページでは、いかにも「企業的な堅苦しい言い回し」は避け、表面的な言葉も使わないようにしています。
3）デザインが説得力のあるバリュープロポジションを伝えている
せっかくホームページを開いてくれた訪問者がすぐに離れて行ってしまうことのないよう、ホームページは魅力的でなければいけません。また、ホームページはバリュープロポジションの表示にぴったりの場所です。バリュープロポジションを確認することで、プロスペクト（潜在見込み客）は他社のページに移動せずに、現在のページに留まる選択をしてくれるのです。
4）デザインは様々なデバイスに対し最適化されている
ここで紹介しているホームページはどれも、使い勝手が非常に良いものとなっています。つまりナビゲートがわかりやすく、点滅を繰り返すバナー、アニメーション、ポップアップ、必要以上に複雑で実際はなくてもよい要素など、ページを見にくくする「けばけばしい」オブジェクトが使用されていません。
またほとんどのページが、モバイル最適化を行っています。現在のモバイル社会では、最適化は非常に重要な必須機能です。
5）デザインにCTA（Call-To-Action）が含まれている
この記事で紹介しているホームページはどれも、プライマリCTAとセカンダリCTAを効果的に使用し、訪問者が次の段階に一歩踏み出せるよう手助けをしています。例として挙げられるものは、「無料トライアル」、「デモを依頼」、「すぐにお試しください」、「詳細はこちら」などがあります。
忘れないでください。ホームページの目的は訪問者によりよくウェブサイトを見てもらい、ファネルのより深い位置へ訪問者を誘導することです。CTAを見れば訪問者は次に何をしたらよいかがわかるので、困惑したりどうしたらよいかわからなくなったりすることがありません。
より重要なことは、CTAがあることで、ホームページが売り上げに繋がったり、リードジェネレーション（見込み客の獲得）エンジンとなったり、単なるパンフレットではなくなるという点です。
6）デザインが変化し続ける
最高のホームページは常に同じではありません。一部のホームページは訪問者のニーズ、問題、質問等を反映させて常に変化し続けています。A/Bテストからダイナミックコンテンツに変わるホームページもあります。
7）デザインが効果的である
企業の信頼性を高め、価値を伝えて、訪問者を次のステップに導くためには、ホームページのデザインを素晴らしいものにすることは重要です。そのような目的で作成された素晴らしいホームページは、レイアウト、CTAの位置、余白、色、フォント、その他の補助的要素を、効果的に利用しています。
さあ、20の実例を見ながら、卓越したホームページデザインについて学びましょう。
ウェブサイトデザインのインスピレーション：最高のホームページデザイン20例
1）FreshBooks
素晴らしい点
- 人を夢中にさせることは簡単です。短いホームページと長いホームページのどちらが効果的か、多くの議論が交わされています。もし長いホームページを試してみるのであれば、スクロールしやすく、かつ読みやすいものにする必要があります。このサイトはそのルールに完全に従っており、訪問者はまるで物語を読んでいるかのような感覚に陥ります。
- コントラストとプライマリCTAの配置が絶妙です。ページを開いた瞬間に企業が訪問者に求めているコンバージョンの内容がわかります。
- CTAに使用されているコピー、「無料で始めよう」はとても強力です。
- FreshBooksはホームページにお客さまからの言葉を載せています。これを見るとFreshBooksの製品が選ばれている具体的な理由がわかります。
- サブヘッドラインもまた素晴らしいです。「1000万社の小規模企業のオーナーが利用しているFreshBookを、一緒に使ってみませんか。」社会的証明が驚くほど上手に利用されています。1000万社は大きな数字です。他の会社のオーナーが、自分もその仲間に加わろうかと思うには十分です。
2）Airbnb
素晴らしい点
- このページには、行き先と日付を入力することで検索ができる、訪問者にとって嬉しいフォームが用意されています。フォームがページ中央上部に表示されているためすぐに利用しやすく、訪問者は簡単に次のステップに進むことができます。
- この検索フォームは「スマート」な設定がされており、ログイン状態であれば、前回検索した場所を自動的に表示してくれます。
- プライマリCTA（「検索」）は、背景と対照的で目立つ表示になっています。そしてホストを選ぶセカンダリCTAも、アバブ・ザ・フォールドで見やすくなっています。
- このページには簡単なツアーや保養地などの提案も用意されており、Airbnbユーザーは旅行をより楽しくするアクティビティ等を、宿泊先の予約と同じページで予約することができます。また、他のユーザーに一番人気のある提案を確認することも可能です。
3）Mint
素晴らしい点
- ヘッドラインとサブヘッドラインが非常にシンプルなデザインで力強く、専門用語も使用していません。
- ホームページは確実でありながら堅苦しくないイメージを印象付けています。金融情報を扱う製品にとってはとても大切な雰囲気のイメージです。
- ここでもシンプルで直接的、人を惹きつけるCTAのコピー文章「無料で登録」が使用されています。CTAのデザイン自体も輝いています。錠前のイラスト付きのアイコンをクリックすると、安全性に関するメッセージが再度表示されます。
4）Dropbox (Business)
素晴らしい点
- Dropboxはシンプルなデザインとブランディングを採用しています。ホームページに表示されるものは、Dropboxをイメージさせる大きな画像とそれをよりわかりやすくするためのテキスト、そして「30日間の無料お試し」CTAボタンだけです。つまり、本当に必要なものしか表示させていないのです。
- Dropboxのホームページとウェブサイトは、シンプルさを追求した究極の形と言えます。テキストと視覚要素の利用を最小限に抑え、余白を最大限に利用しています。
- サブヘッドラインはシンプルですが力強いものです。「従業員やIT担当者が信頼する、安全なファイル共有および保管ソリューション。」Dropboxのサービスを細かく説明する必要はありません。
5）4 Rivers Smokehouse
素晴らしい点
- よだれが垂れそう。4 Rivers Smokehouseのウェブサイトを開いて最初に浮かぶ言葉です。素晴らしい写真と共に表示されるヘッドライン「ブリスケット。一人前に調理できるまでに18年。どうぞお試しあれ。」は、一度は試してみる価値のある体験に見えます。
- パララックススクロールを利用して4 Rivers Smokehouseのサービス、メニュー、素晴らしい時間を過ごしている人々を見ることができます。人気のデザイントレンドを上手に利用しています。
- マイナス面は何か？4 Rivers Smokehouseが近所にないこと！残念！
6）Cobb Pediatric Therapy Services
素晴らしい点
- このページのヘッドラインとサブヘッドラインは、訪問者の心に語りかけてきます。「必要なものを手に入れられる会社と仕事をしよう。」「信じてください。私たちも昔、同じ立場にいました。成長できる仕事を見つけます。」このページのバリュープロポジションは独特で魅力的です。
- この記事の画像を見るだけではわかりませんが、このページのヘッドラインはカルーセルになっており、特定のペルソナに働きかけます。ターゲットは仕事を探している人々から学校のセラピストを探している人々まで様々です。
- 訪問者がページを開いて辿ることのできるルートはいくつもありますが、このページではCTAがとても上手に配置されており、使用している言葉もシンプルで、ページの他の部分とのコントラストもとてもわかりやすくなっています。
7）Jill Konrath
素晴らしい点
- このページはとてもシンプルで、直接要点を掴むことができます。ヘッドラインとサブヘッドラインを見るだけで、Jill Konrath氏が何をしているのか（そして訪問者のビジネスにどのようにプラスになるのか）ということがわかります。
- またこのページはJill氏のソートリーダーシップ素材に容易にアクセスできるようになっており、基調講演スピーカーとしてのJill氏の信頼性を確立する点において、非常に重要な役割を果たしています。
- 2つのプライマリCTAを利用することで、ニュースレターの購読およびJill氏へのメッセージ送信を簡単に行うことができます。
- ポップアップ型の購読CTAには社会的証明を利用しており、Jill氏の何万人ものファンと同様に購読を始めるよう促しています。
- ページには社会的証明として報道機関のロゴと証言が使用されています。
8）Evernote
素晴らしい点
- 数年の間に、Evernoteは単なるメモ帳代わりのアプリから、ビジネス製品シリーズにまで成長しました。ホームページで何かを伝えることは簡単なことではありません。ですがEvernoteは、多くの潜在的なメッセージを2～3個の主要特性にまとめることで、上手にホームページを利用しています。
- Evernoteのホームページは、動画では鮮やかで落ち着いた色調の組み合わせを使用しています。そしてEvernoteを表す明るい緑色と白抜きの文字を使用することで、コンバージョンパスをわかりやすくしています。
- シンプルなヘッドライン（「すべてを記憶する」）を辿ると、目線の先にCTA「無料で新規登録」が現れます。
- また、EvernoteはGoogleを通したワンクリックの登録プロセスを採用しており、訪問者はさらに短い時間で一連の作業をすることができます。
9）Telerik by Progress
素晴らしい点
- Telerikのウェブサイトを開いたとき、「たくさんの製品を扱う企業」というイメージはありません。多くのテクノロジー製品を扱う企業ですが、はっきりした色、楽しいデザイン、動画など、Googleに似た雰囲気を感じさせます。この雰囲気により、ページを開くと訪問者は歓迎されている気分になり、さらには事務的なものではなく、Telerikの実際の人々とやりとりしているということを感じることができます。
- シンプルに5つの製品群にグループ分けしているところも素晴らしいです。事業内容や、このサイトで訪問者が得られるものは何かということが、非常にわかりやすく伝わってきます。
- テキストは軽やかで読みやすく、顧客が普段使用しているような言葉が使われています。
10）eWedding
素晴らしい点
- F結婚式を控えた仲の良いカップルにとって、eWeddingはカスタマイズしたウェディングサイトの作成にぴったりなウェブサイトです。ホームページもごちゃごちゃとしておらず、ウェブサイトの作成を始めるために必要な要素だけが含まれています。
- サブヘッドライン「80万以上のウェディングサイトが作成されました！」は印象的な社会的証明です。
- 完璧な製品ビジュアル、素晴らしいヘッドラインとCTAを含み、「ウェブサイト作成」のテキストにも違和感を覚えさせません。
11）Basecamp
素晴らしい点
- Basecampのホームページは、以前からいつも輝いています。その理由は見ての通り、見事なヘッドラインと巧妙なイラストの使用です。
- CTAはくっきりと表示され、スクロールしなくても見える位置に表示されています。
- この例では、ブログに近いホームページ（または単一ページ サイト アプローチ）になっています。この形式を採用することで、製品に関するより多くの情報を見せることができるのです。
- 顧客の証言は、大胆ではっきりした言葉で、製品を使用した結果や使用したことでどのような素晴らしいことがあったかということを述べています。
12）charity: water
素晴らしい点
- charity: waterのページは、よくある非営利のウェブサイトとは違います。たくさんの視覚要素、クリエイティブなテキスト、相互作用的なウェブデザインを使用していることで、人の目を惹きつけます。
- アニメーションを利用したイメージをヘッダーに置くことで、効果的に注意を引くことができます。
- 動画や写真をとても上手に採用しています。特に、動画や写真で訪問者の心を動かし、行動を起こさせることに成功しています。
13）TechValidate
素晴らしい点
- このホームページは、とても美しいデザインを採用しています。特に余白の利用、色のコントラスト、そして顧客中心のデザインは素晴らしいです。
- ヘッドラインはわかりやすく、人を惹きつけます。CTAも同様です。
- また、情報の階層を上手に利用しており、訪問者は素早くページ全体に目を通し理解することができます。
14）Chipotle
素晴らしい点
- このホームページは敏捷性とページを定期的に変更することを学ぶためには素晴らしい例です。Chipotleの現在のホームページは、もうすぐやってくる休暇に焦点が合せられています。Chipotleはこれを独特なバリュープロポジションとして、訪問者がホームページを端から端までクリックするよう誘っています。Chipotleについて考えるとき、常にケータリングのことが思い浮かべるかというとそうではありません。Chipotleのサイトは、食べることを享受すること、例えばもともと大好きなメキシコ料理のブリトーをどうしたらもっと楽しめるかを考える楽しさを思い出させてくれるのです。
- 食べ物の写真が非常に美しく鮮明に撮れており、見ていると実際に空腹を感じてきます。視覚要素のとても効果的な使い方です。
15）Medium
素晴らしい点
- このページは、今まで見たさまざまなホームページの中でも最高と言えるような余白の使用方法をしています。このページはMediumアプリのキャッチフレーズと写真を中央に表示させながらも、訪問者の注意をサイト内のより濃い内容の記事に惹きつけています。
- Mediumへの登録はとても簡単です。サイトからも、モバイルフォンに送られてくる簡単なキャリアメールのテキストメッセージからでも、登録が可能です。Eメールよりもキャリアメールに反応しやすい人も多いので、この方法は訪問者を登録につなげるための効果的な戦略と言えます。
- ホームページでは社会的証明を使用し、訪問者がホームページの様々な場所をクリックするよう促しています。「Mediumで人気のストーリー」および「スタッフのおすすめ」などのページを見ることで、質の高いコンテンツを見つけることができます。
16）Digiday
素晴らしい点
- 多くのオンラインのニュースサイトが可能な限りたくさんのヘッドラインや画像をホームページに詰め込んでいる中、Digidayは、ページを開いて最初に目に入る部分には、たった一つの記事しか表示させません。特集されている記事のイメージ（この場合は怖い話です）は、目を引くものを使用しており、ヘッドラインはすぐにでもクリックしてみてくださいとアピールしています。画像やヘッドラインにより、訪問者はどのような内容の記事なのかをイメージすることができるのです。
- 他のサイトでは通常、ホームページの上部には様々なセクションやオプションを山ほど表示しています。ですがDigidayでは、ここでもたったひとつのアイコンしか表示していません。訪問者を購読申込みのページに誘導するアイコンです。
17）KIND Snacks
素晴らしい点
- はっきりとした色遣いによりコントラストが生まれ、ページ上の言葉や画像を浮き立たせます。
- CTAのコピー文章を「SHOP KIND」にしたことは、とても巧妙です。訪問者はKINDのことを知るためにクリックするだけではなく、同時に言葉遊び（「KIND（親切な、という意味）」により、KINDで商品を購入することは良い選択であるという印象を与えられるのです。
- KIND Snackのキャッチフレーズはただただ素晴らしい、の一言です。キャッチフレーズは直接心に語りかけ、誰もがスナックバーの原料ラベルを見てみたくなります。
18）Ahrefs
素晴らしい点
- 青、白、オレンジ色のコントラストはとても目を引き、ヘッドラインやCTAが飛び出したような印象を与えます。
- サブヘッドラインとCTAが魅力的な組み合わせとなっています。追跡を開始することと競合他社に勝つことを無料で実行できるというのは、大きな提案です。
- ホームページは多くのオプションを用意していますが、すっきりとした背景とシンプルなテキストを使用しているため、ごちゃごちゃとした印象を与えません。
19）A24 Films
素晴らしい点
- 映画会社であるA24 Filmsのホームページには、新しい映画の予告編のみが表示されています。動画コンテンツはオーディエンスが見たがる形式であり、A24の作品を非常に魅力的に紹介するすばらしい戦略です。
- A24 Filmsのホームページは、ソーシャルメディアやEメールのアイコンを上部にまとめて表示しているため、訪問者としてはとても助かります。通常こういったアイコンはページ下部にひっそりと表示させていることが多く、見つけることが大変だからです。
20）Ellevest
素晴らしい点
- 「女らしく投資する：お金はパワー」このヘッドラインは力強く、訪問者は女性として、そして賢く金融選択を行うことに興味を持つひとりとして、Ellevestの製品についてもっと知りたい気持ちになります。
- このホームページの画像は、デスクトップサイトと持ち運びのできるモバイルアプリというEllevestのバリュープロポジションを、伝えるのではなく、ただ見せています。
- 「さあ、始めましょう」は強力なCTAです。実際HubSpot（ハブスポット）でもこの言葉を使用しています。クリックすると、訪問者は簡単なプロフィール設定を2～3個行い、その後投資を開始することができます。
21）HubSpot
素晴らしい点（自分たちで言うのも何ですが）
- LEGOキャラクターは目を引きます（単にかわいいので）。そしてLEGOキャラクターはさらに、ヘッドラインとサブヘッドラインに表示されたメッセージを巧みに表現し強調しています。
- また、目を引くCTAがもうひとつ設定されています。ここにはハブスポットの無料版ユーザーが将来アップグレードを選択できる点を説明した小さなテキストが表示されています。
- ホームページ全体を通しハブスポットのイメージカラーである明るい青とオレンジ色を使用することで、ページに表示されたリンクやCTAに繰り返し注意を向けさせています。
この記事で紹介したホームページについて、皆さんはどう思われましたか？お気に入りのホームページは見つかりましたか？コメント欄で是非共有してください。
