AUTH-002 公開  更新

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

記事の題名のすぐ下に、執筆者・監修者の名前と、公開日・更新日を1行でまとめる設計です。
読み始める前に、誰が書き誰が確認した記事なのか、いつの情報なのかを伝えます。

ワイヤーフレーム(PC)

冒頭表記型 著者・監修者ボックス PC版ワイヤーフレーム

ワイヤーフレーム(SP)

冒頭表記型 著者・監修者ボックス SP版ワイヤーフレーム

SP版の特徴

  1. 日付を2行目に回す:1行に収まらず、名前が折り返して読みにくくなるためです。
  2. 名前と役割を1行目に残す:誰が書いたかを、日付より先に伝えるためです。

採用前の判断ポイント

向いているケース

  • 読み始める前に、誰が書いたかといつの情報かを伝えたい
  • 医療・お金・法律など、情報の確かさが特に問われるテーマ
  • 記事の最後の著者ボックスと組み合わせたい

向かないケース

このワイヤーの特徴

読む前に、誰が書き誰が確認したかが分かる

題名のすぐ下に「執筆」「監修」のラベルと名前を並べ、読み始める前に記事の書き手と確認者が分かるようにしています。

公開日と更新日を、両方示す

公開日と更新日を並べ、time 要素で日付を示しています。
いつ書かれ、いつ見直された情報なのかを、読み手が判断できます。

名前から、ページの下のプロフィールへ移れる

名前を押すと、ページの下にある著者・監修者の紹介へ移り、どの人の紹介かを枠で示すようにしています。
1行の中に詳しい経歴を詰め込まずに済みます。

SPでは、日付を2行目に回す

SPでは1行に収まらないため、名前の行と日付の行を分けています。
名前と役割のラベルは1行目に残し、誰が書いたかを先に伝えています。

制作時のよくある失敗

更新日だけを大きく見せる

更新日だけを目立たせると、最初に書かれた時期が分からなくなります。
内容を見直したときだけ更新日を変え、公開日も合わせて示します。

内容を変えていないのに、更新日だけを新しくする

文字の修正だけで更新日を新しくすると、読み手は内容が見直されたと受け取ります。
内容を見直したときに更新日を変えます。

監修者の名前だけを出して、監修の範囲を書かない

監修者の名前があると、記事全体を確認したように受け取られます。
確認した範囲が一部なら、ページのどこかでその範囲を書きます(監修者併記型 著者・監修者ボックスを参照)。

題名の下の情報が多すぎる

カテゴリ・タグ・読了時間・シェアボタンまで並べると、本文が画面の下に押し出されます。
題名の下は、著者と日付を中心に絞ります。

よくある質問

公開日と更新日は、両方表示したほうがよいですか?

両方を表示すると、いつ書かれ、いつ見直されたかが分かります。
構造化データにも datePublished と dateModified として書き、表示とそろえます。

題名の下の著者名は、リンクにしたほうがよいですか?

リンクにすると、読み手がすぐに書き手を確かめられます。
移動先はページの下の紹介か、プロフィールのページにします。

執筆者と監修者が同じ人の場合は、どう書けばよいですか?

「執筆・監修」のように1つのラベルにまとめる方法があります。
確認の工程があることを伝えたい場合は、社内の別の人の確認も合わせて示すと伝わりやすいと考えられます。

同じパーツのPattern

著者・監修者ボックスの型の選び方と一覧を見る

関連ページ

この型をシェアする

チームや制作先に、この型のページを送れます。

この型は役に立ちましたか?

このPatternを書いた人

岡野 優太

株式会社ENVY DESIGN

代表取締役/ディレクター/デザイナー

Web業界歴14年。これまでに500件以上のWeb制作プロジェクトに携わり、企業サイト、採用サイト、ECサイトなど幅広い領域を手がけてきました。情報設計・ディレクション・デザインを中心に、Webサイトの企画から改善まで携わっています。近年はAIO(AI Optimization)・GEO領域に注力し、ChatGPTやPerplexity、Google AI Overviewなど生成AI検索からの引用獲得を支援しています。

レビュー・修正の履歴

  1. 公開 アバター画像岡野 優太 この型を公開