すべてのウェブサイトのホームページが持っている必要があります12の重要な要素[インフォグラフィック]

あなたの会社の事実上の正面玄関として役立って、このページはあなたのウェブサイトの交通の大半で引くために責任がある。それでも、その卓越性にもかかわらず、多くの企業はそれを適切に最適化するのに苦労しています。

あなたは、あなたのホームページは、帽子をたくさん着用する必要があります参照してください。特定のアクションを中心に構築された専用のランディングページのように扱うのではなく、異なる起源から異なる観客にサービスを提供するように設そして、効果的にそうするためには、それは目的を持って構築する必要があります。言い換えれば、トラフィックを誘致し、訪問者を教育し、コンバージョンを招待する要素を組み込む必要があります。

ホームページのパフォーマンスを向上させるには、各ホームページに必要な要素をチェックしてください。

12 重要な要素すべてのウェブサイトのホームページには

保存する必要があります

保存

あなたのサイトでこのイメージを共有

あなたのウェブサイトのホームページのデザインに含めるべきもの

見出し

三秒以内に、ウェブサイトは、ビジネスが提供しているものを訪問者に伝える必要があります。それはあなたの見出しが入るところである。それはいくつかの単語かもしれませんが、それはあなたのウェブサイト上のコピーの最も重要な部分の一つです。

多くのタイプの人々があなたのウェブサイトを訪問するかもしれないし、皆のために家にヒットするいくつかの単語を見つけるのは難しいでしょう。その代り、あなたのプロダクトと幸せで本当らしいそれらの人々の三分の一を目標とするためにあなたの見出しを書きなさい。

見出し自体を明確かつシンプルに保つ。 Dropboxの見出しは素晴らしい例です：”あなたが仕事のために必要なすべて、すべて一つの場所に。”それはシンプルでありながら強力です—Dropboxが本当に何をするかを把握するために専門用語をデコードする必要はありません。

サブ見出し

サブ見出しは、あなたが何をしているのか、何を提供しているのかを簡単に説明することで、見出しを補これはあなたのプロダクトかサービスが解決する共通の苦痛ポイントでゼロにすることによって効果的にすることができる。

ここにミラーからの素晴らしいサブ見出しの例があります：”平凡な光景に隠れています。”それはミラーの体育館の第一次セールスポイントで砥石で研ぐ: それは装置が付いている貴重な正方形長さをとないであなたの家の慰めの完全な在宅の体育館、個人的なトレーナーおよび試しの計画すべてである。

見出しをモバイル向けに最適化するには、より大きなフォントを使用して訪問者の体験を向上させます。小さい壷はあなたの場所の内容を読み、相互に作用させるために移動式訪問者をつまんで、拡大することを強制できる。私たちのアドバイス？ページエディタで見出しオプションを使用します。 H1見出しはページタイトルに最適です—ページにはH1が1つしかないはずです。小見出しは、階層H2、H3の順序に従う必要があります。.. H6など。あなたはこれらの見出しのいくつかを持つことができます、ちょうど彼らが順番にしていることを確認してください。たとえば、H1からH3にジャンプするのではなく、代わりにH2を選択します。

主要な行動を促す

あなたのホームページの目標は、訪問者にあなたのウェブサイトをより深く掘り起こし、漏斗の下に移動させることです。購入周期の異なった段階に人々を指示する折目の上の二から三の呼出しに行為を含め、見つけ易い点に置きなさい。

これらのCtaは視覚的に印象的で、理想的にはホームページの配色とは対照的な色で、全体的なデザインに合っている必要があります。コピーを簡潔に保ちなさい—これ以上より5つの単語—および行為指向、従ってそれは提供しているものは何でもかちりと鳴るために訪問者を強いる。 CTAコピーの例としては、「サインアップ」、「予定を立てる」、「無料で試す」などがあります。”

放課後HQのウェブサイトには、放課後プログラムを家族に宣伝することに興味のあるプログラムディレクターを対象とした二つのCtaがあります。長いCTAの下のメモは、「あなたの無料プロフィールを作成する」訪問者に、アカウントを作成するために必要な微調整を与えます—放課後HQプロバイダーになるための最初のステップ。

応援画像

ほとんどの人が視覚的です。あなたが提供するものを明確に示す画像（または短いビデオ）を使用するようにしてください。感情、ドライブ行為を捕獲し、視覚であなたが約書いている物語を言うイメージを使用しなさい。

モバイルユーザー向けに画像を最適化するには、ファイルサイズを小さくした高品質の画像を使用します。（HubSpotのソフトウェアにアップロードされた画像は自動的に圧縮されるため、HubSpotのお客様はこれについて心配する必要はありません。それ以外の場合は、TinyPNGのようなツールがそのトリックを行います。）また、常にスクリーンリーダーを使用する訪問者にそれらをよりアクセスできるようにし、ノッチをあなたのSEOの努力を取るためにあなたの画像にaltテキ

4Rivers Smokehouseのホームページは感情的なイメージの素晴らしい例であり、シンプルな見出し、サブ見出し、プライマリCTAの背後にあるループで再生される短い、高精細、おいし:

あなたが何をすべきかを記述することは重要ではありませんが、なぜあなたが何をすべきかを記述することは重要です。見通しはそれが付くためにそれらを強いるものがであるのであなたからの購入の利点について知りたいと思う。

コピーを軽量で読みやすく保ち、顧客の言語を話します。 Evernoteのは、魅力的な視覚的に喜ばれ、理解しやすい方法で彼らのホームページ上の利点を一覧表示する素晴らしい仕事をしています:

社会的証拠

社会的証拠は信頼の強力な指標です。あなたのプロダクトかサービスは世界のベストであることができその要求を置くことは良い—それは他の人々からのそれを聞かなければ人々が信じないかもしれないことちょうどである、余りに。そして、それはまさに社会的証拠が何をするかです。

ホームページにあなたの最高の（短い）引用符のほんの一部を含め、該当する場合はケーススタディにリンクしてください。名前および写真を加えることはこれらのtestimonialsにより多くの信頼性を与える。 Lessonlyは実際の顧客からの白熱testimonialsのホームページのこれを釘付けする。

ホームページのナビゲーションのデザインとコンテンツは、ウェブサイトのコンバージョンとバウンスの違いを意味する可能性があります。直帰率を減らすためには、あなたの訪問者にホームページからの権利を必要とするページに明確な道を与えなさい。ナビゲーションメニューをページの上部に表示し、リンクを階層構造に整理します。

誰もあなたのウェブサイトを設計した人よりもよく知っている人はいないので、訪問者があなたのサイトで探しているものを見つけることが簡単で直感的であることを確認するために、ユーザーテストを実施してください。可能であれば、検索ボックスを含めます。（より有用なウェブサイトの運行先端のためのこのblogのポストを読んで下さい。)

Slim&Husky’S Pizza Beeriaホームページからの明確でよく構造化されたナビゲーションデザインの例は次のとおりです:

Content Offer

ホームページからさらに多くのリードを生成するには、ホワイトペーパー、電子ブック、ガイドなど、本当に素晴らしいコンテン買う準備ができていないかもしれない人々はむしろそれらに興味があるトピックについてのより多くの情報を与える提供をダウンローインスピレーションが必要な場合は、ここから選択するいくつかの異なるコンテンツタイプがあります。

副次的行動喚起

副次的Ctaをあなたのホームページに含めて、あなたの主な目的に興味のない見込み客に追加のコンバージョンの機会を提供してくださ彼らはあなたが求めているほど高いコミットメントのためにまだ準備ができていない訪問者のための別の道を提供しています。

一次Ctaは折り目の上にあるべきですが、二次Ctaを折り目の下に置いて、訪問者が下にスクロールしたときにクリックするものを与えます。たとえば、Spanxのホームページの折り目の下には、明確にラベルされたcalls-to-actionがあり、スクロールした人々にクリックするオプションがいくつかあります。これらの二次Ctaは、変換の二つの異なるタイプのためのものです：far20オフのために左端に一つと別の、オンラインカタログを探索するために”今すぐショップ”。

機能

利点に加えて、あなたの主な機能のいくつかをリストします。これはあなたのプロダクトおよびサービスによって提供されるものがの理解の人々をもっと与える。繰り返しますが、コピーを軽くて読みやすいものにしてください。ビジネスのためのDropboxは、例えば、右の倍の下に自分のホームページ上の機能マトリックスを披露することから敬遠しません。

リソース

ここでも、あなたのウェブサイトへのほとんどの訪問者は購入する準備ができていません。.. まだだより多くの情報を捜している人々のために、関連した情報を拾い読みしてもいい資源の中心にリンクを提供しなさい。だけでなく、これはより長くのためのあなたのwebページのそれらを保つが、またあなたの企業に思考のリーダーとしてあなたの信頼性を確立するのを助

Lovesacは、フォールドの下のフッターにリソースリンクを追加します。これらの二次Ctaのそれぞれが購入周期の多数の段階をいかにカバーするか注目しなさい:顧客が彼らの家具を容易に買うのを助けるクレジットカードリンク、購入をする前にまだ完全な色を捜している人のための生地の材料見本ガイド、および新しい家具のための市場にあるが、まだ購入をして準備ができていない人々のためのオンラインカタログ。

成功指標

顧客の成功事例に加えて、賞と認識の両方が良い第一印象を刺激するのに役立ちます。あなたの会社は絶賛されたレストランですか？あなたは今年最高の新しいアプリに投票しましたか？あなたのホームページの訪問者にあなたの業積の知らせなさい。社会的証拠のように、それはあなたを知らない人にあなたのビジネスにより多くの信頼性を与えるでしょう。

Calendlyのホームページには、たとえば、GartnerやDropboxのように、それらを認識している有名な組織の名前が表示されます。

訪問する価値のあるホームページ

あなたのサイトのホームページは、各訪問者があなたのビジネスに持っている最初の紹介です。彼らは顧客になるために彼らの心を構成する前に、彼らはあなたが販売するもののアイデアを得るためにあなたのホームページを確認します,なぜそれ

上記の要素を取り入れたホームページで華麗な第一印象を作りましょう。そしてより多くのインスピレーションのために、下記の自由なlookbookのダウンロードによってホームページの思いがけない例から点検しなさい。

編集者注:この投稿はもともと2012年1月に公開されたもので、新鮮さ、正確さ、包括性のために更新されています。