「このサービス、ちょっと古くなってきたよね」という話が社内で出始めたのは半年前のことだ。ブランドの方向性が変わったのに、UIがその変化についていけていない。ロゴとカラーだけ変えても、UIの構造や雰囲気が古いままでは「リブランディング」の実感が生まれない。
そこから始まった「UIの全面刷新」プロジェクトに、Google Stitch を中心ツールとして使った。古いUIから新しいブランドイメージへの移行プロセス、Stitch が力を発揮した場面と限界があった場面、3ヶ月の変化を記録する。
結論から言うと
リブランディングのUI刷新において、Google Stitch は「新しいブランドイメージを素早くビジュアル化して共有する」フェーズで圧倒的に効果的だった。「新しいブランドがUIとしてどう見えるか」をステークホルダーに伝えるためのモックアップを、従来の10分の1のスピードで作れた。一方で「既存UIの良い部分を継承しながら刷新する」という段階的な移行設計は、Stitch だけでは難しく、人間の判断が重要だった。
リブランディングとUI刷新の背景
このサービスは創業から5年が経過したBtoC向けのサブスクリプションサービスだ。最初のUIは「とにかく動くものを作る」フェーズで設計されており、ブランドのコンセプトも今とは違った。現在のブランドは「シンプルさ・信頼・長く使える価値」を大切にしているが、既存UIは「機能が多い・情報量が多い・少し賑やかな雰囲気」という方向性だった。
ユーザーアンケートでも「使いにくくはないが、洗練されていない」という声が複数あった。新規ユーザーの初回離脱率が高いという課題も抱えており、「UIの印象がブランドと合っていないことが原因では」という仮説があった。
「段階的刷新」か「全面刷新」か
UI刷新の方針を決める段階で「段階的に変える」か「全面的に変える」かの議論があった。段階的刷新はユーザーへの負担が少ない一方、中途半端な期間に「古いUIと新しいUIが混在する」状態が生まれる。全面刷新は移行コストが高いが、ブランドの刷新感がユーザーに伝わりやすい。
最終的に「主要な6画面を優先的に全面刷新し、残りは段階的に移行」という方針にした。この6画面の刷新デザインを作るために Stitch を活用した。
ブランドプロンプトの作成
Stitch を使う前に、新しいブランドのコンセプトをプロンプトに変換する作業をした。ブランドガイドライン（カラー・フォント・トーンオブボイス）とターゲットユーザーのプロフィールを組み合わせて「ブランドプロンプト」を作った。
ブランドプロンプトの内容：「[サービス名]のUIリニューアル。ブランドコンセプト：シンプルさ・信頼・長く使える価値。ターゲット：30〜45歳の仕事が忙しいビジネスパーソン。カラー：ディープネイビー×オフホワイト×アクセントゴールド。フォント：セリフ体とサンセリフ体の組み合わせ（見出しにセリフ、本文にサンセリフ）。避けるもの：過剰な装飾・賑やかな配色・機能の詰め込み。目指すもの：落ち着いた高級感・情報の取捨選択を感じさせるUI」——このブランドプロンプトを各画面のプロンプトの冒頭に置くことで、すべての画面が一貫したブランドトーンを持つようになった。
3ヶ月のプロセスを振り返る
実際の刷新プロセスを月ごとに振り返る。
1ヶ月目：ビジョンの可視化
最初の1ヶ月は「新しいブランドのUIがどう見えるか」をステークホルダーに共有するためのモックアップ作成に集中した。Stitch でブランドプロンプトをベースに、6画面それぞれの初稿を複数パターン生成した。
この段階での Stitch の価値は非常に高かった。従来なら「デザイナーが方向性案を作る→レビュー→修正→再レビュー」に2〜3週間かかっていた。Stitch を使うことで、同じ作業を3日で完了し、4パターンの方向性案をステークホルダーに見せることができた。
経営陣・プロダクトマネージャー・カスタマーサポート（ユーザーの声を最もよく知る）が方向性を見て選んだのは「最もシンプルで情報を絞ったパターン」だった。デザイナーの私が「これかな」と思っていたパターン（少しデザインとして凝ったもの）ではなかった。Stitch で複数案を短時間で作れたからこそ、この選択を得られた。
2ヶ月目：詳細設計とユーザー検証
方向性が決まった後、Figmaでの詳細設計に入った。Stitch で選ばれたパターンをベースに、コンポーネントを整理し、レスポンシブデザインの詳細を詰め、実装に必要なデザインシステムを構築した。この段階では Stitch の出番は減り、Figmaでの精緻化作業が中心になった。
並行して、既存ユーザー10人を対象にプロトタイプのユーザーテストを実施した。「新しいデザインを見てどう感じるか」「以前より使いやすいか」を確認した。結果は概ね好評だったが、一部の機能の場所が変わることへの戸惑いも見られた。これを受けて、変更が大きいナビゲーション部分にガイドツールチップを追加することにした。
3ヶ月目：移行設計と既存ユーザーへの配慮
3ヶ月目は「既存ユーザーが新UIに移行しやすくする」ための設計に集中した。全面刷新とはいえ、5年間使い続けているユーザーにとって「使い慣れたUIが急に変わる」ことはストレスになる。
この段階でも Stitch を活用した。「UIが変わったことをユーザーに伝えるお知らせバナー」「変更点をハイライトするオーバーレイUI」「移行期間中の『以前のUIに戻す』ボタンのデザイン」——これらの移行支援UIのデザインを Stitch で素早く作り、チームで検討した。
リブランディングUI刷新で Stitch が効いたこと・限界
3ヶ月を経て、改めて Stitch の貢献と限界を整理する。
- 効いたこと1：ビジョンの高速可視化——「新しいブランドのUIはこういう見た目」を短時間で複数パターン作れた
- 効いたこと2：ステークホルダー合意の加速——言葉だけで方向性を議論するより、ビジュアルがあることで合意が速まった
- 効いたこと3：継続的な発散——「こんな表現もあるか」という発見を3ヶ月通じて継続的に得られた
- 限界1：既存UIとの継承設計——Stitch は新しいUIを生成するが「どこを変えてどこを残すか」の判断はできない
- 限界2：デザインシステムの一貫性——複数回に分けてStitchで生成したUIの細部（ボタンの角丸・余白のピクセル値）が微妙にバラつく
- 限界3：ユーザーへの移行配慮——既存ユーザーの使い慣れたパターンへの配慮は、ユーザーの文脈を知っている人間が判断する必要がある
よくある質問（FAQ）
Q1. リブランディングのUI刷新でまず Stitch で何を作るべきですか？
A. 「新しいブランドの世界観を伝える代表画面」を1〜2枚作ることから始めることをすすめます。全画面を一度に考えず、「このサービスの顔となる画面」だけで新しいブランドのUIがどう見えるかを確認する。この1枚がステークホルダーとの合意形成の起点になります。
Q2. 古いUIと新しいUIを Stitch で比較する方法はありますか？
A. 直接の比較機能はありませんが、「現在のUIのスクリーンショットを言語で説明し、その課題を解決した新しいUI」というプロンプトの書き方が効果的でした。現在のUIの問題点（「情報が多すぎる」「色使いが賑やか」）を課題として書き、「それを解決したUI」を生成させることで、方向性の転換を意図した出力が得られます。
Q3. リブランディングで Stitch を使う際、ブランドガイドラインはどう活用しますか？
A. ブランドガイドラインの要素（カラーコード・フォント指定・ブランドの言葉・避けるべき表現）をまとめた「ブランドプロンプト」を最初に作り、全画面のプロンプトの冒頭に置くことが最も効果的でした。この定型文があることで、バラバラに生成しても一貫したブランドトーンのUIが出やすくなります。
Q4. 既存ユーザーに新UIを受け入れてもらうためのデザインのコツはありますか？
A. 「変えること」より「変えないこと」を意識的に決めることが重要でした。ユーザーが最も慣れているナビゲーションの構造・主要機能の場所・操作フローは極力維持し、カラー・フォント・余白などの「見た目」を変える。「機能が変わった」より「見た目が新しくなった」という受け取り方が、既存ユーザーの移行ストレスを下げます。
Q5. リブランディングプロジェクトで Stitch を使う上での最大の注意点は何ですか？
A. 「Stitch の出力がブランドガイドラインと合っているか」を毎回確認することです。ブランドプロンプトを入れても、細部（アイコンのスタイル・ボタンの形・写真のトーン）がブランドガイドラインと微妙にずれることがあります。Stitch の出力を「ブランドとして正しいか」の視点でレビューするプロセスを設けることが、品質を保つカギでした。
Q6. リブランディング完了後、Stitch の役割はどう変わりましたか？
A. 刷新後は「新機能のUI設計」と「小さな改善案の検討」に使うようになりました。リブランディング中の「ビジョンの可視化」フェーズとは役割が変わり、定常的な「日々の設計サポート」として機能しています。ツールの使い方は、プロジェクトのフェーズに合わせて変化させることが大切です。
まとめ
リブランディングのUI刷新プロジェクトを通じて、Google Stitch は「変化のビジョンを速く形にするツール」として大きな価値を発揮した。5年ぶりのUI刷新という大きな変化を、ステークホルダーに伝え・チームで合意し・ユーザーに届けるプロセスを、従来より格段に速く進めることができた。
リブランディングは「見た目を変えること」ではなく「ブランドの価値をUIで体現すること」だ。その過程で Stitch は「体現の仮説を次々と可視化してくれるパートナー」として機能した。3ヶ月前と今では、サービスのUIだけでなく、チームの「UIをビジュアルで議論する文化」も変わった。その変化の触媒として、Stitch は確かな役割を果たしてくれた。
