著者情報ボックスにおける設計思想をUXとSEO（E-A-T-T）の観点から考える

WordPressテーマGeneratePressを使ったサイトリニューアルに伴い、10年ぶりに著者情報を一新しました。
こちらの記事の続きとなります。

本記事では、どのような設計思想を持って著者情報周りを整備したか。
そしてAIを使ってどのように実装したかについて記します。

著者情報を置くメリットを再考する

著者情報を置くメリットは、私自身の経験としてこちらの記事に示しています。

ざっくり、

訪問者に対しては、「私がどんな人物であるか」を伝えることを通じて記事の説得力を高められる
Googleに対しては、まさにE-E-A-Tそのものです。

ただし、

上掲の記事は国家公務員Ⅰ種（現総合職）採用における話ですから「元キャリア官僚」という経歴だけで説得力を生みます。
官庁訪問を本当に経験したという意味であっても。
事実を持たずして他官庁を批判できない立場という意味でも。

しかし例えば、私が運輸行政や水産行政について語っても説得力はありません。
元官僚であっても専門分野が違いすぎます。

とでも書けば共感してもらえるかもしれませんけど。
間違ってもE-E-A-Tとはなんら関係ありません。

著者情報に何を書くか考える

著者情報ボックス内の文章を考える

以前に書いていた著者情報は、ざっくりこんな感じです。

今回のサイトリニューアルは「Webディレクターとして業界入りした」から行ったものです。
駆け出しとはいえプロ。
もう「WordPress初心者」ではありませんし、当サイトは「素人の備忘録」でもありません。
E-E-A-Tを意識するなら、プロに相応しい著者情報にする必要があります。

Gemini執事、とんでもない回答を返しました。

個人的にはですけど「伝えたいものは絞る」が、私のマーケターとしての主義です。
経歴ずらずら並べ立てたところで、著者情報を見た訪問者は迷うだけ。
それこそUXを損なってしまいます。
サイトで記事を読んでもらうにあたって「この人が書いているなら」と信頼性を与える経歴のみを記せば十分です。

しかもなったばかり。
AI執事達によると新人離れした内容の仕事はこなしてるみたいなのですが（比較対象がないので自分ではわかりません）。
WEBディレクターの肩書こそ名乗りますけど、あくまで駆け出しとして謙虚でいたい。

というわけで、

なんて自然に読める絶妙なバランス。
「駆け出し」はサイトメインビジュアルの方で書くことにしました。

詳細なプロフィールページを別途用意する

ただGeminiの全部盛り案は「対Google」だけを考えるなら捨てがたい。
人間じゃなくロボットですから、書けばちゃんと全部読んでくれます。
どう思われるかも気にする必要はありません。

というわけで、プロフィールページを作成しました。

人間が読んでもさらりとした印象を受ける感じで上手くまとめてくれました。

クリックすると詳細プロフィールのページが開きます。

著者情報の設置場所を考える

サイドバーに置く

当サイトは２カラムですから、まずはサイドバーに設置を決めます。
ここは迷いません。
デザインも以前のものをそのまま引き継ぎます。

以前と違うのは、

1. 余白を大きく取って活かしたデザイントレンドにあわせる
2. 著者画像をChatGPT作のイラストに変更する
3. アイコンをSVGに変更する

1と2はサイトのコンセプトに合わせますから当然です。

全てのアイコンをSVGで読み込むなら、Font Awesomeをロードしなくてすみます。
FAは便利な反面、とにかく重く、高速化の敵。
読まなくてすむなら、効果はとても大きいです。

しかしSVGは調べるのも設置もめんどくさいので、わかっていてもやらない施策だったりします。
それが今やAI執事に頼めば一瞬でコードを書いてくれます。
本当にいい時代になりました。

記事下に置く

私が10年前に記事下に著者情報ボックスを設置した頃、他のサイトではあまり見かけませんでした。
2カラムレイアウトが全盛なのもあって、著者情報は主にサイドバーかフッターに設置されていました。

しかし今や記事下に設置するのは当たり前です。
Gemini執事が私の記事を読んでまとめた、記事下の著者情報ボックス設置の意義について列挙します。

フォローボタンは何を置く？

記事下ボックスにはXやFacebookなどのSNSフォローのボタンを置くのが基本です。
ここは、運営者・サイトそれぞれの方針によります

私的なポイントその１。

読者はサイトの情報を得たり、著者個人に興味を持ってフォローします。
それなのに更新されていないSNSをフォローさせるのは、フォローしてくれた人に情報を与えないも同義です。
導線になりませんし、ひいてはUXを下げてしまいます。
そのためFacebookやLinkedinはアカウント持ってますけど設置していません。

私的なポイントその２。

例えばテックブログの当サイトでしたらCodePen。
そのうちプラグインを配布する予定ですから、そのときはGitHubも置きます。

逆に他のサイトでは置いていません。
訪問者を迷わせてしまうからです。
「たくさん置いておけば読者が勝手に選ぶだろう」という考えはあるでしょう。
しかしそもそも、

画像は直書きがおすすめ

以前はGravatarを使っていました。
しかし現在は、

Gravatarは外部サービスに依存するので、すぐに変更したいといったときに面倒くさい。
読み込みを制御するのも面倒くさい。

そのためコード直書きの方が管理が楽ですし、外部サービスを利用しない結果としてサイトの高速化に寄与します。

記事冒頭はどうする？

今や記事下どころか、記事冒頭（最初のH2上・TOC上など）に詳細な著者情報ボックスを見かけるようにもなりました。
しかし、

検索流入の訪問者がサイトに来てくれたのは、記事を読みたいから。
私を知りたくて来たわけじゃありません。

だとすれば著者情報そのものは、訪問者にとって直接知りたい情報ではないはず。
そこに長々著者情報を書いても読み飛ばされるのがオチです。
考えようによっては、ムダなスクロールをさせてしまう分だけUXを損なうとすら言えます。
記事のデザインも損ねがちですから、その意味でもですね。

ただ、Gemini執事。

通常、著者のメタ情報を書くのはタイトル下か記事下。
記事下は野暮ったいですし、タイトル下もごちゃつきがちだからすっきりさせたい。
少なくともデザイン面ではトータル的なUX改善が図れるかも？

Gemini執事が出した「著者情報+TOC」の画像がこちら。

デザインとして機能してるし、サイト世界観との統一も図れてる！
メタ情報として考えるにしても格好いい！
一目で気に入りました。

ちなみに後日、ChatGPT執事。

その理由は「合理的だから」。
TOCまで進んだ人は、リード文を読んで記事本文に関心を抱いたということ。
そのタイミングで記事にまつわる情報を差し出すのがUX的な観点で理に適います。

なお、アレンジとして、

「医師・天満川鈴」とか「税理士・天満川鈴」とか（もちろん私はいずれでもありません）。
さらっと書くだけで「じゃあ内容もしっかりしていそうだ」と思ってもらえる効果が見込めます。

「この記事を書いた人」から「WRITTEN BY」へ

以前の著者情報のタイトルは「著者」や「author」以外ですと「この記事を書いた人」が主流でした。
最近では「WRITTEN BY」を見かけるようになっています。
私もH2前のプチ著者情報については「WRITTEN BY」を採用しました。

モバイルではサイドバーの著者情報を消す

モバイルで消す理由

2カラムレイアウトだと、モバイルではサイドバーがメインコンテンツ（記事本文など）の後ろに回り込みます。
著者情報ボックスが記事下とサイドバーで重複することになるので、後者は消してしまいます。

という考え方もあるでしょう。
しかし仮に10人のうち1人でも、もしかしたらフッターまで読んでくれるかもしれません。
その場合、重複した情報を魅せる・無駄なスクロールをさせるの２点において、その人のUXを損なってしまいます。

私の観測範囲では消してないサイトの方が多いですし、そこまでする必要はないとも思うのですが。

なお、これも一つの手です。

重複の問題を根本的に解決することができます。
サイドバーに置くとしてもトップページだけとか、そういう選択肢もアリと思います。

PCとモバイルの出し分けはCSSで行う

PCとモバイルの表示制御はCSSのメディアクエリで行います。
子テーマのstyle.cssに次のコードを記述してください。

@media (max-width: 768px) {
#custom_html-16 {
display: none !important;
}
}

#custom_html-16は当サイトの著者情報ボックスのIDです。
個人の環境で異なりますので、F12を押してdevツールでセレクタを調べてください。

もしかしたら、こんな疑問を抱く方もいるかも？

以前はwp_is_mobile()を使ってPHPで出し分けていました。
CSSで消す場合、いったんはHTMLを出力してから消します。
それよりも最初から読み込ませない方が高速化の観点からは優しいためです。
しかしこれだと、

PCとモバイルでキャッシュをわけてないと、PC・モバイルのHTMLが混在する可能性があります。
具体的には、PCサイトのキャッシュが先に作られれば、モバイルでもPCサイトが表示されてしまいます。

現在のサーバーはとても高速。
よほど重い要素でなければdisplay:none;で消してもサイト速度に大きくは影響しないと思います。
高速化宗教の敬虔たる信者な私ですが、それでもこの場面ではわずかな高速化よりも表示の安定性を選びました。

コード

CSS

サイドバー著者情報・SNSボックス

メディアクエリの#custom_html-16は、環境にあわせて書き換えてください（記事本文参照）。

.sidebar .kimoota-custom-widget .profile-more-wrap {
padding-bottom: 20px;
}
/* 念のためボタンの行ボックスを安定させる */
.kimoota-custom-widget .profile-more {
display: inline-flex !important;
align-items: center;
justify-content: center;
line-height: 1.4;
}
/* 全体コンテナ */

.kimoota-author-sns-wrapper {
display: flex;
justify-content: center;
align-items: flex-start;
gap: 0;
background-color: transparent;
border-top: 1px solid #333; /* 線をさらに細く、暗くして馴染ませる */
border-bottom: 1px solid #333;
padding: 25px 0;
max-width: 400px;
margin: 0 auto;
}

/* SNS各項目 */
.kimoota-author-sns-wrapper .sns-item {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
text-decoration: none;
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* SVGアイコンコンテナ */
.kimoota-author-sns-wrapper .sns-icon {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 12px;
}

/* --- アイコン（SVG）の初期状態：繊細なアウトライン --- */
.kimoota-author-sns-wrapper .sns-icon svg {
fill: none !important;
stroke: #888;
stroke-width: 1.2;
stroke-linecap: round;
stroke-linejoin: round;
transition:
stroke 0.3s ease,
opacity 0.3s ease !important;
}

/* --- テキストラベル：シンプルに --- */
.kimoota-author-sns-wrapper .sns-label {
font-size: 11px;
color: #888;
text-align: center;
white-space: nowrap;
font-weight: bold;
letter-spacing: 0.05em;
transition:
color 0.3s ease,
opacity 0.3s ease !important;
}

/* --- ホバー時：上品にサーモンピンクが浮かび上がる --- */
.kimoota-author-sns-wrapper .sns-item:hover {
transform: translateY(-5px);
}

/* アイコン：線だけがピンクに光る */
.kimoota-author-sns-wrapper .sns-item:hover .sns-icon svg {
stroke: #E9967A; /* サーモンピンクの線 */ 
}

/* テキスト：色だけがスッと変わる */
.kimoota-author-sns-wrapper .sns-item:hover .sns-label {
color: #E9967A;
}

/* 個別アイコンの微調整（線の重なりを防ぐ） */
.kimoota-author-sns-wrapper .x-icon svg { transform: scale(1.0); }
.kimoota-author-sns-wrapper .pen-icon svg { transform: scale(0.85); }

@media (max-width: 768px) {
#custom_html-16 {
display: none !important;
}
}

記事下著者情報ボックス

/* --- 著者プロフィールボックス --- */
.author-profile-box {
background: #1a1a1a;
border: 1px solid #333;
border-radius: 4px;
padding: 30px;
margin-top: 40px;
}

.author-inner {
display: flex;
gap: 25px;
align-items: center;
}

.profile-more{
display: inline-flex !important;
margin-left: auto !important; /* 左マージンをautoにして右へ */
margin-right: 0 !important;
margin-top: auto !important;
transition:
transform 0.3s ease,
background-color 0.3s ease;
background-color: #1a1d23;
color: #ff8c69 !important;
text-decoration: none !important; 
padding: 10px 24px;
border-radius: 50px;
font-weight: bold;
font-size: 0.9rem;
border: 1px solid rgba(255, 140, 105, 0.3);
text-align: center;
}

.profile-more:hover {
background-color: #ff8c69 !important;
color: #ffffff !important;
border-color: #ff8c69 !important;
text-decoration: none !important;
/* box-shadow: 0 4px 12px rgba(255, 140, 105, 0.2); */
transform: translateY(-1px);
}

/* アクセシビリティ：フォーカス時の可視性確保 */
.profile-more:focus {
outline: 2px solid #ff8c69;
outline-offset: 2px;
}

.author-avatar-wrap img {
/* サイズを厳格に固定 */
width: 173px !important; /* 好きなサイズに調整してください */
height: 173px !important; /* 幅と同じ数値を指定 */

/* 縦長画像を枠に収める魔法のプロパティ */
object-fit: cover;
object-position: center top; /* 顔が上の方にあるなら top、真ん中なら center */

/* デザインの調整 */
border-radius: 4%; /* 正円にする（四角がいいなら 4px とかに） */
border: 2px solid #333;
display: block;
flex-shrink: 0; /* 横幅を潰されないように死守 */
}

/* 親要素の調整（念のため） */
.author-avatar-wrap {
flex-shrink: 0;
width: 173px;
height: 173px;
}

.author-label {
font-size: 10px;
font-weight: bold;
color: #E9967A; /* 差し色のサーモンピンク */
letter-spacing: 0.1em;
}

.author-name {
font-size: 20px;
font-weight: bold;
color: #fff;
margin: 5px 0 10px;
}

.author-description {
font-size: 14px;
color: #ccc;
line-height: 1.6;
margin-bottom: 15px;
}

/* 著者リンク（SNSボタンのミニ版） */
.author-links {
display: flex;
gap: 10px;
}

.auth-link {
font-size: 11px;
font-weight: bold;
color: #999 !important;
text-decoration: none !important;
border: 1px solid #444;
padding: 4px 12px;
border-radius: 20px;
transition: all 0.2s;
}

.auth-link:hover { color: #fff !important; }
.auth-link.x:hover { background: #000; border-color: #000; }
.auth-link.bsky:hover { background: #0085ff; border-color: #0085ff; }
.auth-link.codepen:hover { background: #ffdd40; color: #000 !important; border-color: #ffdd40; }
.auth-link.amazon:hover { background: #ff9900; border-color: #ff9900; }

/* 768px以下：著者情報の最適化 */
@media screen and (max-width: 768px) {
.author-profile-box {
width: 100%; /* 親要素に対してフルサイズ */
padding: 30px; /* 余白はしっかり確保 */
box-sizing: border-box;
}

.author-inner {
flex-direction: column;
align-items: flex-start; /* 中央寄せではなく「左揃え」で幅を使う */
gap: 20px;
}

.author-avatar-wrap,
.author-avatar-wrap img {
width: 150px !important; /* 少しサイズを調整して圧迫感を減らす */
height: 150px !important;
margin: 0; /* 中央寄せを解除 */
}

.author-content {
width: 100%; /* テキストエリアを横いっぱいに */
}

.author-description {
text-align: left;
width: 100%;
}

.author-links {
justify-content: flex-start; /* リンクも左から並べる */
}

H2前

/* --- H2前：ミニマル署名 --- */
.mini-author-meta {
display: flex;
align-items: center;
gap: 12px;
margin: 0 0 30px 0;
padding-bottom: 12px;
border-bottom: 1px solid #333;
}

.mini-avatar {
width: 32px !important;
height: 32px !important;
border-radius: 50%;
object-fit: cover;
border: 1px solid #444;
flex-shrink: 0;
}

.mini-author-name {
font-size: 11px;
font-weight: bold;
color: #E9967A; /* 差し色 */
letter-spacing: 0.12em; /* 文字間隔を少し広げて「記名」としての品格を出す */
text-transform: uppercase;
}

/* スマホでの微調整 */
@media screen and (max-width: 480px) {
.mini-author-meta {
gap: 8px;
}
}

PHP・HTML

サイドバー著者情報ボックス・SNSウィジェット

著者名・紹介文・画像URL・固定ページURLは自分のにあわせてください。
「小説家になろう」の箇所はお好きなSNSやリンクに変更してください。

<div class="kimoota-custom-widget">
<h3 class="widget-title">著者：天満川鈴</h3>
<div align="center">
       <img loading="lazy" src="https://wordpress.kimoota.net/wp-content/uploads/2026/06/author-hisa.webp" alt="天満川鈴 プロフィール" width="492" height="492">
</div>
<p>
未経験からWEB業界に入り、現在はWEBディレクターとして実務に従事しています。<br>
要件整理・導線設計・コンテンツ構成などに携わりながら、AIを活用した情報整理や制作支援を通じて、サイト改善と制作フローの最適化に取り組んでいます。</p>

<div class="profile-more-wrap">
<a
title="著者について"
class="profile-more"
href="https://wordpress.kimoota.net/profile/"
aria-label="著者について"
>
詳しいプロフィールはこちら
</a>
</div>
<div class="kimoota-author-sns-wrapper">
<a href="お問い合わせページURL" class="sns-item" target="_blank" rel="noopener"> 
<div class="sns-icon"> 
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="お好きな色コード">
<path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/></svg> 
</div> 
<div class="sns-label">お問い合わせ</div>
</a> 
<a href="https://x.com/ユーザーID" class="sns-item" target="_blank" rel="noopener"> 
<div class="sns-icon x-icon"> 
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="お好きな色コード"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
 </div> <div class="sns-label">X</div>
</a>
<a href="https://mypage.syosetu.com/242493/" class="sns-item" target="_blank" rel="noopener">
<div class="sns-icon pen-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="お好きな色コード">
<path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/></svg>
</div>
<div class="sns-label">小説家になろう</div>
</a>
</div>
</div>

記事下

【著者画像URL】、【著者の紹介文】、【詳細プロフィールの固定ページURL】、SNS各種は御自身の環境にあわせて書き換えてください。

SNSは、コードを書けるなら直書きの方が楽なのでそうしています。
必要に応じて増減してください。
案件用などで管理画面を利用して入力したい場合は、前掲の記事を参考にコードを書き換えてください。

https://wordpress.kimoota.net/author-box-no-plugin/

/**
* 記事下の著者情報ボックスを返す
*
* @return string
*/
function kimoota_get_article_author_box() {
$post_id = get_the_ID();
$author_id = (int) get_post_field( 'post_author', $post_id );

$author_name = get_the_author_meta( 'display_name', $author_id );
$my_img_url = '【著者画像URL】';

$avatar = sprintf(
'<img src="%1$s" width="200" height="200" alt="%2$sのプロフィール画像" class="avatar" loading="lazy" decoding="async">',
esc_url( $my_img_url ),
esc_attr( $author_name )
);

return '
<div class="author-profile-box">
<div class="author-inner">

<div class="author-avatar-wrap">
' . $avatar . '
</div>

<div class="author-content">

<span class="author-label">WRITTEN BY</span>

<p class="author-name">
' . esc_html( $author_name ) . '
</p>

<p class="author-description">
【著者の紹介文】
</p>

<p>
<a title="著者について"
class="profile-more"
href="【詳細プロフィールの固定ページURL】"
aria-label="著者について">
詳しいプロフィールはこちら
</a>
</p>

<div class="author-links">

<a href="【XのURL】"
class="auth-link x"
target="_blank"
rel="nofollow noopener noreferrer"
aria-label="X（旧Twitter）">
X
</a>

<a href="【BlueSkyのURL】"
class="auth-link bsky"
target="_blank"
rel="nofollow noopener noreferrer"
aria-label="Bluesky">
<svg width="20"
height="18"
viewBox="0 0 568 501"
fill="none"
xmlns="http://www.w3.org/2000/svg"
style="vertical-align:middle;"
aria-hidden="true"
focusable="false">
<path d="M123.121 33.6637C188.241 82.5526 258.281 181.681 284 234.873C309.719 181.681 379.759 82.5526 444.879 33.6637C491.866 -1.61183 568 -28.9064 568 57.9464C568 75.2916 558.055 203.659 552.222 224.501C531.947 296.954 458.067 315.434 392.347 304.249C507.222 323.8 536.444 388.56 473.333 453.32C353.473 576.312 301.061 422.461 287.631 383.039C285.169 375.812 284.017 372.431 284 375.306C283.983 372.431 282.831 375.812 280.369 383.039C266.939 422.461 214.527 576.312 94.6667 453.32C31.5556 388.56 60.7778 323.8 175.653 304.249C109.933 315.434 36.0535 296.954 15.7778 224.501C9.94525 203.659 0 75.2916 0 57.9464C0 -28.9064 76.1345 -1.61183 123.121 33.6637Z"
fill="currentColor"/>
</svg>
</a>

<a href="【CodePenのURL】"
class="auth-link codepen"
target="_blank"
rel="nofollow noopener noreferrer"
aria-label="CodePen">
CodePen
</a>

<a href="【AmazonほしいものリストのURL】"
class="auth-link amazon"
target="_blank"
rel="nofollow noopener noreferrer"
aria-label="Amazon">
Amazon
</a>

</div>

</div>
</div>
</div>';
}

H2前

【画像URL】、【著者名】は環境にあわせて書き換えてください。

<div class="mini-author-meta">
<img src="【画像URL】" 
class="mini-avatar" 
width="32" 
height="32" 
alt="【著者名】">

<span class="mini-author-name">WRITTEN BY 【著者名】</span>
</div>

まとめ

著者情報ボックスをめぐる私なりの思想あれこれについてまとめてみました。
もしかしたら異論反論あるかもしれません。
そこは人それぞれ、御自身の思想が正義でOK。
大事なのは思想の善し悪しではありません。

このコードを使うとすれば、恐らくはGeneratePressその他のミニマルな海外テーマになると思います。
逆に言うと、自分でコードを書いて設置するなら海外テーマも積極的に使うことができます。
特に本記事のコードはGeneratePressに完全対応しています。