はじめに
最近では、Claude Codeなどのコーディングエージェントを利用することで、コードの生成だけでなく、設計や実装、テストなど、AIに任せられる範囲がかなり広がってきました。
そこで今回はデザインの作成からbaserCMSへの組み込みまで、AIにどこまで任せられるのかを試してみました。
使用した主なツールは以下です。
- baserCMS 5
- Claude Design（デザイン生成）
- Claude Code（実装）
- baser-skills（baserCMSのドメイン知識）
結果として、デザインの生成からテーマへの組み込み、ブログなどのCMS機能への対応まで、ほぼノータッチ（コードを直接触ることなく）でサイトを構築できました。
この記事では、完成したサイトそのものだけでなく、
- どのような流れで制作したのか
- デザインデータをAIにどう渡したのか
- AIにbaserCMS固有の知識をどう与えたのか
- baser-skillsがどのような役割を果たしたのか
といった部分を中心に紹介します。
今回試した制作フロー
今回の目的は、単純に「AIにWebサイトを作って」と指示することではありません。
デザインと実装で役割を分け、以下のようなフローで制作しました。
HTMLやCSSを一から実装するのではなく、基本的にはAIへ指示を出し、その結果を確認する形で進めています。まずデザインを完成させ、そのデザインをもとにbaserCMSへ組み込ませる方針としました。
今回作成するサイト
架空の建築会社のWebサイトです。
- 木の温かみを感じられるデザイン
- ナチュラルな雰囲気
- 住宅会社としての安心感を持たせる
- 写真を活かしたWebサイトにする
ページは以下を想定しています。
- TOPページ
- ブログ一覧
- ブログ詳細
- お問い合わせフォーム
- 固定ページ用テンプレート
デザインを作るためのプロンプトをClaudeに考えてもらう
まずは、デザインを生成するためのプロンプト自体をClaudeに考えてもらうところから始めました。
細かなデザイン指示をすべて自分で考えるのではなく、大まかな要件だけを伝え、そこからデザイン生成に適した指示へ落とし込む工程もClaudeに任せています。
プロンプトの作成とデザイン生成を分けることで、生成前に以下のような内容を確認できます。
- 必要なセクションが含まれているか
- デザインの方向性が具体化されているか
- 配色やタイポグラフィについて指示されているか
- レスポンシブデザインが考慮されているか
- 建築会社として必要なコンテンツが含まれているか
「AIに全部作って」と一度に依頼するのではなく、次の工程で必要になる指示をAI自身に設計させる形です。
実際の流れ
前述の「今回作成するサイト」の要件をClaudeに伝え、デザイン生成用のプロンプトを作成してもらいました。
Claudeが作成したプロンプトは以下です。
建築会社のコーポレートサイトのTOPページをデザインしてください。
【会社イメージ】
・注文住宅・リノベーションを手がける建築会社
・木や自然素材を活かした、温かみのある住まいづくりが強み
・派手さより信頼感と丁寧な仕事ぶりが伝わる印象にしたい
【雰囲気・トーン】
・温かみ、ナチュラル
・木目やアースカラー(ベージュ、ブラウン、グリーン系)を基調とした配色
・過度に装飾的にせず、余白を活かした落ち着いたレイアウト
・フォントは柔らかい印象の書体
【TOPページに必要な要素】
・ヘッダー(ロゴ、ナビゲーション:TOP / ABOUT / SERVICE / BLOG / CONTACT)
・ファーストビュー(建築事例の写真+キャッチコピー)
・会社の強み・こだわりを紹介するセクション(3〜4項目程度)
・施工事例・実績を紹介するセクション(カード形式、3〜4件程度)
・BLOGの最新記事を紹介するセクション(施工事例やコラムを想定、カード3件程度)
・お客様の声セクション
・お問い合わせへの導線(CTA)
・フッター(会社情報、SNSリンクなど)
【用途の補足】
BLOGセクションはbaserCMSのブログ機能で運用する想定なので、記事一覧として自然に見えるカードレイアウトにしてください。
「BLOGセクションはbaserCMSのブログ機能で運用する想定」のように、後工程の実装まで見越した指示が入っているのがポイントです。
このプロンプトをClaude Designに入力して生成されたのが、次のデザインです。
調整なしにしては良い出来ではないでしょうか。
また、TOPページのデザインに合わせて、固定ページやブログ一覧・詳細ページ、お問い合わせフォームのデザインも追加で生成してもらいました。
今回はAIだけで実装できるかを確認するため、デザインには手を加えず、このまま実装へ進みます。
Claude Designが生成したデザインをClaude Codeへ渡す
Claude Designで生成したデザインは、標準的なHTMLとしてダウンロードできます。
今回は、このHTMLファイルをそのままClaude Codeへ渡し、デザインを認識できるか試してみました。
Claude Design
↓
HTMLファイルをダウンロード
↓
Claude Code
実際に試したところ、Claude Code側でもページ構造やデザインを問題なく認識できました。
そのため、別のツール（Pencilなど）を経由してデザインデータを変換することなく、そのまま実装工程へ進めることができました。
デザインをbaserCMSへ組み込む
デザインが用意できたので、次はClaude CodeへbaserCMSへの組み込みを依頼します。
ここからは、単純なHTMLコーディングとは少し事情が変わります。
例えばブログ一覧を作る場合、見た目だけを再現するのであれば、以下の流れで済みます。
デザイン
↓
HTML / CSS
しかし、実際にbaserCMSのサイトとして利用するのであれば、以下まで実装する必要があります。
デザイン
↓
baserCMSテーマとして実装
↓
ブログ機能と連携
↓
管理画面の記事を取得
↓
デザインに合わせて一覧表示
固定ページについても同様です。ただHTMLを配置するのではなく、baserCMSの管理画面からコンテンツを管理できる状態にする必要があります。
ここで必要になるのが、baserCMS固有のドメイン知識です。
AIにbaserCMSのドメイン知識をどう与えるか
Claude Codeは、PHPやHTML、CSS、JavaScriptなどについて幅広い知識を持っています。
しかし、「PHPが書ける」ことと「baserCMSとして適切な実装ができる」ことは別です。
baserCMSでサイトを構築するためには、以下のようなbaserCMS固有のドメイン知識が必要になります。
- baserCMSのディレクトリ・テーマ構造
- テンプレートの実装方法
- ブログ機能
- 固定ページ
- ヘルパー
- baserCMS固有のAPIや規約
そこで今回利用したのが baser-skills です。
baser-skillsとは
baser-skillsは、AIエージェントがbaserCMSを扱うために必要な知識や手順を、Skillsとしてまとめたものです。
例えば、baserCMS 4系から5系へのアップグレードは大変な作業です。しかし「basercms4-to-5-upgrade」というスキルを使えば、アップグレード作業をだいぶ楽に進めてくれます。このスキルは、baserCMS 4 → 5（CakePHP 2 → 5）でのサイト全体のアップグレード・移行手順とルールをまとめたものです。
他にも、baserCMSでの開発に便利なスキルがたくさん用意されているので、ぜひ確認してみてください。
導入もコマンド1つで簡単に行えます。
# 全体
npx -y skills@latest add baserproject/baser-skills --skill '*' -y
# 個別
npx -y skills@latest add baserproject/baser-skills --skill php-migration -y
baser-skillsを使ってbaserCMSの知識を与える
Claude Codeからbaser-skillsを利用できる状態にしておくと、baserCMS固有の実装が必要になった際に、その知識を参照しながら作業を進めてもらえます。
今回は、こちらから細かく実装方法を指定するのではなく、
デザインデータを確認し、baser-skillsを参照してbaserCMSのテーマとして実装する
という形を基本として進めました。
実際にClaude Codeへ出した指示は以下です。
designフォルダにあるデザインを参考に、baserCMS 5のテーマとして組み込んでください。
※場合によっては指示文に「baser-skillsを参照して、」を明示した方が良いかもしれません。
このくらいざっくりした指示でも、Claude Codeがデザインを読み取り、baser-skillsを参照しながらテーマの構成やブログ機能との連携まで進めてくれました。
人間側がbaserCMSの実装方法を一つずつプロンプトへ書かなくても、AI側が必要な知識を参照しながら実装を進められます。
テーマファイルを確認したところ、タイトルをHTMLに直書きするのではなく、baserCMSのヘルパーを使って出力していました。
<?php $this->BcBaser->contentsTitle() ?>
これにより、管理画面でページタイトルを変更すると、テンプレートを触らなくても表示に反映されます。「見た目だけ再現したHTML」ではなく、CMSとして運用できる実装になっていることがわかります。
完成したサイト
サイトの一部になりますがこのようにサイトが作られました。
ブログ一覧ページ
管理画面で登録した記事が正常に出力されており、カテゴリも表示されています。
お問い合わせフォーム
フォームの送信も正常に完了しました。
実際どこまでAIに任せられたのか
今回の制作では、デザインからbaserCMSへの組み込みまで、かなりの部分をAIに任せることができました。
ただし、「ほぼノータッチ」とはいっても、AIを完全に放置して完成するわけではありません。
私が行ったのは、主に以下の作業です。
- 何を作るかを決める
- AIへ目的を伝える
- 生成されたものを確認する
- 必要であれば追加指示を出す
- 最終的に正しいかを判断する（これが一番大事）
一方で、「実際にコードを書く」という作業については、かなりの部分をAI側へ移すことができました。
これからは、「AIにどのような知識・コンテキストを渡すか」が、開発でAIを活用していくうえで重要になっていきそうです。
まとめ
今回は、Claude Codeとbaser-skillsを利用して、デザインの作成からbaserCMS 5への組み込みまでをAI中心で進めてみました。
当初は、Pencilを使ったデザイン調整なども想定していました。しかし実際に試してみると、Claude Codeが元のデザインデータを直接理解でき、想定していたよりもシンプルな制作フローになりました。
また、AIにすべての知識を期待するのではなく、baser-skillsのように特定領域に必要なドメイン知識をSkillsとして持たせることが有効だとわかりました。そうすることで、AIを単なるコード生成ツールとしてではなく、特定の開発環境やプロジェクトを理解したエージェントとして利用できそうです。
ぜひ一度、baser-skillsを使ってみてはいかがでしょうか。