Claude×EmDashで企業サイト制作を実演！無料公開の条件・費用・修正・安全確認まで

ラビビット | AI活用メディア

2026年11月1日 00:24

「AIにお願いするだけで、企業サイトはどこまで作れる？」今回はClaudeとEmDashを使い、架空の製造業サイトを企画・制作・修正・公開し、お知らせの更新まで試しました。

公開費用は今回の構成で0円。画像11枚の生成は約19円でした。ただし、Claudeの契約料金や人の確認作業は別です。初稿ができたあとには、安全面の修正も必要でした。

要件整理からデザインの作り分け、CMSでの更新まで実演
写真中心のA案と、線画・立体表現を使ったB案を実際の画面で紹介
無料公開の条件、見つかった4つの課題、費用と時間の内訳を整理

1. Claude×EmDashとは？AIを「制作チーム」として使ってみる

Claudeには、文章を書く役だけでなく、ディレクター・デザイナー・実装担当の仕事を順番に依頼しました。サイトをどう作るか整理し、必要な画像を用意し、コードを作り、画面を確認して修正する、という使い方です。

EmDashは記事やページを管理するCMSです。公式ではTypeScriptとAstroを使うオープンソースのCMSとして紹介され、AIエージェント向けのCLIやMCP、パスキー認証なども用意されています。本文を管理する仕組みと、画面を作るコードを組み合わせて使います。今回の動画で使ったバージョンは1.4.0です。

参考：EmDash公式リポジトリ／CloudflareによるEmDashの紹介

今回作ったのは、架空の金属加工メーカーの企業サイト。会社概要、技術・設備、加工事例、依頼の流れ、採用情報、お知らせなどを用意しました。掲載企業・人物・実績は架空で、写真にもAI生成画像を使っています。実在企業の制作事例ではありません。

「完全自動」という言葉から想像する、最初の一言だけで全部終わる制作ではありません。人が条件を決め、初稿を見て修正を依頼し、認証や公開判断を担当します。AIに任せられる工程を増やしつつ、人の確認をどこに残すかも確かめた実験です。

2. 公開費用0円にするための条件と、事前準備

今回はCloudflare Workersの無料枠を使い、外部プラグインを入れず、独自ドメインも使わない構成にしました。画像はサイトのファイルに同梱しています。これは「どんなEmDashサイトでも無料」という意味ではなく、機能と構成を選んだ結果です。

無料枠で気をつけたいのは、アクセス数だけではありません。Workersの公式制限には1日10万リクエスト、1リクエストあたりCPU時間10msという条件があります。10万人が見られるという意味ではなく、リクエストの数で数えます。またCPU時間は処理に使う時間で、通信待ちを含むページの表示時間とは違います。データベースなど、ほかに使うサービスの制限も別途確認が必要です。

参考：Cloudflare Workersの公式制限

EmDashのプラグインを隔離して実行する構成に関係するDynamic Workersは、公式料金ページでWorkers有料プラン向けとされています。今回の無料構成では外部プラグインを使いませんでした。画像保存先もR2を使わず、同梱方式にしています。その代わり、管理画面から自由に新しい画像をアップロードする運用にはしていません。

参考：Dynamic Workersの料金・利用条件

準備ではCloudflareの登録、Claude CodeへのEmDash向けスキル導入、Wranglerの認証などを行いました。ブラウザーでの認証は人が担当しています。APIキーはローカルの非公開ファイルで管理し、チャットや公開ファイルへ貼り付けない方針にしました。

画像生成には手元のAPIクレジットを使用しました。これは、ChatGPTなどの月額契約だけで誰でもAPIを無料利用できる、という説明ではありません。利用するAIの契約とAPI料金は、それぞれ確認してください。

3. いきなりサイトを作らず、4つの資料から始める

最初はClaudeをディレクター役にして、ヒアリングシート、要件定義、サイトマップ、工程表を作りました。動画の記録では、この整理に約12分かかっています。架空案件なので不足情報を補う必要がありますが、事実と仮定が混ざらないよう「前提・仮説」を分けることが大切です。

ヒアリングでは、誰に何を伝えたいか、どのような問い合わせを増やしたいかを整理します。要件定義では必要なページや機能、サイトマップでは情報の分け方、工程表では担当と確認の順番を明確にします。ここを飛ばすと、見た目は整っていても目的に合わないサイトができやすくなります。

クライアント側で確認する情報はGoogleスプレッドシート、制作側の進行管理はClaudeのArtifactで作ったボードに分けました。情報を一括転送しようとした際は処理が重くなったため、進め方を変更しています。AIが動いていても、無理な方法を続けない判断は必要でした。

実演画面：工程管理ボード（2026/10/31）。企業・日程・案件情報は架空です。

工程管理ボードには8つの工程、担当、期限、未着手・進行中・確認待ち・完了の状態を用意しました。画像の期日や進捗は架空案件の設定です。重要なのは、AIが何を終え、人が何を確認すべきか見える状態にしたことです。

デザインの方向性は「基準を示す」。加工技術を大げさな言葉で宣伝するより、測定や品質管理が伝わる構成を目指しました。参考サイトをそのままコピーするのではなく、業種に合う情報の見せ方を整理しています。

4. 初稿を直して、写真のA案と線画・立体表現のB案へ

最初のページ構成案は27ページでした。初稿の実装は動画の記録で約12分。ただし、白い画面が続いて印象が弱く、架空案件であるという注意書きも多く、完成品としてそのまま採用できる状態ではありませんでした。

そこで、ページを10〜15ページ程度に絞る方針や、最初に大きなビジュアルを見せる構成などを修正指示にまとめました。この数字は修正方針であり、最終ページ数の確定値ではありません。「もっとおしゃれに」だけではなく、情報量・余白・文字の強さ・写真の役割を具体的に伝えています。

A案は、写真で現場の雰囲気を伝える方向。加工をイメージさせる写真や大きな見出し、数字を使い、会社・技術・設備・加工事例へ進める構成にしました。事例は業種や材料から探せる形を用意し、採用、依頼の流れ、FAQなどにも展開しています。

実演画面：A案の完成サイト（2026/10/31）。架空企業のデモで、写真にはAI生成画像を使用。

B案は、白と紺、線画と立体的な部品表現で技術力を伝える方向。スクロールに合わせた演出も取り入れています。同じ内容でも、写真を主役にするか、図形や動きを主役にするかで印象が変わります。B案は完成後の画面を動画で紹介しており、制作の全過程を収録したものではありません。

実演画面：B案の完成サイト（2026/10/31）。B案は完成後の紹介で、制作過程の全収録ではありません。

生成画像には、実在人物の顔、社名、ロゴ、読める文字を入れない条件を付けました。修正時に追加した3枚を含め、最終的に生成した画像は11枚です。企業サイトで使うなら、実際の設備や実績をAI画像で置き換えて誤認させない配慮も必要です。

PCとスマートフォンの画面幅でスクリーンショットを確認し、はみ出しや読み込みエラーも点検しました。ただし、実機での確認は行っていません。画面幅を変えたテストだけで、すべての端末で問題ないと判断することはできません。

5. 公開前に見つかった4つの課題。見た目の完成で終わらせない

今回の制作物で見つかった課題。EmDash全体の脆弱性を示すものではありません。

公開前には、セキュリティヘッダー、依存関係、秘密情報、検索への表示、バックアップなどを確認しました。その中で、今回の制作物では次の4つの課題が見つかっています。EmDash全体に共通する脆弱性だと断定するものではありません。

① APIキーがビルド出力に混入。非公開にするつもりのファイルが、公開用ファイルを作る工程でコピーされていました。対象を除外し、混入していたらチェックを失敗させる対策を追加しました。動画から確認できるのは混入の発見と修正であり、第三者への流出を確認したという話ではありません。

② 初期設定画面の保護が不足。初回のセットアップを第三者に操作されないよう、秘密トークンによる制限を加えました。公開URLへアクセスできることと、管理者になれることは分けて設計する必要があります。

③ CSP・HSTSなどの設定が不足。ブラウザーが読み込むコンテンツの制限やHTTPS利用に関係する設定を追加しました。設定を入れること自体が目的ではなく、動作を壊さずに適切な保護を行う必要があります。

④ 依存関係の警告が7件。利用ライブラリを確認し、修正や上書き指定によって確認時の警告を0件にしました。ただし「警告0件」は、その時点で確認した項目の結果です。サイト全体の安全を保証する数字ではありません。

今回は実機テストやバックアップからの復元訓練までは行っていません。また、検索に出さないnoindexの設定はアクセス制限の代わりにはなりません。フォームもデモとして扱っています。実案件なら、問い合わせの送信先、個人情報の保存、障害時の復旧まで別途確認が必要です。

6. 公開後はCMSで更新。文章とデザインで作業を分ける

公開の予行演習では、データベースの初期化が無料枠のCPU制限に引っかかりました。そこで公開時の処理にまとめず、事前に初期化する手順へ変更しています。キャッシュも使い、確認した範囲ではCPU超過を起こさず表示できました。将来のアクセス増加まで保証する結果ではありません。

最後のパスキー設定やサイト情報の確認は人が担当しました。公開できたら終わりではなく、管理画面に入れるか、更新が反映されるかも確認しています。

お知らせや文章の変更はCMS、デザインや機能の変更はコード。この区別が、運用を理解する近道です。今回の管理画面では記事の編集、下書き・公開、URLやSEOに関係する項目などを扱いました。一方、レイアウトや動きの変更はコードを直して再公開します。画像を同梱する構成なので、新しい画像の追加にも制作側の作業が必要です。

実演画面：EmDashで年末年始休業のお知らせを編集（2026/10/31）。架空案件の内容です。

更新の実演では、スプレッドシートに入れた年末年始休業のお知らせをClaudeに読み取らせました。Claudeが「コンテンツの更新」と分類してCMSの本文を変更し、接続時の承認は人が行う流れです。依頼を整理する場所と、実際に公開する場所をつなぐ使い方になります。

運用を引き渡すなら、誰が原稿を確認するか、誰が公開できるか、デザイン変更は誰に頼むかを決めておくと安心です。AIに更新を任せる場合も、依頼内容と変更結果を確認できる記録を残したいところです。

7. 費用と時間はいくら？実案件で見落としたくないこと

2026/10/31の実測。約46分はClaudeの処理時間で、人の作業や待ち時間は含みません。

以下は2026年10月31日の今回の実演記録です。料金の保証や、同じサイトを作る場合の見積もりではありません。

公開費用：0円。無料枠、外部プラグインなし、画像同梱、独自ドメインなしの条件です。
画像生成：11枚で約19円。今回の生成に関する記録で、月額契約とは別の扱いです。
Claudeの累計処理時間：約46分。人の確認や待ち時間を含む制作全体の所要時間ではありません。
Claudeの契約：月額100ドルのMaxを利用。1ドル157.5円として約15,750円。すでに契約していたため、この作業による追加契約はしていません。

週の利用枠の表示は54%から56%へ、2ポイント増えました。ただし同時にほかの作業もしていたため、この差を本案件だけの消費量と断定することはできません。

動画では月額を週に換算し、表示上の2%を掛けて「約70円」という参考配賦も紹介しました。計算は15,750円÷4.3週×2%で約73円です。これは請求額でも、今回だけの正確な利用料金でもありません。画像の19円と足して「サイト制作の実費は89円」とするような使い方は避けてください。

実案件では、独自ドメイン、保守、人の確認、原稿や写真の準備、問い合わせ機能、必要に応じた有料サービスも考えます。「公開費用0円」と「制作・運用の総費用0円」は別です。

Claudeへの頼み方は、4つをセットにすると整理しやすくなります。役割と目的を伝える、勝手に公開・課金・秘密情報の表示をしないなどの禁止事項を決める、PCとスマートフォンで自己点検させる、最後に弱点と未確認事項を報告させる、という流れです。

今回の実演で手応えがあったのは、初稿の速さだけではありません。要件整理、修正指示の反映、複数案の比較、更新作業まで、同じ流れで進められたことです。一方、安全性の確認や公開の責任は残ります。AIを制作チームとして活用し、人が目的と品質を判断する。その組み合わせが、今回もっとも現実的だと感じた使い方でした。

出典・実演の条件

実演・費用・時間・画面：ラビビット｜Claude×EmDash 実演動画（2026年10月31日収録）。本文の画面はこの実演素材から抜粋しました。企業・人物・実績は架空です。デモサイトの公開URLは掲載していません。

公式仕様：EmDashドキュメント／公式リポジトリ／Workersの制限／Dynamic Workersの料金。公式仕様は2026年11月1日確認。図解は実演内容をもとに当メディアがAIを用いて制作しました。