■ このプロジェクトについて
「AIを使えば誰でも作れる」という時代に、Webディレクター10年の経験を持つ自分がどんな価値を出せるか——その問いに対する、ひとつの実験的な実績です。
ここ数年クローズド環境という構築制限のある現場にいたディレクターが、これまでの経験を活かしながらAIツールを用いて１つの作品を試作した軌跡を紹介します。
■ 制作の背景・課題設定
ターゲットは「プログラミングに興味はあるが、自分にできるか不安な20〜30代の社会人」。
この層の最大の離脱要因は「自分には無理かも」という心理的ハードルです。
LPの役割はその不安を言語化し、解消し、無料体験申し込みへ誘導すること——という軸を最初に定めました。
■ AI活用の工程と判断
STEP 1｜戦略設計（ChatGPT × Gemini）
ペルソナの解像度を上げるためにChatGPTで深掘り。カスタマージャーニーマップの構造整理にはGeminiの長文処理を活用。ツールを使い分けたのは、得意領域が違うから。
STEP 2｜構成・コピー（Claude）
論理構造の精緻化とコピーのブラッシュアップにClaudeを使用。「刺さる言葉」より「伝わる流れ」を優先した構成案をClaudeとの対話で磨きました。
STEP 3｜コーディング（Cursor）
ワイヤーフレームをもとにCursorでHTMLを高速生成。従来2〜3日かかっていた初稿を数時間で完成させました。
STEP 4｜デザイン昇華（Figma AI）
生成したHTMLをFigmaに取り込み、Figma AIでUIを改善。余白・タイポグラフィ・カラーバランスを整えました。
STEP 5｜最終調整（Cursor × Claude）
Figmaのデザイン修正をHTMLに反映。Claude・Cursorでソースのクリーンアップと整合性チェックを実施。
STEP 6｜ディレクターレビュー（自分）
全工程を通じて、 AIが生成する『最大公約数的な正解』に対し、文脈に応じた『最適解』へと昇華させる人間のディレクションが、最終的な成果を左右します。 AIが判断できない「クライアントの意図との整合性」「ターゲットへの刺さり」を10年の経験で検証しました。
■ こだわりポイント
・「不安の言語化」セクション：ターゲットが頭の中で思っていることをそのまま言葉にすることで、読んだ瞬間に「これ、私のことだ」と感じてもらえる構造を意識。
・ファーストビューのコピー：機能説明ではなく問いかけ形式にすることで、ページへの引き込みを強化。
・情報の順序：不安解消 → 解決策提示 → 信頼構築 → CTA という、クラシックな説得の流れを崩さずに設計。
■ 使用ツール
ChatGPT / Gemini / Claude / Cursor / Figma / Figma AI / HTML / CSS
