GPT-6 Astra でウェブサイトデザイン：ランディングページに必要な画像を計画する

画像より先にセクションを書き出す

まずページの構成を書きます。ヒーロー、3つの機能紹介の行、SNS シェア用カードです。機能紹介の各行にはテーマを1つずつ割り当てます。Fold では、紙の手触り、表紙の素材、バッグに入れたときの大きさを選びました。オンラインでノートを注文する前に、購入者が気にする点だからです。

手元にない事実も書き出します。価格、ページ数、製本は不明のままにし、画像やキャプションがそれらを暗に約束してしまわないようにしました。

参考資料は重要です。2026年9月16日、Prajwal Tomar（@PrajwalTomar_）は、Astra が最初に作ったランディングページを「典型的な AI の粗製品」（typical AI slop）と評し、そのうえで多数の実在するウェブサイトを調べて自分のページを批評するよう Astra に頼みました。Astra は作り直す前に 28 か所の変更を提案しました。画像計画は同じ考え方をもっと早い段階で使います。何かを生成する前に、各画像が果たすべき役割を決めるのです。

• GPT-6 Astra でランディングページを作る (英語)

画像ごとに決定事項を1行で求める

セクションごとに、画像の目的、縦横比、必ず見えているべきもの、ページのテキストを置く位置、既存の画像を再利用できるかどうかを求めます。何も生成しないよう Astra に伝えます。計画は判断のための文書なので、1回で見直せる短さに保ちます。

架空の文具店 Fold のアイボリーのノートのローンチに向けた、1ページのランディングページの画像を計画してください。セクション：ヒーロー、3つの機能紹介の行（紙の手触り、表紙の素材、バッグに入れたときの大きさ）、SNS シェア用カード。各画像について、目的、縦横比、必ず見えているべきもの、ページのテキストを置く位置、このキャンバスにすでにある画像を再利用できるかどうかを示してください。価格、ページ数、製本は不明のままにしてください。190 語未満で。画像は生成しないでください。

Astra が返した計画を見直す

Astra は、テキストを別の列に置く 1:1 のヒーロー、テキストを横に添える 4:3 の機能紹介画像3枚、そしてノートを右、見出しを左に置く 1.91:1 の SNS 用カードを計画しました。全体を通して、柔らかな自然光、アイボリーとグレーの色調、ブランドロゴのない小物を使うよう提案しました。

受け入れる前に、縦横比をページのテンプレートと照らし合わせます。1:1 のヒーローは2カラムのレイアウトに合いますが、全幅のヒーローには横長の画像が必要です。計画を変えるなら今です。今なら1文を書き換えるだけで済みます。

再利用の判断を真剣に受け止める

画像の再利用で時間を節約できるのは、それがセクションの役割に合っている場合だけです。Astra はフラットレイのコンセプトをヒーローに使うことを暫定的にしか認めず、紙のクローズアップにはどちらのコンセプトも再利用しないとしました。どちらも細部を十分に見せていないからです。横長の画像の一部を拡大すると、たいていぼやけた説得力のない質感の写真になります。

2つのセクションは事実に左右されます。表紙の素材には確認が必要で、バッグの画像には実際の寸法が必要です。担当者が答えるまで、それらの画像は保留と明記しておきます。間違った大きさを見せる画像より、プレースホルダーのほうがましです。

• ブリーフを使って2つのコンセプトから選ぶ

足りない画像を計画の順に生成する

計画の縦横比と必須の内容を、各画像プロンプトの固定部分として使います。最初にヒーローを生成します。その光と小物が、ページ全体のスタイルを決めるからです。続いて機能紹介の画像、最後に横長の SNS 用カードを生成します。

どの画像でも、テキストを置く領域は空けておきます。見出しやキャプションはページ上で、または編集できるテキストとして加え、コピーを変えるたびに新しい画像が必要にならないようにします。

• 正方形と縦長のキャンペーン画像を計画する

1つのボードで全体を確認する

完成した画像を、ページの順に Ciyo のキャンバスへ並べます。1回の撮影で撮ったようなまとまりがあるかを見ます。光の向きがそろっている、ノートの色が同じ、ある画像にあった小物が次の画像で消えていない、といった点です。

そのうえで、各画像をページ上の実際のサイズで確認します。4:3 の機能紹介画像は、ノートパソコンでは画面幅の約半分、スマートフォンでは全幅で表示されることが多いため、公開前に両方で確認してください。