#208 AIにデザインはまだ早い？合わせ技でLP制作

AIにデザインはまだ早い？合わせ技でLP制作

＊＊＊
📩  メルマガ無料登録でプレゼント↓
▶︎ https://chi3.substack.com/about
＊＊＊

こんにちは、ちーみつです。
AIを少しずつ取り入れて、
毎日をちょっとラクに。
生まれた余裕がやさしさを育て、
やさしさが広がる未来を願って発信しています。

今回は、AIを組み合わせて講座販売のランディングページを作った話です。
コード生成と画像生成、それぞれのAIの得意なことを活かすことで、制作の幅がぐっと広がりました。

Web制作、画像で手が止まっていませんか？

バイブコーディングでWebページ、
特に講座を案内するようなランディングページを作っていると、
「ここに、信頼性を伝えられるような画像を入れたいな…」
「でも、ちょうどいい素材がない…」
と、手が止まってしまうことはありませんか。

私も先日、作りかけのページを前にして、まさにその状態でした。
人物の写真はあらかじめ用意があったものの、講座の価値を視覚的に伝えるアイコンやイラストが足りなかったのです。

AIは「壁打ち相手」として使う

ここで試したのが、AIとの合わせ技です。

以前、ChatGPTにサイト全体のデザインを相談したときは、どうも一般的な、ありきたりな提案しか出てこないな、と感じることがありました。
デザインの根幹は、やはり人間が考える必要があるのかもしれません。

そこで今回は、AIを「デザイナー」としてではなく、「優秀なアシスタント」や「壁打ち相手」として使うことにしました。

コードと画像の合わせ技フロー

具体的な流れはこうです。

1. 土台作り（Codex CLI）
   まずはいつも通り、バイブコーディングでページの土台となるコードをAIに書いてもらいます。

2. デザイン相談（ChatGPT）
   次に、「この講座の信頼性を伝えるには、どんな画像が必要？」とChatGPTに相談。すると、「資格や信頼を象-徴する、認定バッジのようなアイコンはどうでしょう」と提案してくれました。

3. プロンプト生成（ChatGPT → Midjourney）
   そのアイデアを元に、画像生成AI「Midjourney」で使えるプロンプト（指示文）をChatGPTに作ってもらいました。
   それがこちらです。
   `a minimal line-art icon of a certification badge with a ribbon and a checkmark, representing official qualification and trust, clean thin lines, premium and refined design --ar 1:1`

4. 画像生成と加工
   出来上がった画像をページに配置し、一部は背景を消す作業をしました。
   今回はPhotoshopを使いましたが、簡単な図形ならMacのプレビュー機能や、Web上の透過ツールでも十分に感じます。

まとめ

AIに「全部おまかせ」しようとすると、まだ物足りなさを感じることがあります。
しかし、全体の設計は人間が担い、具体的な作業をAIに手伝ってもらう「合わせ技」なら、話は別です。

コードを書くAI、アイデアをくれるAI、絵を描くAI。
それぞれの得意なことを組み合わせることで、自分で作れるものの幅がぐっと広がるのを感じました。

最近はウェブページばかりですが、Chrome拡張機能やウェブアプリなども作っていきたい。
いつも思うだけで進んでないので、もっと効率よくこなして時間を作っていきます。

最後まで読んでいただきありがとうございます。

関連記事

SNS

X : https://x.com/chi3_jp
Instagram : https://www.instagram.com/chi3jp_aiart/
私のまとめサイト : https://wks3.vercel.app/

🎁メルマガ無料登録プレゼント

メルマガ登録で、以下のツールを今すぐお受け取りください。

* AIプロンプト集：AIへの質問が的確になり、思考がクリアに。
* Midjourney srefコード集：コピペで、イメージ通りの画像を即生成。
* Chrome拡張機能：私が作った拡張機能たち。

登録は無料で、いつでも解除できます。

下のリンクから、プレゼントをチェック
↓