第一印象を植え付けるチャンスは一度しかありません。だからこそ、ウェブサイトの中でもホームページが一番重要なのです。
企業にとってホームページはいわばネット上の「玄関」です。 初めて訪問した人がそのデザインを気に入らなければ、即座に「戻る」ボタンを押すでしょう。
残念ですが、外見で中身を判断する人のほうが多いという現実は今も変わりません。
ありきたりではない、人をぐっと惹きつけるデザインのホームページには何があるのでしょうか。 実は、「外見の良さ」だけではなく、 「きちんと機能する」 という側面もあります。 ここに紹介する15の優れたホームページは、もちろん見た目に美しく、そして綿密に計算され設計されたものばかりです。 ですが優れた実例を見る前に、ホームページデザインの主なベストプラクティスを分析しましょう。
また、ferretさんがこちら「目移りするほどイケてる！海外デザインギャラリーサイト24選」で海外のWebデザインについて紹介しています。
もしも2017年のWebデザインのトレンドをお探しの場合はこちらの記事をご覧ください。
5ステップでパフォーマンスの高いウェブサイトを作成、管理する方法
HubSpotとCanvaは共同で、パフォーマンスが高く見栄えの良いウェブサイトを作成、管理する手順を詳しく説明する無料のガイドを作成しました。
- オーディエンスとそのニーズについて理解する
- オーディエンスに合ったコンテンツを作成する
- ウェブサイトを最適化し最大限の成果を上げる
- パフォーマンスレポートの作成、分析、継続的な改善
今すぐダウンロードする
全てのフィールドが必須です。
デザインの優れたホームページの条件
デザイン性の高いトップページは以下の条件を備え、複数の要素を組み合わせてうまく機能させています。 完璧ではないホームページもありますが、デザインの優れたホームページはこうした条件の多くをクリアしています
1）誰が何を紹介しているページか、何ができるか
だれもが知っているコカコーラのような大企業でないかぎり、どのような企業や団体がそのページを運営し、どのような活動をしているかを、まず簡潔明瞭に伝えましょう。そうすることでユーザーは自分の見たいホームページに来ていることを確認できます。
ベストセラー『ウェブユーザビリティの法則』の著者スティーブ・クルーグ氏は、「どんなページなのかすぐに伝わらないページに、ユーザーは長く留まらない」と述べています。
2）ターゲットへの共感
ターゲットは絞り込むべきです。適切なターゲットを選び、彼らに伝わる言葉で表現します。 優れたホームページの運営者は、いかにも企業が好みそうな言葉使いをあえて使わず、無駄な情報を排除します。もしも、ウェブ訪問者を絞り込んでいないようでしたら、今すぐ理想のターゲット像であるバイヤーペルソナを作成しましょう。
3）説得力のあるバリュープロポジション
ホームページを訪れた人には、できるだけ長くサイトに滞在をしたくなるように感じてもらわなければなりません。 ホームページはバリュープロポジションを提示する絶好の場所です。自社のページに見込み客を長く留まらせ、彼らが競合他社のページを訪問しないようにするのです。
4）レスポンシブル対応のユーザビリティ重視
ここで紹介するホームページはユーザビリティに優れたものばかりです。ページ間の移動が容易で、デザインがシンプルで無駄がなく、flashバナーやアニメーション、ポップアップなどの派手な小道具が使われていません。 もちろん、スマホやタブレットなどのモバイル端末に対して最適化されています。今はモバイル社会。ホームページのモバイル最適化は必須です。
5）CTA（Calls-to-Action）ボタンの設置
ここで紹介するどのホームページも、「無料お試し」「デモを予約」「今すぐ購入」「詳しくはこちら」などを含む、メインのCTA（Calls-to-Action）や補完的な目的のCTAボタンを使って、ユーザーを次の行動（アクション）へと導いています。 ホームページの役割は、ユーザーに自社のウェブサイトをより深掘りしてもらい、購買のファネルを進んでもらうことです。
ホームページへ適切にCTAボタンを設置することにより、訪問者が次にすべきことを伝え、彼らが情報量に圧倒されたり迷子になったりすることはなくなります。 加えて、CTAsを設置することによって、ホームページが単なる商品紹介の場ではなく、セールスやリードジェネレーションをする場へとなりえます。
6）常に改善
優れたホームページは必ずしも静的ではありません。 米国ホワイトハウスのサイト（Whitehouse.gov）のように、さまざまなニーズや課題、閲覧者からの質問に応じてデザインを頻繁に変えるサイトもあります。 A/Bテスト や ダイナミックコンテンツを導入して外観を変化させるホームページもあります。
7）総合的なデザイン性の向上
優れたデザインのウェブサイトとは、信頼を築くこと、あなたの価値を伝えること、そしてウェブ訪問者を次のステップへと導く存在です。 デザイン性の高いウェブサイトでは、レイアウト、CTAボタン、余白、色やフォントなどが効果的に使われています。
では優れたホームページ「ベスト15」の実例をご覧いただきましょう。
優れたホームページの具体例15つ
1）FreshBooks
どのような点がすばらしいか
- とても読みやすいページです。 ウェブサイトが縦に短くあるべきか、長くあるべきかについてはいろいろな意見があります。もし縦長のホームページを作ることになったら、スクロールが容易で読みやすい構成にする必要があります。FreshBooksはまさにそうなっています。 まるでひとつの物語を追うようにページを見ることができます。
- メインのCTAボタンの色と配置が効果的です。ユーザーに次に何をしてもらいたいかが明瞭で、ページを開くとそれがすぐに伝わってきます。
- CTAボタンのコピー「Try it Free for 30 Days（無料で30日間お試し）」に説得力があります。
- サブ見出しも秀逸です。 「Join 5 million people using FreshBooks to painlessly send invoices, track time and capture expenses（500万人のFreshBooksユーザーが、請求書の送付、時間の管理、支出の把握などの作業をいとも簡単にこなしています。あなたもその1人になりませんか）」。 FreshBooksのターゲットは中小企業やフリーランサー。使いづらい会計ソフトに手こずっている彼らの痛いところをうまくついています。
２）Mint
どのような点がすばらしいか
- とにかくデザインがシンプルで、インパクトのあるわかりやすい見出しが並んでいます。
- 安全で、しかも手軽に使える製品の特徴をうまく伝えています。財務情報を扱う製品にはぴったりのデザインです。
- 直接的に訴えかける、シンプルなCTAボタン 「Sign up free（無料登録）」を置いています。 「鍵」のアイコンがデザインされており、安全性をさりげなくアピールする仕掛けになっています。
３）Jill Konrath
どのような点がすばらしいか
- 見出しもサブ見出しもシンプルに要点をついて、ジル・コンラート氏のビジネスの内容（企業の事業支援）を明確に伝えています。
- ソートリーダーとしての同氏の活躍を紹介するコンテンツが並び、簡単にアクセスできます。基調講演者としての同氏の評価がさらに高まるようになっています。
- メインのCTAボタンが2種類あり、ニュースレターの講読申し込みと問い合わせを簡単に送信できます。
４）Dropbox（一般向け）
どのような点がすばらしいか
- Dropboxのウェブページは「シンプルさ」のまさにお手本です。 文字や画像をできるだけ少なくし、余白を広くとっています。
- 見出しの「Your stuff, anywhere（どこにいても使える）」は簡潔ながらもインパクトがあります。 専門用語を使っていなくてもDropboxの便利さがよくわかります。
- 「Sign up（登録する）」というメインのCTAボタンを1つ置いていますが、 "Sign up" ... その前にもっと詳しく知りたい場合は 「Learn more（詳しくはこちら）」をクリックすれば、ボタンの下に、Dropboxの主な4つの利点が見やすく表示されます。
５）Dropbox（ビジネス向け）
どのような点がすばらしいか
- ビジネス向けDropboxのページは、ターゲットに応じて異なるエクスペリエンスを提供するウェブサイトの代表例です。 メインのホームページとして作られたのは上記の一般ユーザー向けですが、ビジネスユーザーの場合は、Dropboxが安全かつスケーラブルに使えるソリューションかどうかを裏付けとともに詳しく知りたがります。ビジネス向けのホームページでは、こうした疑問に率直に応えています。
- 一貫してシンプルなデザインでブランドのイメージを伝えています。 ページ内に配置しているのは、顧客のロゴ、導入事例、字幕付きの動画などの重要なコンテンツのみです。
６）Whitehouse.gov
どのような点がすばらしいか
- 国全体を丸ごと支えるウェブサイトを構築するのは、容易ではありません。話題の優先度や緊急度に応じて、 Whitehouse.gov は頻繁に更新されます。ホームページだけでこれまでに数百回以上更新されています。 すばらしいデザインを実現する鍵はテストと最適化です。
- Whitehouse.govが際立っているのは、非常にユニークで、他の政府関係ウェブサイトのどれにも似ていないということです。 デザインをすっきりさせて、国民の意識を高めています。
- 必要な情報がどこにあるかが一目でわかります。 すぐに情報が見つからないときのための検索ボックスも用意されています。
７）Scrapd
どのような点がすばらしいか
- 上の写真だけでは、このサイトの良さがわかりません。ページをスクロールすると、アニメーションを巧みに使ったデザインに目が引きつけられます。 ユーザーのエクスペリエンスを邪魔することなく、きちんと情報を見せる上手なやり方です。
- すっきりしたデザインで アプリの機能や特徴を紹介していき、直後にメインのCTAボタンを登場させます。これだけですが、非常に印象的です。
８）4 Rivers Smokehouse
どのような点がすばらしいか
- 「よだれが出そう」。 4 Rivers Smokehouseのウェブサイトを見たとき、そう思いました。 すばらしい写真を見て、「Brisket. 18 years to master. Yours to savor.（牛の胸肉。18年の経験が生み出す技。この味をあなたに）」のコピーを読めば、だれでも食べてみたくなります。
- サービス内容やメニュー、楽しむ人々の写真をパララックススクロールで閲覧できます。最新の傾向をうまく取り入れたページです。
- ひとつだけ欠点があるとすれば、 このレストランが遠すぎること。 これには不満です。
９）Evernote.com
どのような点がすばらしいか
- 最初は単なるメモ保存アプリだったEvernoteが企業向けソリューションに進化しました。 こうした製品の変化をホームページで伝えるのは難しいのですが、Evernoteのホームページでは、多くのメッセージをぎゅっと凝縮して、いくつかの主な特徴として伝えています。
- 背景には、深くて落ち着きのある複数の色を使い、緑と白の明るいコントラストのCTAボタンを目立つように配置しています。
- シンプルな見出しを読むと、自然に視線が「Sign up now.（新規登録する）」ボタンに移動する作りになっています。
１０）Telerik
どのような点がすばらしいか
- Telerik社のウェブサイトを見ると、いかにも風通しの良さそうな会社に見えます。 さまざまな技術製品を提供する会社なので、大胆な色使い、ポップなデザインや写真がGoogleのページとどこか似ています。 大切なのは、見る人をもてなすこと、そして、製品の向こう側にいるのが生身の人間であることを伝えることです。
- 6つの製品の概要が簡潔に説明されています。 事業内容を詳しく知りたい場合にはどこを見ればよいか、すぐにわかります。
- 軽いタッチの読みやすい文章です。 顧客に伝わる言葉で書かれています。
１１）Gogoro
どのような点がすばらしいか
- コンシューマー向け技術商品のウェブサイトの中で、好きなサイトの1つです。 シンプルで洗練されています。
- インタラクティブ性に優れていますが、上の写真ではその良さが伝わりません。 ぜひご自分でアクセスしてご覧ください。
１２）eWedding
どのような点がすばらしいか
- eWeddingでは、人生の一大イベントを間近に控えたカップルが自分たち専用のウェディングサイトを作ることができます。
- ホームページはすっきりと整理され、ウェブサイトを作るために必要なものだけを揃えています。
- 見映えのよいビジュアルコンテンツ、見出し、CTAボタンが並び、「Create your free website in under 5 minutes.（たった5分で無料のウェブサイトを作れます）」というコピーを読むと、つい試したくなります。 うまいやり方です。
１３）Basecamp
どのような点がすばらしいか
- Basecampのホームページはいつも魅力的ですが、それは 見出しのコピーとイラストが秀逸だからです。
- CTAボタンは大きく目立ち、スクロールせずに見える場所に置かれています。
- この例では、ブロック構成のホームページ（単一ページ構成）になっており、以前より多くの情報を掲載しています。
１４）charity: water
どのような点がすばらしいか
- NPOのウェブサイトらしからぬデザインで、 クリエイティブな画像とコピー、インタラクティブ性が際立っています。
- アニメーションで入れ替わる見出しが、たった1行でいろいろなメッセージを伝えます。
- 動画と写真の使い方がすばらしいので、見る人は心を動かされ、行動を起こそうという気持ちになります。
１５）TechValidate
どのような点がすばらしいか
- 美しいデザインのホームページ。 特に余白の使い方と色のコントラスト、顧客中心のデザインがすばらしいと思います。
- 見出しもCTAボタンもシャープで説得力があります。
- 情報が階層構造に整理され、ざっと見るだけで内容をつかめるようになっています。
優れたデザインのホームページを紹介しました。みなさんはどう評価されたでしょうか。 お気に入りのデザインがありましたか？
いかがでしたから？Webデザインを新しくされたい方はワードプレスなどのCMSや、HubSpotのCMSを活用し美しいウェブサイトの構築などを行うことオススメしています。
機能的でかつ秀逸なホームページデザインをこちらに無料サンプルとしてご用意させていただきましたので、興味がある方はこちらからどうぞ。
編集者注： 本記事は、2013年1月に公開した記事を、より正確に分かりやすくするために改訂したものです。 元の投稿はJessica Meherによって執筆され、記事を翻訳、加筆、再執筆された記事です。元の記事をご覧になられたい場合はこちらからどうぞ.
