「こういう雰囲気にしたいんですが、うまく説明できなくて」
ホームページ制作のヒアリングで、毎回必ずこの場面がある。クライアントは「何となくのイメージ」を持っている。でもそれを言葉にする語彙がない。
「シンプルで洗練された感じ」「清潔感がある」「高級感があるけど近づきやすい」。これらはどれも正確ではない。「シンプル」と「ミニマル」は違う。「高級感」にも方向性がある。
この言語化の問題を解決するために作ったのが「Brand Guide Builder」だ。ビジュアルを選ぶだけでブランドガイドが完成し、ChatGPTやClaudeへの最適なプロンプトが自動生成されるWebアプリだ。
問題の本質：デザインの言語化ができない
WEB制作でよくある失敗パターンがある。ヒアリングで「おまかせで」と言われて作ったものが、全然イメージと違ったというケースだ。
これはクライアントが悪いわけではない。デザインの語彙を持っていない人に「どんなデザインがいいですか？」と聞いても、正確に答えられないのは当然だ。
逆に、クライアントが「こういう参考サイトがあります」と10件の画像を送ってくることもある。しかしその10件がバラバラなスタイルだったりする。「全部好きなんだけど、どれに近いのかよくわからない」という状態だ。
ヒアリングの質を上げるためには、クライアントに「選ぶ」という行為をしてもらう必要がある。「どんなデザインがいいですか？」ではなく「この2つを見てどちらが近いですか？」という問い方に変える。
ChatGPT画像生成プロンプトが核心になった
最初の設計では「ブランドガイドシートを作るツール」として考えていた。カラーパレット・フォント・写真のトーン・ブランドパーソナリティを整理した資料を出力するものだ。
しかし設計を進める中で、より実用的な価値に気づいた。ChatGPTやMidjourneyで画像を生成するとき、「高品質な出力を得るためのプロンプト」を書くことが難しい。デザインの知識がある人なら「cinematic lighting, shallow depth of field, editorial photography」のような指定ができる。しかしそういった言葉を知らない人が使うと、出力が凡庸になりがちだ。
「Brand Guide Builderで選んだ内容が、そのまま最適なAIプロンプトに変換されたら」という発想が生まれた。ユーザーは選ぶだけ。ツールが裏でプロンプトを最適化する。これがこのアプリの核心価値になった。
10ステップのビジュアル選択ウィザード
アプリのメインコンテンツは「10ステップのビジュアル選択ウィザード」だ。各ステップで画像やデザインサンプルを見ながら、自分のブランドに近いものを選ぶ。
10ステップの内容は次の通りだ。
- 世界観：韓国風・モード・ナチュラル・和モダン・北欧・インダストリアルから選択
- 写真トーン：モノトーン・ベージュセピア・ダーク・ブライト・ナチュラル・フィルム調から選択（3秒フェードで複数画像を確認できる）
- 全体の印象：スタイリッシュ・高級感・ミニマル・ポップ・ナチュラル・クラシックから選択
- 温度感：クール・ニュートラル・ウォームから選択
- 余白感：広め・標準・タイトから選択
- カラートーン：6種のカラーセットから選択
- メインカラー：12種のカラーから選択
- フォント雰囲気：5種（実際のフォントで表示）から選択
- 素材テクスチャ：コンクリート・ガラス・ファブリック・ウッド・メタル・マーブルから選択
- コントラスト：3段階から選択
すべての選択はビジュアルで行う。テキストだけで選ぶのではなく、実際の画像やデザインサンプルを見ながら「これに近い」を選んでいく。言葉の語彙がなくても選べる設計だ。
技術選択とアプリの構成
技術スタックはReact + Vite + Tailwind CSSだ。フロントエンドだけで完結する構成で、バックエンドは不要だ。
アプリのフローは5画面構成だ。
- welcome：アプリの説明と開始ボタン
- businessInfo：ビジネス情報の入力（業種・ブランド名・ターゲット・コンセプト・地域・補足・ロゴアップロード）
- wizard：10ステップのビジュアル選択
- confirm：選択内容をブランドボードとして可視化・確認
- prompts：4種のAIプロンプトを自動生成（ブランドシート/HP/チラシ/バナー）+ ChatGPT・Claude連携ボタン
最終画面のプロンプトは4種類生成される。ブランドガイドシート作成用・ホームページデザイン用・チラシデザイン用・バナー用。ワンクリックでChatGPTやClaudeに直接送れるボタンも付いている。
制作で苦労した部分
画像素材の準備が最も時間がかかった。10ステップ×複数選択肢×複数画像という量の素材が必要になる。世界観だけで6種類×4枚=24枚だ。
素材はiCloudに保管していたブランドイメージ参考画像と、ChatGPTで新規生成した画像を組み合わせた。特に「写真トーン」のステップは3秒フェードで複数画像を見せる仕様にしたため、各トーン2〜3枚の一貫した画像が必要だった。
実装面での工夫は、option.imagesという配列を設定すればどのステップでも自動的にスライドショー表示になる仕組みにしたことだ。画像があればスライドショー、なければCSSで表現というフォールバック構造にした。新しいステップの追加や画像の入れ替えが容易になっている。
Noteでの販売計画
このアプリはNoteで販売予定だ。価格は1万円を想定している。
ターゲットは2種類ある。一つは「HP制作を依頼する前に、自分のブランドイメージを整理したい」という事業者。もう一つは「ChatGPTやClaudeで画像を生成しているが、いつも出力が微妙」というAIユーザーだ。
graciauto自身も、新規クライアントのヒアリングにこのツールを使う。「このアプリを先に使っておいてください」と伝えれば、ヒアリング前の段階でブランドイメージが整理された状態になる。制作の方向性が決まりやすく、修正コストが減る。
ヒアリングツールとして使いながら、Noteで販売するという2つの活用を同時に実現する設計だ。
まとめ
Brand Guide Builderは「デザインの言語化ができない」という問題を「ビジュアルで選ぶ」という体験で解決するアプリだ。10ステップの選択がそのままAIプロンプトに変換される仕組みが核心価値だ。
デザイナー不在でもブランドガイドが作れる。ChatGPTの画像生成で「いつも同じような出力になる」という悩みから抜け出せる。このアプリの詳細はgraciautoまでお問い合わせください。