フィードカード
SNSの投稿カード。アバター・名前・時刻のヘッダー、本文、グラデーションのメディア、いいね／コメント／シェアのアクション行。いいねはタップで切り替わり、件数も更新される。
プレビュー
クリック
操作クリック／タップで動きます。
仕様書
- 向く場面
- SNS・コミュニティのタイムライン
- 本文＋メディア＋反応をひとまとまりで見せる投稿
- いいねの即時反映が要る画面
- 避ける場面
- ニュース記事の一覧（見出し主体）
- コメント・シェアの実装が無いまま並べる
- 構成要素
- ヘッダー
- その他ボタン
- 本文
- メディア
- アクション行
- いいね件数
- 持っている状態
- 通常
- ホバー
- 押下中
- キーボード
Tab で「その他」→いいね→コメント→シェア→（開いたコメント欄→送信）へ、Enter／Space で実行。コメント欄は Enter で送信
- 支援技術
いいねは名前「いいね」を固定し aria-pressed だけ切替、件数はテキスト。コメントは aria-expanded＋aria-controls で欄を開閉、シェアの結果は aria-live=polite。メディアは role=img。reduced-motion で遷移停止
- 動き
ハート押下で 1.2 倍 150ms。ボタン背景 120ms
デザインの要点
- アクション行は 3 等分の 44px にして flex:1 で並べる。アイコンの幅で並べると端のボタンだけ押しにくい
- いいねの名前は「いいね」で固定し、状態は aria-pressed と塗りで伝える。文言まで「済み」に変えると読み上げが矛盾する
- 件数は data-base の元の数に自分の 1 を足し引きする。押すたびに増える実装は数字の信用を落とす
- コメントとシェアも空ボタンにしない。コメントは欄を開き、シェアは「リンクをコピー」の結果を告げる
コード（コピーして使えます）
<article class="post" id="post">
<header class="post-head">
<span class="post-ava" style="background:linear-gradient(135deg,#2b50c7,#7fa4ff)" aria-hidden="true">ゆ</span>
<div class="post-id">
<span class="post-name">ゆうと</span>
<span class="post-time">30分前</span>
</div>
<button class="more-btn" type="button" aria-label="その他">
<svg width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><circle cx="3" cy="8" r="1.4" fill="currentColor"/><circle cx="8" cy="8" r="1.4" fill="currentColor"/><circle cx="13" cy="8" r="1.4" fill="currentColor"/></svg>
</button>
</header>
<p class="post-text">週末の朝さんぽ。空気がきもちよかった☀️</p>
<div class="post-media" role="img" aria-label="投稿写真"></div>
<div class="post-actions">
<button class="act like-btn" type="button" aria-pressed="false" data-base="128">
<svg class="heart" width="19" height="19" viewBox="0 0 19 19" aria-hidden="true"><path d="M9.5 16.5S2 11.7 2 6.8A3.8 3.8 0 019.5 4.3 3.8 3.8 0 0117 6.8c0 4.9-7.5 9.7-7.5 9.7z" stroke-width="1.4"/></svg>
<span class="act-label">いいね</span>
</button>
<button class="act" type="button" id="commentBtn" aria-expanded="false" aria-controls="commentBox">
<svg width="19" height="19" viewBox="0 0 19 19" fill="none" aria-hidden="true"><path d="M16 9.2c0 3-2.9 5.4-6.5 5.4-.9 0-1.7-.1-2.5-.4L3 15.5l1.1-2.9C3.4 11.7 3 10.5 3 9.2 3 6.2 5.9 3.8 9.5 3.8S16 6.2 16 9.2z" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"/></svg>
<span class="act-label">コメント</span>
</button>
<button class="act" type="button" id="shareBtn">
<svg width="19" height="19" viewBox="0 0 19 19" fill="none" aria-hidden="true"><path d="M15.5 3.5L8 11M15.5 3.5l-4.7 12-2.3-4.5L4 8.3l11.5-4.8z" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"/></svg>
<span class="act-label">シェア</span>
</button>
</div>
<form class="post-comment" id="commentBox" hidden>
<input type="text" placeholder="コメントを書く" aria-label="コメント" autocomplete="off"/>
<button type="submit">送信</button>
</form>
<p class="post-likes"><b id="likeNum">128</b> 件のいいね</p>
<p class="post-status" id="postStatus" aria-live="polite"></p>
</article>