コミュニティ・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)

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

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

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