ホームページ&カタログ制作の基本2：理解と興味を促す部品

コンテンツの良し悪しを決定する
5つの重要な部品とは何か？

東京・港区三田にある製造業・メーカー様に特化した広告代理店コム・ストーリーです。
前回の「コンテンツ制作の基本1」では、会社案内や製品カタログ、展示会販促物、展示会パネル、ホームページにおいて「読みやすく、わかりやすい文章」について説明しました。
2回目は「コンテンツの基本構成」についてご説明します。

コンテンツには、大きくわけて6つの部品で構成します。

コンテンツを構成する5つの部品（図は中綴じ会社案内見開き2ページの事例）。会社案内は、見開き単位でレイアウト
を行い、ページ構成すると全体にストーリー展開が生まれる。タイトルは、見開き全体に何が書かれているかを表わす
もので重要な役割を持つ。ちなみにこの文章も「キャプション」にあたる

◉ 1. タイトル
ページ全体を示すタイトルです。コンテンツ全体を示すもので、「そこに何が書かれているのか？」「自分との関連性は？」「読むべき価値があるか？」を判断する上でも重要な役目を持ちます。大概ページ全体で一番大きな見出しを「タイトル」と呼ぶ場合が多いです。

特にB1/A1サイズの展示会パネルは、タイトルは「アイキャッチ（視線を止めさせるきっかけ）」として機能するので、見た瞬間で興味をそそるタイトル（キャッチコピー）をつけるべき。大・中・小のタイトルを分けることで階層化させ、アイキャッチのほか最後の「まとめ」としても利用可能です。
ちなみにホームページ制作においてSEOに関連する「タイトル」も同様で、各ページに検索ワードを意識したタイトル付けを行います。

◉ 2. 見出し
ページや文章のひとまとまり（段落、章、パラグラフなど）単位につけるタイトルのこと。

タイトル→小見出し→本文＝大タイトル→小タイトル→本文

上記は同じことですが、人によって呼び方が異なり、混乱しがちです。文章のブロック単位やページ単位の冒頭に置き、その内容を簡潔に表し、1のタイトルと混同して使う場合も多いです。いずれにせよ、「文章の塊（かたまり＝ブロック）」の内容を簡潔に説明するためのものです。

タイトル同様、大・中・小の見出しを階層化させ、ページやブロックの構成や内容を明確にすることができます。本文に入れ込む「小見出し」は極力簡潔に短くしてください。折り返し文字数にもよりますが、小見出しは1行または２行に収めたいところです。ただし1行では字足らずで内容がわかりにくく、素っ気ないので2行がお勧め。また、ブロックの内容と異なり、そぐわない小見出しは読み手を混乱させるので要注意です。

**タイトルは、あくまで内容に関係するもので、力強くインパクトを持たせるのことが大事。レイアウト**
**にもよるが2行に合わせると見やすく、スッキリとする**

ホームページ制作時にはSEOにも影響するので、検索エンジンを意識したキーワードを盛り込むことが大切です。

◉ 3. リード
通常ページや章などの単位で1.の大タイトル（大見出し）下におく要約文のこと。ページ全体に「何が書かれているか？」「これから何を語りたいのか？」を短文でまとめています。ランディングページでも、ページ冒頭部にリードを置くことで読み手の興味やワクワク感と本文への期待を盛り上げられます。サイト内容の要約をまとめた「メタ・ディスクリプション」にも機能が似ています。
ボールド文字や本文より数ポイント大きくすることで、本文と区別がつきやすくなり、アイキャッチとして目をひきます。

◉ 4. 本文
文字どおり「文のまとまり」です。紙の本や冊子、ホームページなどのコンテンツ内にある「本体」にあたり、いちばん読ませたいところでもあります。長文が続くと読みづらくなるので、句読点と改行（段落分け）を適宜行うことで文章が読みやすくなり、読み手への理解を促せます。

紙の書籍や冊子などでは段落分けしたら全角１字下げをすることが、主に編集デザインで縦書きルール化されていますが、製造業・メーカー系ホームページ、技術マニュアル、トリセツ（取扱説明書）では、全角１字下げを行わない場合が多いです。すでにお気づきのとおり、本ブログ記事も全角１字下げはしていません。またリードでも全角1字下げは、ほとんど行いません。

◉ 5. キャプション
図や写真の説明文です。通常、本文やキャプションより小さいフォントサイズを使うことで、本文と差別化します。あくまで図や写真、表組、グラフの説明を行いますが、本文との重複を極力避けましょう。読み手の立場に立って、図や写真などの補足説明文や、表組やグラフなどの読み方などに利用できます。キャプションは、図や写真の横幅に合わせ、レイアウトするので、2、3行の文字数に収めるのがコツです。

またキャプションにはかならず図番号や写真番号を付けてください。本文から離れた位置に図や写真がレイアウトされる場合、本文内と図の番号を付けることで、関連性が一目瞭然です。「図1、図2、図3……」「写真1、写真2、写真3……」と図、写真ごとに連番になるようにしてください。

◉ 6. 脚注
文章中の専門用語や技術用語に「※1、※2、※3……」といった文字を付けて文末などで詳細説明または補足説明を行います。本文中に（○○○○）という表記で説明を入れると、文章が冗長になりがちでそれが連続すると読みづらく、読書中のリズムを乱されます。
脚注を上手に使うことで、本文を読むリズムが崩れず、思考が妨げないというメリットもあります。脚注はかならず読ませる必要はないので、やはり文は短く簡潔にまとめることがお勧めです。読み手へのやさしさとして配慮ですが、テキストリンクをうまく使えばページ内で説明が簡潔するので離脱率回避にもなります。

**脚注は、専門用語や技術用語などの詳細解説や補足説明をする際に便利な部品。上付き※の引用マークを使うことが**
**一般的だ。図は展示会用A1パネル事例**

やると決めたらトコトンやること！
読み手の立場でライティングを行う

１〜６は専門用語や技術用語、固有名詞が多用される製造業・メーカー様の販促ツール、ホームページ制作で活用することで、読みやすさとわかりやすさが格段にアップします。

コンテンツの読み手の立場でコンテンツ構成を考えたり、ライティング（原稿作成）を行うことで、他社とは一味違うカタログやランディングページに仕上げられます。
今回ご紹介したコンテンツの構成する5つの部品は、日常的な報告書や企画提案書、パワポのプレゼンシートなどのビジネス文書にも応用可能です。

最後に、ホームページや製品カタログ、会社案内などツール全体にルール化したら、コンテンツ全体にルールを適用することを徹底してください。そうしないと、見た目に統一性がなくなり、非常にチグハグ感が出てしまい、コンテンツが読みづらくなります。Webマーケティングと同じで「やる！」と決めたら、最初から最後までトコトンやることをお勧めします（続く）。