Component Gallery

Screen Pattern

チャット画面（Chat Screen）UIの作り方

チャット画面は、会話履歴、入力欄、送信状態、添付や既読などのコミュニケーション情報を扱う画面です。

最終更新日: 2026-07-16 / レビュー状態: 未レビュー

30秒でわかる要点

チャット画面は、会話履歴、入力欄、送信状態、添付や既読などのコミュニケーション情報を扱う画面です。

自前ワイヤーフレーム

チャット画面の情報配置を確認するための簡易ワイヤーフレームです。外部サービスのスクリーンショットではなく、Component Gallery側で作成した構成図です。

主なユースケース

  • ・メッセージを送受信する
  • ・添付ファイルを送る
  • ・送信中・失敗・既読状態を表示する

レイアウトの考え方

  • ・会話履歴と入力欄を明確に分ける
  • ・送信状態をメッセージ単位で示す
  • ・長文や添付でレイアウトが崩れないようにする

アクセシビリティ

  • ・新着メッセージを適切に通知する
  • ・入力欄にラベルを付ける
  • ・送信失敗時に再送導線を用意する

よくある失敗

  • ・入力欄が画面外に隠れる
  • ・送信失敗が分からない
  • ・日付区切りがなく会話を追いにくい

構成コンポーネント

テキスト入力（Input）テキスト入力（Input）は、ユーザーがテキストを入力するための単行・複数行フォームフィールド。バリデーション状態（エラー・無効）の表現も含む。ボタン（Button）ボタン（Button）は、ユーザーがアクションを実行するためのクリック可能な要素。バリアント（プライマリ・セカンダリ・ゴーストなど）やサイズのバリエーションを持つ。アバター（Avatar）アバター（Avatar）は、ユーザーやエンティティを表すアイコン・プロフィール画像コンポーネント。画像がない場合はイニシャルや代替アイコンで表示する。バッジ（Badge）バッジ（Badge）は、数量・ステータス・ラベルを小さいサイズで表示するコンポーネント。通知数や状態の強調表示に使用される。ファイルアップロード（File Upload）ファイルアップロード（File Upload）は、ファイルを選択またはドラッグ＆ドロップでアップロードするコンポーネント。ファイル種別・サイズ制限の表示やプレビュー機能を持つ場合もある。

AI実装プロンプト

チャット画面実装

チャット画面をReact + Tailwind CSSで実装してください。主要コンポーネント、空状態、エラー状態、モバイル表示、アクセシビリティを含めてください。

運営・更新・参照元

最終更新日
2026-07-16
レビュー状態
未レビュー

参照元

FAQ

チャット画面で最初に決めるべきことは何ですか？

まず、この画面でユーザーが完了したい主目的を1つ決めます。そのうえで、input、button、avatarなどの構成要素を優先度順に配置します。

チャット画面でよくある失敗は何ですか？

入力欄が画面外に隠れる

チャット画面をモバイル対応するときの注意点は？

最初に表示する情報を絞り、入力欄、主ボタン、エラー表示、戻る導線が狭い画面でも隠れないようにします。