Q: 2カラム仕様にするなど、レイアウトの調整はできますか？

はい、可能です。プロンプトの 【デザインシステム（厳守すること）】 の項目を調整してください。以下は、2カラム（左側にコンテンツ、右側に目次の固定追従）の指示に変更した場合の、アウトプット例です。プロンプトの工夫次第で、どんなレイアウトにも可変できます。

Question 1

生成AIでワイヤーフレームを作るメリットは何ですか？

Accepted Answer

HTMLコードで出力されるため、実際のブラウザ上の挙動をリアルに体感できることです。レスポンシブの挙動も正確に確認できます。WebサイトやLP制作において、デザインツールを介さず、直接HTMLでワイヤーフレームを組むワークフローは徐々に浸透してきており、今後は主流になっていくでしょう。この記事でご紹介したプロンプトを使えば、HTMLワイヤーフレーム作成にかかる時間とコストを、極限までカットできます。

Question 2

プロンプトはGoogle AI Studio以外でも使えますか？

Accepted Answer

はい、使えます。ChatGPT、Gemini、Claudeなど、ほとんどの生成AIに対応しています。ただ、出力トークン数の上限には注意が必要です。モデルやプランによって上限は変動します。場合によっては、一回の出力ではワイヤーフレームを完全に生成できないかもしれません。その場合は、何度か追加指示を行う必要があります。

Question 3

2カラム仕様にするなど、レイアウトの調整はできますか？

Accepted Answer

はい、可能です。プロンプトの【デザインシステム（厳守すること）】の項目を調整してください。以下は、2カラム（左側にコンテンツ、右側に目次の固定追従）の指示に変更した場合の、アウトプット例です。プロンプトの工夫次第で、どんなレイアウトにも可変できます。

Question 4

Figmaなどのデザインツールにインポートできますか？

Accepted Answer

はい、可能です。Figmaのプラグインを使えば、生成されたHTMLのURLやコードを、そのままFigma上の編集可能なレイヤーとしてインポートできます。以下の記事が参考になります。

HTMLで作った画面をFigmaにインポートする方法 #ChatGPT - Qiita

【生成AI】LPのワイヤーフレームを高速で作成するプロンプト

毎月5枠限定コピーの診断・改善提案（無料）を実施中