プロフィール画面
カバー（グラデーション）に重なるイニシャルのアバター、名前と肩書き、統計3つ、フォローボタン。タブ（投稿／いいね／概要）でその下の内容が切り替わる。
プレビュー
クリック
操作クリック／タップで動きます。
デザインの要点
- アバターをカバーの下端に半分重ねると、写真が無くても「顔がある」ページに見える
- 統計は 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">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">
<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" 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" 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>