Webコンテンツの成果が上がるレイアウトの法則とは?誰も語らなかったWebコンテンツ作成技法Webコンテンツの成果が上がるレイアウトの法則とは?優れたコンテンツとは、どんな構成で作られているのか、その鉄則を解説します。noteで書く優れたコンテンツとは、どんな構成で作られているのかその鉄則を解説します。この鉄則を身に付けられれば、誰もが一定の強みを持ったコンテンツを作成できるようになるでしょう。記事末には、優れたコンテンツのワイヤーフレームも紹介します。このワイヤーフレームを基本として、自社サイト用にカスタマイズして活用してください。優れたコンテンツ構成の鉄則を探る!優れたコンテンツとは顧客の悩みを解決できるため、検索やお気に入りから訪問者を獲得できます。そのコンテンツは別のページに誘導する力があり、しかもゴールに結びつける力があります。前回説明したように、こうしたコンテンツは、天才的なアイデアや人並みはずれた文章力で作られるのでしょうか。実際にはそうではありません。普通のビジネスパーソンが、普通に考え、普通の文章力で作ったものが成果を上げているのです。意図的ではない分、成果が小さいことがもったいないのですが、これを意図的に行っていけば、狙った成果をより大きなものにできるはずです。それでは、コンテンツの成果が上がる構成とはどんなものなのか解説していきます。コンテンツの見出しは画像を使わず2行のテキストで作る前回説明したように優れたコンテンツは、検索集客力が高く検索から顧客と出会う力を持っています。検索から評価され、多くの顧客と出会えるようにするためには、コンテンツをテキストで作ることが鉄則です。デザイナーなどに頼むとビジュアルを重視するあまり、見出しなどを画像で作ってしまいがちです。これでは、せっかくコンテンツの見出しである重要な文章が、検索ではテキストとして処理されず、顧客と出会う貴重な機会を減らしてしまいます。コンテンツの見出しを作るときは、コンテンツの最上部に2行で構成することです。1行目は検索を重視したテキストで記述する本文の内容を伝える内容にし、重要なキーワードを含むようにし、<h1>タグで記述しましょう。この見出しは、絶対に画像で作ってはいけません。2行目は、読む人の興味関心を引く言葉にするこれから読む人の関心を誘い、読みたいなと思ってもらえるようなおもしろい言葉を見出しにしましょう。検索を重視したキーワードを含める必要がないので、画像で作っても良いですが、できるだけテキストで入力した方が良いでしょう。本文は読みやすい文字のサイズ、行数、文字量にするホームページの文章は読みにくいものです。読ませたいコンテンツは、次のような条件を意識しながら、ブラウザやデバイスに応じて最適なものを選択すると良いでしょう。ここではPCのWebサイトを想定しています。文字の大きさを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つのメリットがあります。1パンくずリストのリンクに有効なキーワードが含まれる3段構えにすれば、パンくずリストが下図のように表記されます。コンテンツタイトルや章のタイトルがリンクになりますから、それだけ有効なキーワードを含むリンクができることになります。2複数単語での検索(ロングテール)に対応できる自分が求めるぴったりの情報を見つけたい人ほど、検索キーワードを2単語、3単語と複数の単語を組み合わせて検索します。3単語検索とは次のようなことです。シミュレーション」このような形で、検索者の知りたいことが検索キーワードに具体的に表れます。コンテンツはこうしたニーズに応えられなければいけません。ちなみに、先頭が「基本キーワード」、2番目が「組み合わせキーワード」、3番目が「機能性キーワード・絞り込みキーワード」などと呼んでいます。3段構えの構成を行うときは、コンテンツ全体が「基本キーワード」、章が「組み合わせキーワード」、本文ページが「絞り込みキーワード」といった形で、無理なくページタイトルや見出しに3単語キーワードを含むことができるようになります。3コンテンツ下部が目次リンクだらけになることを回避できるコンテンツの本文ページでは、ページ下部に目次を入れて他のページに誘導するのが鉄則です。ページ数が多くなると各ページに目次を入れるだけで大変です。そこで今見ている章は、その章の全ページの内容を表記し、他の章については章のタイトルだけにできます。することで、リンクだらけになることが避けられ、訪問者が読んでいる章に関連する内容を効果的に訴求できます。実際には「第1章:○○」といった部分に本当の見出し(タイトル)を入れてください。これが魅力的に感じられればクリック率は高まり、訪問者が逃げなくなります。本文ページの構成(ワイヤーフレーム)今まで解説してきたことをページの構成(ワイヤーフレーム)にすると、下図のようになります。※ブラウザやデバイスによってこの構成が最適ではない場合もありますが、PCサイトを想定しています。コンテンツのワイヤーフレーム読みやすい文章量で、すばやく他のページへのリンクが目に入ることで、コンテンツ内の動きも活発化します。関連する製品やゴールへのリンクも加えて、集客力のあるコンテンツをより良い結果につなげていくようにします。本文の冒頭には、その本文のまとめ的なサマリーテキストを入れることで、効率的に検索キーワードを含むことができるでしょう。制作会社には章とびらと本文ページの雛形を格好良く作ってもらって、見出しや本文をコンテンツ運用担当者が入力すれば、ページをどんどん作成できる体制を整えましょう。図はあくまでワイヤーフレームです。イメージビジュアルの入れ方やナビゲーションの組み方、本文の配置などデザインはいくらでも工夫できますから、このワイヤーフレームからより格好の良いページとしてデザインしてください。◇◇◇コンテンツが成果を上げるために必須の構成をまとめると、次のようになります。効果の出るコンテンツの構成コンテンツの見出しは画像を使わず2行のテキストで作る本文は読みやすい文字のサイズ、行数、文字量で作る。ページ」3段構え効果の出るコンテンツの構成は上記のようにするものだ、ということを鉄則として覚えてしまいましょう。次回から「実際のコンテンツの企画方法」を解説していきます。カタログ企画を経て、95年からウェブプロデューサ。Web黎明期からアクセス解析を使い、多くの企業サイトを成功に導く。「直帰率」という言葉の生みの親として知られる。Webそのもののコンサルティングから、Webを絡めた売上向上やコスト削減など経営全般に関わるコンサルティングが増えてきたため、企業分析と企業Web分析を組み合わせて「すべてを見る」ことをコンセプトとした分析会社「ミルズ」を設立。株式会社ミルズ主任研究員。~便利テンプレートデータで実務を効率化!』(技術評論社)、『改訂新版アクセス解析の教科書』(翔泳社)等がある。最近(過去90日間)の記事で、Facebookの「いいね!」が多かった記事をお見逃し無く。ネット広告への強い嫌悪感、テレビや新聞の倍以上に。いいね!伝説のTwitter企業アカウント“中の人”の先駆け。いいね!私は変人コレクター。10:59「ワイヤーフレーム」とうい言葉ですが、ここで使うのには違和感を感じます。ワイヤーフレームは3次元コンピューターグラフィックスの用語だと思います。返信コメントありがとうございます。13:16担当編集の四谷と申します。3次元コンピューターグラフィックスでもワイヤーフレームという言葉を使うんですね。知識不足で知りませんでした。Web業界では、一般的にWebサイトを構築するときの骨組みや必要なコンテンツやレイアウトを記載した設計図のことをワイヤーフレームといいます。Webコンテンツを作って運用をしている人向けの記事なので、みなさんが慣れ親しんだ表現の方がわかりやすいと思います。同じ言葉で別の意味を想像することがあるということは、誤解を招く原因にもなるので、周辺ワードで補足説明する必要が今後もあるかもしれませんね。ご指摘されなければ気付かなかったので、ご連絡ありがとうございました。引き続きどうぞよろしくお願いいたします。ポータルサイト運営企業にてマーケティング担当の募集です。ビジネス成果に貢献する5つのTips売上が伸びるECサイトの必須条件。行動ターゲティングネット広告の種類の1つ。Patterns』を3名様にプレゼント!【受付終了】企業がDXに向かう取り組み方を考える『デジタルファースト・ソサエティ』を3名様にプレゼント!すべて見るインフォメーションWeb担のメルマガを購読しませんか?Web担の記事がコンパクトに毎週届くメールマガジン「Web担ウィークリー」は、10万人が読んでいる人気メルマガ。忙しいあなたの情報収集力をアップさせる強い味方で、お得な情報もいち早く入手できます。編集後記サイトマップFAQ(よくある質問とその答)Web担に広告を掲載しませんか?購読者数10万人のメールマガジン広告をはじめとする広告サービスで、御社の認知向上やセミナー集客を強力にお手伝いいたします。