本文へスキップ

ソーシャル・コミュニケーション

会話・投稿・反応。人とつながるUI。

会話・投稿・反応の UI のカテゴリ。左右に分かれる吹き出しのチャット、ネストするコメントスレッド、いいね・コメント・シェアを持つフィードカード、「@」で候補を出すメンション入力、リングから開くストーリーズの5種がある。原則はフィードバックの即時性。いいねを押した瞬間に数が増え、送信した瞬間に自分の吹き出しが出ることで、相手の応答を待たずに「届いた」と感じられる。反応の遅れがそのまま冷たさとして伝わる領域なので、投稿や会話の UI を作るときに引く。

関わる原則: フィードバックの即時性5件

使い分け1対1の会話は chat-ui、投稿への反応は feed-card、議論は comment-thread（返信は1段まで）。本文で人を指すなら mention-input。stories は写真中心のサービスで、自動で進む前提を受け入れられるときだけ。

まず見る3件

  • 入力

    チャットUI

    Chat UI

    メッセンジャー風の吹き出し。相手は左（淡色）、自分は右（藍）に並ぶ。入力欄に打って送るとJSで自分の吹き出しが増え、タイピング中を示す3点アニメの後に返信が届く。

    • 自分は右・藍、相手は左・淡色に固定し、吹き出しの下角を差し手側だけ 4px に絞る。誰の発言かを形でも言う
    • 吹き出しの最大幅は 74%。全幅にすると会話の左右が消え、狭すぎると 1 行ごとに折れる
    • 送信後は入力欄を空にして即フォーカスを戻す。連続で打てないチャットは会話にならない
    • JS
    コードを見る →
  • クリック

    フィードカード

    Feed Card

    SNSの投稿カード。アバター・名前・時刻のヘッダー、本文、グラデーションのメディア、いいね／コメント／シェアのアクション行。いいねはタップで切り替わり、件数も更新される。

    • アクション行は 3 等分の 44px にして flex:1 で並べる。アイコンの幅で並べると端のボタンだけ押しにくい
    • いいねの名前は「いいね」で固定し、状態は aria-pressed と塗りで伝える。文言まで「済み」に変えると読み上げが矛盾する
    • 件数は data-base の元の数に自分の 1 を足し引きする。押すたびに増える実装は数字の信用を落とす
    • JS
    コードを見る →
  • クリック

    コメントスレッド

    Comment Thread

    アバター付きのコメント一覧。返信は1段ネストして表示。ハートの「いいね」はタップで数が増減し、返信ボタンで簡易入力欄が開いて返信を追加できる。

    • 返信は 1 段だけネストし、左に 2px の線を引く。2 段以上は狭い幅で本文が細くなり読めない
    • 返信のアバターは 28px に落として親（34px）と区別する。同じ大きさだと親子が並列に見える
    • いいねは data-base の元の数に自分の 1 を足し引きする。押すたびに増え続ける実装は信用を失う
    • JS
    コードを見る →

使い分け表

パーツ操作技術向く場面状態
チャットUI
Chat UI
入力JS1 対 1 のメッセンジャー・サポートチャット・相手の入力中を示したい会話画面default / focus / active / disabled / loading
コメントスレッド
Comment Thread
クリックJS記事・投稿へのコメント欄・返信を 1 段ネストで見せる会話default / hover / active
フィードカード
Feed Card
クリックJSSNS・コミュニティのタイムライン・本文＋メディア＋反応をひとまとまりで見せる投稿default / hover / active
メンション入力
@Mention Input
入力JSコメント・チャットで特定の人に通知する入力・候補を絞りながら選ばせたいメンションdefault / focus / hover / active / empty
ストーリーズ
Stories
クリックJS24 時間で消える短い投稿の閲覧・全画面で順送りに見せる写真・動画default / hover / active

すべての見本（5件）

  • 入力

    チャットUI

    Chat UI

    メッセンジャー風の吹き出し。相手は左（淡色）、自分は右（藍）に並ぶ。入力欄に打って送るとJSで自分の吹き出しが増え、タイピング中を示す3点アニメの後に返信が届く。

    • JS
    コードを見る →
  • クリック

    コメントスレッド

    Comment Thread

    アバター付きのコメント一覧。返信は1段ネストして表示。ハートの「いいね」はタップで数が増減し、返信ボタンで簡易入力欄が開いて返信を追加できる。

    • JS
    コードを見る →
  • クリック

    フィードカード

    Feed Card

    SNSの投稿カード。アバター・名前・時刻のヘッダー、本文、グラデーションのメディア、いいね／コメント／シェアのアクション行。いいねはタップで切り替わり、件数も更新される。

    • JS
    コードを見る →
  • 入力

    メンション入力

    @Mention Input

    「@」を打つとユーザー候補のドロップダウンが絞り込み表示され、選ぶと藍色のメンションchipとして本文に挿入される。候補は矢印キーで移動、Enterで確定、Escで閉じられる。

    • JS
    コードを見る →
  • クリック

    ストーリーズ

    Stories

    Instagram風のストーリーのリング一覧。タップで全画面ビューが開き、上部の分割プログレスバーが自動で進む。画面の右をタップで次、左で前、×で閉じられる。

    • JS
    コードを見る →