AUTH-001 公開  更新

記事末尾型 著者・監修者ボックス

記事の最後に、書いた人の写真・名前・肩書・紹介文と、プロフィールのページへのリンクをまとめて置く設計です。
読み終えた読み手に、誰が書いたのかと、その人のほかの記事を伝えます。

ワイヤーフレーム(PC)

記事末尾型 著者・監修者ボックス PC版ワイヤーフレーム

ワイヤーフレーム(SP)

記事末尾型 著者・監修者ボックス SP版ワイヤーフレーム

SP版の特徴

  1. 写真を名前の上に置く:横に並べると紹介文の幅が狭くなり、細かく折り返すためです。
  2. 紹介文を横幅いっぱいにする:2〜3文の紹介文を、読みやすい幅で見せるためです。

採用前の判断ポイント

向いているケース

  • 記事ごとに書いた人がいて、その人の経験が記事の説得力につながる
  • 会社のブログや、担当者が交代で書く記事
  • 書いた人のほかの記事も読んでもらいたい

向かないケース

このワイヤーの特徴

読み終えたときに、誰が書いたかが分かる

記事の最後に書いた人の名前・肩書・紹介文をまとめ、読み終えた読み手が、誰の経験にもとづく記事なのかを確かめられるようにしています。

紹介文は、記事の内容とつながる経験を書く

紹介文には、趣味や経歴の羅列ではなく、記事のテーマにつながる仕事の経験を書いています。
書いた人がこのテーマを書く理由が伝わります。

プロフィールのページへつなぐ

名前の入ったリンクで、書いた人のプロフィールと記事の一覧のページへ移れるようにしています。
リンクの文字にも名前を入れ、どこへ移るかが分かるようにしています。

本文と区切って、補足の情報だと伝える

ボックスは背景の色で本文と区切り、aside 要素で本文の補足であることを示しています。
SPでは写真を名前の上に置き、紹介文の幅を確保しています。

制作時のよくある失敗

紹介文が、どの記事でも同じ定型文

「Webのことなら何でも」のような定型文では、この記事を書く理由が伝わりません。
記事のテーマに近い経験を1〜2文で書き、必要ならテーマごとに書き分けます。

名前だけで、プロフィールのページがない

名前をクリックしても何も起きないと、読み手はその人がどんな人か確かめられません。
プロフィールのページを用意し、経験や担当した仕事をまとめておきます。

写真がフリー素材

実在しない人物の写真を使うと、ほかの情報まで信用されにくくなります。
本人の写真を使うか、使えない場合は写真を置かずに名前と肩書で伝えます。
法人・編集部名義なら、ロゴや名前だけでも成り立ちます。

構造化データの著者と、表示の著者が違う

ページに表示している著者と、構造化データの author が違う人になっていると、情報が食い違います。
同じ人を指すようにそろえます。

よくある質問

会社名だけを著者にしてもよいですか?

会社として発信する記事なら、会社名を著者にする場合もあります。
担当者の経験が記事の説得力につながる場合は、個人の名前を出したほうが伝わりやすいと考えられます。
構造化データでも、author に組織(Organization)を指定できます。

著者の構造化データは、何を書けばよいですか?

記事の構造化データの author に、名前(name)とプロフィールのページのURL(url)を書く方法があります。
ページに表示している著者と同じ人にそろえます。

社外のライターが書いた記事でも、著者を載せたほうがよいですか?

本人の了解を得られれば、載せることで誰が書いたかが伝わります。
載せる場合は、紹介文や写真の使い方も本人と確認しておきます。

関連ページ

この型をシェアする

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

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

このPatternを書いた人

岡野 優太

株式会社ENVY DESIGN

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

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

レビュー・修正の履歴

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