こんにちは。ノベルワークス所属のザワッチです！
最近、Googleが出したUI生成ツール「Stitch」を使って、非デザイナーでかつデザインセンス皆無の男がイケてるUI生成の限界に挑戦してみた記事になります。
イケてるUIとは何なのかをAIと壁打ち協力し、自分なりにイケてるUIを定義し、UIまで生成しました。
暖かい目で見ていただけると幸いです。
Googleが2025年5月のGoogle I/Oで発表した「Stitch」は、AIの力でUIデザインをシュシュッと作ってくれるツールです。
「デザインってどうやって作るの？」とか「コード書くの面倒だな…」なんて悩む必要がないくらい、テキストや画像をポンと渡せば、StitchがサクッとUIデザインとコードを生成してくれます。
たとえば、「マラソンランナー向けのコミュニティアプリ作って！」ってテキストを入力するだけで、スマホアプリのモックアップやウェブのダッシュボードがバッチリ出てきます。
手書きのスケッチや画像をアップロードしてもOKで、生成されたデザインは、Figmaにエクスポートしたり、HTML/CSSのコードとして吐き出せます。
チャットで「ここ、もうちょっとポップな色にして」とお願いすれば、リアルタイムも調整可能です。
というように、デザイン初心者、デザイナー、開発者という幅広いターゲットに刺さるツールになっています。
2025年6月時点で、Stitchは公開ベータ版として212カ国で使えます（ただし英語のみ）
まずは、GeminiとイケてるUIについて壁打ちをします。
壁打ちのゴールは、イケてるUIの普遍的要素を定義するところとしました。
ということで、最初の文章は、以下のようにしました。
まず、イケてるUIとして考えられる一般的な要素を提示している。
確かに、そうだなと思う内容ばかり。
次に、この一般的な要素をさらにGemini味に深ぼった内容が来るらしい。
iphoneを使っているからこそ、確かに情報量を少なくして、アイコンが直感的であるという点は自分でも感じるところ。
視覚的ヒエラルキーという言葉は初めて知ったが、人間が目で見る順番とアクションを一致させるということなのだろうか。
確かに、新規作成とかボタンをクリックしても、なにもローディング画面が出なかったり、ボタンがdisabledにならなかったら、不安になる。
AI Chatアプリ系は全部左側がサイドバーで、チャット履歴が見れるというのが自分の中にあって、逆にそれに倣ってなかったら、ストレスを感じるのかも。
という風にたくさん出てきました。
Geminiさんから質問が来ました。
私からはGeminiが挙げてくれた普遍的要素で特に共感した点とその理由、そして、それら普遍的要素を盛り込んだUIを生成するための根底にある考え方を乞いました。
なるほど、誰が使うのか、そのユーザの利用シーンと何を目的としているのかを深堀りし、最適なUIを考える必要があるということらしい。
おそらくGeminiは私にただイケてるUIを作りたいというのは不適切で、まず誰にどのような場面で何を目的としたユースケースを考えないといけないと感じた。
なので、目的とユーザーの目的を明確する。
枕が個人的に欲しいので、見た人が絶対枕を買いたいと思うような販売サイトというテーマで行く。
UIの目的：ユーザに枕を購入させる
Uiを使う層：20歳以上の男女
イケてるUIの肝らしいが、具体的に何が重要で色味もわからないためどういう風に設計したらいいかわからない。
聞いてみる。
なるほど、視覚的ヒエラルキーを通じて、どうやって枕を買わせるという行動に結びつけるかその導線を考えることを言っていたのか。
Geminiさん、人間の睡眠のペインを完璧に理解している模様、○○賞受賞はけっこうやってますね。
これでいけると思う！行ってみよう！
先程の壁打ちをもとに、Stitchに渡す文章をまとめてもらいます。
## 枕販売サイトUIデザインディレクション：最高の安眠体験を届ける
### 1. プロジェクト概要
「見た人が絶対枕を買いたいと思う」枕販売サイトのUIデザイン。ユーザーに究極の安眠体験を想像させ、購入へと導くことを目的とする。
### 2. UIの目的とターゲットユーザー
* **UIの目的:** ユーザーに枕の購入を促し、購入を完了させる。
* **ターゲットユーザー:** 20歳以上の男女（安眠への意識が高く、現状の睡眠に何らかの不満や改善の意欲がある層）。
### 3. 視覚的ヒエラルキー設計：ユーザーの購入意欲を高める導線
ユーザーがサイトを訪れてから購入に至るまでの感情と行動を意識し、以下のヒエラルキーで情報を提示する。
#### 3.1. トップページ（ファーストビューが最重要）
ユーザーの感情に訴えかけ、期待感を高めることを最優先とする。
* **最優先：最高の「枕の体験」を伝えるビジュアル**
* **コンテンツ:**
* **メインビジュアル（ヒーローイメージ）:** 枕に頭を乗せ、心からリラックスして安眠している人の高画質写真または動画。**「この枕を使えば、こんな素晴らしい眠りが手に入る」**と直感的に感じさせる幸福感に満ちた表情や体勢を強調。
* **キャッチコピー:** メインビジュアルの上に重ねる形で、短く、心に響く言葉。「あなたの眠りを変える究極の枕」「朝までぐっすり、夢心地の安眠を」など、具体的なメリットや感情に訴えかける表現。
* **デザイン要素:**
* **サイズ:** 画面の大部分を占める圧倒的なサイズ。
* **色:** 落ち着いた、リラックスできるトーン（例：暖色系の柔らかな光、または深い安らぎを連想させる落ち着いた青や緑）。
* **フォント（キャッチコピー）:** 太く、視認性の高い書体で、メインビジュアルに映える色。
* **動き（動画の場合）:** 緩やかで心地よい動き。
* **次に優先：ユーザーの悩みに寄り添うメッセージと解決策（枕の魅力）**
* **コンテンツ:**
* 「こんな悩みはありませんか？」「当社の枕が解決します」といった共感を呼ぶ導入文。
* **枕の主要な特徴/メリット（3〜4つに厳選）:**
* 例：「首や肩の痛みを軽減」「寝返りが打ちやすい」「通気性抜群で蒸れない」「洗濯可能で衛生的」など、ユーザーが自身の悩みが解決されると想像しやすい言葉で提示。
* **アイコンや短い説明文:** 各特徴に直感的なアイコンを添え、箇条書きで簡潔に説明。
* **信頼性を示す要素（あれば）:** 「○○賞受賞」「お客様満足度No.1」といった実績や権威性を示すロゴや小さなテキスト。
* **デザイン要素:**
* **サイズ:** メインビジュアルよりは小さいが、十分な可読性と視認性を確保。
* **配置:** 横並びやグリッド形式で整列させ、情報の塊として認識しやすいように配置。
* **余白:** 各特徴の間、およびセクション全体の周囲に適切な余白を設け、視覚的な整理を促す。
* **行動を促す要素（CTA - Call To Action）**
* **コンテンツ:** 「今すぐ購入する」「詳細を見る」など、次の行動を明確に促すボタン。
* **デザイン要素:**
* **色:** サイト全体のトーンの中で最も目立つアクセントカラー。ユーザーが思わずクリックしたくなるような、鮮やかでポジティブな色。
* **サイズ:** 大きく、押しやすい形状。
* **配置:** メインビジュアルや主要な特徴の下など、ユーザーが「これだ！」と感じた瞬間に目に入る位置。必要に応じて複数箇所に配置。
* **文言:** 行動を促す明確で簡潔な言葉。
#### 3.2. 商品詳細ページ
購入への迷いをなくし、具体的なメリットと信頼性でユーザーの購入意欲を確固たるものにする。
* **最優先：多角的な視点からの商品イメージと価格**
* **コンテンツ:**
* **高画質の商品画像/動画:** 様々な角度からの詳細画像（正面、側面、裏側、生地のアップ、高さ調整機能など）。実際に人が使用している様子の動画（寝返りのスムーズさ、頭が枕に沈み込む様子など、使用感を想像させるもの）。
* **商品名と価格:** 明確な商品名と、最も大きく強調された価格表示。割引がある場合は元の価格と割引後の価格を併記。
* **デザイン要素:**
* **サイズ:** ページ上部に大きく表示し、スライドショー形式で見やすくする。
* **フォント（価格）:** 最も大きく、太いフォント。
* **配置:** 画像のすぐ隣、またはその下。
* **次に優先：具体的なメリットと技術的裏付け、お客様の声**
* **コンテンツ:**
* **詳細な特徴/機能:** 「素材のこだわり」「構造の秘密」「どんな寝姿勢に対応するか」など、より専門的で具体的な説明。図解やインフォグラフィックを多用し、視覚的に分かりやすく表現。
* **顧客レビュー/評価:** 星評価と、実際の利用者の声（写真付きだとさらに信頼性が増す）。具体的な悩みが解決された事例を優先的に掲載。
* **Q&A/よくある質問:** ユーザーが抱きそうな疑問を事前に解消するセクション。
* **デザイン要素:**
* **サイズ:** 見出しは中程度、本文は読みやすいサイズ。
* **配置:** グループごとにブロック分けし、スクロールで順に読ませる。レビューは購入ボタンの近くや、信頼性を高めるセクションとして配置。
* **インタラクション（Q&A）:** クリックで開閉できるアコーディオン形式など、情報をコンパクトにまとめる。
* **行動を促す要素（CTA - Call To Action）**
* **コンテンツ:** 「カートに入れる」「今すぐ購入する」ボタン。
* **デザイン要素:**
* **色:** トップページと同様、最も目立つアクセントカラー。
* **サイズ:** ページ内で常に目立つように。
* **配置:** 商品画像と価格の近くに必ず配置し、スクロールに追従する（Sticky）ボタンとして常に視認できる位置にも配置する。
### 4. 全体を通してのUIデザイン原則
* **余白の活用:** 各情報の塊の間に十分な余白を取り、情報の整理と視覚的なノイズの削減を徹底する。
* **フォントの一貫性:** 見出し、本文、キャッチコピーなど、用途に応じたフォントの太さ、サイズ、色の使い分けを統一し、高い可読性を保つ。
* **カラーパレット:** ブランドイメージに合ったメインカラーを選定し、CTAボタンなど本当に目立たせたい部分に効果的なアクセントカラーを使用。色の数を絞り、全体的な統一感を維持する。
* **マイクロインタラクション:** ボタンのホバーエフェクト、クリック時のフィードバック、カート追加時のアニメーションなど、ユーザーに操作が認識されたことを伝える細かな動きを実装し、安心感と満足度を高める。
---
このディレクションを基に、最高の「枕の体験」を伝え、ユーザーの購入を後押しする魅力的なUIの具現化をお願いします。
最高です。
さて、Geminiとの壁打ちを経て、Stitch用に生成されたプロンプトをもとに「絶対枕を買いたいと思うサイト」に対するイケてるUIの生成を行います。
以下が、出来上がったUIになります。
トップページ
商品詳細ページ
イケてる。
Stitchのベースの能力が高いのか、プロンプトがいいのかがわからないが、こんなページが巷にあっても僕だったら気づかないかもしれない。
全体的なデザインの統一感があって、文字も多くなく、ぱっと見の画像のインパクトや余白で勝負している感覚がする。
コードを見ると、画像はGoogle Photos／Drive 経由の lh3.googleusercontent.comのものが含まれているようです。
V0でも同じプロンプトで試してみる。
Stitchほど洗練さはないものの、プロンプトの指示内容は従っている様子。
Geminiでまず壁打ちをして、イケてるデザイン普遍的要素を定義しようととしましたが、その前に、そのUIに触れるユーザの目的と利用シーンを明確しないといけないと諭され、従いましたがそれが結果的に大成功でした。
壁打ち相手としてのAIの有用性とそれが結果的にイケてるUIの要件定義をしていたというところが今回の大きな気づきになりました。
Views: 0
