記事を公開したあと、本文の読みやすさだけでなく、読み終えた場所の導線も気になるようになりました。内容に納得してもらえても、「誰が書いたのか」「このサイトは何をしているのか」が分からなければ、そこでページを閉じることになります。
そこでMANIARUでは、WordPressの記事下にある著者カードを整えました。顔写真を前提にせず、正式なMロゴ、短いプロフィール、ABOUT、X・Instagram・GitHubを一つのカードにまとめています。
この記事では、カードの装飾方法よりも、記事を読み終えた人へ書き手と次の行き先をどう伝えたかを中心に記録します。
なぜ著者カードを整えようと思ったか
MANIARUの記事には、試した手順だけでなく、そのときの判断や迷った点も残しています。検索などから一つの記事だけを読んだ人にとっては、本文だけではサイト全体の立ち位置まで伝わらないことがあります。
記事の最後に著者情報があれば、書き手の立場を確認できます。さらにABOUTやSNSへの入口があれば、もう少し知りたい人だけが次へ進めます。
強くフォローを促すのではなく、必要な人が自然に選べる場所を作る。その役割を著者カードに持たせることにしました。
著者カードに持たせた役割
最初に、カードへ載せる情報を四つに整理しました。
- 誰が書いた記事なのか
- どんなテーマを試している人なのか
- サイトについて詳しく知る場所
- 日々の発信や制作物を見られる場所
この整理に合わせて、表示名、プロフィール文、ABOUTリンク、三つのSNSリンクを配置しました。Arkheにもともとある「記事一覧へ」の導線も残しています。
Arkhe標準の著者カードを土台にする
カード全体を新しく作り直すのではなく、WordPressテーマのArkheが出力する標準の著者カードを土台にしました。
標準カードには、著者画像、表示名、プロフィール文、著者の記事一覧へのリンクがあります。必要な骨組みがすでに揃っているため、MANIARUに必要な情報だけを共通の処理で追加する方が自然でした。
現在はArkheのp-authorBoxをそのまま使い、共通のスクリプトでMロゴと表示名をそろえ、SNSへの導線を追加しています。配置やフォーカス表示は追加CSSで調整しました。
この方法なら、CATEGORY記事とPROJECT記事のどちらにも同じ著者カードを表示できます。記事本文へカードを個別に貼る必要もありません。
表示名とプロフィール情報を整理する
表示名は「マニアル｜MANIARU」に統一しました。個人名を前面に出すのではなく、発信者のマニアルとサイト名のMANIARUを一緒に示す形です。
プロフィール文は、現在のカードでは次の一文にしています。
テクノロジーと仕組みを試す人。AI・Web・コード・自動化を実験し、成功も失敗も記録しています。
長い自己紹介をカード内へ詰め込まず、何をしている人なのかが分かる範囲に留めました。
顔写真の代わりに正式なMロゴを使う
MANIARUは顔出しを前提にしていません。そのため、著者画像にはSNSやfaviconでも使っている正式なMマークを設定しました。
カード上では100×100の著者画像として出力され、代替テキストは「MANIARU Mロゴ」です。別の人物写真や新しいシンボルを作らず、サイト内で使うアイコンをそろえています。
ABOUTへの導線を分かりやすくする
標準カードのWebサイトリンクは、「プロフィールを見る →」という表示に変更しました。リンク先はHOME内のABOUTです。
カードに長いプロフィールを置く代わりに、概要だけを読めれば十分な人はそのまま、もう少し知りたい人はABOUTへ進める形にしています。
ABOUTはMANIARU内のページなので、同じタブで開きます。外部SNSとは開き方を分けました。
X・Instagram・GitHubを並べる
現在の著者カードには、MANIARUの公式アカウントとしてX、Instagram、GitHubの三つを表示しています。実際に確認できるアカウントだけを載せ、使っていないSNSは追加していません。
並び順は、X、Instagram、GitHub、その横に「プロフィールを見る」です。SNSアイコンとABOUTを近くに置くことで、記事の後に選べる行き先を一か所へまとめました。
外部SNSは別タブで開く
三つのSNSリンクにはtarget="_blank"を設定し、外部サイトを別タブで開きます。あわせてrel="noopener noreferrer"を付けています。
アイコンだけでも内容が伝わるようにする
SNSにはFont Awesomeのブランドアイコンを使い、ページ上ではSVGとして表示されています。SVG自体は読み上げ対象から外し、リンクへ「XのMANIARU公式アカウントを開く」のようなaria-labelを付けました。
見た目はアイコンだけでも、支援技術にはリンクの目的が伝わるようにしています。
キーボード操作とタップ領域を確認する
SNSリンクをキーボードで選んだときは、青いアウトラインが表示されます。マウスのhoverだけに頼らず、フォーカス位置も分かる状態にしました。
現在のSNSアイコンは40×40pxの円形リンクです。「プロフィールを見る」も高さ40pxを確保しています。スマートフォンでは四つの導線が同じ行に収まり、その下に「記事一覧へ」が独立して表示されます。
数値だけで判断せず、実際のスマートフォン幅で、アイコン同士が重ならないこと、プロフィールリンクを押せること、カードから横スクロールが発生しないことも確認しました。
PCとモバイルで同じ役割を保つ
PCとモバイルで情報は変えていません。どちらでも、Mロゴ、表示名、プロフィール文、SNS、ABOUT、記事一覧を確認できます。
モバイルでは横幅が限られるため、説明文を増やすのではなく、導線を短いアイコンとリンク名にまとめました。カードの役割を変えず、配置だけが画面幅に収まるようにしています。
著者カードを整えて変わったこと
記事を読み終えた場所で、書き手とサイトの目的を確認できるようになりました。興味があればABOUTやSNSへ進み、同じ著者の記事を読みたい場合は記事一覧へ移動できます。
CATEGORYとPROJECTで同じカードが表示されるため、どの記事からMANIARUを知っても、同じプロフィールへたどり着けます。ブランドの見せ方も記事ごとにぶれません。
作って分かったこと
著者カードは、プロフィールを飾るためだけの場所ではありませんでした。記事から書き手を知り、サイトの説明を読み、必要なら外部の発信へ進むための小さなナビゲーションです。
情報を増やすより、表示名、短い説明、ABOUT、使っているSNSへ絞る方が役割は明確になります。標準機能を土台にしたことで、必要な変更だけを加えられたことも大きなポイントでした。
公開後のUX改善を続ける
著者カードと同じように、記事を読んでいる途中の導線も公開後に見直しました。「WordPressの記事に追従する目次を作る。H2/H3と現在位置を連動させてみた」では、H2・H3と現在位置を連動させた目次についてまとめています。
記事の途中では現在位置を伝え、読み終えた場所では書き手と次の行き先を伝える。別々の機能ですが、どちらも公開後のWordPressサイトを実際に使って見つけた改善です。