AICraftWeb LAB #01｜Codex・WordPress・Framerで同じLPを作る

ツールの比較記事を読んでいると、最後に同じ疑問が残ります。

「で、実際に作ったらどう違うの？」

機能表を見るだけでは、制作中の迷いや、修正のしやすさまでは分かりません。

そこでAICraftWeb LABでは、同じ条件で本当に作って比べます。第1回は、Codex・WordPress・Framerで同じLPを作る実験です。

3つの道具を机に並べる。

作るものは同じ。文章も同じ。ゴールも同じ。

違うのは、そこへたどり着く方法だけです。

今回の実験

同じ原稿、同じ構成、同じ完成条件で、1ページのランディングページを3つの方法で制作します。

  • Codex：コードを中心に制作
  • WordPress：Blocksy＋ブロックエディターで制作
  • Framer：ビジュアルエディター中心で制作

ツールごとに有利になるよう条件を変えず、同じゴールからスタートします。

比べる6項目

比較項目見るポイント
制作時間着手から公開可能な状態までに何分・何時間かかったか
難しさ初めて触る人が迷いやすい場所はどこか
デザイン調整余白・文字・レイアウトをどこまで細かく調整できるか
スマホ対応レスポンシブ対応にどれだけ手間がかかるか
更新しやすさ公開後に文章や構成を変更しやすいか
コストツール・サーバー・継続利用に必要な費用

実験ルール

  1. 同じ文章を使う
  2. 同じページ構成から始める
  3. 同じCTAを設置する
  4. PC・スマホの両方を完成条件に含める
  5. AIへの相談内容も記録する
  6. 制作途中の失敗ややり直しも記録する
  7. 特定のツールを勝たせるために条件を変えない

完成条件

「表示できた」だけでは完成にしません。以下を満たした時点で、その制作方法の計測を終了します。

  • PCでレイアウトが崩れていない
  • スマホでレイアウトが崩れていない
  • CTAが機能する
  • ページタイトル・メタ情報を設定できる
  • 公開後に文章を変更できる
  • 実際に公開できる状態になっている

なぜ「完成画面」だけを比較しないのか

Web制作では、完成した見た目が似ていても、そこへ到達するまでの負担がまったく違うことがあります。

  • 最初は速かったけれど、修正で時間がかかった
  • 覚えることは多かったけれど、自由度が高かった
  • 見た目はすぐ整ったけれど、細かな変更で迷った
  • 公開は簡単だったけれど、更新方法が分かりにくかった

こうした差は、スペック表だけでは見えません。LABでは、完成画面だけでなく、途中で困った場所も記録します。

計測する記録

  • 開始時刻・終了時刻
  • 実制作時間
  • AIへ質問した回数
  • 大きな修正回数
  • 途中で調べた内容
  • PC完成時のスクリーンショット
  • スマホ完成時のスクリーンショット
  • 公開後の修正しやすさ

可能な範囲で同じ基準を使い、あとから比較できるようにします。

現時点のステータス

STATUS：実験準備中

比較条件と完成条件を確定。これから3方式で同じLPを制作します。

結果が出たら、この記事へ以下を追記します。

  • 3方式の完成画面
  • 実測制作時間
  • 制作中に困ったポイント
  • 良かったところ
  • 修正しにくかったところ
  • 費用比較
  • どんな人に向くか
  • 最終結論

LABでは、結論を先に決めない

Codexだから一番速い、WordPressだから一番運用しやすい、Framerだから一番デザインが良い——最初からそう決めることはしません。

実際に作ってみて、予想と違ったらそのまま書きます。

AICraftWeb LABの目的は、特定のツールを勝たせることではなく、「どんな人なら、どの方法を選ぶと作りやすいか」を見つけることです。

まとめ

AICraftWeb LAB #01では、Codex・WordPress・Framerで同じLPを作ります。

この記事は実験のスタート地点です。これから実際に制作し、時間、難しさ、デザイン、更新性、コストまで記録して追記します。

完成したときには、「機能が多いからおすすめ」ではなく、実際に作った結果から選べる比較記事にします。

関連して読む