ここれまで自社開発ソフトウェアのテスト現場で、「バグがないか」「仕様通りに動くか」をチェックしてきた元テスターです。
最近、キャリアのステップアップとしてディレクション業務を行うようになりました。これまではテスターメインでディレクターの補佐的な立ち位置でしたが、ついに今回、ホームページ制作をスタート段階から任せてもらえることになったのです。
ヒアリング、現状調査、サイト構成の検討……とチームの力を借りながらも順調に進めてきました。
が、最大の壁が立ちはだかりました。それは、「頭の中にあるイメージをどうやって形にするか」という問題です。
デザイン知識ゼロ、Figmaも「見る専門」だった私
私はデザインの専門教育を受けたわけではありません。Figmaなどのデザインでよく使われるツールも、これまでは修正箇所の指摘や仕様書としての確認といった、テスターとしての使い方がメイン。
白紙のキャンバスにイチから図形を並べてデザインを作るなんて、自分にはハードルが高いと感じていたのです。
そんな私に、企画開発部のマネージャーで愛犬ファーストのエンジニアＴさんが紹介してくださったのがGoogleのAIデザインツール「Stitch」でした。
言葉が形になる衝撃
Stitchの最大の特徴は、「テキスト（プロンプト）を入力するだけで、AIがUIデザインを自動生成してくれる」という点です。
デザインツールを使いこなす技術がなくても、私たちが普段使っている「自然言語」で指示を出すだけで、数秒後には画面が組み上がっていきます。
たとえば、クライアントへのヒアリングで伺った「どんなHPにしたいか」「会社の強みは何か」といった生の声を、そのままプロンプトとして入力してみるのです。
「既存サイトのコンテンツを踏襲しつつ、信頼性と新しさを感じさせる企業サイトのトップページ。そのワイヤーフレームを作成して」
指示はこれだけで、数秒後にはプロが手がけたようなレイアウトが目の前に現れました。これまで「仕様書」という言葉の羅列でシステムを見てきた私にとって、自分が定義した言葉が、そのままビジュアルとして形になる体験は、魔法のように感じるほど簡単な作業でした。「このボタンをここへ配置して……」とマウスをカチカチ動かす必要はなく、非エンジニアの私にとって、やりたいことを言葉にするだけで完結する、最高のショートカットツールになったのです。
この程度であれば大丈夫ですが、細かいところで英語表記があるので、日本語になってくれるともっとサクサク作業が進みそうな感じがします。
一つ目の壁：AIとの「距離感」とコツ
どんどん出来上がっていくレイアウトに、つい楽しくなってしまった私。欲が出て「他のページも作って！」「詳細ページも一気に作って！」と、次第に雑なプロンプトを投げ続けてしまいました。
すると、困ったことが起き始めました。生成されるデザインのトンマナがバラバラになったり、全く不要なコンテンツが紛れ込んだり……
まさに「指示出し（ディレクション）の重要性」を痛感しまいした。
Stitchを使いこなすコツは「一気にたくさんのページを作ろうとしないこと」でした。
まずはトップページを作り込む：まずはメインとなるページの構成をしっかりと固める。
コンテンツを整理してから次へ：基本のデザイン要素が決まってから、次のページへと段階的に進む。
このようにステップを踏むことで、AI側もこちらの意図を学習してくれるのか、統一感が出たり、ヘッダー・フッターのばらつきがなくなるなど、サイト全体のトンマナが揃って、驚くほどスムーズに制作が進むようになりました。
これは、AIを使ったディレクションでも共通する鉄則だったのです。
二つ目の壁：Ctrl+Vが効かない！？
Stitchで作ったデザインをFigmaへ移そうとしたとき、トラブルが発生しました。
「Figmaにエクスポート→クリップボードにコピー」まではできたのに、Figma側でいくら Ctrl + V を押しても何も貼り付けられないのです。
調べてみて原因を切り分けていくと、答えはツール間の仕様にありました。StitchのデータをFigmaで再現するには、仲介役となる html.to.design というプラグインが必要だったのです。これも一つ、勉強になりました。
ついに完成！初めてのワイヤーフレーム
Figmaの白いキャンバスに、私が言葉で指示した通りのワイヤーフレームが表示された瞬間、「これなら進められる」と自信がつきました。
白紙から悩むのではなく、叩き台があることで“何を足すか／何を削るか”の判断に集中できます。
ここから先はデザイナーの工程ですが、しっかりと作りこんだワイヤーがあることで議論の軸が揃います。
「こんな感じ」ではなく「この情報を、この順番で、こう見せたい」と言える。ディレクターとしての自分が、やっとスタートラインに立てた気がしました。
加えてHTMLでエクスポートできる点も大きな利点でした。
実装担当と共有する際に、“雰囲気”じゃなく“構造”として共有できるので、デザインや実装のズレが減って、進行が一段スムーズになると思います。
まとめ
「非エンジニアだから」「デザインは専門外だから」と二の足を踏んでいましたが、AIの力を借りれば、初心者の私でも一歩踏み出すことができました。
完璧を目指さなくてもいい：AIに最初の「叩き台」を作ってもらうことで、ゼロから悩む時間が消えました。
学習コストを削減できた：限られた時間の中で、一からデザインツールを使いこなす負担を減らせました（今回はリリースまであまり時間がなかったこともあります）
トラブルも経験になる：プラグインやの壁にぶつかったことで、ツールの使い方が一段階レベルアップしました。
テスターの視点は武器になる：AIが叩き台を作ってくれたことで、私は「ここにFAQがないと困るかも」「ここの動線は分かりづらい」といった“抜け漏れ”の確認に集中できました。必死にデザインを作って視点が抜ける、という事態を避けられたのも大きかったです。
「デザインに苦手意識がある方」「デザイナーやエンジニアとの認識合わせをスムーズにしたい方」は、ぜひ一度使ってみてください！
