EmDash（エムダッシュ）は、Cloudflareが開発したオープンソースのCMS（コンテンツ管理システム）であり、公式に「WordPressの精神的な後継」と位置付けられています。
早速、試してみようとしたのですが、AIに聞いてもめんどくさい方法ばかり提案してくるので、最も簡単と思われる手順を解説します。
Claude Codeでもできるんですが、ChatGPTに課金していればCodexが使えるので今回はCodexで進めようと思います。
「AIにホームページを作ってもらいたい。でも、公開した後の文章や画像は自分で更新したい」
そんな使い方を試すため、CodexとEmDash公式Agent Skillsを使って、小規模事業者向けのデモサイトを制作しました。
今回行ったのは、ページの作成、CMSの設定、参考画像を使ったデザイン変更、ヒーロー画像の差し替え、Cloudflareへの公開までです。
この記事では、実際に使った依頼文やコマンドを交えながら、制作の流れと注意点を紹介します。
Cloudflareについては、以下の記事もご覧ください。
今回制作した「Bellewebデモサイト」
制作したのは、小さなお店や個人事業主向けのホームページ制作サービスを想定したサイトです。
主なページは、次の6つです。
- トップページ
- サービス案内
- 料金プラン
- 制作実績
- よくある質問
- お問い合わせ
さらに、お知らせ一覧・記事ページと、プライバシーポリシーも用意しました。
料金や制作実績はデモ用の仮の内容です。ヒーローには、ノートパソコンとスマートフォンを自然光の中に置いた、写真風のAI生成画像を使用しています。
CodexとEmDashの役割
今回の構成を整理すると、次のようになります。
| ツール・サービス | 今回の役割 |
|---|---|
| Codex | 日本語の指示をもとに、コードの作成・修正・動作確認を進める |
| EmDash | 文章・画像・お知らせなどを管理するCMS |
| EmDash公式Agent Skills | EmDashの開発方法をAIに伝える手順書・参考資料 |
| Astro | サイトのページやデザインを実装する |
| Cloudflare Workers | サイトを公開する |
| Cloudflare D1 | CMSのデータを保存する |
| Cloudflare R2 | CMSにアップロードする画像などを保存する |
Codex CLIは、ローカルのファイルを調べ、変更し、コマンドを実行しながら開発を進められるツールです。今回はCodexアプリのプレビューも使って、画面を確認しながら修正しました。Codex公式ドキュメント
EmDash公式Agent Skillsとは？
Agent Skillsは、AIが必要な作業に応じて読み込む手順書や参考資料です。
EmDashには、サイト制作向けの building-emdash-site などが用意されています。今回も、このスキルの使用を明示して依頼しました。EmDash公式Agent Skills
単に「ホームページを作って」と頼むだけでなく、使うCMSと、その公式スキルを指定するのが今回の進め方です。
開発環境とCodexを準備する
まず、Node.js・npm・pnpm・Gitが利用できる環境を準備します。
インストールできているかは、ターミナルで確認できます。
node --version
npm --version
pnpm --version
git --version今回、Codex CLIの導入には次のコマンドを使いました。
npm install -g @openai/codex環境構築から相談したい場合は、Codexに次のように伝えると、確認すべきことを整理できます。
EmDashでホームページを制作したいです。
現在のPCでNode.js・npm・pnpm・Gitが利用できるか確認し、
不足しているものがあればセットアップを手伝ってください。インストール後にコマンドが認識されない場合は、ターミナルやアプリを開き直して、もう一度確認します。
EmDash公式Agent Skillsを追加する
今回使用した、Codex向けのインストールコマンドはこちらです。
codex plugin marketplace add emdash-cms/skills
codex plugin add emdash@emdashこれはEmDash公式ドキュメントで案内されている方法です。インストール後は、新しいCodexタスクを開始します。EmDash公式のインストール手順
続いて、作業用フォルダを用意しました。
mkdir emdash-test
cd emdash-test
codexこの時点の emdash-test は作業場所です。EmDashプロジェクト自体の作成は、次の依頼でCodexに進めてもらいます。
作りたいサイトを具体的に依頼する
最初の依頼では、サイト名や業種だけでなく、ページ・機能・公開先までまとめて伝えました。
再利用しやすい形にすると、次のようになります。
EmDash公式Agent Skillsの building-emdash-site を使って、
新しいホームページを制作してください。
【サイト概要】
サイト名：Bellewebデモサイト
業種：小規模事業者向けホームページ制作
言語：日本語
CMS：EmDash
公開先：Cloudflare Workers
データベース：Cloudflare D1
メディア保存：Cloudflare R2
【必要なページ】
トップページ、サービス案内、料金プラン、
制作実績、よくある質問、お問い合わせ
【デザイン】
白を基調にした清潔感のあるデザイン。
スマートフォンでも読みやすく、
お問い合わせへのボタンを適切に配置してください。
【必要な機能】
管理画面からの文章・画像の変更
お知らせ記事の投稿
SEOタイトルとメタディスクリプションの設定
お問い合わせフォーム
XMLサイトマップ
公式ドキュメントを確認して実装し、
ローカルでビルドと動作確認をしてください。
不足する文章や画像は仮の内容で構いません。
後から変更できるようにしてください。
実際のデプロイや、料金が発生するリソースの作成は、
私が承認するまで行わないでください。ここで役立ったのは、最初は仮の内容で進めてよいことと、公開には承認が必要なことを明記した点です。
文章や写真が全部そろう前でも、構成や操作感を先に確認できました。
ローカルプレビューで確認する
サイトができたら、まず自分のPC上で確認します。
今回のプロジェクトでは、次のコマンドを使いました。
pnpm devプレビューで確認したのは、見た目だけではありません。
- 各ページへ移動できるか
- お問い合わせボタンのリンク先が正しいか
- スマートフォンで横にはみ出さないか
- 文字が小さすぎないか
- 画像が正常に表示されるか
さらに、本番用のファイルを作成するビルドも実行しました。
pnpm build今回の制作では、ローカルと本番で接続するデータベースが異なり、ローカル側にページが表示されない場面もありました。接続先を確認し、プレビュー用の初期コンテンツをローカルに追加して確認を進めています。
本番の記事と、確認用のデータを区別することも大切です。
参考画像を添付してデザインを調整する
最初のサイトができた後、参考画像を添付してデザインを変更しました。
依頼した内容は、次のようなものです。
添付画像を参考に、現在のサイトのデザインを
リニューアルしてください。
・サービス案内を3カラムのカード型にする
・お問い合わせボタンを目立たせる
・スマートフォンでも見やすくする
・文字サイズと余白を調整する
既存の記事や画像は削除しないでください。
CMSの編集機能、URL構造、SEO設定を維持してください。
変更前にGitで現在の状態を保存し、
既存のAstroファイルを確認して、
必要な部分だけ変更してください。
まずプレビューで確認できるようにし、
承認するまで公開しないでください。この依頼によって、アイボリーとくすみピンクを使った、柔らかなデザインに変わりました。見出しは明朝体にし、サービスカードや無料相談ボタンも調整しています。
この段階では、Astro側のCMS連携を変えず、CSSファイル1つの変更でデザインを整えられました。
参考画像と一緒に「色」「文字」「余白」「カード」「ボタン」など、取り入れたい点を言葉で添えると、修正の方向を共有しやすくなります。
ヒーロー画像を写真風の画像に変更する
デザインを確認した後、次のように追加で依頼しました。
ヒーローエリアの画像を写真にしてほしいです。今回は、サイトの配色に合う写真風のAI生成画像を作成し、ヒーローに組み込みました。
画像は表示用にWebP形式へ最適化し、PCとスマートフォンの両方で確認しています。
なお、このヒーロー画像はサイトの静的ファイルとして配信しています。CMSにアップロードする画像用のR2とは、保存方法が異なります。管理画面でヒーロー画像を設定した場合は、その画像を優先する実装です。
実際の制作実績や店舗写真として使うものと、雰囲気を伝えるイメージ素材は、区別して扱います。
Cloudflareへの公開準備をする
デザインが整ったら、Cloudflareへの公開準備です。
今回確認した主な項目は、次のとおりです。
| 確認項目 | 確認する内容 |
|---|---|
| Workers | 更新対象のサイトと設定 |
| D1 | CMSのデータベース接続 |
| R2 | メディア保存先の接続 |
| 環境変数・Secrets | 実行時に必要な設定と暗号鍵 |
| 管理画面 | 認証方法と初期設定 |
| ビルド | 公開用ファイルを作成できるか |
| 公開後の確認 | ページ・記事・画像・サイトマップ |
EmDash公式にも、Workers・D1・R2を使った公開手順が用意されています。EmDash公式のCloudflare公開手順
Codexには、公開前に次のように依頼しました。
EmDash公式のCloudflareデプロイ手順に従って、
公開に必要な設定を確認してください。
まず、必要な設定と変更内容を報告してください。
Cloudflareへのログインは私が行います。
秘密情報をコードやGitHubに保存しないでください。
料金が発生するリソースの作成と実際のデプロイは、
承認するまで行わないでください。途中でつまずいたR2の有効化
今回、最初の公開作業では、R2が有効になっていないことが原因で処理が止まりました。
ストレージとデータベース→R2オブジェクトストレージで確認できます。
R2サブスクリプションをアカウントに追加する
Cloudflareの管理画面でR2を有効化した後、作業を再開しています。
R2に関するエラーが出た場合は、コードの修正だけでなく、Cloudflare側で利用できる状態になっているかも確認します。バケットは画像などを入れる保存先です。Cloudflare R2の公式ガイド
暗号鍵はコードに書かない
今回使用した EMDASH_ENCRYPTION_KEY は、EmDashのプラグイン設定内の秘密情報を暗号化するための鍵です。
ソースコードに直接記載せず、CloudflareのWorker Secretとして管理しました。鍵の保管先とバックアップ方法も、データベースとは分けて考える必要があります。EmDash公式のSecrets・鍵管理
承認後にデプロイする
設定とプレビューを確認したら、公開を承認します。
今回使った基本的な流れは、次のとおりです。
pnpm wrangler login
pnpm build
pnpm wrangler deployそれぞれ、Cloudflareへのログイン、本番用ビルド、公開という役割です。D1・R2・Secretsなどの準備を済ませたプロジェクトで実行します。
デザイン変更後の再公開では、ビルドとドライランによる事前検証を行ってから、次のコマンドで更新しました。
pnpm wrangler deploy --keep-varsこれは今回の既存プロジェクトで使用したコマンドです。別のサイトへ適用するときは、そのプロジェクトの設定とデプロイ手順を確認してください。
公開後は、トップページだけでなく、主要ページ・既存記事・管理画面の応答・XMLサイトマップを確認しました。ヒーロー写真についても、公開されたファイルがローカルの画像と一致することを検証しています。
実際に試してわかった注意点
実は、同じ作業を１度実行したのですが最終でビルドエラーになってしまいました。
原因は、私のPCのシステムがARM64環境でCloudflare依存の workerd が未対応のためでした。なので、x64環境でやり直した結果最後までやりきることができました。
これは、PCの問題ですので予め確認してから始めることをお勧めします。
Windowsの方は64bit ARMと64bitがあるので気を付けてね。自分のPCで「設定 ＞システム ＞バージョン情報」にあるデバイスの仕様で見れます。ちなみに私のPCは２台でそれぞれ違っていました。
お問い合わせフォームは、設置とメール通知を分けて確認する
今回のお問い合わせフォームは、送信内容を非公開のデータベースに保存するデモ仕様です。メール送信は行っていません。
実際の問い合わせ受付に使う場合は、担当者への通知、返信方法、保存データの確認方法まで追加で設計する必要があります。
「フォームがあるから、メールも届く」と思い込まず、送信後の動きを確認しましょう。
エラーは、内容と接続先を調べてもらう
今回の制作では、R2の有効化に加え、D1のデータベース構造を更新する処理で対応が必要になった場面もありました。
その際は、データをバックアップしたうえで、必要な更新を適用して確認しています。
エラーが出たときは、次のように依頼すると進めやすくなります。
エラーの原因を調べてください。
ローカルと本番のどちらに影響する操作か説明し、
既存データを保護したうえで修正してください。デザイン変更の前にはGitで保存する
参考画像を使ったリニューアルや画像の差し替え前には、Gitで現在の状態を保存しました。
戻せる状態を作っておくと、デザインを比較しながら修正できます。ただし、記事やアップロード画像など、Gitに含まれないデータのバックアップは別途必要です。
まずは「公開しないデモ制作」から始める
今回の制作では、日本語で要望を伝え、プレビューを確認し、気になる部分を追加で修正する流れでホームページを作れました。
進めやすかったのは、作業を次の順番に分けたことです。
- 作りたいサイトを具体的に伝える
- 公式スキルを使って制作してもらう
- ローカルで内容とデザインを確認する
- 参考画像や追加指示で修正する
- 公開設定を確認する
- 承認後に公開し、実際のURLで確認する
初めて試すなら、最初の依頼は次の一文からでも始められます。
EmDash公式Agent Skillsの building-emdash-site を使って、
管理画面から更新できるデモサイトを作ってください。
まずは公開せず、ローカルプレビューまで進めてください。Codexとやり取りしながら形にし、実際に画面を見て判断する。その進め方で、今回のBellewebデモサイトを公開まで完成させることができました。
