記事を開いた人は、まず「この記事に、自分の知りたいことが書いてあるか」を確かめます。
タイトルだけでは分からず、本文を少し読んでから戻ってしまう人もいます。
そこで当社のブログでは、アイキャッチのすぐ下に「この記事で分かること」の枠を置くことにしました。
読む前に、この記事を読むと何が分かるのかを3$301C5項目で示すものです。
この記事では、Drupalで作っているこのブログに、この枠をどう足したのか、本文にすでにある「この記事の要点」とどう役割を分けたのかを紹介します。
記事の先頭に「この記事で分かること」｜Drupalの欄を足して全記事の見せ方をそろえる
この記事で分かること
- 「この記事で分かること」と「この記事の要点」の役割の違い
- 記事の本文に書かず、欄として足した理由
- 1本で試してから、全記事に広げた進め方
- 読む人に伝わる項目の書き方
この記事の要点
- アイキャッチの下の枠は「読むと分かること（問い）」、本文の「この記事の要点」は「答え」と役割を分けた
- 枠は記事の本文に書かず、編集画面の欄として足した。見た目はテーマがそろえるので、書く人は文だけを入れればよい
- 欄に書いていない記事には何も出ないので、全記事を一度に書かなくても始められる
- まず1本で見た目を確かめてから、残りの記事に広げた。広げるときも更新日は変えていない
- 項目は「$301Cの理由」「$301Cする方法」のような問いの形で、1項目40字ほどにまとめる
「要点」があるのに、なぜもう1つ枠を足したのか
当社の記事には、本文の最初に「この記事の要点」をまとめています。最初は、これをそのまま上に移す案も考えました。
ただ、要点は答えです。「共用のレンタルサーバーでは、PHP本体の更新はサーバー会社が行う」のように、結論を先に伝えるためのものです。一方で、記事を開いたばかりの人が知りたいのは、答えの前に「自分の疑問が、この記事で解けるかどうか」です。
そこで、上の枠は「問い」、要点は「答え」と、役割を分けて両方を残すことにしました。同じ文を2回書かないので、読む人にとっても重複になりません。
| この記事で分かること | この記事の要点 | |
|---|---|---|
| 置く場所 | アイキャッチのすぐ下 | 本文の最初の見出し |
| 書く内容 | 読むと分かること（問い） | その答え（結論） |
| 役に立つ人 | 読むかどうかを決めたい人 | 急いで結論だけ知りたい人 |
| 例 | レンタルサーバーでPHPを更新するのは誰か | 共用のレンタルサーバーでは、PHP本体の更新はサーバー会社が行う |
本文ではなく「欄」として足した理由
枠を作るだけなら、記事の本文の最初に枠の HTML を書き込む方法もあります。
ですが、この方法だと記事ごとに形が少しずつずれたり、あとで枠のデザインを変えたくなったときに、全記事を1本ずつ直したりすることになります。
そこで、Drupalにもともとある「フィールド（欄）」の仕組みを使い、記事の編集画面に「この記事で分かること」の欄を足しました。1行に1項目を書くだけで、表示はテーマが受け持ちます。
この形にしたことで、次のような良さがありました。
- 書く人はデザインを気にしなくてよい：欄に文を入れるだけで、見出し・点線・チェックの印のついた枠になる
- 見た目を変えるのは1か所：枠の色や余白を変えたいときは、CSSを1か所直せば全記事に反映される
- 書いていない記事には何も出ない：全記事を一度に書かなくても、書いた記事から順に始められる
- 項目の追加・並べ替えが簡単：編集画面で行を足したり、ドラッグで順番を変えたりできる
枠の見出し「この記事で分かること」は、全記事で同じ言葉にそろえるため、欄ではなくテーマ側で固定しています。
まず1本で試してから、全記事に広げた
新しい見せ方は、実際の記事で見ないと分からないことがあります。そこで、次の順で進めました。
- 1本だけに入れて確かめる：「PHPの緊急脆弱性で何をすればいい？」の記事にだけ5項目を入れ、パソコンとスマホで余白や文字の大きさを確認した
- 残りの記事の案を作る：各記事のタイトル・概要・冒頭の文章・見出し・要点を書き出し、AIで1本ずつ4項目の案を作った
- 一覧で確かめる：案を表計算の一覧にして、記事ごとに内容を確認した
- まとめて記入する：確認した案を全記事に入れ、表示を抜き打ちで確かめた
記入するときは、記事の更新日が変わらないようにしました。枠を足すのは見せ方の変更で、記事の内容を書き直したわけではないからです。更新日の考え方は「記事の公開日・更新日の正しい管理方法｜Drupalで更新履歴と旧版を残す仕組み」で紹介しています。
読む人に伝わる項目の書き方
項目は、記事の目次をそのまま並べるのではなく、読む人の疑問の形にします。
| 伝わりにくい書き方 | 伝わりやすい書き方 |
|---|---|
| PHPの脆弱性について | 自分のサイトのPHPが、今回の脆弱性の対象かどうか |
| バックアップの重要性 | 「バックアップがある」のに戻せない理由 |
| WAFの設定 | 原因がWAFだと見分ける方法 |
あわせて、次のことに気をつけています。
- 3$301C5項目にする。多すぎると、目次と変わらなくなる
- 1項目は40字ほどまで。スマホで2行に収まる長さにする
- 答えは書かない。答えは本文の要点に書く
- 記事の流れ（見出しの順）に沿って並べる
よくある質問
Q. この枠を足すと、検索の順位は上がりますか？
枠を足したことで順位が上がる、という決まりはありません。
目的は、記事を開いた人が読むかどうかをすぐ判断できるようにすることです。
結果として、知りたいことが書いてある記事を読んでもらいやすくなると考えています。
Q. WordPressでも同じことはできますか？
できます。カスタムフィールドや、記事の最初に置く専用のブロックを使う方法があります。
大切なのは、本文に直接書き込まず、決まった形で入力できるようにしておくことです。
Q. 項目を考えるのが大変です
記事の見出しを読み返し、「この見出しを読むと、何が分かるか」を1行にすると考えやすくなります。
当社では、記事の骨組みからAIで案を作り、人が確認してから入れる形にしています。
まとめ
- アイキャッチの下に「この記事で分かること」を置き、読む前に内容を判断できるようにした
- 上の枠は「問い」、本文の要点は「答え」と役割を分けた
- 本文に書き込まず欄として足したので、見た目は全記事でそろい、直すのも1か所で済む
- 1本で試してから全記事に広げ、更新日は変えなかった
- 項目は問いの形で、3$301C5項目・1項目40字ほどにまとめる
金風株式会社では、ブログやホームページを「読む人がすぐ判断できる形」にする設計から、更新しやすい仕組みづくりまでお手伝いしています。お気軽にご相談ください。