Google Stitch でチャット・メッセージUIを設計してみた——会話を形にすることの難しさと、そこから気づいたこと

2026.04.14

チャットUIを設計するまで、「会話」を形にすることがこんなに難しいとは思っていなかった。

ビジネスチャットツール向けのメッセージ画面を Google Stitch で設計することになったとき、最初は「よくあるUIだから簡単だろう」と思っていた。吹き出し、送信ボタン、入力欄——要素は少ない。でも実際に Stitch でプロンプトを書き始めると、「自分のメッセージ」と「相手のメッセージ」の位置関係、既読表示の場所、長文メッセージの折り返し、スタンプ・絵文字への対応、入力中のインジケーター——次々と「考える必要があった細部」が出てきた。

この記事は、その設計過程で気づいたことの記録だ。Google Stitch でチャットUIを作った経験を通して、「会話のデザイン」が何を意味するのかを、自分なりに整理してみる。

結論から言うと

チャットUIの設計で最も大切なのは、「送信者のアイデンティティと時間の流れを、ひと目で把握できるようにすること」だ。吹き出しの左右配置、アバターの位置、タイムスタンプの扱い——これらは装飾ではなく、「いつ・誰が・何を言ったか」を瞬時に伝えるための情報設計だ。Google Stitch でチャットUIを作るとき、この設計の核を最初に決めてからプロンプトを書くと、生成精度が格段に上がった。

チャット・メッセージUIの基本要素を整理する

チャットUIとは何か

チャットUI（メッセージングUI）とは、2人以上のユーザーがテキスト・画像・ファイルなどをリアルタイムまたは非同期でやり取りするための画面デザインのことです。LINE・Slack・Chatwork・Teams・WhatsApp・Discord など、現在最も日常的に使われているUIカテゴリのひとつだ。

チャットUIの主な構成要素は以下の通りだ。

メッセージバブル（吹き出し）：自分の発言と相手の発言を視覚的に区別する
アバター・送信者名：誰が送ったかを示す
タイムスタンプ：いつ送ったかを示す
メッセージ入力欄：テキスト入力・ファイル添付・送信ボタンを含むエリア
既読・未読インジケーター：相手が読んだかどうかを示す
入力中インジケーター（タイピングインジケーター）：相手が入力中であることを示す
スクロール領域：過去のメッセージ履歴を表示するエリア

Google Stitch でチャットUIを生成すると何が出てくるか

Stitch で「チャットUI」とだけプロンプトを書くと、一般的なメッセージングアプリに近い画面が生成される。自分のメッセージが右側に青い吹き出し、相手のメッセージが左側にグレーの吹き出し、下部に入力欄と送信ボタン——このパターンは LINE や iMessage に似た、最もオーソドックスな形だ。

実際に使ってみると、シンプルな1対1チャットUIなら Stitch は十分な品質で生成してくれる。問題が出てくるのは「複数ユーザーのグループチャット」「画像・ファイル添付を含むメッセージ」「既読表示の細部」など、少し複雑な要件を指定し始めたときだ。

詰まった点1：吹き出しの左右配置と「自分」の定義

「自分」と「相手」の視覚的区別

チャットUIで最初に決めなければならないのは、「自分のメッセージはどちら側に表示するか」という方針だ。

LINEやiMessageのような1対1チャットでは、自分のメッセージが右、相手のメッセージが左が一般的だ。一方、Slackのようなチャンネル型では全員のメッセージが左揃いで、送信者名・アバターで誰の発言かを区別する設計をとる。

Stitch でプロンプトを書くとき、「1対1チャット形式（自分が右、相手が左）」か「Slack形式（全メッセージが左揃い、送信者名付き）」を明示することで、意図に沿ったデザインが生成されやすくなった。明示しないと Stitch が両方のスタイルを混在させた不自然な画面を出すことがあった。

グループチャットでの送信者の見せ方

3人以上のグループチャットを設計するとき、送信者を誰から見ても「自分以外は全員左揃い」で表示する設計が一般的だ。ただし「A・B・C の3人が参加しているグループで、今見ているのは A の視点」という状況をプロンプトで正確に伝えるのが難しかった。

最終的に「3人のグループチャット。左側に B（青いアバター）と C（赤いアバター）のメッセージが交互に表示され、右側に自分（A）のメッセージが表示されている状態」と書くと、意図に近いデザインが生成できた。送信者の色・アバターの違いを指定することが、グループチャットデザインの精度を上げるポイントだ。

詰まった点2：既読表示・タイムスタンプの設計

「既読」はどこに置くか

既読表示の位置は、チャットUIによって大きく異なる。

LINE方式：吹き出しの左下に「既読」テキストを表示
iMessage方式：吹き出しの下に「Read 14:32」のように時刻付きで表示
Slack方式：既読概念がない（代わりにリアクション絵文字で反応を示す）
Teams方式：メッセージ下部に既読した全員のアバターアイコンを表示

Stitch にプロンプトで「LINE 形式の既読表示」と書くと、吹き出し横に「既読」という小さなテキストが表示されたデザインが生成された。特定のサービスを参照として指定すると、それに近いスタイルで生成される傾向があることをここでも確認できた。

タイムスタンプの「見せすぎ」問題

タイムスタンプをすべてのメッセージに表示すると、画面が情報過多になる。一般的には「連続したメッセージのグループの先頭」か「一定時間（例：5分）以上間隔が空いたタイミング」にのみタイムスタンプを表示する設計が多い。

Stitch でこのパターンを生成するとき、「連続するメッセージのグループには個別のタイムスタンプを付けず、グループの区切りにのみ中央揃えで時刻を表示」と指定した。この書き方が精度を上げた。全メッセージにタイムスタンプが付いたうるさいデザインではなく、情報が整理されたUIが生成された。

詰まった点3：メッセージ入力欄の設計

入力欄が「伸縮する」設計の表現

チャットの入力欄は、入力したテキスト量に応じて縦方向に自動拡張するデザインが一般的だ（一定の最大高さで固定し、それ以上はスクロール）。

Stitch でこの「伸縮する入力欄」を表現するとき、「入力欄に3行分のテキストが入力されている状態」として生成する方法が有効だった。「1行の空入力状態」と「3行入力された状態」の2パターンを生成して並べることで、デザインの伸縮挙動を仕様書的に示せた。

入力欄まわりのアクションボタン

入力欄の周辺には様々なアクションボタンが集まる。ファイル添付、画像挿入、絵文字ピッカー、メンション、音声メッセージ——どこまで含めるかは、サービスの方針次第だ。

Stitch でプロンプトに「入力欄の左に添付ファイル・絵文字のアイコンボタン、右に送信ボタン」と書いたとき、意図通りのレイアウトが生成された。ただし「絵文字ピッカーが展開した状態」のデザインは別プロンプトで生成する必要がある。Stitch はデフォルト状態（閉じた状態）を生成するため、「展開した状態」「入力中の状態」など各UIステートは個別に指定することが精度を上げるコツだ。

チャットUIで「会話」を設計することの意味

チャットUIは「時間のデザイン」だと気づいた

チャットUIを設計していて気づいたのは、これは「空間のデザイン」ではなく「時間のデザイン」だということだ。

ページや画面のUIは、ある瞬間の情報の空間的な配置を設計する。でもチャットUIは、時間の流れに沿って積み上がっていく会話を画面に収める設計だ。「いつ・誰が・何を言ったか」という時系列の情報を、スクロールで振り返れる空間に変換する作業だ。

Stitch でチャットUIの「画面下部が最新で上に遡るほど古い」という時間方向の設計を理解させるとき、プロンプトに「会話履歴。最新のメッセージが画面下部に表示されている」と書くと意図が正確に伝わった。

「送信直後」の状態も設計する

チャットUIで見落としやすいのが「メッセージ送信直後の状態」だ。送信ボタンを押した瞬間、入力欄はクリアされ、メッセージが吹き出しとして画面下部に追加される。この「直後の状態」をプロトタイプに含めることで、ユーザーが「ちゃんと送信できた」という感覚を得られるかどうかを事前に確認できる。

Stitch で「送信直後の状態（入力欄が空で、最新メッセージが右側の吹き出しとして追加された状態）」として画面を生成し、「送信前」と「送信後」の2枚を Play ボタンで繋いだ。このシンプルな2画面プロトタイプが、「送信の感触」を確認するのに十分だった。

Stitch でチャットUIを生成するときの実践的なプロンプト例

1対1チャット画面の生成

「1対1のビジネスチャット画面。自分のメッセージが右側（青い吹き出し）、相手（田中さん、グレーのアバター）のメッセージが左側（グレーの吹き出し）。画面下部に伸縮する入力欄と送信ボタン。各メッセージグループの区切りに時刻表示。最新メッセージは自分からで、既読マーク付き」

このプロンプトで生成したデザインは、細部を除いてほぼ意図通りだった。修正は「タイムスタンプのフォントサイズが少し大きい」程度だった。

グループチャット画面の生成

「3人のグループチャット（プロジェクトA）。左側に山田（青いアバター）と佐藤（オレンジのアバター）のメッセージが交互に。右側に自分のメッセージ。Slack のようにメッセージ左上に送信者名を表示。入力欄にメンション機能のアイコンボタンあり」

このプロンプトでは1回目の生成でアバターと送信者名の配置がやや崩れたが、「送信者名はアバターの右横に、アバターは吹き出しの左横に」と修正プロンプトを追加することで意図に近いデザインが生成された。

FAQ

Q1. Google Stitch でチャットUIを生成するとき、ダークモードとライトモードの両方を一度に確認できますか？

はい。「同じチャット画面のライトモードとダークモードを横並びで生成」というプロンプトで両方のバリエーションを一画面に出力できます。ダークモード対応が必要なサービスの場合、両パターンを早い段階で確認できるため、後工程での「ダークモードに変換したら色が崩れた」問題を防ぎやすくなります。

Q2. チャットUIで「入力中インジケーター（タイピングインジケーター）」も設計できますか？

静的なデザインとして生成できます。「相手が入力中の状態。左側に3つのドットが波打つタイピングインジケーターが表示されている」と指定すると、…（ドット3つ）が吹き出し風に表示されたデザインが生成されます。実際のアニメーション（ドットが波打つ動き）は Stitch では表現できませんが、「どこに表示されるか」の設計確認には使えます。

Q3. 音声メッセージやファイル添付のUIも設計できますか？

はい。「音声メッセージの吹き出し（波形グラフと再生ボタン付き）」「PDF ファイルを添付したメッセージバブル（ファイル名・サイズ・ダウンロードボタン付き）」のようにプロンプトで指定すると生成できます。これらのメッセージタイプは、通常のテキスト吹き出しとは異なるデザインが必要なため、個別に設計・確認することをお勧めします。

Q4. スマートフォン版とPC版のチャットUIを同時に設計するにはどうすればいいですか？

Stitch の無限キャンバスを使って、「スマートフォン（375px）版と PC（1280px）版のチャット画面を横並びで生成」というプロンプトが有効です。同じデザインシステムを保ちながらレイアウトを変えた2パターンを同時に確認でき、レスポンシブ設計の方針確認に役立ちます。

Q5. チャットUIを実装するためのライブラリはありますか？

はい。代表的なものとして、React 向けには Stream Chat（チャット機能の SDK と UI コンポーネントを提供）、CometChat、SendBird などがあります。Stitch で作ったデザインをこれらライブラリのカスタマイズ参照として使うことで、スクラッチでチャットUIを実装するよりも大幅に開発コストを削減できます。

Q6. チャットUIのアクセシビリティ対応で注意すべきことは何ですか？

主な注意点は3つです。まず、送信者の区別を色だけで表現しない（色覚障害のユーザーへの配慮）。次に、吹き出しのコントラスト比を十分に確保する（WCAG 2.1 では最小 4.5:1）。また、スクリーンリーダーが「田中さんが14時30分に送信：こんにちは」のように読み上げられるよう、aria ラベルの設計を開発段階で検討する。Stitch のデザイン段階でこれらの仕様をコメントとして書き添えておくと、開発への引き継ぎがスムーズです。

注意点・失敗しやすいポイント

1. 「ハッピーパス」だけ設計して終わりにしない

送信成功の状態だけ設計して「完成」と思いがちだが、チャットUIには設計すべき状態が多い。送信失敗（ネットワークエラー）・送信中（ローディング）・メッセージ未読・メッセージ削除後・空のチャット（まだ会話がない状態）——これらの状態もデザインする必要がある。Stitch では「送信エラーの状態（吹き出しに赤いエラーアイコンと再送ボタン付き）」などを個別に生成して仕様書に含めると、実装品質が上がる。