概要
任意で追加できるプラグイン UI を使うと、会話の流れを妨げずに、ユーザーができることを広げられます。カード、カルーセル、全画面ビューなどの表示モードは、視覚的な操作によってワークフローが改善される場合にのみ使用してください。
デザインシステム
ChatGPT に自然になじむ高品質な UI を設計するには、
@openai/apps-sdk-ui コンポーネントライブラリを
利用できます。
Tailwind によるスタイリングの基盤、CSS 変数のデザイントークン、アクセシビリティに配慮した、丁寧に設計されたコンポーネントのライブラリを提供します。
コンポーネントライブラリの使用は任意です。ChatGPT のデザインシステムに合ったコンポーネントを、より短時間で構築できます。
コードを書き始める前に、提供されている Figma の コンポーネントライブラリを使ってデザインを始めましょう。
表示モード
表示モードは、開発者が ChatGPT 内のアプリの体験を構築するために使う表示領域です。パートナーは、会話に自然になじむ形でコンテンツやアクションを表示できます。手早い確認から没入感のあるワークフローまで、各モードは特定の種類の操作に合わせて設計されています。
これらを一貫して使うことで、シンプルで動作を予測しやすい体験を維持できます。
インライン
インライン表示モードは、会話の流れの中に直接表示されます。現在、インラインの表示領域は常にモデルが生成した応答の前に表示されます。どのアプリも、最初はインラインで表示されます。
レイアウト
- アイコンとツール呼び出し：アプリ名とアイコンを含むラベル
- インライン表示：モデルの応答の上にアプリのコンテンツを埋め込む、コンパクトな表示
- フォローアップ：ウィジェットの後に表示される、モデルが生成した短い応答です。修正案、次のステップ、関連するアクションを提案します。カードと重複する内容は避けてください。
インラインカード
会話に直接埋め込まれる、単一の用途に絞ったコンパクトなウィジェットです。手早い確認、基本的なアクション、視覚的な補助を提供します。
適した用途
- 単一のアクションや判断（例：予約の確定）
- 少量の構造化データ（例：地図、注文の概要、簡単な状況表示）
- 完全に自己完結したウィジェットやツール（例：音声プレーヤー、スコアカード）
レイアウト
- タイトル：ドキュメントを扱うカードや、プレイリスト内の曲のように親要素に属する項目を含むカードには、タイトルを付けてください。
- 展開：カードにリッチメディアや、地図、インタラクティブな図などの操作できるコンテンツが含まれる場合に、全画面表示モードを開くために使用します。
- さらに表示：複数の結果をリストで表示する場合に、追加の項目を表示するために使用します。
- 編集コントロール：会話を煩雑にしない範囲で、アプリの応答をインラインで編集できるようにします。
- 主要なアクション：アクションは 2 つまでとし、カードの下部に配置します。各アクションは、会話のターンまたはツール呼び出しのいずれかを実行するようにしてください。
操作
カードは、基本的な直接操作に対応しています。
- 状態：編集内容は保持されます。
- 基本的な直接編集：用途に応じてテキストをインラインで編集できるようにすると、ユーザーはモデルに指示を出さずに、すばやく編集できます。
- 動的なレイアウト：カードの高さは、コンテンツに合わせて、モバイルの表示領域の高さまで拡張できます。
設計のポイント
- カードごとの主要なアクション数を制限：アクションは最大 2 つとし、主要な CTA を 1 つ、必要に応じて補助的な CTA を 1 つ設けます。
- カード内に深い階層のナビゲーションや複数のビューを設けないでください。 カードには、複数の詳細画面への遷移、タブ、深い階層へのナビゲーションを含めないでください。別々のカードやツールのアクションに分けることを検討してください。
- スクロール領域を入れ子にしないでください。カードのサイズはコンテンツに合わせて自動調整し、内部でスクロールが発生しないようにしてください。
- 入力機能を重複させないでください。カード内に ChatGPT の機能を再現しないでください。
インラインカルーセル
カードを横に並べて表示し、ユーザーが複数の選択肢にすばやく目を通して選べるようにします。
適した用途
- 類似する項目の短いリストの表示（例：レストラン、プレイリスト、イベント）
- 各項目に含まれる視覚的なコンテンツやメタデータが、通常の行表示には収まらない場合
レイアウト
- 画像：各項目には必ず画像などの視覚的な要素を含めてください。
- タイトル：カルーセルの各項目には、原則として内容を説明するタイトルを付けてください。
- メタデータ：応答の文脈に照らして、その項目に関する最も重要で関連性の高い情報をメタデータで示します。テキストが 2 行を超えないようにしてください。
- バッジ：必要に応じてバッジを使い、補足情報を示します。
- アクション：可能な限り、各項目には明確な CTA を 1 つだけ設けてください。
設計のポイント
- 見やすさを保つため、 カルーセルあたり 3～8 項目 に収めてください。
- メタデータは最も関連性の高い情報に絞り、最大 3 行に収めてください。
- 各カードには、必要に応じて CTA を 1 つ設けられます（例：「予約」「再生」）。
- カード間で視覚的な階層を統一してください。
全画面
インラインカードの枠を超えて表示領域を広げ、複数のステップからなるワークフローや、より詳しい探索に取り組める没入感のある体験を提供します。ChatGPT のコンポーザーは画面に重ねて表示されたままなので、ユーザーは全画面ビューの文脈を保ちながら、自然な会話を通じて「アプリに話しかける」ことを続けられます。
使用場面
- 1 枚のカードには収まらない高度なタスク（ピン付きのインタラクティブな地図、多機能な編集キャンバス、インタラクティブな図など）
- 詳細なコンテンツの閲覧（不動産物件情報、メニューなど）
レイアウト
- システムの閉じるボタン：シートやビューを閉じます。
- 全画面ビュー：コンテンツ領域
- コンポーザー：ChatGPT 標準のコンポーザーです。全画面ビューのコンテキストを踏まえて、ユーザーが追加の質問や依頼を送れます。
インタラクション
- チャットシート：全画面表示とともに、会話のコンテキストを保持します。
- 思考中：コンポーザーの入力欄に光が流れるアニメーションを表示し、応答がストリーミング中であることを示します。
- 応答：モデルが応答を完了すると、コンポーザーの上に応答の一部が短く切り取られて一時的に表示されます。タップするとチャットシートが開きます。
基本指針
- システムのコンポーザーと連携する UX を設計してください。全画面表示ではコンポーザーが常に表示されるため、ユーザーにとって自然な会話形式のプロンプトでツール呼び出しを実行できるようにしてください。
- 広い画面の方が作業しやすい場合は、全画面表示を使用してください。 既存のエディターや管理画面は、iframe ポリシーを満たしていれば埋め込めます。
ピクチャーインピクチャー（PiP）
ChatGPT 内に継続して表示されるフローティングウィンドウで、ゲームや動画など、継続的なセッションやライブセッションに適しています。PiP は会話が続いている間も表示され、ユーザーのプロンプトに応じて動的に更新できます。
使用場面
- ゲーム、リアルタイムの共同作業、クイズ、学習セッションなど、会話と並行して進めるアクティビティ
- ユーザーのリクエストに応じてゲームのラウンドを続けたり、ライブデータを更新したりするなど、PiP ウィジェットがチャット入力に反応できる場面
インタラクション
- 有効化時： スクロールしても、PiP ウィンドウは表示領域の上部に固定されます。
- ピン留め済み： ユーザーが閉じるか、セッションが終了するまで、PiP は固定されたままになります。
- セッション終了時： PiP はインラインの位置に戻り、スクロールすると画面外に移動します。
基本指針
- ユーザーがシステムのコンポーザーを通じて操作した際に、PiP の状態が更新されたり、操作に反応したりするようにしてください 。
- セッションが終了したら、PiP を自動的に閉じてください 。
- インライン表示や全画面表示に適した操作コントロールや静的コンテンツを PiP に詰め込みすぎないでください 。
ビジュアルデザインのガイドライン
見た目と操作感を統一すると、パートナーが開発したツールが ChatGPT プラットフォームの一部として自然になじみます。ビジュアルガイドラインは、わかりやすさ、使いやすさ、アクセシビリティを支えると同時に、適切な箇所でブランドらしさを表現する余地も残しています。
これらの原則では、システムのわかりやすさを保ちつつ、パートナーがサービスの独自性を表現できるように、色、文字、余白、画像の使い方を示します。
一貫性の重要性
見た目と UX の一貫性は、ChatGPT でアプリを使う際のユーザー体験全体の向上につながります。これらのガイドラインに従うことで、パートナーはユーザーにとって一貫性のある形でツールを提供し、集中を妨げずに価値を届けられます。
色
システムで定義されたパレットを使うことで、アクションや応答の見た目を常に ChatGPT プラットフォームと統一できます。パートナーはアクセント、アイコン、インライン画像でブランドらしさを加えられますが、システムカラーは再定義しないでください。
基本指針
- テキスト、アイコン、区切り線などの領域を分ける要素には、システムカラーを使ってください。
- ロゴやアイコンなど、パートナーのブランドを表すアクセントによって、背景色やテキストの色を上書きしないでください。
- ChatGPT のミニマルな見た目を損なう独自のグラデーションやパターンは避けてください。
- アプリの各表示モード内では、プライマリボタンにブランドのアクセントカラーを使ってください。
アクセントやバッジにブランドカラーを使ってください。テキストの色や、その他の基本的なコンポーネントスタイルは変更しないでください。
テキスト領域の背景に色を付けないでください。
タイポグラフィ
ChatGPT は、どのデバイスでも読みやすさとアクセシビリティを確保するため、各プラットフォーム標準のシステムフォント（iOS では SF Pro、Android ではサンセリフフォント）を使っています。
基本指針
- 常にシステムのフォントスタックを継承し、見出し、本文、キャプションにはシステムで定められたサイズのルールに従ってください。
- 太字、斜体、ハイライトなど、パートナー独自のスタイルはコンテンツ領域内だけで使い、UI の構造を担う部分には使わないでください。
- フォントサイズの種類はできるだけ少なくし、body と body-small のサイズを優先してください。
全画面モードでも、カスタムフォントは使わないでください。可能な限り、システムのフォント変数を使ってください。
余白とレイアウト
マージン、パディング、配置を統一すると、会話内のパートナーのコンテンツを見渡しやすくなり、どこに何があるかも予測しやすくなります。
基本指針
- カード、コレクション、インスペクターパネルには、システムのグリッド間隔を使ってください。
- パディングを統一し、テキストを詰め込んだり、端から端まで配置したりしないでください。
- 形状を統一するため、可能な限りシステムで指定された角の丸みを使ってください。
- 見出し、補足テキスト、CTA を明確な順序で配置し、視覚的な階層を保ってください。
アイコンと画像
システムアイコンは視覚的なわかりやすさを高め、パートナーのロゴや画像は、どのブランドのコンテンツかをユーザーが把握するのに役立ちます。
実践のポイント
- システムアイコンか、ChatGPT のデザインに合う単色のアウトライン形式のカスタムアイコンを使用してください。
- 応答にロゴを含めないでください。ChatGPT はウィジェットを表示する前に、必ずロゴとアプリ名を追加します。
- 画像が歪まないよう、すべての画像で指定されたアスペクト比を守ってください。
アクセシビリティ
パートナーが提供するすべての体験は、できるだけ幅広いユーザーが利用できるようにする必要があります。ChatGPT 向けのアプリを構築する際は、アクセシビリティを重視してください。
実践のポイント
- テキストと背景のコントラスト比は、WCAG AA の最低基準を満たす必要があります。
- すべての画像に代替テキストを付けてください。
- テキストのサイズを変更してもレイアウトが崩れないようにしてください。