AIによる開発支援が急速に進化する中で、「実際にどこまで作れるのか」と疑問を持つ方も多いのではないでしょうか。

今回は、UXデザイナーが、AIを活用しながらCMSの開発から本番リリースまでを実際に検証した記録をご紹介します。

開発手法は非常にシンプルです。参考にしたい画面や機能を見つけたらスクリーンショットを撮影し、その画像をAIへ渡して実装を進めるという方法です。

約100〜140時間におよぶ検証の結果、AIによって開発速度は大幅に向上しました。しかし同時に、UX設計や情報設計の重要性はむしろ高まっていることも実感しました。

本記事では、実際の開発プロセスや作業時間、得られた知見について紹介します。

目次

今回の検証を行った人物

今回の検証を行ったUXデザイナーとしてこれまで多数의 システム開発プロジェクトに携わってきました。

主なスキル・経験は以下の通りです。

  • UX設計
  • UIデザイン
  • デザインコンポーネント設計
  • HTML / CSS
  • React Nativeなどのフロントエンド基礎知識
  • Gitによるソース管理
  • データベースの基礎知識
  • 独学によるサーバー構築経験
  • 大規模システム開発プロジェクトへの参画経験

専門的なプログラマーではありませんが、システム全体を俯瞰しながら設計・検証できる立場で今回の開発を行いました。

今回の開発手法

今回採用した方法は非常にシンプルです。

  • 作りたい画面や機能をまとめる
  • スクリーンショットを撮影する
  • AIへ画像を渡して指示する
  • 実装内容を確認する
  • UX観点で改善点を整理する
  • 再度AIへ指示する

このサイクルを繰り返しました。

画面デザインについては、Next.jsのデフォルトUIをベースとして利用しています。

また、以下の技術を活用しました。

Next.js / MySQL / GitHub / GCP（Google Cloud Platform） / PM2

最初の骨組み自体は1日程度で完成しました。その後は細かな改善やバグ修正を繰り返しながら、本番運用可能なCMSへと育てていきました。

AI時代でもUX設計が重要な理由

今回の検証を通じて最も強く感じたのは、AI時代になってもUX設計の重要性は変わらないということです。

AIは画面を作ることができます。しかし、以下のような判断は人間が行う必要があります。

  • 誰のために作るのか

    ターゲットユーザーの明確化と、そのインサイトの理解が必要です。

  • どのような業務課題を解決するのか

    導入目的を明確にし、現場のペインポイントに直接アプローチします。

  • 管理画面をどのように設計するのか

    開発者だけでなく、実際に運用する担当者が迷わず使える構造を作ります。

  • どの情報を優先して表示するのか

    情報設計（IA）の観点から、画面内の要素の重要度を整理します。

  • ユーザーがどの順番で行動するのか

    ストレスのないスムーズな操作導線と、直感的なインターフェースを設計します。

実際に今回のCMS開発でも、実装そのものよりも、情報設計や運用設計に多くの時間を使いました。

スクリーンショットを貼り付けてAIへ指示するだけで開発できたように見えますが、その裏側では常にUX設計の視点から判断を行っています。

開発履歴

  • Phase 1：基礎構築とデザイン実装（v1〜v30）

    推定作業時間：約30〜40時間

    【実装内容】Next.js初期構築 / レスポンシブ対応 / UIデザイン実装 / CMS基盤作成

    最もコード量が多く、試行錯誤が多かったフェーズです。

  • Phase 2：データ連携高速化とMySQL移行（v31〜v60）

    推定作業時間：約25〜35時間

    【実装内容】

    REST API構成見直し / MySQL移行 / SQL最適化 / TypeScriptエラー解消

    アーキテクチャ改善と安定化に時間を費やしました。

  • Phase 3：SEO強化とUI改善（v61〜v80）

    推定作業時間：約15〜20時間

    【実装内容】

    OGP設定 / Canonical設定 / Cookieバナー実装 / 管理画面基盤構築 / 認証ガード実装

    運用を見据えた改善が中心です。

  • Phase 4：管理画面高度化とマルチ環境最適化（v81〜v87）

    推定作業時間：約15〜20時間

    【実装内容】

    DB同期機能 / Next.jsエラー解消 / PM2管理 / GitHub Actions自動デプロイ / 開発・ステージング・本番環境構築

    本番運用に耐えられる基盤を整備しました。

  • Phase 5：運用に向けた最終機能拡充と安定化

    推定作業時間：約15〜25時間

    【実装内容】

    プレビュー機能改善 / ルーティング修正 / DB連携バグ修正 / 画像アップロード改善 / 更新日表示機能追加 / 開発環境再構築

    リリース後の運用を見据えた改善を継続적으로 実施しました。

AIを活用して構築したCMS管理画面の実例

開発時間の総計

Phase 1からPhase 5までを合計すると、実稼働ベースで約100〜140時間程度の作業時間となりました（サーバー構築は別途作業となり今回は計算は行ってないです）。

仮に1日3時間作業した場合、およそ1〜1.5か月分の開発量に相当します。

最初はシンプルなブログCMSとしてスタートしましたが、以下のステップを経て、現在は実運用に耐えうるヘッドレスCMSへと成長しました。

  • MySQL連携
  • SEO最適化
  • 管理画面構築
  • GitHub Actions自動デプロイ
  • マルチ環境対応
  • 本番運用基盤整備

結論 / まとめ

今回のCMS開発では、UXデザイナーであってもAIを活用することで開発スピードを大幅に向上できることを実感しました。

一方で、実際に開発からリリースまでを経験してみると、AIだけで開発が完結するわけではないことも分かりました。

特に私はエンジニアではないため、技術的な内容について調査したり、AIとの壁打ちを繰り返したりする時間が想像以上に必要でした。また、サーバー構築やデプロイ、運用環境の整備といったインフラ領域は、ある程度の知識がなければデザイナーにとって非常に負荷の高い作業です。

さらに、システム開発では単純に画面を作るだけでは不十分であり、以下のような視点も欠かせません。

  • ユーザーにどのような機能を提供するのか
  • どのような導線で利用してもらうのか
  • 管理画面（Admin）にはどのような機能が必要なのか
  • リリース後の運用をどう考えるのか
  • 集客やマーケティングをどう設計するのか

実際にリリース後は細かな改善やバグ修正が継続的に発生し、開発が終われば完了というわけではありませんでした。

また、AI活用において感じた課題もあります。AIは非常に優秀な実装パートナーですが、1回の指示で問題が解決するケースは決して多くありません。特に複雑な不具合や環境依存の問題については、解決に至るまで何度も検証や修正を繰り返し、結果として多くの時間を費やしました。

その一方で、今回の検証を通じて最も強く感じたのは、AI時代になってもUX設計の重要性は変わらないということです。

AIは実装を支援してくれます。しかし、「誰のために作るのか」「どのような課題を解決するのか」「どのような体験を提供するのか」を考えるのは人間の役割です。

実際に今回のCMSも、単に動くシステムを目指したのではなく、運用担当者が迷わず利用できること、継続的に更新しやすいことを重視しながら改善を続けました。

また、本プロジェクトの検証や改善テストを実際に行ったのもUXデザイナーです。画面が正しく動作するかだけではなく、使いやすいか、運用しやすいか、業務効率につながるかという観点で確認を行いました。

ユニットディーでは、このようなAI活用による開発支援だけでなく、UX設計・UI設計・業務設計まで含めた上流工程の支援を行っています。AIを活用する時代だからこそ、ユーザー体験を中心に据えた設計がこれまで以上に重要になると考えています。