プロフィール画面
カバー（グラデーション）に重なるイニシャルのアバター、名前と肩書き、統計3つ、フォローボタン。タブ（投稿／いいね／概要）でその下の内容が切り替わる。
プレビュー
クリック
操作クリック／タップで動きます。
仕様書
- 向く場面
- SNS・コミュニティのユーザーページ
- 投稿／いいね／概要をタブで切り替える画面
- フォローを主 CTA にしつつ投稿を主役にしたいとき
- 避ける場面
- 自分専用の設定画面（設定画面へ）
- 統計が 4 つ以上あるダッシュボード的な用途
- 構成要素
- カバー
- アバター
- 名前・ハンドル・自己紹介
- フォローボタン
- 統計 3 つ
- タブとパネル
- 持っている状態
- 通常
- ホバー
- フォーカス
- 押下中
- キーボード
Tab でフォロー→選択中タブ→パネル（tabindex=0）の順。タブは ←→・Home/End で移動して即選択（roving tabindex）。フォローは Enter/Space で切替
- 支援技術
tablist／tab／tabpanel に aria-selected・aria-controls・aria-labelledby。フォローは aria-pressed と文言を同時に切替え、フォロワー数は aria-live で読まれる。アバター・カバーは aria-hidden
- 動き
なし
デザインの要点
- アバターをカバーの下端に半分重ねると、写真が無くても「顔がある」ページに見える
- 統計は 3 つまで。数字を太く・ラベルを小さく、並びは「本人の活動 → 他者からの評価」の順
- フォローは主 CTA だが、押した後は輪郭だけの「フォロー中」に退かせる。主役は本人の投稿
- タブの内容は全部 DOM に置いて hidden で切り替える。URL やスクロール位置を失わない
プロのサイトでの実例
実例は「型の使われ方」の観察であり、コード・ロゴの転載ではありません。サイト側の更新で見え方が変わることがあります。
コード（コピーして使えます）
<div class="pf-app">
<div class="pf-cover" aria-hidden="true"></div>
<header class="pf-head">
<div class="pf-avatar" aria-hidden="true">YS</div>
<div class="pf-id">
<h1 class="pf-name">佐々木 悠</h1>
<p class="pf-handle">@yu_sasaki · ミナト工房 プロダクトデザイナー</p>
<p class="pf-bio">木の道具と、それを使う暮らしの記録。週に一度、工房の様子を書いています。</p>
</div>
<button type="button" class="pf-follow" id="pf-follow" aria-pressed="false">フォロー</button>
</header>
<ul class="pf-stats" aria-label="活動">
<li><strong>128</strong><span>投稿</span></li>
<li><strong id="pf-followers" aria-live="polite">2,340</strong><span>フォロワー</span></li>
<li><strong>180</strong><span>フォロー中</span></li>
</ul>
<div class="pf-tabs" role="tablist" aria-label="内容">
<button type="button" class="pf-tab" role="tab" id="pf-tab-posts" aria-selected="true" aria-controls="pf-panel-posts">投稿</button>
<button type="button" class="pf-tab" role="tab" id="pf-tab-likes" aria-selected="false" aria-controls="pf-panel-likes" tabindex="-1">いいね</button>
<button type="button" class="pf-tab" role="tab" id="pf-tab-about" aria-selected="false" aria-controls="pf-panel-about" tabindex="-1">概要</button>
</div>
<div class="pf-panels">
<section class="pf-panel" role="tabpanel" id="pf-panel-posts" aria-labelledby="pf-tab-posts" tabindex="0">
<article class="pf-post"><p class="pf-post-text">カッティングボードの L サイズ、ようやく定番化。厚みを 3mm 減らしたら扱いやすさが段違いでした。</p><p class="pf-post-meta">4月22日 · いいね 84</p></article>
<article class="pf-post"><p class="pf-post-text">蜜蝋ワックスは月に一度。塗りすぎると乾きが遅くなるので、薄く伸ばして 10 分置くのがコツ。</p><p class="pf-post-meta">4月15日 · いいね 132</p></article>
<article class="pf-post"><p class="pf-post-text">工房の窓を掃除したら、午後の光がまるで別物。</p><p class="pf-post-meta">4月9日 · いいね 61</p></article>
</section>
<section class="pf-panel" role="tabpanel" id="pf-panel-likes" aria-labelledby="pf-tab-likes" tabindex="0" hidden>
<article class="pf-post"><p class="pf-post-author">田村 直樹</p><p class="pf-post-text">価格表の最終版、数字の桁を揃えただけで読みやすさが激変した。tabular-nums 大事。</p><p class="pf-post-meta">4月21日</p></article>
<article class="pf-post"><p class="pf-post-author">小林 恵</p><p class="pf-post-text">パッケージ裏面、原材料の順番を重量順に直しました。</p><p class="pf-post-meta">4月20日</p></article>
</section>
<section class="pf-panel" role="tabpanel" id="pf-panel-about" aria-labelledby="pf-tab-about" tabindex="0" hidden>
<dl class="pf-about">
<dt>所在地</dt><dd>神奈川県横浜市</dd>
<dt>参加</dt><dd>2021年3月</dd>
<dt>ウェブサイト</dt><dd>minato-kobo.example</dd>
<dt>得意なこと</dt><dd>木工・製品写真・道具の手入れ</dd>
</dl>
</section>
</div>
</div>