AIサラリーマン
AIのはじめ方

ホームページ制作、外注すると数十万円。AIなら1日でデモが出せた【Claude Design】

ホームページ制作、外注すると数十万円。AIなら1日でデモが出せた【Claude Design】
※ 本記事はアフィリエイト広告を含む場合があります。

お店や事業のホームページ、制作会社に頼むと数十万円かかることも珍しくありません。「まず形を見てみたい」だけなのに、その金額は重い。

私はAIの「Claude Design」で、飲食店（生パスタ専門店）のデモサイトを1日で作りました。デザインの勉強はしたことがありません。この記事では、その実例と、コピペで使える「HP発注書テンプレート」を配布します。

Claude Designとは

Anthropic（Claudeの開発元）のデザイン特化AIです。会話で要望を伝えると、ホームページ・LP（1枚もののWebページ）・スライド資料などの「見た目」を作ってくれます。

従来のやり方Claude Design
必要なスキルデザインソフトの操作日本語で要望を言うだけ
デモ1本の時間数日〜数週間数十分〜1日
やり直し修正依頼のたびに待つその場で「もっと明るく」と言えば直る
  • ✓利用にはClaudeの有料プラン（Pro以上）が必要です（2026年7月時点）
  • ✓できたものはHTML・PDF・PowerPointなどの形式で書き出せます

実例：生パスタ専門店のデモサイト

私が実際に作ったときの流れです。

1. お店のコンセプト（生パスタ専門・落ち着いた雰囲気）と、欲しいページ（トップ・メニュー・アクセス）を伝える

2. 数分で、写真の配置からメニュー表まで入ったデザインが出てくる

3. 「もう少し高級感を」「メニューは写真つきで」と会話で直していく

4. 完成品を書き出して、そのまま「こんなサイトはどうですか」という提案に使えた

デザインの知識ゼロでも、会話だけで「プロっぽい見た目」まで行けます。 行けなかったのは私のセンスではなく、道具がなかっただけでした。

コピペで使える「HP発注書」テンプレート

Claude Designに貼る依頼文の型です。制作会社に出す発注書と同じ要領で、穴埋めしてください。

コピペで使えるプロンプト
ホームページのデザインを作ってください。

【業種・店名】（例：生パスタ専門店「◯◯」）
【誰に見てほしいか】（例：30〜40代の夫婦、記念日利用）
【雰囲気】（例：落ち着いた高級感。色は深い緑と生成り）
【必要なページ】（例：トップ／メニュー／こだわり／アクセス）
【絶対に入れたい要素】（例：営業時間、予約の電話番号、地図）
【参考にしたい実在サイト】（あればURL）

まず全体の構成案を見せてください。OKを出したらデザインに進んでください。

コツは【誰に見てほしいか】を必ず埋めること。ここが決まると、AIが選ぶ色も写真の雰囲気も一気に「それっぽく」なります。

できたものをどう使うか

  • ✓提案・確認用：書き出したファイルをそのまま見せる。「イメージと違う」を発注前に潰せるのが最大の価値です
  • ✓本公開したい場合：サーバーの契約とドメイン（住所）の取得が必要になります。ここから先は別の話になるので、続きの記事で扱う予定です

向いていること・いないこと

向いている向いていない
お店・事業のHP、LP、キャンペーンページ予約システム・会員機能など「動く仕組み」
提案資料・スライドの見た目づくり大規模なサイトの全ページ制作
「まず形を見たい」段階の試作—

「動く仕組み」が欲しくなったら、それはClaude Codeの出番です（当ブログのメインテーマです）。

まとめ

  • ✓Claude Designは会話でHP・LP・資料の見た目を作れるAI（Pro以上・2026年7月時点）
  • ✓デザイン知識ゼロの私でも、飲食店のデモサイトが1日でできた
  • ✓依頼のコツは「HP発注書」の穴埋め。この記事からコピペでどうぞ
  • ✓数十万円の発注をする前に、まずAIで「形」を見てから判断する時代です
← 記事一覧に戻る