英語UIを Google Stitch で作るとき、日本語UIと何が違うか

2026.04.12

日本語と英語では、UIの作り方が「微妙に違う」という話は聞いていた。実際に Google Stitch で両方を作ってみて、その「微妙に違う」が思ったより多岐にわたることを体感した。

グローバル向けサービスの開発や、英語圏ユーザーを想定したアプリを作っている方に向けて、Google Stitch を使って英語UIを作る際に気づいたポイントを整理する。

テキスト長の違いがレイアウトに直撃する

最初にぶつかった問題は「英語のラベルは日本語より長くなる」という事実だ。

「設定」は2文字だが “Settings” は8文字。「ログイン」は4文字だが “Log in” は5文字、”Sign in” も6文字ある。ボタンやナビゲーションのラベルが長くなると、同じレイアウトに収まらないことが起きる。

Google Stitch に日本語UIのプロンプトをそのまま英語に直して入力すると、レイアウトが崩れることがある。英語向けには、ボタン幅・フォントサイズ・余白を最初から「英語テキストが入る前提」で指定することが重要だ。プロンプトに「英語のラベルに十分な余白を確保」「ボタンは可変幅」という指定を入れるようになってから、崩れが減った。

フォントの選び方が変わる

日本語UIでは「游ゴシック」「Noto Sans JP」のような和文フォントを基準に考える。英語UIでは “Inter” “Roboto” “Lato” といったラテン文字向けのフォントが主流だ。

Google Stitch に「英語UIを作って」と入力すると、自動的に英語向けフォントを選んでくれることが多い。だが「日本語UIと英語UIを共存させたい（i18n対応）」という場合、両言語で読みやすいフォントペアをプロンプトで指定する必要がある。

「Noto Sans（日本語）と Noto Sans Latin（英語）を組み合わせたフォント設定」と具体的に書くことで、混在する状況でも可読性を保ちやすくなった。

レイアウトの方向性と視線誘導

英語圏のUIは「左から右、上から下」という視線誘導が日本語UIより強く意識される場合がある。アイコン・ラベルの配置、CTAの位置——これらは文化的な読み慣れと連動している。

Google Stitch で英語向けUIを生成するときは「英語ネイティブのユーザーを想定」と一言添えるだけで、CTAの配置やコンテンツの優先順位が調整される傾向があった。この一言の有無で、出力のニュアンスが変わることに気づいてからは、ターゲット言語を明示することが習慣になった。

日付・数値・通貨フォーマットの指定

UIのサンプルデータとして日付や価格を入れる場合、フォーマットが文化圏によって異なる。「2026/04/12」は日本形式で、英語圏では「April 12, 2026」や「04/12/2026」（地域によって月と日が逆転する）になる。

Google Stitch で生成するサンプルデータのフォーマットは、プロンプトで指定しないとデフォルトで日本式になることがある。「日付は MM/DD/YYYY 形式」「通貨は USD、$ 記号は数字の前」と明示的に指定することで、英語ネイティブに違和感のないUIになる。

アイコンと絵文字の文化的差異

UIで使うアイコンや絵文字にも文化的差異がある。日本で「当たり前」に使うアイコン（例：「敬礼」「桜」「お辞儀」）は英語圏では伝わりにくいことがある。逆に英語圏でよく使われるアイコン表現が日本語UIではピンとこない場合もある。

Google Stitch でグローバル向けUIを作るときは「文化的に中立なアイコンを使用」と指定すると、汎用性の高いシステムアイコン（矢印・チェック・ハンバーガーメニューなど）が選ばれやすくなる。

RTL（右から左）言語への対応

アラビア語やヘブライ語のような右から左に読む言語に対応する場合、UIのレイアウト全体を反転させる必要がある。Google Stitch はRTL対応のUIを明示的にプロンプトで指定することで生成できる。

「RTL対応UIを生成して」と指定すると、テキストの配置・アイコンの位置・スクロール方向が反転した構成で出力される。完全ではないが、RTLを意識したプロトタイプを素早く作る出発点としては有効だった。

よくある質問

Q1. 日本語と英語のUIを一つのプロンプトで同時に作ることはできますか？

可能ですが、一度に両方を高精度で作るのは難しいことが多いです。まず一方の言語でUIを確定させてから、もう一方の言語向けに調整するという二段階のアプローチの方が品質が安定します。

Q2. 英語UIを作る際に、英語でプロンプトを書くべきですか？

英語でプロンプトを書くと、より英語ネイティブに近い感覚のUIが生成される傾向があります。日本語でプロンプトを書いても英語UIは作れますが、細かいニュアンス（余白の感覚、ラベルの長さへの対応など）では英語プロンプトの方が精度が上がるケースがあります。

Q3. i18n（国際化）対応のUIをStitchで作ることはできますか？

プロトタイプレベルであれば可能です。「テキストは変数で管理する想定のレイアウト」と指定することで、テキストが長くなっても崩れにくい構造のUIを生成できます。ただし実際のi18nライブラリとの連携は、生成後の実装段階で対応する必要があります。

Q4. 英語圏のデザイントレンドに合わせたUIを生成できますか？

「最近の英語圏のSaaSアプリのスタイルで」「Material Design 3に準拠したUI」などとトレンドやデザインシステムを明示することで、それに近いUIを生成できます。ただし最新トレンドへの追従精度にはばらつきがあり、参考UIの特徴を具体的に言語化して指定する方が確実です。

Q5. 英語UIで使うカラーパレットに違いはありますか？

色彩感覚に文化的差異はありますが、UIのカラーパレット自体はグローバルで共通するものが多いです。ブランドカラーや業種に合わせた指定をすれば、言語に関係なく適切なUIが生成されます。強い赤や黄色が持つ意味合いが文化によって異なる場合があるため、ターゲット地域のカラー感覚を意識した指定を入れるとより精度が上がります。