UI ガイドライン

概要

プラグインに UI を追加すると、会話の流れを保ちながら、ユーザーができることを増やせます。カード、カルーセル、全画面ビューなどの表示モードは、画面上で直接操作できると作業がしやすくなる場合にのみ使ってください。

デザインシステム

ChatGPT に自然になじむ質の高い UI を設計するには、コンポーネントライブラリ @openai/apps-sdk-ui を利用できます。

このライブラリには、Tailwind を使ったスタイリングの基盤、CSS 変数で定義されたデザイントークン、アクセシビリティに配慮して設計されたコンポーネントが揃っています。

コンポーネントライブラリの利用は任意です。利用すると、ChatGPT のデザインシステムに沿ったコンポーネントを短時間で作成できます。

表示モード

表示モードは、ChatGPT 内でアプリのコンテンツや操作をユーザーに提示する形式です。パートナーは、会話の流れに自然に沿う形で情報や操作手段を提供できます。各モードは、簡単な確認から作業に集中したい場面まで、それぞれ異なる用途に合わせて設計されています。

用途に応じて一貫した使い分けをすると、操作がシンプルになり、ユーザーは次に何が起きるかを予測しやすくなります。

インライン

インライン表示では、アプリの UI が会話の中に直接表示されます。現在、インラインの UI は常にモデルが生成した応答の前に表示されます。どのアプリも最初はインラインで表示されます。

レイアウト

• アイコンとツール呼び出し：アプリ名とアイコンを示すラベル
• インライン表示：モデルの応答の上にアプリのコンテンツを埋め込む簡易表示
• フォローアップ：モデルが生成する短い応答です。ウィジェットの後に表示され、編集内容や次の手順、関連する操作を提案します。カードの内容を繰り返さないようにしてください。

インラインカード

会話に直接埋め込む、用途を 1 つに絞った軽量なウィジェットです。簡単な確認や操作を行ったり、理解を助ける図などを表示したりできます。

適した用途

• 操作や判断が 1 つで済む場合（予約の確定など）
• 少量の構造化データを示す場合（地図、注文の概要、現在のステータスなど）
• 単体で機能するウィジェットやツールを提供する場合（オーディオプレーヤー、スコアカードなど）

レイアウト

• タイトル：ドキュメントをもとにしたカードや、プレイリスト内の曲のように共通の親要素に属する項目を含むカードには、タイトルを付けてください。
• 拡大：地図や操作可能な図のように、カードにリッチメディアやインタラクティブなコンテンツが含まれる場合は、全画面表示を開けるようにします。
• さらに表示：複数の結果を一覧で示す場合は、追加の項目を表示できるようにします。
• 編集コントロール：会話の流れを妨げずに、アプリの応答をその場で編集できるようにします。
• 主要なアクション：アクションは 2 つまでとし、カードの下部に配置します。各アクションで、会話を 1 ターン進めるか、ツールを呼び出すようにしてください。

インタラクション

カードでは、簡単な操作を直接行えます。

• 状態：編集内容は保存されます。
• その場での簡単な編集：用途に応じてテキストをインラインで編集できるようにすると、ユーザーはモデルにプロンプトを入力せずに、すぐに修正できます。
• 可変レイアウト：カードの高さは内容に合わせて伸ばせます。上限はモバイル端末の表示領域の高さです。

設計の目安

• カードごとの主要なアクションを絞る：アクションは最大 2 つです。主要な CTA を 1 つ用意し、必要に応じて補助的な CTA を 1 つ追加します。
• カード内に深い階層や複数のビューを設けない：詳細を何段階もたどる構成やタブ、深い階層のナビゲーションは避けてください。別々のカードやツールのアクションに分けることを検討してください。
• スクロールを入れ子にしない：カードのサイズを内容に合わせて自動調整し、カード内でスクロールする必要がないようにしてください。
• 入力手段を重複させない：ChatGPT が提供している機能をカード内に再現しないでください。

インラインカルーセル

カードを横に並べて表示します。ユーザーは複数の選択肢をざっと見比べて選べます。

適した用途

• 同じ種類の項目を少数提示する場合（レストラン、プレイリスト、イベントなど）
• 各項目の画像やメタデータが多く、簡単なリストの 1 行には収まらない場合

レイアウト

• 画像：各項目には必ず画像などの視覚的な要素を含めてください。
• タイトル：カルーセルの各項目には、原則として内容がわかるタイトルを付けてください。
• メタデータ：応答の文脈に照らして、その項目について特に重要で関連性の高い情報を示します。テキストが 2 行を超えないようにしてください。
• バッジ：必要に応じて、補足情報をバッジで示します。
• アクション：できる限り、各項目にわかりやすい CTA を 1 つだけ用意してください。

設計の目安

• 見やすさを保つため、カルーセルあたり 3～8 項目に収めてください。
• メタデータは関連性の高い情報に絞り、最大 3 行に収めてください。
• 各カードには、必要に応じて CTA を 1 つ配置できます（「予約」「再生」など）。
• どのカードでも、情報の重要度が同じように見て取れるデザインにしてください。

全画面表示

インラインカードの枠を超えて表示領域を広げることで、ユーザーは複数の手順を伴う作業に集中したり、コンテンツを詳しく調べたりできます。ChatGPT のコンポーザーは画面に重ねて表示されるため、ユーザーは全画面ビューの内容を踏まえて、自然な会話で「アプリに話しかける」ことができます。

適した用途

• 1 枚のカードには収まらない複雑な作業（ピンを備えたインタラクティブな地図、多機能な編集キャンバス、操作可能な図など）
• 詳細なコンテンツの閲覧（物件情報、メニューなど）

レイアウト

• システムの閉じるボタン：シートまたはビューを閉じます。
• 全画面ビュー：コンテンツを表示する領域
• コンポーザー：ChatGPT 標準のコンポーザーです。ユーザーは全画面ビューの内容を踏まえて会話を続けられます。

インタラクション

• チャットシート：全画面ビューを使いながら、それまでの会話の流れも確認できます。
• 思考中：応答がストリーミングされている間は、コンポーザーの入力欄に光が流れるアニメーションが表示されます。
• 応答：モデルの応答が完了すると、コンポーザーの上に応答の一部が一時的に表示されます。タップするとチャットシートが開きます。

設計の目安

• システムのコンポーザーと連携する UX を設計する：全画面表示でもコンポーザーは常に表示されます。ユーザーが会話の中で自然にプロンプトを入力し、ツールを呼び出せるようにしてください。
• 広い表示領域が役立つ作業には全画面表示を使う：既存のエディターや管理画面も、iframe ポリシーを満たしていれば埋め込めます。

ピクチャーインピクチャー（PiP）

ChatGPT 内にフローティングウィンドウを継続して表示するモードで、ゲームや動画のように進行中のセッションやライブセッションに適しています。会話を続けている間も PiP は表示されたままで、ユーザーのプロンプトに応じて内容を動的に更新できます。

適した用途

• 会話と並行して進める活動（ゲーム、リアルタイムの共同作業、クイズ、学習セッションなど）
• PiP ウィジェットがチャットへの入力に応じて動作する場合（ユーザーの依頼に応じてゲームのラウンドを進めたり、ライブデータを更新したりする場合など）

インタラクション

• 起動時：スクロールしても、PiP ウィンドウは表示領域の上部に固定されます。
• 固定中：ユーザーが閉じるか、セッションが終了するまで、PiP は固定されたままです。
• セッション終了時：PiP はインラインの位置に戻り、スクロールすると画面の外に移動します。

設計の目安

• PiP の状態を更新したり、入力に応じて動作したりできるようにする：ユーザーがシステムのコンポーザーから入力したときに、その内容を PiP に反映できるようにしてください。
• PiP を自動的に閉じる：セッションが終了した時点で閉じてください。
• PiP にコントロールや静的コンテンツを詰め込まない：インライン表示や全画面表示に適したものは、そちらに配置してください。

ビジュアルデザインのガイドライン

見た目と操作感を統一すると、パートナーが開発したツールが ChatGPT の一部として自然になじみます。ビジュアルデザインのガイドラインは、わかりやすさ、使いやすさ、アクセシビリティを確保しながら、適切な箇所でブランドの個性を表現できるようにするためのものです。

ここでは、システム全体のわかりやすさを保ちつつ、各サービスの特徴を打ち出すための色、書体、余白、画像の使い方を示します。

一貫性の重要性

デザインと UX に一貫性があると、ChatGPT でアプリを使う際の体験が全体として向上します。このガイドラインに沿ってツールを設計すれば、ユーザーは慣れた操作感のまま、気を散らすことなくツールを活用できます。

色

システムで定義されたカラーパレットを使うと、アクションや応答の見た目を常に ChatGPT と統一できます。アクセントやアイコン、インライン画像でブランドの個性を表現できますが、システムカラーは再定義しないでください。

設計の目安

• テキストやアイコン、区切り線など領域の境界を示す要素には、システムカラーを使ってください。
• ロゴやアイコンなどにブランドのアクセントカラーを使う際も、背景色や文字色は上書きしないでください。
• ChatGPT の簡潔なデザインを損なう独自のグラデーションやパターンは避けてください。
• アプリの各表示モードで使う主要ボタンには、ブランドのアクセントカラーを使ってください。

ブランドカラーはアクセントやバッジに使ってください。文字色や、基本コンポーネントのその他のスタイルは変更しないでください。

テキスト領域の背景に色を付けないでください。

タイポグラフィ

ChatGPT は各プラットフォームの標準システムフォント（iOS では SF Pro、Android ではサンセリフ体）を使用し、どの端末でも読みやすさとアクセシビリティを確保しています。

設計の目安

• 常にシステムのフォントスタックを継承し、見出し、本文、キャプションの文字サイズはシステムの規定に従ってください。
• 太字、斜体、ハイライトなどパートナー独自のスタイルはコンテンツ領域だけに使い、UI の構造を担う要素には適用しないでください。
• 文字サイズの種類はできるだけ少なくし、本文用と小さめの本文用のサイズを優先してください。

全画面表示でも独自のフォントは使わないでください。可能な限り、システムのフォント変数を使ってください。

余白とレイアウト

マージン、パディング、配置の基準を統一すると、会話の中でもパートナーのコンテンツに目を通しやすく、どこに何があるかを予測しやすくなります。

設計の目安

• カード、コレクション、インスペクターパネルには、システムのグリッドで定めた間隔を使ってください。
• パディングを統一し、内容を詰め込んだり、テキストを端まで広げたりしないでください。
• 形状に一貫性を持たせるため、できる限りシステムが指定する角丸の半径に従ってください。
• 見出し、補足テキスト、CTA の順序が一目でわかるように配置し、情報の視覚的な階層を保ってください。

アイコンと画像

システムアイコンを使うと、機能を視覚的にわかりやすく伝えられます。パートナーのロゴや画像は、どのブランドのコンテンツかをユーザーが見分ける手がかりになります。

設計の目安

• システムアイコンを使うか、ChatGPT のデザインになじむ単色のアウトラインアイコンを用意してください。
• 応答の中にロゴを含めないでください。ウィジェットが描画される前に、ChatGPT が必ずロゴとアプリ名を追加します。
• 画像の歪みを防ぐため、すべての画像で指定されたアスペクト比を守ってください。

アクセシビリティ

パートナーが提供するアプリは、できる限り多くのユーザーが利用できるように設計してください。ChatGPT 向けのアプリを開発する際は、アクセシビリティを設計の基本に据えてください。

設計の目安

• テキストと背景のコントラスト比は、WCAG AA が定める最低基準を満たす必要があります。
• すべての画像に代替テキストを用意してください。
• ユーザーが文字サイズを変更してもレイアウトが崩れないようにしてください。