最初の一週間は、正直なところ「これで本当に使えるものが作れるのか」という疑念のほうが大きかった。
私はWebの知識は多少あるが、デザインを専門で学んだことはない。Figmaも触ったことはあるが、使いこなせているとは言いがたかった。そんな状態で Google Stitch を使い始め、30日後には実際に個人開発アプリのUIを一通り仕上げることができた。
この記事は、その30日間の記録だ。「AIがデザインしてくれるらしい」という期待だけで始めた人間が、何につまずき、どこで突破口を見つけたか——同じような立場の人に伝わることを願って書く。
1〜7日目：プロンプトが漠然としすぎていた
最初の一週間で気づいたのは、「プロンプトが漠然としていると、アウトプットも漠然とする」という当たり前のことだ。
「シンプルなアプリのホーム画面を作って」と入力して出てきたUIは、確かにそれらしいものだった。だが「それらしい」だけで、自分が作りたいものとは何かが違う。何が違うのかを言語化できないまま、再生成を繰り返していた。
この迷子状態から抜けるきっかけになったのは、「作りたいUI」を言語化する練習だった。参考にしたいアプリのスクリーンショットを見て、「なぜこれが好きか」を文章にする。その文章をそのままプロンプトにしてみる。すると、出力が一気に自分の意図に近づいた。
8〜14日目：「セクション単位で作る」に切り替えた
一週目の反省を踏まえて、画面全体を一度に作ろうとするのをやめた。ヘッダー、カード一覧、ナビゲーションバー——セクションに分けて、それぞれを別々のプロンプトで作るようにした。
この方法にしてから、格段に「意図通りの出力」が増えた。一度に指定する情報が少ないほど、AIが迷わず生成できるらしい。複雑な画面も「積み木を積む感覚」で組み立てられるようになった。
また、この週から「生成→コードを確認→気になる部分を特定→再プロンプト」というサイクルが定着した。HTMLとCSSを読む習慣が自然につき、コードへの理解が副産物として積み上がっていった。
15〜21日目：スタイルの一貫性という壁
個別のセクションは作れるようになったが、「画面をまとめたときに統一感がない」という問題にぶつかった。色、余白の感覚、フォントサイズ——セクションごとに少しずつズレていた。
解決したのは、プロンプトに毎回「カラーパレット：〇〇、フォント：〇〇、余白の基準：〇〇」というスタイル定義を冒頭に書くようにしたことだ。変数のように共通定義を使い回す感覚に近い。
この習慣を入れてから、生成するたびにスタイルが崩れる問題が大幅に改善された。「スタイルガイドを書いてからプロンプトを書く」という順序が自分の中に定着した週だった。
22〜28日目：全画面を繋げてみる
3週目までに作った各セクションを組み合わせ、「アプリ全体の画面フロー」を組み上げる作業をした。ホーム、詳細、設定、プロフィール——それぞれの画面を一貫したスタイルで生成し直し、並べてみた。
実際に「流れとして見る」と、単体では気にならなかったことが気になり始める。たとえば、ホームから詳細に遷移したとき、ヘッダーの高さが違う。設定画面だけフォントが若干大きい。こういった細かいズレが、全体として見ると「なんか違う感」になっていた。
この修正作業が一番地味で時間もかかったが、同時に「デザインの一貫性とは何か」を体感として学んだ時期でもあった。
29〜30日目：完成と振り返り
30日目、個人開発アプリの主要5画面のUIが一通り完成した。専門知識ゼロから始めた割に、「それなりに見える」ものができたと思っている。
この30日で一番変わったのは「UIへの語彙」だ。以前は「なんか違う」としか言えなかったものを、「余白が均等でない」「階層が視覚的に整理されていない」「CTAが目立っていない」と言語化できるようになった。
Google Stitch が教えてくれたのは、デザインの完成品だけでなく、デザインを語る言葉だったかもしれない。
30日で感じたツールの特性
- プロンプトの質が直接アウトプットの質に反映される
- 一度に作る範囲を小さくするほど精度が上がる
- スタイルガイドを先に定義する習慣が一貫性を生む
- 生成されたコードを読む習慣がデザイン理解を深める
- 完成には「生成→確認→調整」の反復が必要
よくある質問
Q1. HTMLやCSSの知識がまったくなくても使えますか？
使い始めることはできます。ただし、生成されたコードを確認・調整するときに最低限の読み書きができると作業効率が大きく上がります。「読めるけど書けない」程度でも十分で、コードを書く経験がなくても慣れてくれば理解できるようになります。
Q2. 30日でどの程度の規模のUIを作りましたか？
主要5画面（ホーム、一覧、詳細、設定、プロフィール）と、各画面で使うカード・ボタン・ナビゲーションなどのコンポーネントを複数作りました。実際のアプリ開発に使えるレベルを目指し、一通り形にすることができました。
Q3. 毎日どのくらいの時間を使いましたか？
平均して1〜2時間程度です。仕事の合間や夜に少しずつ進めました。集中した日もありましたが、短時間でも継続することで、プロンプトの組み立て方が自然に磨かれていきました。
Q4. 一番つまずいた点は何でしたか？
「スタイルの一貫性を保つこと」が最も難しかったです。セクション単位で生成を繰り返していると、微妙なズレが積み重なります。スタイル定義をプロンプトの冒頭に固定する習慣が確立するまでが、一番苦労した期間でした。
Q5. デザイン未経験でも「良し悪し」の判断はできるようになりますか？
なります。使い続けることで「何が良いか」への感度が自然に育ちます。参考になるUIを意識的に観察し、言語化する習慣と組み合わせると、成長が加速します。ツールを使いながら学ぶのが、最も効率的な方法だと実感しています。
Q6. 完成したUIはそのまま開発に使えますか？
基本的な構造としては使えますが、本番開発に組み込む際には調整が必要です。レスポンシブ対応、アクセシビリティ、実際のデータとの連携など、生成後の作り込みは発生します。「雛形として使う」という位置づけが現実的です。
まとめ
デザイン未経験でも、30日あれば「形になるUIを自分で作れる」という感覚は十分に得られる。Google Stitch はその入り口として、かなり優れたツールだった。
- 最初の一週間：プロンプトを言語化する訓練に使う
- 二週目：セクション単位に分けて作る習慣をつける
- 三週目：スタイルガイドで一貫性を管理する
- 四週目：全体を繋げて「流れ」で確認・調整する
30日後に振り返ると、完成したUIだけでなく、デザインへの解像度が上がっていることに気づく。それがこのツールを使い続ける理由になっている。
