コミュニティ・SNS

§21-01

フォロー / アンフォロー

相手をフォローして投稿を受け取る状態を切り替える。

興味のある相手の更新だけを自分のフィードに集められる。投稿者とのつながりが継続利用の軸になるサービスに向く。

実装のポイントトグルは aria-pressed で状態を伝え、楽観更新でカウントを即反映して失敗時に戻す。ボタン幅を min-width で固定し、ラベル切替でレイアウトが揺れないようにする。

§21-02

相互フォロー mark

相互にフォローしている関係を印で示す。

相手が自分をフォローしているかを一目で確かめる。フォロー返しや DM 可否の判断材料として、プロフィールや一覧に添える。

実装のポイント相互関係は自分→相手と相手→自分の 2 つのフラグを別々に持ち、「フォローされています」は名前の近くに控えめなラベルで添える。

§21-03

DM

1 対 1 やグループでのメッセージのやりとり。

公開の場では話しにくい相談や個別の連絡を、同じサービス内で完結させる。SNS やマーケットプレイスで取引相手との連絡に使う。

実装のポイント自分と相手の吹き出しを左右に分け、新着到着時は最下部へ自動スクロールする。ただしユーザーが過去ログを読んでいる間はスクロールを奪わない。

§21-04

グループチャネル

多人数が参加する公開チャンネルで会話する。

話題ごとに部屋を分け、誰でも参加して読み書きできる場を作る。人数の多いコミュニティで、全体チャットの混雑を避けたいときに使う。

実装のポイントチャネル一覧は未読を太字とバッジの二重で示し、各行は button か link にしてキーボードで選択できるようにする。参加人数より未読数を目立たせる。

§21-05

リプライスレッド

投稿への返信を親の下にぶら下げて表示する。

誰がどの発言に答えたかが追え、話題ごとの流れを読める。コメント欄や議論が長く続くコミュニティで使う。

実装のポイント返信は親投稿の下に字下げと縦線でぶら下げ、深い入れ子は数段で打ち切って「続きを表示」に畳む。件数は親側にも出して展開前に規模を伝える。

デモはスレッド discussionと共通です。

§21-06

いいね / リアクション

投稿に 1 回の操作で評価や反応を付ける。

投稿への反応を最小の手間で集める。閲覧だけで終わる利用者に参加のきっかけを作り、投稿者に反応を返す。

実装のポイント押下を楽観更新で即時反映し、連打は最後の状態だけ送るようデバウンスする。アイコンだけのボタンには aria-pressed と aria-label を付ける。

デモはLike / heartと共通です。

§21-07

シェア / リポスト

他人の投稿を自分のフォロワーに再共有する。

気に入った投稿を自分の言葉を添えずに広められる。投稿が他の利用者に届く経路になり、投稿者の動機にもなる。

実装のポイントリポストは誤操作が拡散に直結するため、即実行ではなく「リポスト / 引用」のメニューを挟む設計が多い。状態は aria-pressed で公開する。

§21-08

引用 (quote)

元の投稿を引用してコメントを添えて投稿する。

他人の投稿を自分の文脈で紹介し、元の内容を見せながら意見を加えられる。返信と違い自分のフォロワーに届くので、話題を広げる役を持つ。

実装のポイント引用元は枠付きのカードとして入れ子にし、元投稿が削除・非公開になった場合の代替表示を最初から設計しておく。

§21-09

ブロック / ミュート

特定の相手の投稿を非表示にしたり関わりを遮断する。

不快な相手から距離を取り、安心して使い続けられる。利用者同士がやり取りする場には必ず用意する。

実装のポイントミュートは相手に通知されない片方向の非表示、ブロックは双方向の遮断と意味が違うので、実行前に影響範囲を一文で説明する。

§21-10

通報 / report

不適切な投稿を理由付きで運営に報告する。

利用者がコミュニティの問題を運営に知らせる手段を用意する。不快な投稿を見た人が黙って離脱するのを防ぐ。

実装のポイント理由は radio で単一選択にして同じ name でグループ化し、送信後は受付完了と次に起きることを示す。通報者の匿名性も明記する。

§21-11

プロフィールカード

名前にホバーするとプロフィール概要を出す。

投稿やコメントの相手が誰かを、ページを離れずに確かめられる。知らない名前が頻繁に現れるコミュニティで使う。

実装のポイントホバーカードは表示・非表示に数百 ms の遅延を入れ、カード上へのポインタ移動で閉じないようにする。キーボードではフォーカスでも開く。

§21-12

OGP リッチプレビュー

貼り付けた URL をタイトルと画像付きのカードにする。

URL だけの投稿にタイトルと画像を添え、開く前に中身を判断できるようにする。リンク共有が多いチャットやタイムラインでクリック率を上げる。

実装のポイントOGP の取得はサーバー側で行い、タイムアウトとキャッシュを入れる。og:image がない場合のフォールバックで、カード高さが崩れないようにする。

§21-13

Embed iframe (X/YT)

外部の投稿や動画をページ内に埋め込んで表示する。

外部の内容をリンク先へ移動させずにその場で見せられる。記事やまとめページで、引用元の投稿をそのまま示したいときに使う。

実装のポイント埋め込みは oEmbed で HTML を取得し、iframe は loading=lazy と sandbox で隔離する。先に aspect-ratio で枠を確保してレイアウトシフトを防ぐ。

§21-14

ハッシュタグ

本文中の # 付き語をリンクにして投稿を集約する。

同じ話題の投稿を利用者自身の付けた語で束ねる。カテゴリを運営が決めきれない場や、イベント参加者の投稿を集めたいときに向く。

実装のポイント本文中の # 語は正規表現で抽出してリンク化し、末尾の句読点や全角記号を巻き込まない境界判定にする。正規化した小文字で集約する。