トップページデザインとレイアウトの基本 – 詳細解説

//トップページデザインとレイアウトの基本 – 詳細解説
トップページデザインとレイアウトの基本 – 詳細解説2018-08-24T07:20:38+00:00

ここでは、『トップページデザインの基本』ページ及び本サイトのトップページにも採用している、トップページ基本レイアウト「1・3・1・2」のデザイン構造に関して、詳しく解説いたします。

より理解を深めていただくためには、実際に本サイトのトップページもしくは『トップページデザインの基本』ページをスマートフォンならびに、このページをお読みいただいているものと別の端末で表示させることをお勧めいたします。

トップページデザインの全体像

トップページデザインの全体像を正しく理解するためには、第一に「トップページの役割」を適切に理解する必要があります。

そして、この「トップページの役割」を正しく理解するためには、「どのようなアクセス経路でトラフィックが発生するのか」を適切に把握する必要があります。

ウェブコンテンツにアクセスされる経路には以下のような種類があります。

トップページにアクセスされる経路の種類
  1. 検索エンジン経由(広告も含む)
  2. SNS経由:チャットやメッセンジャーを含む
  3. 他者などが運営する外部サイト
  4. メール
  5. QRコード
  6. URLの直接入力によるアクセス

検索エンジン経由のアクセスの場合、広告も含めて「検索キーワード」が、関係してきます。この場合、きっと多くの人が、1つのウェブサイトにおいて、トップページは他のページよりも、より人気で、より頻繁に検索されるキーワードでアクセスされることを望むことでしょう。

逆を言えば、トップページ以外の他のページに掲載する内容は、より具体的なキーワードで検索されることを想定し、作り込むケースが多いと言い換えることもできます。

この場合、必然的にトップページは他のページと比較すると包括的で抽象的な「テーマ」を取り扱うコンテンツに成らざるを得なくなります。

次の「SNS経由」で発生するトラフィックのケースを考えると、リンクURLをFacebookなどに投稿した場合や、プロフィールページに掲載したURLをタップしてアクセスされることが予想できます。ただし、この場合、トップページのリンクを頻繁に投稿することは考えにくいですので、SNS経由のトップページへのアクセスは「プロフィールページから」が、もっとも多くなるのではないか!と、考えることができます。

「他者が運営するサイト」からのアクセスは、その外部サイトがどのような紹介文や理由で、あなたのウェブサイトURLを掲載しているのかを予測又は制限することはできません。そのため、この場合の「アクセスの質」を予測することはできません。ですから、「トップページの役割」を考える際に「他者サイトからのトラフィック」は、検討要素から除外します。

メールに関しては、あなたがどんなタイミングでウェブサイトのURLを掲載したメールを送るのかによって「アクセスの質」が、変わります。そのため「トップページの役割」を理解するときの検討要素というよりも、どちらかと言えば、トップページの役割を正しく理解することが、メールにトップページのURLを記載する場所や内容、送信、もしくはメールマガジンを配信するタイミングを決める際の要素として据えるのが適切だと言えるでしょう。

トップページに起こる「もっとも質の高いアクセス」とは

5番目と6番目に挙げている「QRコード」や「直接入力」に関しては、名刺などの紙媒体など、OFFラインからのトラフィックですので、すでに何かしらの方法で、あなたもしくは、あなたの商品との接触があり、「あなた」もしくは「商品」に興味を持った人のアクセスだと、この6項目の中でもっとも質の高い(顧客化しやすい)アクセスだと考えることができます。

ただし、「QRコード」を紙広告や商品パッケージに印刷する場合、そのURLは、トップページではなく、その商品を買った人が次に買いやすい商品を掲載したコンテンツのURLを掲載したほうが、ビジネスとしては、より早く、そしてより多くの収益を生むことでしょう。

こう考えると、もっとも質の高いアクセスがトップページに発生するその経路は「名刺」からのアクセスだということがわかります。

検索エンジン経由のほうが、
アクセスの質は高いのではないか?!

検索には「キーワードを打ち込む際の心理(欲求)」があり、そこに打ち込まれる「キーワードの具体性」によって、アクセスの質は変化します。検索上位表示対策に関しては、別途運営している『SEO対策基礎講座(無料情報コンテンツ)』で詳しく解説しているので参照してください。

結果、検索経由の「アクセスの質」は、検索キーワードに影響を受けることから、一概に「検索ランキング経由のアクセスは質が高い」とは、成らないわけです。冒頭でも『トップページは他のページよりも、より人気で、より頻繁に検索されるキーワードでアクセスされることを望む』とお話ししましたが、この『人気のキーワード』と『頻繁に検索されるキーワード』は、全くの別物です。

『人気のキーワード』は、一般的に「検索広告(リスティング広告)と、言う」を使用する企業や人にとって「人気」があるだけで、検索者に人気のキーワードなどは、存在しません。「頻繁に検索される語句=人気のキーワード」と言う考え方は、適切ではないと言うわけなのです。

このことを抑えると、「頻繁に検索されるキーワード」の全体像が見えてきます。

「多くの人が検索する語句=頻繁に検索されるキーワード」という図式が成り立ち、多くの検索キーワードに「共通する語句」と、捉えることもできます。

また、検索を行う場合には「◯◯(スペース)××」のように「単語(スペース)単語」の形で検索されることが多いので、「単語」のみのキーワードで検索が行われた場合は、検索者の心理を絞りきれない検索結果が返されてしまうと予測できます。

例えば「ヴィトン バッグ」と、検索した場合、もしかするとヴィトンのバッグを売りたい人が検索しているかもしれません。また「エルメス 買取」で、検索ランキングの上位を狙っているサイトのトップページが「エルメス」で検索された際にも1位に表示される可能性も否定することはできません。

このことを立証するためというわけではありませんが、私たちが運営している『記事代行どっとこむ』というサイトは、記事代行サービスを否定する内容がサイト内コンテンツの大半を占めますし、トップページの内容も「記事代行サービスを提供しなくなった理由」や「記事代行サービスを利用する必要はない」という内容などばかりですが、「記事代行」と検索した結果、1ページ目に表示されます。

検索結果は、個人の履歴にも影響しますので、実際にあなたも「記事代行」で検索してみてください。下記が、該当サイトの検索結果キャプチャです。

記事代行と検索した結果

上の画像をクリックすると、検索結果ページが表示されます。ご存知の人は「シークレットモード」でも試してみてください。7番目付近に私の場合は見つけることができました。

しかし、リニューアル以前(記事代行サービスを提供する内容)は、3ページ目に表示される程度だったのですが、リニューアルを行なって以降は、記事代行サービスを否定する内容に変更したにも関わらず、1ページ目にランクインしています(2018年2月時点)。

このようなことから、仮にトップページにたくさんの検索経由のトラフィックを集めることができたとしても、その「検索欲求」や「検索心理」を絞り込むことができないため、結果的にトップページには、そのサイトが何のサイトであるのか、どんな内容を取り扱っているサイトなのかを伝えられるコンテンツにする必要があるわけです。

トップページが担う役割は「3つ」存在する

トップページへのアクセスを整理することで、トップページの内容は他のページと比べて包括的であり、抽象的な内容にならざるを得ないということがはっきりしました。しかし、その反面、決して「多い」とは、言えませんが名刺に記載されたURLを直接打ち込んだり、QRコードをスマートフォンで読み込んでアクセスする「質の高いアクセス」を獲得できることもわかりました。

と言うことは…

トップページが担うべき役割は、大きく分けると2つあり、ひとつは「サイトの全体像を把握させる」ということで、2つ目は「抽象的な欲求でもアクションを起こすことが出来る提案をする」ことです。

なぜ、「抽象的な(漠然とした)欲求でもアクションを起こす」ことが出来るのかといえば、それは、あなたが運営するサイトのURLを知っているということは、すでに何かしらのつながりがあなたとあるからに他なりません。

あなたと何かしらのつながりがあり、URLを直接打ち込んだり、わざわざQRコードアプリを立ち上げてサイトにアクセスしてくれる人は、すでにあなたに興味を持ち、そして一部の人は信頼まで寄せていることでしょう。

そのような人たちから起こる質の高いアクセスは、たとえ自覚していなかった欲求でも、ホームページの内容とデザイン次第では、その人にアクションを起こさせ、お客様として迎え入れることが出来るからです。

しかし、これはあくまでも「訪問者」に対するトップページの役割でしかありません

ウェブコンテンツには、訪問者に果たす役割の他に、ウェブコンテンツを改善するためのデータを集めると言う役割があります。これが抜けてしまっていては、紙媒体と同じです。

この「訪問者向けの役割」に「ウェブコンテンツとしての役割」を加えると、トップページが担う役割は「3つ」になります。

トップページが担う役割
  1. サイトの全体像を把握させる
  2. 訪問者の欲求を具体化させ、次に閲覧するコンテンツへ誘導する
  3. 漠然とした欲求のままでも、手に出来る「解決策」を入手させる

この3つの役割を、訪問者の閲覧心理に合わせて果たしていくトップページデザインが「1・3・1・2」のレイアウトなのです。

そして、この「1・3・1・2」のトップページ レイアウト デザインを理解するためには、訪問者の心理状況と、どのように変化していくのかを知る必要があります。それが『ページデザインとコピーライティング』の関係なのです。

しかし、この「ページデザインとコピーライティング」には、ひとつのウェブサイトで採用するコンテンツデザインには、大きく分けて2種類あるため、今ここで、この『ページデザインとコピーライティング』を解説したページに移動することは、あまりお勧めできません。その理由は、今はまだ、おそらく「ウェブサイトをデザインする」という全体像が掴めていないだろうと、思われるからです。

もし、まだ『Webデザインの全体像』のページをお読みいただけていないようでしたら、続きを読む前に、下記より、まずは「Webデザインの全体像」をご確認ください。

Webデザインの全体像

訪問者にサイトの全体像を把握させなければ始まらない

トップページが担う役割には3つあるとお話ししましたが、この3つの役割を果たすためには、第一の役割である「訪問者にサイトの全体像を把握させる」ことが出来なければ、何も始まりません。

そして、ここで注意が必要なのは…

あなたの会社の全体像を把握させることと、ウェブサイトで取り扱っている情報の全体像を把握させることとを混同せずに、トップページをデザインするように注意してください。

ホームページをデザインする際に必要なことは、あなたの会社の全体像をトップページで把握させるのではなく、ウェブサイトで取り扱っている「情報の全体像」を把握させることです。

例えば、私たちは、出版社を営んでいますし、ウェブ関連のお仕事もしています。SEOやウェブプロモーションのお手伝いもさせていただいていますし、代表の松村は講演も行えば、書籍の執筆も行い本も出しています(著書一覧)。

アフィリエイトサイトを運営し広告事業も展開していますし、ラジオの裏方的なお仕事も行なっています。しかし、このサイトのトップページから把握できる情報は、「反応を引き出すホームページのデザイン」に関するウェブサイトだと言うことだけです。しいて挙げても「ホームページ制作業者のホームページなのか?」と、感じさせる程度でしょう。

極端な話、本サイトへの訪問者が「反応を引き出すホームページのデザイン」という、トップページのテーマであり、本サイトの全体像を象徴するテーマに興味を示せば、このサイトの運営者がどこの誰なのかと言う情報は、一切必要ないのです。

これが、検索経由のアクセスにおける「第一の訪問者心理状況」です。

検索経由のアクセス者は、そのコンテンツをどこの誰が運営しているのかなどはあまり気にしていません。それよりも、そのページに掲載されている内容が、自分が探している情報なのか、そして、自分に適したコンテンツなのかにしか、興味がないのです。

前述しましたが、検索エンジンは検索窓に打ち込まれたキーワード(単語)に対して、検索結果に表示した各コンテンツが「肯定的な内容」なのか「否定的な内容」なのかまでを正確に見分けていません。

あくまでも「単語検索」における、クリック傾向が肯定的な内容を掲載したコンテンツに偏っているのか、それとも、否定的なコンテンツが選ばれるのかといった統計的な偏りだけで、優先するコンテンツを制限する場合があるだけです。

ですから、もちろん、そのような偏りが顕著でない場合、検索結果の1ページ目に否定的な内容のコンテンツと肯定的な内容のコンテンツが混在することもあります。

また、詳細な取材に基づくニュースコンテンツと、憶測や主観に満ちたフェイクニュースとも取れるページが、検索結果に混在するは、このためです。

この「第一の訪問者心理状況」を踏まえ、引き続きアクセスしたページを閲覧するのか、それとも検索結果に戻って、別のサイトにアクセスするのかを瞬時に判断させるために「・3・1・2」の「1」がとても重要になってくるのです。

ヘッドラインの役割1・3・1・2」

レスポンシブWebデザインの配列(ヘッドライン)

トップページレイアウト「・3・1・2」の、初めの「1」は、ヘッドラインを意味します。ヘッドラインは一般的に「読者を引きつける」役割があると言いますが、これと同時にウェブコンテンツの場合は、訪問者にとって、関係のあるコンテンツなのか、関係のないコンテンツなのかを瞬時に判断させる役割も担っています。

その理由は、SEO的な理由からです。検索エンジンは、検索結果に表示され、一旦アクセスしたものの、再び検索結果に戻ることになったページに対し、該当のキーワードにおいて「検索者に有益な情報ではない」というレッテルを貼ります。

このレッテルが蓄積すれば、その検索キーワードでのランキングを落とし、その語句で検索されアクセスされると言うことはなくなります。

このことだけを聞くと、「アクセスが減ってしまう」とマイナス的な感情を抱いてしまいますが、実はダラダラとページに滞在し、何のアクションを起こさずに離脱するアクセスデータは、コンテンツの改善を実施する際のアクセス解析データを汚す結果にしかなりません。

これを「無駄な検索上位、無駄なアクセス、迷惑なトラフィック」と、呼びます。

ヘッドコピーが持つ第2の役割とは

ヘッドライン(または、「ヘッドコピー」とも言う)が担う第一の役割は、訪問者にそのページが関係するものであるかどうかを瞬時に理解させ、次の行動を取らせることです。

この「次の行動」とは、離脱(直帰)して、検索結果に戻るのか、それとも次に続く「導入文」を読むのかのいずれかになります。

ヘッドコピーとアイキャッチ画像の順番や、ヘッドコピーに続く導入文が記載されたデザインと、導入文章はなく「目次」だけを掲載するコンテンツデザインの2種類がありますが『ページデザインとコピーライティング』のページでもお伝えしている通り、トップページのようなコンテンツの場合は目次を掲載するとかえって閲覧者の心理状況を展開しにくくなります。

また、「アイキャッチ画像は何のためにあるのか?」と、問われれば、それは、その画像に目を止めさせ、その前後を読ませるためです。

そのため「アイキャッチ画像 → ヘッドコピー → 導入文」よりは「ヘッドコピー → アイキャッチ画像 → 導入文」のほうが、より多くのアイキャッチ画像が担う役割を果たすことができると考えられるので、私たちは、この順番で「・3・1・2」の「1」を構成しています。

ヘッドコピーを読み、自分に関係のあるコンテンツだと判断した訪問者は、アイキャッチ画像に目を止められ、その直下に掲載された導入文に目を落とし読み始めます。

この時はじめて「訪問者」は「閲覧者」へと変わります。

しかし、ここではまだ閲覧者の欲求は、漠然としたままです。ですから、トップページの導入文は漠然とした欲求を具体化させるコンテンツへと誘導する目的で文章を作文します。

ここで、本サイトのように「次のページ」に移動するためのボタンを掲載するか、それとも「1・・1・2」の「3」へ、そのまま読み進めさせるかは、あなたのサイトで取り扱っている内容と、閲覧者に提案する商材によって変わります。

本サイトで取り扱っている「Webデザイン」の場合は、その多くが「トップページのデザイン」に強い関心を持っていることが、すでにわかっているので、『トップページデザインの基本』を記述したページに移動するためのボタンを配置しています。

このように、あなたのサイトで取り扱っている商材の中で、漠然とした閲覧者欲求から「1段階だけ」進む程度で顧客化できるものがある場合は、「・3・1・2」の「」にボタンを掲載すると良いでしょう。

しかし、そのような商材がない場合、もしくは、「漠然とした閲覧者欲求」とは、「情報が不足」している状態ですので、そのような心理状況のまま顧客化へのアプローチを進ませてしまっては、ミスマッチを起こす危険がある場合は、「・3・1・2」の「」にボタンは掲載せず、「1・・1・2」の「3」に進ませます。

トップページにおける最大の注意点

トップページにおける最大の注意点は、トップページに掲載している内容は包括的で抽象的な内容にとどまっていることを正しく理解して、文章を書くことです。

検索経由の訪問者は特に、トップページにアクセスした動機も漠然としていますので、長い文章は読みません。出来る限り短い文章で作文することをお勧めします。この場合「短い文章」とは、スマートフォンで5〜6行以内に収まる文字数と考えておけば良いでしょう。

スマートフォンも最近の主流はiPhone XやiPhone〇plus程度の大きさですので、文字数は120文字程度を心がけると良いのではないかと考えています。

ただし、文字数が少なすぎて検索エンジンが、そのトップページの内容を適切に理解できないのはSEO出来ていないのと同じです。また「見た目」としても、閲覧者心理を動かすことができません。

長文を記載するときは、その文章を読み進めることで、読者心理は変化しますが、短文では「文章のレイアウト」でも、読者心理を動かす工夫が必要になります。

通常、閲覧者に行動を起こさせるボタンは、「中央配置」がなされているでしょうから、短めの文章も「センタリング」し、段落の形がボタンを指すように逆三角形になっているのがお勧めです。

例えば、このような段落です。文字数は78文字の段落ですが、いかがでしょうか?
あなたの視点も、自然と次の段落に目が移っているのではないでしょうか。
ダメですか?

3つの主要コンテンツ

レスポンシブWebデザインの配列

・3・1・2」の「1」にボタンを掲載した場合でも、ヘッドコピーと導入文だけではボタンへのアクションを誘発できなかった閲覧者は、それでもまだ、そのページに興味があれば、次に進みます。

次のコンテンツは「1・・1・2」の「3」に当たるのですが、これを拙著『【改訂増補版】実践:小さなサイトの儲かる秘訣、大きなサイトが掘る墓穴。』では「3つボタン」と呼んでいます。

この本を書いた当時のデータでは、この「3つボタン」のパートでは、4つボタンでも構わなければ、3つボタンを2行配置した6つボタンでも構わないというような考えを持っていました。

しかし、その後、トップページの改善を実施するためにアクセス解析データを調べていくと、このヘッドコピーに続く第2のパートに掲載するコンテンツが多ければ多いほど、必然的にそれぞれのデータ量が少なくなってしまうので、分析に骨が折れる結果となりました。

さらに、その煩雑なデータ分析を行った結果、ほとんどのサイトで、結果的にこの「第2のパート」に5つや6つのボタンを掲載したところで、選択されるコンテンツは、2つか、3つのボタンにデータが集中していました。

そのため、現在はヘッドラインに続く、この第2パートのコンテンツ数は「3」を推奨しています。

この「主要3コンテンツ」に掲載する内容は、あなたがそのサイトで売りたい商材ベスト3でも構いません。しかし、ここで商材の画像などを使っては、全てが水泡に帰してしまいます。

商品画像は「売り込み」をイメージさせます。

漠然とした購買欲求しか抱いていない見込み客に、いきなりセールスしていては、成約に結びつくものも結びつかなくなるのと同じです。トップページでは、特別な理由がない限り、商品画像を掲載することは、お勧めできません。

商品画像を掲載したところで、「〇〇の販売会社サイト」という情報が伝わるだけで、すでにその企業や商材が、アクセス者や市場からの信頼を勝ち得ている場合以外は、その商材を購入しません。

商材を売りたいのなら、それはセールスページで売れば良いので、トップページは、商品を販売するページではないのです。

詳細コンテンツへの誘導は、閲覧者心理に合わせる

「1・・1・2」の「3」に当たる主要コンテンツは、文字通り3つのコンテンツが並びます。パソコン版のレイアウトでは、横に3つ並びますが、スマホ版のデザインでは、パソコン版デザインの左から順に、縦に並び、閲覧者は、この3つをスクロールしながら読み進めます。

パソコン版の「3つ並び」は、多くの場合、中央のコンテンツが読まれ、次に左右のコンテンツに目が移ると言われているのですが、左右どちらが先に読まれるかなどは、調査のしようがありません。

なぜなら、3つ並びのコンテンツには、画像が掲載されているかもしれませんし、本サイトのように背景に色を入れていたりするため、条件を固定してデータを取ることができないからです。

おそらく、海外の調査会社などのデータを見れば、莫大なデータの中から解析している統計情報があるかもしれません。しかし、私はその調査方法などの詳細がわからない統計データを信じることはできません。そのため、他の資料を参考に次のような結論に至っています。

並列コンテンツの構成は、スマホ版デザインを参考に配列順を決める

人は「関心」を持ち「共感」を覚え「行動」し「信頼」を寄せます。

消費者心理を契印するテクニックには「pasonaの法則」や「AIDMA」「AISAS」などがあり、きっと好みもあるかもしれません。しかし、私たちは、この【人は「関心」を持ち「共感」を覚え「行動」し「信頼」を寄せる】という流れをもとに、信頼を寄せてくださったホームページの閲覧者が、顧客化につながるアクションを起こすと考え、これまで10年以上ウェブサイトを運営しています。

人は、「関心」を持ち興味を持ち続けている以上そのページに滞在し文章を読み画像や動画を観ます。

その中で、共感を蓄積し、ページに掲載された情報にしたがって「行動(アクション)」を起こすごとに、その閲覧者の行動に満足と納得を与え続けた場合に限り、そのページの運営者を信頼し、顧客化につながる行動を起こすという結論に至っているわけです。

ヘッドラインとその下に続く誘導文を読み、さらにページをスクロールしている閲覧者の心理は、この時はまだ「共感」に達しているかどうかはわかりません。確かなことは、未だ「関心を失っていない」ということだけです。

そこで、この「関心」を喪失させるのではなく、さらに強い「興味」に発展させるために、閲覧動機を具体的にする施策を講じます。

これが、主要3コンテンツの最大の役割です。

「関心」を「興味」に変える

「関心」を「興味」に変えるためには「共感」と「疑問」を閲覧者に与える必要があります。

しかし、あまり多くの「疑問」を与えてしまっては、閲覧動機が薄れ、投げかけられた「問題提起」に対する疑問に思考が移ってしまいます。また、あまり多くの「疑問」を想起させてしまうと、「疑問」や「問題提起」が指摘する事柄以上に、「それは、どんな人物が投げかけているのか」と、閲覧者の興味が、「自分自身の抱える課題」から、「サイトの運営者は信頼できる人物なのか」と、言うことに移ってしまい、「会社概要」や「プロフィール」ページに移動し、本題から離れてしまいます。

このようなページ移管を起こさせないために、この「主要3コンテンツ」では、「共感形」「共感疑問形」「ご存知ですか?」の3様式のコピーをこの順番で投げかけます。

この、「共感形」「共感疑問形」「ご存知ですか?」コピーとは、どう言うものなのかといえば、そのコピー(小見出し)を読み「共感形」は「うん、それに興味がある」と、感じさせたり「なるほど!(もっと詳しく教えて!)」と、反応を引き出すコピーです。

「共感形」に引き続き「共感疑問形」のコピーを掲載する理由は「共感形」のコピーを読んだ人の中には、「あ〜それ知ってる」と、早合点し「関心」を失い始める人が一定割合含まれるからです。

「共感疑問形」のコピーで最も簡単な書き方は「◯◯とは」の形です。「今更聞けない〜〜」というコピーは、日本でも何十年と使われている優秀な見出しですが「◯◯とは」にも、同じような効果があります。

ここでは、あなたが提供している商材を購入する動機につながる文言を用いて作文します。

例えば、あなたが寝具販売のサイトを運営しており、3つの主要コンテンツが「羽毛ぶとん」「枕」「マットレス」だったとします。主要3コンテンツの左で「羽毛ぶとん」中央で「枕」右で「マットレス」の購買につながるページに移動させると仮定します。

一つの例ですが、この場合、左枠に記載する見出しは「羽毛ぶとん」ではなく「足元が夜中に冷える理由」としたり「夜中の足元や肩口の「冷え」解消法」とし、中央は「朝が辛い?3つの理由と解決策」といった感じに、直接、閲覧者に質問するような一言と「YES」と、頷く閲覧者だけが興味をもつテーマを見出しにします。

この「共感疑問形」には、変則タイプもあります。

本サイトで採用しているのは、読者に「ん?」と、立ち止まらせるコピーを用いて見出しにしています。基本形は『反応を引き出すトップページのデザイン』のページで採用しています。

「ご存知ですか?」は、単純な「疑問形コピー」とは、異なります。この「ご存知ですか?」と言う文言は、丁寧な言い回しになっていますが、この一言を言い換えれば「知ってる?」「知らないんじゃない?」「ちゃんとわかってる?」と言うような「煽り」を含んでいます。

人は、感情が動いた時に行動を起こす
と、言うのはコピーライティングの鉄則です。

訪問者がこのパートまで読み進めていると言うことは、関心は薄れ切っていませんが、ただでさえコンテンツの中盤を超え、後半に入ろうとしているパートに差し掛かっています。そろそろ、閲覧心理に変化を起こさなければ、「ダラダラとした滞在=迷惑なトラフィック」と、なってしまいます。

「なってしまう」と言うよりも、コンテンツ作者の工夫が足りないので、そのようなトラフィックを生み出していると言ったほうが適切かもしれません。

主要3コンテンツの右(スマホ版デザインだと3番目)に掲載する見出しには、「『煽り』要素を加える」と、覚えておいてください。

もちろん、「煽り」の後には「ケア」が重要ですが…

コンバージョンコンテンツの鉄則

コンバージョン(顧客転換)コンテンツ

「コンバージョンコンテンツ」とは、閲覧者を顧客に変えるためのコンテンツを意味します。そして、トップページに掲載する、このコンバージョンコンテンツは、閲覧者にとって「もっとも買いやすい商材」もしくは、「もっとも行動を起こしやすいアクション」を掲載するのが鉄則です。そのため、トップページに掲載するコンバージョンコンテンツのことを…

最短目標達成コンテンツ

と、呼んでいます。

低価格商品だったり、無料サンプル、資料請求にお問い合わせ。もしくは、無料相談でも良いでしょうし、本サイトの場合はメールマガジンへの登録を、この「最短目標達成コンテンツ」に据えて掲載しています。

トップページ終盤の閲覧者心理

この「コンバージョンコンテンツ」に到るまでに、閲覧者は、関心を興味に変え、その興味を維持しつつ共感を蓄積し、直前で軽い「煽り」を受けています。

前段で「煽りの後にはケアを」と、記載していますが、読者の心理には、この「煽り」と「ケア」によって感情の起伏が起こります。そのため、この「最短目標達成コンテンツ」を選択する際は、あなたの都合よりも、閲覧者心理を優先し選択することが鉄則になります。

しかし、サイトへの訪問者にばかり気をまわしていたのでは、ビジネスにはならず、単純な「親切な人」「お役立ちサイト」のレッテルだけが貼られ、ホームページ作成の依頼費も、自社やご自身でホームページを制作した場合の労力も回収できません。

ウェブサイトは、営業効率を上げるためのツールですし、ビジネスにおけるインターネット活用は、営業効率の改善を無視していたのでは、本末転倒どころか、本質を見失っていると言っても過言ではないくらいです。

余談ですが、なぜ、これほどインターネットが普及しているのに、特に広告業界などで「過労」や「重労働」が、問題になっているのかが不思議なくらいです。

本音を言えば、ひとつも不思議だとは感じていません。
単純に、本質を見失い、言葉巧みな「売りっぱなしセールス(または「売り逃げセールス」とも言う)」をウェブで展開している企業が多いだけです。

そこで、低価格商品を「最短目標達成コンテンツ」に据える場合は、その低価格商品の購入から、本商品(収益商品)への購入導線を準備した上で採用してください。資料請求にしても、「お問い合わせ」にしても、同様に、その後の「顧客化までの流れ」を準備せずに、このパートに掲載してしまうと、「見込み客対応」ばかりが増える結果になってしまいます。

では、無料相談や本サイトが採用している「メールマガジンへの登録」には、どんなメリットとデメリットがあるのか、想像できますか?

高額商品や世間の認知度が低い商材、または市場的にとてもユニークな商材を取り扱っている場合

高額商品や世間の認知度が低い商材、または市場的にとてもユニークな商材を取り扱っている場合は、サイト全体を市場の一般認識に合わせ作成し、トップページの中で「他とは何か違う」「ここは、ちょっと他所とは違うぞ!」と、感じさせる内容でまとめ、無料相談やメールマガジンへの登録に誘導するのが、とても有効です。

現代の人々は、すでに多くのことに気付いています

営業効率を上げるための広告なのに、その大手広告代理店で過重労働が問題になっている矛盾も感じていれば、「SEOは費用対効果が高い」「検索上位表示対策は、お客様を自動で集めることができる」と、言いながら、SEO会社がリスティング広告を出していたり、電話営業やファックス営業、時には飛び込み営業をしている矛盾にも、なんとなく違和感を感じているのです。

ここで、肝になるのが…

市場は、かろうじて感じてはいるが「理解」するまでには至っていない

と、言うことです。

「理解するまでには至っていない」と、書きましたが、このような矛盾は業界特有の事由や慣習から生まれることがほとんどですので、一般の人にとっては、普段あまり興味のないことです。「理解するまでに至っていない」と言うより、むしろ「自発的に理解しようとはしない」と、表現したほうが適切かもしれません。

しかし、トップページで、これらを全て指摘しては、『興味を関心に変える』のパートでお伝えした通り、本題ではなく、コンテンツの製作者は信頼できるのか?と、言うことに関心が移ってしまいますので、避けなければなりません。

そのため「他とは何か違う」「ここは、ちょっと他所とは違うぞ!」程度にとどめ、無料相談に引き込んだり、メールマガジンに引き込みインターネットでは公開できない情報に触れる機会があることを、閲覧者に提案するのです。

これを「公開情報と非公開情報のギャップ」と言います(詳しくは、またコラムかメルマガで(笑))。

2つのサブコンテンツが果たす役割

レスポンシブWebデザイン:サブコンテンツ

この「2つのサブコンテンツ」まで、スクロールした閲覧者は、ホームページの運営者にとっては、なかなか手強い見込み客です。

何かしらの検索キーワードを経由して、アクセスした人も、名刺に書かれたURLを直接打ち込んで訪問した「知人」であっても、これまでアクションを起こす機会が5回もあったにも関わらず、行動を起こさないのですから、こう言わざるを得ません。

ですから、この「2つのサブコンテンツ」では、「ダメを押す」ことと、再び、それまでにスルーしてきた5つのアクション(・2)の、いずれかを選択させるようなコンテンツを提示する必要があります。

サイトに訪れる目的に合致するだろう解決策を「主要3コンテンツ」で提案してもスルー…。

煽りを効かせた後の「ケア」コンテンツもスルーした閲覧者ですので、余程「慎重な人」なのか、または「接触を拒む人」なのかのいずれかと見ることが賢明です。ですから、この「2つのサブコンテンツ」は、「情報コンテンツへの誘導」だと言うことをはっきり閲覧者に伝える必要があります。

「2つのサブコンテンツが果たす役割」は、「あなた(閲覧者)には、さらなる情報が必要なのですよね?」という問いに、同意を得えて、その情報(次のページ)にアクセスしていただくことです。

2つのサブコンテンツ:選定方法

この「2つのサブコンテンツ」を選ぶコツは、一般的に「知られていそうで、知られていないこと」と、「訪問者にとって、もっとも魅力的な情報」と、なり得る商材を選び、その商材に繋げるための「情報」を全面的に提供し、あなたに引きつけることができるコンテンツを選ぶようにしてください。

その情報を掲載したページにアクセスした訪問者が「やっぱり、このサイトは他と違う!」と、確信が持てるような、あなた独自の見解やサービスなどをアピールできる「商材」を「情報」として伝えるわけです。

「2つのサブコンテンツ」も「3つの主要コンテンツ」と同様に、PC版のデザインでは横に並びますが、スマホ版のデザインでは、左、右の順で縦に並びます。

そのため左に配置するコンテンツの見出しは、煽られもせず、リスクもないことがわかるコピーとします。右側のコンテンツでは、煽りを加えたコピーでも構いません。

トップページ終盤の「ダメ押しコンテンツ」とでも呼べる、このパーツですから、この「2つのサブコンテンツ」右側で行動を起こさない訪問者は、「見込み客ですらない」と言うくらいの割り切った意気込みで準備してちょうど良いくらいです。

ここで、ひとつ
お気付きになりませんか?

これまで、このページでは、トップページにアクセスしたばかりのユーザーを「訪問者」と呼び、「・3・1・2」の「1」以降を読み進めているユーザーを「閲覧者」と、記載してきました。

しかし、ここにきて再び「訪問者」と記載しているのには訳があります。それは…

WEBコンテンツは、一気にスクロールされる?

トップページのデザインを考えるとき、どんな訪問者も上から順に閲覧してくれると考えるだけでは、成果を手にできません。

近年のWEBコンテンツは、ページトップのヘッドラインに共感した後は、そのページ全体を一気に確認するために、ページ最下部まで(「ほとんど」もしくは「まったく」)文章を読まず、動画を再生せず、スクロールし「視覚的に印象に残る情報」を頼りに、そのページを「しっかり閲覧するのか」を決めます。

これは、PCでの閲覧でもスマートフォンでの閲覧でも、それほど変わりはありません(「目次」があるページは別です)。

「視覚的に印象に残る情報」とは、大きな文字や見出しの装飾。ボタンや画像、動画など「ビジュアルに訴求する要素」が、これに当たります。また、背景色を設定することでも、「特別な段落」という印象を残すことができます。

「2つのサブコンテンツ」の下には、トップページの場合「最新のブログ記事」を掲載しますので、この「2つのサブコンテンツ」の右側(2番目のコンテンツ)は、「訴求し切れなかった最後の提案」を意識して掲載するようにしてください。

この右側(2番目)コンテンツの見出しに続く誘導文には、それまでに訴求してきた「・2」の「1・3・1」を思い出させる語句を使っても良いでしょう。

コンテンツの選定と見出しの作文、誘導文の作文に傾ける思いは、直下にあるリンクボタンをタップさせることが8割、「1・3・1」を思い出させるのが2割といった感じで作文してください。

最新情報やブログ最新記事へのリンクは、なぜ、最下部なのか?

トップページの最下部にブログの最新記事を3〜5記事ほど掲載するのが、企業サイトのトップページデザインでは有効だと言われています。

しかし、中には、トップページの最上部に「最新情報」と銘打ったブログ記事タイトルをリンクにした「更新情報」を掲載しているホームページもいまだに少なくありません。実は、トップページの最上部に「更新情報」を掲載するのは過去の名残があるからです。

この「過去の名残」は、リンクが検索上位表示に有効だった頃の名残と、SNSがまだ普及しておらず、最新情報を手に入れるために「再訪問」する既存顧客(もしくは、ホームページのファン)に対する配慮として、この位置に掲載していた名残がいまだに残っているだけです。

今の時代、最新情報に興味がある既存顧客やファンは、わざわざホームページにアクセスせずに、勝手気ままに流し読みをしているSNSで、その投稿が流れるのをキャッチするだけです。

リンク対策が検索ランキングに影響していた時代には、より上部に掲載されたリンク先ページは、より高い評価を得るというデータ(?)が、流布されていたため、このような配置が行われていました。しかし、今の検索アルゴリズムにこのロジックは通用しません。

従って、過去トップページの上部に「更新情報」や「最新ブログ記事リンク」を掲載する理由は存在しない訳です。

では、なぜ、「最下部」なのか?
と、言うことです

その理由は、検索経由のアクセスであれ、名刺をお渡しした面識のある人からのアクセスであれ、「1・3・1・2」の流れによって提案してきたことに興味を持ち続け、トップページの最下部まで閲覧、またはスクロールしてきたことは事実だからです。

トップページに掲載する「1・3・1・2」のコンテンツは、どれをとっても詳細な情報などを得ることはできません。そのため、興味や共感は蓄積できていたとしても「他者との違い」を感じられずに、最下部に至ったと考えることができます。

また、もうひとつの可能性を伺うことができます。

それは、この「1・3・1・2」に掲載する内容は、ある意味、そのサイトの根幹を担うコンテンツとも言えるため、閲覧者にとって「新鮮さ」が感じられず「あぁ知ってるよ。一応、まともなことは言ってるね…」程度の感想で、最下部まで読み進められたと言う可能性は排除できないからです。

そのため、トップページの最下部に最新のブログ記事にアクセスするためのパーツをこの位置に掲載するのです。

最下部に掲載するブログ最新記事リンクの最適な数は?

トップページの最下部に掲載する「最新ブログ記事」のリンクの最適な数は、ホームページの運営方針によって異なります。

このトップページ最下部には、最新のブログリンクではなく、ブログカテゴリーページのサムネイルリンクを掲載するほうが有効な場合もあります。しかし、どちらのサムネイルリンクを掲載するにしても、最適な数は3〜5と言われています。

過去、アメリカの認知心理学者ジョージ・ミラーが1956年に提唱した『マジックナンバー 7±2』と言うものがあり、人間が短期的に大体7個くらいは記憶できるという話や、人は「7個以上を『多い』と認識する」と、言われますが、これは2001年にネルソン・コウワンによって、否定され、現在は4±1が定説となっています。

これまた、「ブログ記事が多い」と感じさせたほうが収益を生むのか、それとも限られた選択肢だけを提供し、確実にその中からどれか一つを選ばせたほうが収益際の高いウェブサイトになるのかは、運営方針によって大きく異なります。

私たちの見解としては、ホームページでの広告収入をメインの収益源としたウェブサイト以外は、トップページ最下部に掲載する最新ブログ記事サムネイルリンクは3〜5に止めるほうが成果が出やすいと、これまでの調査から感じています。

百害あって一利なし!トップページにSNSリンク

トップページにFacebookページへのリンクやバナー、SNSのタイムラインを表示しているホームページを見かけることがよくありますが、あなたはそんな愚行を決して行わないよう注意する必要があります。なぜなら…

あなたがインターネット上で見込み客を顧客に変える手段は、SNSではなく、ウェブサイトだとしてネット活用を実施しているのなら、せっかく、トップページにアクセスしてくれた人を、わざわざSNSに戻す必要はないはずです。

SNSからホームページに引き込むことはあっても、ホームページからSNSに誘導する必要が、どこにあるでしょうか?

過去に配信した情報を、ホームページの訪問者に伝えたいのなら、ブログのアーカイブページに誘導すれば良いだけで、みすみすデータを取得することができない、また、そのデータを使って既存のコンテンツを改善することができない他者が運営するメディアに、見込み客を放流する必要はないはずです。

きっと、最新情報を受け取り続けて欲しいために、SNSに誘導しているのでしょうが、それはトップページで行うことではありません。

問い合わせを送信した後や、商品を購入した後、資料請求が行われた後に表示される「サンキューページ」に、これらのSNS関連コンテンツは掲載し、その目的を果たしてください。

もちろん、私たちが運営しているコーポレートサイトでは、代表松村のツイッターを全ページで表示されるようにしています。なぜかといえば、このサイトは検索経由のアクセスを見込んでいるわけでもなく、何かをセールスする目的も持たず、訪問者に何かしらの情報を提供する情報サイトという目的も持っていないからです。

私たちは、テストサイトや広告サイトの他に、自らの主要ビジネスに関する効率化を図るために、複数の専門サイトを運営しています。このサイトは「情報サイト」という位置付けで運営しており、他には「集客サイト」という位置付けのホームページがあります。

本サイトは、一般的な企業がはじめに運営すべき「集客用ホームページ」に関するWebデザインを中心に設計しています。

しかし、このサイトの目的は訪問者に情報をご提供することですので、細かな点では本サイトに記述している内容を踏襲していない箇所が存在します。そう言った中で、SNS関連コンテンツを掲載しているコーポレートサイトはアナログユーザー向けのホームページとして運営しています。

このアナログユーザー向けのホームページ運営方針に関しては、当サイトのコンセプトと逸脱してしまいますので、このホームページに記載することはありませんが、時折メールマガジンにて、この「ホームページの運営方針」をテーマにした記事を配信しています。

ご興味がある方は、下記よりご登録ください。

メルマガ詳細