インタビュー取材記事が読みやすくなる4つのレイアウト

Sambushi編集部です！

読みやすいインタビュー取材記事は、取材対象であるインタビュイーの話や情報がきれいにまとまっています。インタビュー取材の内容が大切なのはもちろん、記事の書き方やデザインによって読みやすさが大きく変わるのです。

しかし、インタビュー取材記事は取材や執筆に割くリソースが大きく、記事ページのレイアウトにまで手が回らないというひとも多いでしょう。

今回はインタビュー取材記事を読みやすくするオウンドメディアのレイアウトパターンを4つ解説します。ユーザーの視線誘導を考慮したレイアウトパターンもあわせてご紹介しますので、視覚的に読みやすい記事を書きたい担当者やライターは必見です。

インタビュー取材記事の必要項目

インタビュー取材記事を公開するためには、Webサイトに必要な記事の基本的な項目を知っておきましょう。

オウンドメディアの記事はすべて項目をテンプレート化しておくことによって、情報を過不足なく埋めることができます。

インタビュー取材記事を含め、記載しておくべき項目は以下の8つです。

一般的なWeb記事でも必要な項目ですが、ここではインタビュー取材記事の場合を考えながら1つずつ解説していきます。

タイトル

ユーザーが記事を読むかどうか決める重要な項目「タイトル」。このタイトルをおざなりにしていると、ユーザーにクリックすらされず記事が埋もれてしまいます。

インタビュー取材記事の場合は、取材対象の名前やインタビュー中に出た名言・格言のようなキャッチコピーを入れることが多いです。

タイトルはSNSの投稿や検索エンジンで目を引く場所のため、記事の内容をひと言で表しつつ、ユーザーが思わずクリックしたくなるようなものを付けましょう。

アイキャッチ画像

アイキャッチは記事の一覧ページやSNSシェアされた際に大きく表示できる画像です。「アイ」「キャッチ」という文字通りユーザーの目をつかむ項目で、先述したタイトルと合わせてユーザーが記事を読むかどうか判断する場所に表示されます。

そのため、記事の内容に関連し、クリックしたくなるような興味・関心を持たせる工夫が必要です。

インタビュー取材記事の場合は、アイキャッチ画像にインタビュイーのバストアップや顔写真がよく使われています。

書き出し

記事ページの冒頭で表示する書き出しには、記事の内容を簡潔にまとめた文章を書きます。タイトルとアイキャッチ画像を見てクリックしたユーザーに「どのようなことが書かれている記事なのか」を伝えるのが目的です。

インタビュー取材記事では、企画とインタビュイーの紹介が適しているでしょう。

この書き出しはあまり長くなるとユーザーは本文を読み進める前に離脱してしまう可能性があるため、短い文章で書くのが望ましいです。

シェアボタン

シェアボタンは、TwitterやFacebookなどのSNSへシェアするためのボタンです。クリック1つで記事タイトルとURLを投稿できる仕様になっていて、簡単に記事を拡散することができます。

一般的な記事もインタビュー取材記事も違いはなく、記事を完読したあとにシェアしたいユーザーへ向けてシェアボタンを設置します。

記事公開日

検索エンジンやユーザーへ向けて、記事公開日を表示します。WordPressなどのシステム側で自動的に表示することがほとんどで、ライターやエディターがするべき操作はないことが多いです。

システムの設定によっては記事を更新した日を表す「更新日」を設けることもあります。インタビュー取材記事の場合はあまり重要視されませんが、記事を常に最新の状態にメンテナンスしていることがアピール可能です。

見出し

記事コンテンツの内部で見出しは重要な項目です。インタビュー取材記事では、会話のテーマが切り替わるときに付けることが多いでしょう。

構造としては大・中・小と3種類の見出しがあり、記事構成をつくる際に階層を分けた設計を行う必要があります。

本文

本文は記事コンテンツメイン部分です。インタビュー取材記事の場合は、会話文や1人称視点だったりと表現方法が異なります。

フォントサイズや色を変更することも可能。話すひとによって特徴を変えて装飾すると、わかりやすい本文になるでしょう。

写真

写真は本文の間に挿入して使用します。見出し直下に1枚ずつ挿入することが多いですが、オウンドメディアによってさまざまです。

テキストばかりのコンテンツはユーザーを退屈させてしまうため、適度に写真を挿入するようにしましょう。

インタビュー取材記事の場合はインタビュアーやインタビュイーの写真を交互に挿入するといった方法が挙げられます。

基本のWebレイアウトパターンは4つ

インタビュー取材記事に必要な項目がわかったら、運営・管理しているオウンドメディアのレイアウトを改めて確認してみましょう。

スマートフォンの普及によってモバイル画面で記事を読むユーザーが増えました。そのため、スマートフォンで表示した際のレイアウトを考える必要があるのです。

ここでは、基本的なWebレイアウトを4つ解説します。

レイアウトによってユーザーに与える印象が異なるため、自社のオウンドメディアに訪れるユーザーの特性に合わせたレイアウトを考えてみましょう。

シングルカラムレイアウト

1カラムのみで構成され、サイドバーが存在しない「シングルレイアウト」。従来のWebサイトではメインカラムとサイドカラムの2カラムで運用するサイトが主流でした。

しかし、スマートフォンで訪れるユーザーが増えたことから、Webサイトのレスポンシブ対応が求められたため、サイドバーのないシングルカラムレイアウトが普及してきています。

シングルカラムレイアウトのメリットは、PCで見たときも横幅いっぱいにコンテンツを展開できること。ランディングページのように訴求したいことを全面にアピールできます。記事を読んでいる途中でサイドバーのバナーや関連記事に移動してしまう心配もないため、完読されやすいのが特徴といえます。

マルチカラムレイアウト

「マルチカラムレイアウト」は、2つ以上のカラムを横に並べた配列のレイアウトです。メインカラムの隣にサイドカラムを並べて、メニューやバナーなどのサブコンテンツを設置することができます。

Webサイト内の別のページに誘導できることから、ユーザーの回遊率を高めるのに効果的です。とくにポータルサイトのようなコンテンツが多いWebサイトでは、高い効果を発揮します。

一般的なオウンドメディアでは、このマルチカラムレイアウトを使用しているところが多く見られます。

カード型レイアウト

写真や動画などテキスト以外のコンテンツをメインに取り扱うWebサイトの場合は「カード型レイアウト」を用います。カード型レイアウトの例を挙げると写真共有サイトのPinterest（ピンタレスト）です。

画像コンテンツはテキストに比べて見やすいため、ユーザーの注目を集めやすいのが特徴。文章では伝わりづらいコンテンツを発信するWebサイトに向いています。

ただし、テキストベースのジャンルを取り扱うWebサイトでは、画像や動画などのメディアを全面に展開するカード型レイアウトを活かしきれず、レイアウトの効果を見込みづらいです。

ブロークングリッドレイアウト

従来のWebサイトの形式にとらわれない、自由なデザインのレイアウトを「ブロークングリッドレイアウト」と呼びます。

紙媒体である雑誌のレイアウトをイメージするとわかりやすいでしょう。サイトの型を気にしなくていいため表現の幅が広がり、オリジナリティのあるWebサイトという印象をユーザーに与えられます。

視線誘導を知って読みやすいレイアウトを意識しよう

Webサイトのレイアウトを決めようとしたとき、重要なのがユーザーの視線です。

ユーザーの視線を誘導するレイアウトを知っておかないと、コンテンツの読みづらさを感じて離脱してしまう可能性があります。

人間の視線は、上から下へ、大から小へと動きます。Webサイトのデザインにおいても視線の動線を考えたレイアウト設計にするのが読みやすいコンテンツを作成する近道です。

最後に代表的な視線誘導を3つ解説します。

横書きZ型

横書きで配置されたレイアウトでは、左から右へ、下がりながら左へ戻ってまた右へ、という順番でアルファベットの「Z」のように視線が動いていきます。

横書きF型

Webサイトで多く使われているのが、「F」型の視線誘導です。左から右へ読んだら下へ、と繰り返しながらページをスクロールしていきます。

縦書きN型

縦書きレイアウトのサイトでは「N」型の視線誘導が行われます。上から下へ、左上に進んでまた上から下へ、という順番でコンテンツを読み進めていきます。

まとめ

インタビュー取材記事は会話文を掲載するため、ほかの記事と比べて冗長的になりやすいです。ユーザーに最後まで読んでもらうためには、読みやすさを重視したレイアウトが求められます。

ユーザーの視線誘導を考えたレイアウト設計をし、テンプレート化しておけばインタビュー取材記事のような大量のリソースが必要な記事でも読みやすく書くことができます。

完読率の高いインタビュー取材記事を書くために、この記事で解説した必要項目を入れつつ読みやすいレイアウトを目指してみてください。

（画像はpixabayより）