冒頭表記型 著者・監修者ボックス

通称:バイラインArticle byline

見本の中のメニューやボタンは押して動きを試せます(リンク先へは移動しません)。

題名の直下に、書いた人と監修した人の名前、公開した日と更新した日を短く並べます。本文に入る前に、誰の記事で、いつ時点の情報なのかが分かります。

自分のサイトの中身で、この形を作らせる指示文です。最初の「サイトの情報」を書き換えてから渡します。今あるページを直させるときは、その HTML を貼ります。

この形で作る
# サイトの情報(ここを書き換える)
- どんなサイトか:〈例:工務店のサイト、税理士事務所のサイト、ネットショップ〉
- 入れたい文言・項目:〈見出し・ボタンの文言・項目の数など。決まっていなければ空けてよい〉
- 今あるページ:〈今のページを直すなら、その HTML を貼る。新しく作るなら空ける〉

# 部品の呼び名
一般に「バイライン」(Article byline)と呼ばれる部品です。

# 作ってほしいもの
冒頭表記型の著者表記(Article byline)。記事の題名のすぐ下に、誰が書いて誰が監修したか、いつ公開していつ更新したかを1行でまとめる。

# 並べるもの(題名の下の1行)
- 執筆者:小さな丸い写真(28px)+「執筆」のラベル+名前
- 監修者:「監修」のラベル+名前
- 日付:公開日と更新日を両方
- その下に記事の本文が続く

# 守ってほしいこと
- 名前はページの下にある著者紹介(id="author")へのページ内リンクにする
- 日付は time 要素にし、datetime 属性に YYYY-MM-DD を入れる
- 更新日は、内容を直したときだけ変える。誤字の修正だけでは変えない
- 「執筆」「監修」「公開」「更新」のラベルは薄い灰色、名前と日付は本文の色にして、項目名と値を見分けられるようにする
- 題名より目立たせない(文字は 14px 前後)

# SP(画面幅 599px 以下)
- 1行に収まらないので、「執筆・監修」の行と「公開・更新」の行の2行に分ける

# 出力
- HTML・CSS・JavaScript を分けて出す。ライブラリは使わない
- 色は CSS 変数(--accent など)にまとめ、あとから変えやすくする
- 文言は「サイトの情報」に合わせて考える。決まっていないところは〈 〉で囲んだ仮の文言にする
- 「並べるもの」に書いた項目の名前(エリア・間取りなど)は一例。サイトに合うものに置き換える
- 今あるページを渡したときは、そのページの色・文字・余白に合わせ、変えた場所を最後に箇条書きで知らせる

著者・監修者ボックスを6つの型に分け、AIへの指示文・動く見本・コードを載せています。

著者・監修者ボックスはどの型を選ぶか

著者・監修者ボックスは、記事を「誰が」「何を根拠に」書いたのかを読み手に伝える部品です。型を選ぶときは、関わった人が何人いるか、専門家の確認を受けているか、読み手が書き手の経験をどこまで知りたいか、の3つを考えます。1人で書くブログなら記事末尾型から始め、監修や分担が増えたところで型を足していくのが手堅い進め方です。

こんなとき 向いている型
1人で書くブログ・コラムで、書き手を紹介したい記事末尾型
制度や料金など、いつの情報かを読む前に知らせたい冒頭表記型(記事末尾型と組み合わせる)
税金・法律・医療など、専門家に内容を確かめてもらっている監修者併記型
資格や経験の長さが、記事の信頼に直結する資格・実績つき型
取材・執筆・編集など、何人もが関わっている複数著者型
制度や手順が変わるたびに直していく記事で、何を直したかも見せたい更新履歴併記型

冒頭表記型は題名の下に置く短い表記なので、詳しい紹介は記事末尾型など、ページの下に置く型と組み合わせて使います。

どの型でも守ること

  1. 本文と区切る。全体を aside にして、背景の色の差や太めの線で本文の段落と見分けられるようにします。
  2. 実在の人の名前と写真を載せる。書き手が「編集部」とだけあっても、読み手には誰が責任を負う記事なのか分かりません。顔写真の img の alt には、その人の名前を入れます。
  3. 画面と構造化データの表記をそろえる。名前・肩書・日付は、Article の author や datePublished と同じ書き方にします。
  4. 数字と監修には時点を添える。「経験12年(2026年9月時点)」「2026年8月20日 監修」のように書くと、古くなったことに気づけます。
  5. 本人の確認を得てから載せる。経歴・資格・監修の範囲は、載せる前に本人に読んでもらいます。

よくある質問 (FAQ)

名前と日付は上に短く、詳しい紹介は下に置くのが一般的です。読み始める前に知りたいのは「誰が」「いつの情報か」くらいで、経歴は読み終えて興味がわいた人が見ます。冒頭に長い紹介を置くと、そのぶん本文の始まりが遅れ、最初の画面に本文が入らなくなります。

何の仕事を何年しているか、何が専門かを2〜3文で書きます。記事の内容を書ける根拠が伝わることが大事です。趣味や人柄に触れるなら、そのあとに短く添える程度にします。

書き足した部分を監修者に見てもらい、監修した日を新しくします。見てもらえないときは、その部分が監修の範囲の外だと書きます。最初の監修の日付と名前を残したまま中身だけ変えると、確かめていない内容まで監修したように見えます。

情報や説明の中身を直したときだけ新しくします。誤字の修正や画像の差し替えだけなら変えません。内容を変えずに日付だけを新しくすると、読み手にも検索エンジンにも不誠実に見えます。