CodexでLP制作に初挑戦！制作しながら感じたことと工夫したこと

はじめに

今回は、参加しているノーコードサロンの企画で、Codexを使ったLP制作に挑戦しました！

参加者それぞれが異なるジャンルのLPを制作する企画で、私は夏のフルーツソーダイベントをテーマにしたLPを制作しています。

Codexを使った制作には少しずつ触れていましたが、ひとつのLPをしっかり作り込んでいくのは今回が初めて。

この記事では、

• 企画に参加したきっかけ
• Codexを使ったLP制作の流れ
• 制作前に決めておいたこと
• Codexが最初に出力したままのLP
• 実際につまずいたところ
• 制作するときに意識したこと
• 挑戦してみて感じたこと

などをまとめてみたいと思います。

企画を知って「やってみたい！」と思いました

サロン内で「Codexを使ってLPを制作する」という企画が始まると知り、ぜひ参加してみたいと思いました。

もともとCodexにはある程度触れるようになっていましたが、今回は参加しているメンバーと話し合ったり、それぞれ違うジャンルのLPを作ったりしながら進められることにも興味がありました。

一人で制作するだけではなく、ほかの方の制作過程も見ながら進められるのは、企画ならではの良さだと感じています。

今回使用したツール

今回の制作では、主に次のツールを使いました。

• Codex：LP制作
• ChatGPT：アイデア整理や文章の下書き
• Figma：細かなデザイン調整

Codexでは、文章で「こんなLPにしたい」と指示を出しながら、Webサイトの構成やデザインを一緒に作っていくことができます。

今回も、いきなり完成形を作るのではなく、少しずつ指示を出しながらデザインを整えていきました。

CodexでLPを作るときの流れ

今回、架空のLPを制作するときは大きく次のような流れで進めました。

1. どんなLPを作るかテーマを決める
2. デザインルール・構成・ペルソナを決める
3. 白黒のざっくりしたワイヤーフレームを作る
4. 色や写真を入れたワイヤーフレームへ調整する
5. Codexで本格的にデザインを作り込む
6. 気になる部分を何度も修正する
7. 全体を確認して完成へ

最初から細かく作り込むのではなく、大きな方向性を決めてから少しずつ具体的にしていくことを意識しました。

最初の設計をしっかり決めておく

実際に制作してみて特に大切だと感じたのが、Codexに指示を出す前の設計です。

今回、最初に考えたのは主に3つでした。

① デザインルール

どんな色を使うのか、どんなフォントや余白にするのかなど、LP全体の見た目を統一するためのルールです。

最初にある程度決めておくことで、途中でデザインの雰囲気がバラバラになることを防ぎやすくなりました。

② LP全体の構成

ファーストビューからどんな順番で情報を見せていくのかを考えます。

LPには「申し込み」「お問い合わせ」などの目的があるため、ただ見た目を作るだけではなく、見る人が自然に内容を理解できる流れを考えることも大切でした。

③ ペルソナ設定

今回は実際の案件ではなく架空のLPなので、どんな人に向けたものなのかを自分で設定しました。

ターゲットとなる人を具体的に考えることで、

「どんな色が合うかな？」

「どんな写真を使ったら楽しそうに見えるかな？」

と、デザインの方向性も決めやすくなりました。

Codexが最初に出力したLPを、そのまま載せてみます

じつは今回の制作中、Codexの利用制限に達してしまい、作業が中途半端なところで止まってしまいました💦

そこで今回は、設計シートをもとに最初の指示を出したときに出てきたものを、あえてそのまま載せてみようと思います。

実際のページはこちら（SUNNY SIP FEST）

※こちらはCodexが最初に出力したままの状態で、私からの修正は一切加えていません。

テーマに合った写真やカラー、セクションの構成、簡単なアニメーションまで、初期の段階でここまで出してくれます。

もちろん、ここから「文字の大きさ」「余白」「情報の順番」など、細かく直したいところはたくさん出てきます。

それでも、最初の一歩としてここまでの形が出てくると、「どこを直せばもっと良くなるか」を考えるところからスタートできるのが、Codexを使う大きなメリットだと感じました。

利用制限が回復したら、ここから少しずつ修正を重ねて仕上げていく予定です。

一番難しかったのは「どう指示を伝えるか」

今回一番つまずいたのは、Codexに自分のイメージをどう伝えるかということでした。

「夏らしいフルーツソーダのLPを作って！」

だけでもデザインは作ってくれます。

ただ、自分が頭の中でイメージしているデザインに近づけようとすると、もう少し具体的な指示が必要になります。

「この文字をもう少し大きく」

「ここの余白を広く」

「ソーダを中央に配置したい」

など、少しずつやり取りを重ねながら調整していきました。

言葉だけでは伝えづらいときは、スクリーンショットを見せながら修正箇所を伝えることもありました。

AIに任せきりにしないことも大切

制作するときに意識していたのが、AIに全部任せきりにしないことです。

Codexがデザインを作ってくれるからこそ、

「この情報は本当に必要かな？」

「もっと見やすくできないかな？」

「この部分は自分ならどうデザインするかな？」

と考えながら進めるようにしました。

AIを使うことで制作のスピードは上がりますが、最終的に「これでOK」と判断するのは自分です。

だからこそ、細かな部分までしっかり見ながら、Codexとの“壁打ち”を何度も繰り返しました。

Codexだけで難しいところはFigmaで調整

何度指示を出しても、どうしても自分のイメージ通りにならないこともあります。

そんなときは、無理にCodexだけで完成させようとせず、Figmaで直接手直しすることもありました。

AIですべてを完結させるのではなく、

Codexが得意なところはCodexに。
自分で触った方が早いところはFigmaで。

そんなふうにツールを使い分けることで、制作の幅も広がったように感じています。

挑戦してみて、AIへの苦手意識が減りました

今回、実際にCodexを使ってLP制作をしてみて、以前よりもAIに対する苦手意識がかなり少なくなりました。

むしろ、

「次はどんなものを作ってみよう？」

と、新しいものを制作したい気持ちが強くなっています。

Codexだけでなく、Figmaと組み合わせたり、ChatGPTでアイデアを整理したり。

それぞれのツールを組み合わせることで、自分ができることも少しずつ増えてきました。

これからCodexを使ってみたい方へ

もしCodexを使ったことがない方がいたら、最初からLPを完成させようとしなくても大丈夫だと思います。

まずは、

「とりあえず5分触ってみる」

くらいからでも十分です。

「背景の色を変えてみて」

「この文字を大きくしてみて」

そんな小さな指示でも、目の前でデザインが変わっていくので、それだけでも結構楽しいです。

私自身も、分からないことがあれば周りに聞いたり、何度もやり直したりしながら進めています。

AIは一度で完璧なものを作るためのものではなく、自分と一緒に試行錯誤してくれる制作パートナーのように使っていくのがいいのかなと感じました。

もし「Codexが気になるけど難しそう…」と思っている方がいたら、この記事が「ちょっと触ってみようかな」と思うきっかけになったら嬉しいです。