SIMけん失敗した
コード未経験からCodexで飲食店LPを作った結果｜完成までに必要だったこと
- 実店舗LP制作の流れ
- AIに丸投げできなかった部分
- 初心者が先に準備すべき情報
最初に結論
Codexを使えば、コード未経験に近い状態でもLPの形は作れます。しかし、店の魅力はAIが自動で発見してくれるわけではありません。完成までに一番必要だったのは、コードの知識だけでなく、店舗調査、店主へのヒアリング、価値の言語化でした。
背景
実店舗のLP制作に挑戦した理由は、AIで作れるものを実際の事業に近い場所で試したかったからです。架空サービスではなく、営業時間、メニュー、来店理由、雰囲気、予約導線がある店舗サイトを作ることで、AI制作の現実的な難しさが見えると考えました。
店舗名や公開URLは、必要に応じて assets/js/site-config.js の設定から表示・非表示を切り替える想定です。初期状態では、具体的な店舗名を出さなくても記事が成立するようにしています。
実際に行ったこと
最初に行ったのは店舗調査です。どんなお客さんが来るのか、何を理由に選ばれているのか、写真で何を見せるべきかを整理しました。次に店主へヒアリングし、店のこだわり、来店前に不安になりやすい点、予約や問い合わせの流れを確認しました。
その情報をChatGPTで整理し、LPの見出し、セクション、ボタン文言を作りました。Codexでは、HTML、CSS、JavaScriptを実際のファイルとして編集し、スマホ表示、余白、ナビゲーション、画像の置き方を整えました。最後に店主確認を行い、違和感のある表現や足りない情報を修正して公開しました。
公開中の制作物
実際の制作画面と公開したLP
つまずいた点
AIに「飲食店らしいLPを作って」と頼むだけでは、どこかで見たような文章になりました。雰囲気は整っても、その店を選ぶ理由が弱くなります。店の価値を伝えるには、実際の会話、写真、メニューの背景、来店者の不安を拾う必要がありました。
コードより難しかったのは、何を伝えるかです。AIは文章を整えてくれますが、材料が薄ければ仕上がりも薄くなります。店主確認で初めて分かる表現の違和感もありました。
分かったこと
LP制作は、デザインとコードだけでは完結しません。調査、ヒアリング、言語化、確認、修正、公開までが一つの流れです。Codexは実装を進める強い道具ですが、目的や素材を決めるのは人間側です。
初心者への結論
初心者がLPを作るなら、先に「誰に、何を、どう行動してほしいか」を書き出した方が進みます。AIに任せる前に、店の強み、写真、よくある質問、導線を集める。そこまで準備できると、Codexでの実装はかなり進めやすくなります。
関連記事
この記事を書いた人
SIMけん。非エンジニア会社員として、実際に作ったサイトの学びを記録しています。
記事内容の訂正窓口
お問い合わせページから連絡してください。