毎日投稿80日目
こんにちは。今日は、いま制作中のLPの途中経過を共有します。
架空のクラフトソーダブランド「PON!」のLPです。今回のテーマは「AIと一緒につくる過程」。AIに全部任せるのではなく、どこをAIに任せて、どこを自分で決めたのかを中心に書いていきます。
① ワイヤーフレームはAIに一度つくってもらう
まずはAIにワイヤーフレームを作ってもらいました。
ゼロから考えると手が止まりやすいので、「たたき台をAIに出してもらい、そこから自分で考える」という進め方にしています。
② FVの構成は、参考を集めてからAIと一緒に考える
FV（ファーストビュー）は、Pinterestで参考を探すところから始めました。
目に留まったのは、イラストを取り入れているデザインと、迫力のある画像を使ったデザイン。この2つを組み合わせたら面白くなりそうだと思い、それをもとにAIと構成を考えました。
③ 元になる画像は、プロンプトからAIで生成
FVの土台となる画像は、Claudeに画像生成用のプロンプトを出してもらい、AIで生成しました。
あわせてFVの構成案も出してもらい、土台ができたところで、あとは自分でFigmaで組み立てています。
④ フォントはAIの提案から変えた
ここが今回いちばん「自分で考えた」部分です。
Claudeからはメインコピーをゴシック体にする案が出ていましたが、私は太くて丸みのあるフォントを選びました。
理由は2つあります。
炭酸のシュワッとした丸み・やわらかさを表現したかった
商品の勢いに負けない迫力を出したかった
さらに「シュワっと」の部分を大きくして、ページを開いた瞬間に視線を止めることを狙っています。
AIの提案は「間違いではない」けれど、「このブランドらしさ」まで考えると、自分で判断する部分が残る。そこがデザインの面白さだと改めて感じました。
⑤ 前回の学びを今回に活かす
FVの下にある、フレーバー名が流れる帯。
これは前回、CSSで「お知らせの帯」を実装したことがあり、「これ今回のLPでも使えそう」と思って採用しました。
一度作ったものが、次の制作でアイデアとして使えるようになってきたのは、少し成長を感じたポイントです。
ここまでで感じたこと
AIは「0→1」のたたき台をつくるのがとても速い。
一方で、「なぜこのフォントなのか」「どこで視線を止めたいのか」といった判断は、自分で考えないと決まりませんでした。
AIで土台をつくり、自分の意図で仕上げる。
この役割分担が、今の自分にはしっくりきています。
次は残りのセクションを作り込んでいきます。完成したらまた共有します！
