誰も語らなかったWebコンテンツ作成技法
Webコンテンツの成果が上がるレイアウトの法則とは?

優れたコンテンツとは、どんな構成で作られているのか、その鉄則を解説します。
誰も語らなかったWebコンテンツ作成技法vol.3

優れたコンテンツとは、どんな構成で作られているのかその鉄則を解説します。この鉄則を身に付けられれば、誰もが一定の強みを持ったコンテンツを作成できるようになるでしょう。記事末には、優れたコンテンツのワイヤーフレームも紹介します。このワイヤーフレームを基本として、自社サイト用にカスタマイズして活用してください。

優れたコンテンツ構成の鉄則を探る!

優れたコンテンツとは顧客の悩みを解決できるため、検索やお気に入りから訪問者を獲得できます。そして、そのコンテンツは別のページに誘導する力があり、しかもゴールに結びつける力があります。

前回説明したように、こうしたコンテンツは、天才的なアイデアや人並みはずれた文章力で作られるのでしょうか。実際にはそうではありません。普通のビジネスパーソンが、普通に考え、普通の文章力で作ったものが成果を上げているのです。

意図的ではない分、成果が小さいことがもったいないのですが、これを意図的に行っていけば、狙った成果をより大きなものにできるはずです。それでは、コンテンツの成果が上がる構成とはどんなものなのか解説していきます。

コンテンツの見出しは画像を使わず2行のテキストで作る

前回説明したように優れたコンテンツは、検索集客力が高く検索から顧客と出会う力を持っています。検索から評価され、多くの顧客と出会えるようにするためには、コンテンツをテキストで作ることが鉄則です。

たとえば、デザイナーなどに頼むとビジュアルを重視するあまり、見出しなどを画像で作ってしまいがちです。しかしこれでは、せっかくコンテンツの見出しである重要な文章が、検索ではテキストとして処理されず、顧客と出会う貴重な機会を減らしてしまいます。

コンテンツの見出しを作るときは、コンテンツの最上部に2行で構成することです。

1行目は検索を重視したテキストで記述する
企業ホームページの成功事例・失敗事例から学ぶ
そのボタンじゃクリックされません!
2行目は読む人の興味関心を引く言葉にする
  • 1行目は検索を重視したテキストで記述する
    本文の内容を伝える内容にし、重要なキーワードを含むようにし、<h1>タグで記述しましょう。この見出しは、絶対に画像で作ってはいけません。

  • 2行目は、読む人の興味関心を引く言葉にする
    これから読む人の関心を誘い、読みたいなと思ってもらえるようなおもしろい言葉を見出しにしましょう。検索を重視したキーワードを含める必要がないので、画像で作っても良いですが、できるだけテキストで入力した方が良いでしょう。

本文は読みやすい文字のサイズ、行数、文字量にする

ホームページの文章は読みにくいものです。読ませたいコンテンツは、次のような条件を意識しながら、ブラウザやデバイスに応じて最適なものを選択すると良いでしょう。ここではPCのWebサイトを想定しています。

  • 文字の大きさを14ピクセル位の通常よりも少し大きめにし、1行30文字以下になるようにレイアウトする
  • 1つのコンテンツに含める文章の量は900文字程度を基本とする
文字の大きさは14ピクセル、1行30文字程度、1ページの文章量は900文字程度

最近のホームページは横幅が1,000ピクセル位あるので、コンテンツエリアの幅が700ピクセル程だとすると、1行50文字程入ります。しかし、1行に50文字も入れてしまうと長すぎて、訪問者が読み疲れてしまいます。

一方、14ピクセルで1行30文字にすると必要なコンテンツエリアの幅は420ピクセルですから、横幅が1,000ピクセルもないようなホームページだとしても、左ナビゲーションや右バナーエリアを確保しても、読みやすくゆったりとしたコンテンツを作ることができます

また、1つのコンテンツの文章量は900文字程度を基本としましょう。たとえば、1行30文字で5行を1段落とすると150文字です。段落ごとに1行の空行をはさんだとして、6段落35行で900文字です。文章が得意な人には書き足りない量ですが、ホームページとしては十分な量でしょう。

これくらいの行数と文章量に収めるとすばやく読めて、まだ読み疲れていないので、読み終わった後に他のページへのリンクが目に入り、クリックしてさらに読んでみようという意欲がわきます

前回説明したように、優れたコンテンツでは同じコンテンツの他のページが続けて読まれ、直帰率が低く平均ページ数が多くなっていました。1ページが早く読み終えられて、次へのリンクが早く発見できるというのが、これを成立させる不可欠な要素です。

ページ構成は「コンテンツトップ」「章目次」「本文ページ」3段構え

コンテンツの構成は下図のように3段構えが、優れたコンテンツで多く見られるスタイルです。

  • コンテンツトップ
  • 章目次(章とびら)
  • 本文ページ
3段構えのページ構成

この3段構えにしたときのポイントは次のようなことです。

  • 検索から本文のどのページにアクセスがあっても、他のページに移動して読みたくなるようにテキストリンクを魅力的にする
  • 3段構えの場合、コンテンツトップから、章とびらを経なくても直接本文ページに移動できるようにする

読む人にとって、わかりやすさや選びやすさを重視するのであれば、3~5ページごとに整理し、章のまとまりを作っておきましょう。また、章とびらには、「章のタイトル」と「章の目次」のリンクを入れると良いでしょう

章目次(章とびら)構成

このような構成にすることは、コンテンツを更新する運用担当者にとってもメリットがあります。どんなに良いコンテンツを作成しても、掲載したまま放置したのでは期待するほど効果が得られない可能性が高いです。コンテンツは、定期的に更新や追加していくことが重要です。

この章立ての仕組みをとれば、その章に関連する内容が足りないときに、補足コンテンツを足しやすいです。また、新たなアイデアが浮かんだときに、章単位でコンテンツを追加できるので、比較的楽にコンテンツを充実させることができるでしょう。

この3段構えには、他にも3つのメリットがあります。

①パンくずリストのリンクに有効なキーワードが含まれる

3段構えにすれば、パンくずリストが下図のように表記されます。

パンくずリストとは> コンテンツタイトル > 章タイトル > ページ内容

コンテンツタイトルや章のタイトルがリンクになりますから、それだけ有効なキーワードを含むリンクができることになります。

②複数単語での検索(ロングテール)に対応できる

自分が求めるぴったりの情報を見つけたい人ほど、検索キーワードを2単語、3単語と複数の単語を組み合わせて検索します。3単語検索とは次のようなことです。

  • 「渋谷 フレンチ 予約」
  • 「太陽光発電 売電 シミュレーション」

このような形で、検索者の知りたいことが検索キーワードに具体的に表れます。コンテンツはこうしたニーズに応えられなければいけません。

キーワードと3段構えの構成

ちなみに、先頭が「基本キーワード」、2番目が「組み合わせキーワード」、3番目が「機能性キーワード・絞り込みキーワード」などと呼んでいます。

3段構えの構成を行うときは、コンテンツ全体が「基本キーワード」、章が「組み合わせキーワード」、本文ページが「絞り込みキーワード」といった形で、無理なくページタイトルや見出しに3単語キーワードを含むことができるようになります。

③コンテンツ下部が目次リンクだらけになることを回避できる

コンテンツの本文ページでは、ページ下部に目次を入れて他のページに誘導するのが鉄則です。ページ数が多くなると各ページに目次を入れるだけで大変です。

そこで今見ている章は、その章の全ページの内容を表記し、他の章については章のタイトルだけにできます。こうすることで、リンクだらけになることが避けられ、訪問者が読んでいる章に関連する内容を効果的に訴求できます。


コンテンツ下部に入れる他ページへの誘導リンク
・第1章
 ・ページ1
 ・ページ2
 ・ページ3
 ・ページ4
 ・ページ5
・第2章
・第3章

もちろん実際には「第1章:○○」といった部分に本当の見出し(タイトル)を入れてください。これが魅力的に感じられればクリック率は高まり、訪問者が逃げなくなります。

本文ページの構成(ワイヤーフレーム)

今まで解説してきたことをページの構成(ワイヤーフレーム)にすると、下図のようになります。

※ブラウザやデバイスによってこの構成が最適ではない場合もありますが、PCサイトを想定しています。

コンテンツのワイヤーフレーム

読みやすい文章量で、すばやく他のページへのリンクが目に入ることで、コンテンツ内の動きも活発化します。また、関連する製品やゴールへのリンクも加えて、集客力のあるコンテンツをより良い結果につなげていくようにします。

さらに、本文の冒頭には、その本文のまとめ的なサマリーテキストを入れることで、効率的に検索キーワードを含むことができるでしょう

制作会社には章とびらと本文ページの雛形を格好良く作ってもらって、見出しや本文をコンテンツ運用担当者が入力すれば、ページをどんどん作成できる体制を整えましょう。

図はあくまでワイヤーフレームです。イメージビジュアルの入れ方やナビゲーションの組み方、本文の配置などデザインはいくらでも工夫できますから、このワイヤーフレームからより格好の良いページとしてデザインしてください。

◇◇◇

コンテンツが成果を上げるために必須の構成をまとめると、次のようになります。

効果の出るコンテンツの構成

  • コンテンツの見出しは画像を使わず2行のテキストで作る
  • 本文は読みやすい文字のサイズ、行数、文字量で作る。基本は、文字サイズ14ピクセル、1行30文字程度、文章量900文字程度
  • ページ構成は「コンテンツトップ」「章目次」「本文ページ」3段構え

効果の出るコンテンツの構成は上記のようにするものだ、ということを鉄則として覚えてしまいましょう。いよいよ次回から「実際のコンテンツの企画方法」を解説していきます。

この記事が役に立ったらシェア!
tweet190このエントリーをはてなブックマークに追加
みんなが読んでるWeb担メルマガで、あなたも最新情報をチェック
  • SEOやアクセス解析のなどノウハウをゲット
  • 事例やインタビューも見逃さない
  • 要チェックのセミナー情報も届く
  • 編集長コラムを一足先に読める
日本赤十字社 東日本大震災 義援金募集
みんなが読んでるWeb担メルマガで、あなたも最新情報をチェック
  • SEOやアクセス解析のなどノウハウをゲット
  • 事例やインタビューも見逃さない
  • 要チェックのセミナー情報も届く
  • 編集長コラムを一足先に読める

人気記事トップ10(過去7日間)

今日の用語

グローバルナビゲーション
サイト全体で共通して表示されるナビゲーション。 多くの場合、第1階層(大カ ... →用語集へ

連載/特集コーナーから探す

インフォメーション

Web担のメルマガを購読しませんか?
Web担の記事がコンパクトに毎週届くメールマガジン「Web担ウィークリー」は、10万人が読んでいる人気メルマガ。忙しいあなたの情報収集力をアップさせる強い味方で、お得な情報もいち早く入手できます。

Web担に広告を掲載しませんか?
購読者数10万人のメールマガジン広告をはじめとする広告サービスで、御社の認知向上やセミナー集客を強力にお手伝いいたします。

サイトマップ
RSSフィード


Web担を応援して支えてくださっている企業さま [各サービス/製品の紹介はこちらから]

GOLD SPONSOR
さくらインターネット株式会社株式会社KDDI ウェブコミュニケーションズ株式会社日本レジストリサービスオープンテキスト株式会社トランスコスモス株式会社株式会社ハイパーボックスDomain Keeper
SPONSOR
株式会社キノトロープ株式会社アイレップ株式会社ニューズ・ツー・ユーシックス・アパート株式会社ウェブアンテナ株式会社サイバーエージェント富士通株式会社Sitecore