CHATGPT × CODEX × CLAUDE CODE / お店のホームページづくり
AIと考える。
CodexやClaude Codeで、形に。
何を書けばいいか、から相談してOK。
決まった内容を指示文にまとめて、
実際のページを作るところまで。
START HERE / 準備から公開まで
相談して、形にして、公開する。
まずは、この6ステップ。気になる手順を押すと、画面と指示文の説明へ進めます。
BUDGET / 費用の目安
まず無料で試して、公開に予算を。
手持ちのパソコンで自作する場合の目安です。AIやデザインソフトは、必要になってから有料版を選べます。
相談・小さな見本づくり
0円から
ChatGPT / Canva の無料プラン
文章や構成を考え、画像を用意するところから。AIは利用回数や機能に制限があります。
WordPressで公開・維持
13,200円／年
月あたり1,100円・12か月分を前払い
エックスサーバー・スタンダードの通常料金で計算。対象ドメインの無料特典＋無料テーマを使う例です。
必要なら、有料AIを追加
20米ドル／月
ChatGPT Plus の公式表示価格
Codexで制作を進めたいときの選択肢。日本円の予算は月3,000〜4,000円程度を仮置きし、申込画面で確認します。
最初の1年は、約1.7万円をひとつの目安に。 サーバー1年13,200円＋有料AIを制作する1か月だけ3,000〜4,000円で見積もると、合計16,200〜17,200円。無料AIの範囲で進めれば、AIの追加費用はかかりません。
見積もりの条件と、あとからかかる費用
サーバー：上記はキャンペーンを含めない12か月契約の税込額です。確認時は初期費用0円。月1,100円ずつの支払いではなく、契約期間分を前払いします。更新時の料金も契約画面で確認してください。公式料金表
ドメイン：スタンダードを新規で12か月以上契約し、自動更新を有効にするなど、特典の条件を満たす場合は対象ドメイン1つが契約中無料です。対象外の種類や別会社で取得する場合は、取得・更新費用が別にかかります。無料特典の条件
AI：3,000〜4,000円は為替・税などの変動を見込むための予算枠で、公式の日本円料金ではありません。決済方法でも金額が変わるため、実際の請求額は申込画面が優先です。Plusを12か月続けるなら、サーバーと合わせて年49,200〜61,200円程度を予算枠に。追加クレジット・API利用料は含めません。無料プランのCodexは短い作業向けで、利用可能なモデルや環境、上限はプランにより異なります。公開後のdots利用まで含む予算ではないため、dotsの対象プランは別に確認してください。
デザイン：WordPress本体・無料テーマ、Canvaの無料素材、自分の写真で始められます。有料テーマ・有料素材・Canva Pro・制作の外注は別予算。この記事で紹介する3D制作は応用例なので、ホームページ作りの必須準備ではありません。
見積もりの範囲：パソコン購入費・通信費・撮影費・有料プラグインは含めていません。すでに使っているサーバーやAI契約を活用できれば、追加負担を抑えられます。
ChatGPTの「Chat」
内容・文章・制作指示文を一緒に考える。
Codex
指示をもとにファイルを作り、表示を直す。
今回は、この使い分けで進めます。プロンプトとは、AIに渡す「お願いの文章」のことです。
デザインが決まらないときは：Skills・日本語フォント・指示のコツ →
ChatGPT・Claude・Gemini・Grokを比べる4つの特徴と使い分け → CanvaやBlenderを、AIに使ってもらう作り方の違いと接続方法 →4つのAI、どう選ぶ？
同じお願いでも、
返ってくる答えは違う。
ChatGPT、Claude、Gemini、Grok。どれかひとつが全部に強い、というより仕事との相性があります。まずは、私が使って感じた魅力から。各カードの「できること」は公式情報で確認しています。
ChatGPT
チャットGPT / OpenAI相談から制作まで、総合力。
私が魅力に感じるのは、幅広く頼めることと、伝えた条件に沿って作業を進めてくれるところ。細かくお願いした内容を、形にしていく使い方がしっくりきます。
Claude
クロード / Anthropic文章を磨く。発想を広げる。
私の印象では、文章力と独創力が魅力です。説明は合っているのに読んでいて面白くない。そんなときに、違う切り口や言い回しを考えてもらう相手に向いています。
Gemini
ジェミニ / Google日本語を、すっと読める形に。
私は、日本語の自然さが魅力だと感じます。少し固い説明を、お客様へ話すような言葉に直したいときに試してみたいAIです。
Grok
グロック / xAIいまの話題を、発信元へ。
私が魅力に感じるのは、新しい情報を素早く探せるところ。企業や当事者が直接出した「一次情報」へ、早くたどり着きたいときの入口として便利です。
モデルと機能を、もう一歩。
AstraやFable。
名前の違いで、何が変わる？
同じAIでも、選ぶモデルや設定で使い心地は変わります。短い返信をさっと作るのか、資料を読み込んでサイトまで仕上げるのか。任せたい仕事から選ぶと分かりやすくなります。
気になるAIを開くと、モデルの違いと仕事での使い方が読めます。以下の仕事例は、公式の特徴をもとにした使い分けの提案です。
ChatGPT｜Astra・Sol・Luna難しい仕事を任せる／日々の制作を進める／決まった作業を手早く
Astraは、調べて、考えて、作るまでつながる仕事に。記事の言い換えだけなら、毎回いちばん重い設定にする必要はありません。
- GPT-6 Astraアストラ
- 複雑な仕事を、完成まで任せたい。調査、アプリ操作、コード制作をまたぐ難しい仕事に向くモデル。例えば、サイト全体を点検し、問題を整理して修正・確認まで進める場面です。
- GPT-6.1 Solソル
- 日々の制作と、利用量のバランス。Astraに近い能力を、より低いコストで使う位置づけ。記事や資料、サイトの更新を繰り返し頼むときの候補です。
- GPT-6 Lunaルナ
- やることが決まった作業を、手早く。要約、情報の抜き出し、分類などに向きます。「施工メモから機種・症状・対応だけを表にする」といった仕事に。
モデルのほかに「考える深さ」も選べる
まずは標準設定で試し、条件が多い仕事は思考の深さを上げます。Maxはひとつの難題をじっくり考える設定。Ultraは複数のAIに作業を分担させる設定です。深く考えるほど時間や利用量も増えるため、短い返信や誤字修正では上げすぎなくて大丈夫です。
Sol・LunaはChatGPTのWork／Codex側のモデルです。通常のChatの選択肢とは異なります。選べるモデル・深さ・速度は、プランや画面、提供状況で変わります。Work／Codexの入力欄付近にあるモデル・思考設定から確認できます。
Chat・Work・Codex・dotsの使い分け
- Chat
- 相談、文章の下書き、アイデア出し。「どんなページが必要？」から一緒に考える入口。
- Work
- 資料やファイルを使って、確認できる完成物まで作ってもらう。「比較表と説明資料を作って」のような依頼に。
- Codex
- サイトやアプリのコードを直し、動作も確認する制作の場。モデルを選ぶだけでなく、作業するファイルや権限も必要です。
- dots
- 継続する仕事を受け持つエージェント。クラウド上の作業は自分のPCがオフでも進められます。自分のPC内のファイルやアプリを使う作業には、接続とPCの稼働が必要です。
Claude｜Fable・Opus・Sonnet・Haiku難しい調査から、文章の手直しまで。仕事の重さで選ぶ
Fableは、難しい判断や長い工程を任せるためのモデル。文章の好みだけでなく、仕事全体をどこまで進めてもらうかでも選び方が変わります。
- Fable 5.1ファブル
- 複雑な調査や、長い仕事をまとめる。多段階の調査、長時間の制作、資料や表・スライドまで仕上げる仕事に。例えば、複数の資料を読み比べて、矛盾を確認しながら記事を作る場面です。
- Opus 5.5オーパス
- 込み入った制作や分析を進める。複雑なコード制作や知識を使う仕事の有力な選択肢。長い説明の構成を整理し、条件を守って仕上げたいときにも試せます。
- Sonnet 5.5ソネット
- 速さと力のバランスで選ぶ。日常の文章・分析・制作に。施工事例の下書き、見出し案、説明の言い換えなどを何度もやり取りする場面に。
- Haiku 4.5ハイク
- 短く、決まった処理を素早く。情報の分類や短い要約など、量の多い単純な処理向け。選べる画面やプランは確認が必要です。
Fableは「有料なら追加料金なし」とは限らない
確認時点では、ProのFable利用は月額内の通常枠ではなく、使用量に応じたクレジット課金です。Maxでは週の利用上限の一部に含まれますが、Fable用の上限があります。選ぶ前に、モデル欄と利用状況を確認しましょう。
文章を作る、その先にある機能
- Artifactsアーティファクト
- 文章、図、資料、小さなツールなどを会話の横に表示し、見ながら直せます。「説明を短く」「この部分を表に」と調整する使い方に。
- Coworkコワーク
- ファイルや連携した道具を使って、まとまった仕事を進める機能。資料整理や完成ファイルの作成に使います。現在は通常の会話と統合する画面へ順次移行しており、「Cowork」の切り替えが出ない場合もあります。
- Claude Code
- サイトやアプリなど、コードを扱う制作のための道具。FableやOpusは、その中で選ぶモデルです。集客サイトでの作り方へ →
- Effort思考の深さ
- 同じモデルに、どれくらい考えてもらうかの設定。通常は標準で始め、複雑な分析で上げます。深くするほど時間と利用量が増えます。
Gemini｜Flash-Lite・Flash・Pro速さと分析の深さ。GemやCanvasも合わせて使う
- Flash-Liteフラッシュライト
- 軽い相談や要約を、すぐに。短い返信やアイデア出しなど、スピードを重視する仕事向け。
- Flashフラッシュ
- 日常の相談から、少し複雑な依頼まで。速さと思考力のバランスを取るモデル。記事の下書きや案内文を繰り返し直す場面で試せます。
- Proプロ
- 資料や条件を、深く読み取る。複雑な問題やコード制作、ファイル・画像・動画を含む分析向け。ほかのモデルより回答に時間がかかることがあります。
さらに思考レベルを調整できる場合があります。標準は日常の相談、拡張思考は複雑な検討向け。Deep ThinkはProモデルで使う高度な思考機能で、Google AI Ultraなど対応する契約が必要です。
毎回の説明を減らすGem、形にするCanvas
- Gemジェム
- 繰り返し使う指示をまとめた、自分用の相談相手。「お客様向けに専門用語をやさしく言い換える」など、いつものルールを設定できます。
- Canvasキャンバス
- 文章やコード、資料などを見ながら編集する作業スペース。記事の構成案を作り、必要な部分を直して仕上げる使い方に。
- Deep Research
- 時間をかけて情報を調べ、レポートにまとめる機能。モデル名ではありません。利用回数や範囲は契約・提供状況で変わります。
モデルのProと、月額プランのGoogle AI Proは別の名前です。ここではモデルの系統で紹介しています。画面に付く世代番号や利用上限は変わるため、契約名だけで判断しないようにしましょう。
Grok｜会話・検索・Imagine・BuildXの情報探しに加え、画像・動画や制作の機能も
Grokも、話題を探すだけのAIではありません。会話や検索、画像・動画作り、コード制作で使う機能が分かれています。
- Grokの会話・検索
- ウェブやXの公開投稿を調べながら相談する入口。「メーカー本人の発表を探して、発表日とリンクを添えて」と頼むと、元の情報を確認しやすくなります。
- Grok 4.6／4.7モデルの世代
- 公式のプラン案内では4.6を掲載。一方、制作向けのGrok Buildでは4.7を案内しています。同じGrokでも、使う場所によってモデルが異なるため、手元の画面を確認してください。
- Imagineイマジン
- 画像や動画を作る機能。記事のイメージ案や説明用の素材作りに。実際の施工写真とは区別して使います。
- Grok Build
- パソコンでコード制作を進めるための道具。現在の公式案内はGrok 4.7で、サイトやアプリなど複雑な制作を扱います。
- Voiceボイス
- 声で会話する機能。キーボードに入力しづらいときの相談に使えます。
SuperGrokなどは契約プラン、Expertは機能・モードの名前で、モデルの世代とは別です。X内とgrok.com、Buildでは使える機能や上限が異なる場合があります。
モデル・機能の確認日：2026年10月5日。料金や利用範囲は変わるため、申し込み前に公式画面で確認してください。上位モデルを選んでも、事実確認や最終チェックは必要です。
このページでは、私が総合力に魅力を感じているChatGPTを使って進めます。文章や発想を変えたいときはClaudeやGemini、最新の発信を探したいときはGrok。同じお願いを試すと、自分に合うAIが見えてきます。
ChatGPTで、サイト作りを始める →使い心地は個人の感想です。指示への正確さ・文章の好み・調査の速さは、モデルや依頼内容で変わります。機能は2026年10月5日に確認。dotsを含む利用範囲は、プラン・提供地域・連携設定などにより異なります。公開前には、どのAIの回答も内容を確認しましょう。
公式ロゴ：OpenAI・Anthropic・Source: Google・Grok。ロゴは各社に帰属します。本記事は各社の公式記事ではありません。
AIに、得意な道具を持たせる。
CanvaやBlenderも、
AIと一緒に使える。
「画像を作って」と頼むだけでも便利です。そこから一歩進んで、「Canvaで、あとから文字を直せる図に」「Blenderで、回転させて見られる立体に」と頼むと、完成後の使い道が広がります。
AIで直接作る
まず、イメージを形に。
文章、画像、SVG、ページのコードなどを作る方法。案を素早く出して、方向性を決めたいときに。
AI＋Canva
文字と写真を、あとで直す。
図解、チラシ、料金表、SNS画像向け。文字・写真・図形を編集できる形で残し、使い回しやすくします。
AI＋Blender
同じ立体を、別の角度から。
内部構造、分解図、回転動画向け。部品の形や位置を立体として保存し、必要な見せ方に変えられます。
青い線画は作り方を示すイメージです。Blenderは公式ロゴを掲載しています。
実際のチャットから、制作例をご紹介。
こんなふうに頼んで、
実際に作りました。
このサイトの制作でも、AIとCanva、Blender、Claude Codeを組み合わせています。最初は短いお願いから。出来上がりを見て「ここを直して」と伝えながら、説明に使える図や動画へ仕上げていきました。
制作例 01 ／ AI ＋ CANVA
部品の名前と、水の流れを一枚に。
言葉だけでは伝わりにくい、エアコンの中身。断面図にすると、部品の位置と空気・水の流れを一緒に説明できます。
最初に送った指示Canvaを使ってエアコンの断面図を描いて。
出来上がりを見て、追加の指示
「ラムダ型の熱交換器は、背面にもケーシング一体型の水受けがあります」
「背面ドレンから前面のドレンに、ファンの横を通って結露の水が合流します」
そこから、どう変わった？
背面の水受けを追加し、前面側と区別しました。さらに、水が合流する経路を青緑の点線と矢印で図の中へ。部品名を並べるだけでなく、流れをたどれる説明に近づけています。
仕事で使うなら：お客様への説明、ブログの図解、作業前の資料に。文字や配置を後から直せる形で残すと、説明する内容に合わせて使い回せます。
この制作では、AI側で図解パーツを作り、Canva連携で配置や文字を編集しました。掲載画像には、その後の追加指示も反映しています。部品や排水経路は機種によって異なります。
Canvaへのつなぎ方を見る →制作例 02 ／ AI ＋ BLENDER
「暑さは、どこへ消えた？」を3D動画に。
室内機と室外機の間で、熱がどう移動するか。立体の中を見せながら、字幕と日本語ナレーションで伝える動画を作りました。
最初に送った指示既存のソフトを把握して、もっとも適したソフトを使用して、エアコンの仕組みを分かりやすく説明する3D動画を作成して。
追加で伝えたこと
「ただの説明ではなく、見たいと思えるような魅力的なものにして」
「エアコンの形もしっかり合わせて」
→ 一般的な壁掛けエアコンの形を指定。
そこから、どう変わった？
「暑さは、どこへ消えた？」という問いから始まる構成へ。カメラの動きや外装が開く演出を加え、横長の室内機と丸いファンガードの室外機に形を整えました。
仕事で使うなら：文章だけでは伝えにくい仕組みの説明に。3Dの元データを残しておけば、同じモデルから別の角度の画像や動画を作れます。
この制作では、AIが作った指示ファイルをBlenderで実行し、立体と動きを制作。音声・字幕・音楽は別の処理で合成しています。熱の流れを見せる説明用CGです。
制作例 03 ／ CLAUDE CODE
裏紙の走り書きが、そのまま記事の図になる。
パナソニックの右側水漏れで、お客様に説明するときに裏紙に描く「ブリッジ現象」のメモ。スマホで撮ってメールに添付し、Claude Codeに「記事に使える図にして」と頼みました。最初の図は違っていましたが、メモを描き足して送るたびに直り、4往復で現場の感覚どおりの図になりました。
最初に送った指示Gmailに添付した手描きの図（エアコンの水漏れ原因のひとつ、ブリッジ現象）を、記事に使える図解に清書して。
出来上がりを見て、追加で伝えたこと
1回目：熱交換器のフィンから水が落ちる絵になっていた。「熱交換器ではなく、背面から前面への排水経路。サイト内で説明しているパナ特有の水漏れ」
2回目：水が出口の先へ飛び出す絵に。「出口の下面を伝って外へ。実際はこう伝う」と描いたメモを1枚追加。
3回目：「排水経路が長すぎる。先端の下の部分だけが水平に近く、そこを伝うからブリッジが起こりやすい」
4回目：3コマの図も合わせて直してもらったら向きが逆に。「出口がぬれてる／かわいてる／特殊具」の3コマを手描きしたメモを送り、「水は先端から奥へ戻って受け皿の後ろに落ちる。特殊具は先端の下に付けて下面を伝わせない」
そこから、どう変わった？
1回目でサイト内のパナソニック記事を読み直し、「背面の水受け → 排水溝 → 出口 → 手前ドレンパン」の流れに。2回目で受け皿を出口の真下に置き、3回目で排水溝を短くして先端の下面だけが水平な形に。4回目で水の向きを「先端で落ちずに下面へ回り込み、奥へ戻って受け皿の後ろに落ちる」で確定し、3コマの図も同じ構造にそろえました。
直すたびに、AIは言葉だけの指示よりメモをもう1枚描いて送ったときのほうが正確に直りました。きれいに描く必要はなく、矢印と一言で十分です。
仕事で使うなら：お客様への説明、トラブル記事の図、研修や同行のときの資料に。現場で描いたメモを、その日のうちに記事の図にできます。文字が編集できる形で残るので、機種名や言い回しを変えて使い回せます。
この制作では、Claude Codeが手描き写真を読み取り、SVG（文字を編集できる図の形式）を作成。確認用の下書きページで表示を見てから、記事3本への貼り付けまで同じ画面で行いました。パナソニック記事での使用例を見る →
Claude Codeでの作り方を見る →制作例 04 ／ CLAUDE CODE
「いくら？」に、問い合わせの前に答える料金シミュレーター。
問い合わせの大半は「うちのエアコンだと、いくら？」です。台数とオプションを選ぶと概算が出る小さな部品を、Claude Codeに作ってもらい、自分のサイトに貼る前提でこのページに埋め込みました。下は実際に動く見本です（料金は架空の店の例）。
最初に送った指示エアコンクリーニング店の料金シミュレーターを作って。台数・お掃除機能の有無・駐車場の有無を選ぶと概算が出て、自分のサイトに埋め込める形に。料金は上のメモ（PS_CONFIG）だけ書き換えれば動くようにして。
エアコンクリーニング 料金シミュレーター
台数とオプションを選ぶと、税込の概算が出ます。正式な料金は機種・設置状況を確認してからお伝えします。
出来上がりを見て、追加で伝えたこと
「概算と言い切って、正式料金は型番と設置状況を見てからと書いて」
「合計だけでなく内訳と作業時間の目安も出して。最後はLINEと電話のボタンで、問い合わせにつなげて」
そこから、どう変わった？
料金・名称・LINEのURL・電話番号は、コードの一番上にある PS_CONFIG という1か所にまとめました。ここを書き換えるだけで自分の店の料金になり、種類やオプションの行を増やすこともできます。複数台割引と駐車場代も同じ場所で設定します。
仕事で使うなら：料金ページの下や、LINEの案内の手前に。「概算を見てから相談」の流れにすると、料金だけ聞いて終わる電話が減り、相談の内容が具体的になります。
この制作では、Claude Codeが1つのファイル（HTML・見た目・計算をまとめたもの）を作成。アプリのブラウザーでスマホ幅の表示とボタンの動きを確認してから、WordPressの「カスタムHTML」ブロックに貼り付けました。外部サービスや月額費用はかかりません。
自分の店の料金で作ってもらう：指示文を開く
CLAUDE.md（お店のメモ）に料金を書いてあれば、そのまま使われます。
CLAUDE.mdの料金で、エアコンクリーニングの料金シミュレーターを1つのHTMLファイルとして作ってください。 ・入力：種類ごとの台数（壁掛け／お掃除機能付き／天井埋込）、オプション（室外機・防カビコート）、駐車場の有無 ・出力：税込の概算合計、内訳、作業時間の目安 ・最後にLINE公式アカウントと電話のボタン。LINEのURLと電話番号はCLAUDE.mdのもの ・料金・名称・URLは、ファイルの一番上の設定1か所にまとめ、そこだけ直せば動くようにする ・「表示は概算。正式な料金は型番と設置状況を確認してから」の注意書きを入れる ・外部サービスやライブラリは使わず、WordPressのカスタムHTMLブロックに貼れる形にする ・できたら、アプリのブラウザーでスマホ幅（390px）とパソコン幅で動きを見せてください 本番サイトには貼らず、このフォルダーの中だけで作ってください。
貼り方：WordPressの投稿または固定ページで「＋」→「カスタムHTML」を選び、できたファイルの中身を丸ごと貼り付けて「プレビュー」で確認します。料金を変えるときは PS_CONFIG の数字だけ直します。
Claude Codeでの作り方を見る →一度で完成させようとしなくて大丈夫。
「作ってもらう → 自分の知識で確認する → 足りないところを具体的に伝える」。この往復で、現場で使える説明に近づけていきます。
指示は実際の制作チャットから、誤字や表記を整えて抜粋しています。画像・動画はその制作で保存した成果物です。個人情報やアカウント画面は掲載していません。
外部のサイトやソフトを動かす、3つの方法
- 1アプリ連携でつなぐCanvaなどの対応アプリをAI側で接続し、用意された機能で作成・編集します。画面を何度もクリックする操作を減らせるのが利点。連携によっては閲覧だけなので、編集までできるか確認します。
- 2ブラウザや画面を操作してもらうログイン済みのサイトやソフトを、AIが画面を見ながら操作します。専用の連携がない操作にも使えますが、対応環境・ログイン・操作権限が必要です。
- 3ソフト用の手順を作って、実行するBlenderなら、Pythonという言語で書いた指示ファイルを使えます。同じ部品の配置や角度を再現しやすく、まとまった修正にも向きます。ファイルを作るだけでなく、Blenderで実行して結果を確認するところまでが作業です。
例えば「比較表の画像を作る」ならAIだけで足りることもあります。「毎月、金額と写真を差し替える」ならCanva、「同じ部品を回転させ、分解状態も見せる」ならBlenderが候補になります。
Canvaを操作してもらうには？接続 → デザインを指定 → 編集リンクと完成画像を受け取る
ここではChatGPTとの公式連携を例にします。Canvaの連携は、デザインの検索だけでなく、対応するデザインの作成・編集・プレビューにも使えます。
- ChatGPT側でCanvaを接続する。設定の「Plugins／アプリ」からCanvaを探し、案内に沿ってCanvaアカウントへログインします。接続済み・有効になったことを確認します。表示名や位置は利用環境で異なります。
- 「Canvaで作って」と、仕上がりを指定する。用途、サイズ、色、入れる文章・写真を渡します。既存デザインを直すなら、その編集リンクを指定します。
- 編集できることを確認する。プレビューを見て直し、Canvaの編集リンクと掲載用の画像・PDFを受け取ります。料金や連絡先などの文字が、画像に焼き込まれず直せる状態かも確認します。
そのまま頼める指示文
Canvaを使って、エアコンクリーニングの「通常分解・ドレンパン脱着・背抜き」の違いを説明する横長の図を作ってください。 白・青・濃紺を使い、スマホでも読める文字の大きさにしてください。添付した写真と確認済みの文章を使い、文字・写真・図形をあとで差し替えられる形にしてください。 既存のデザインを使う場合はコピーを作り、編集リンクと掲載用PNGを渡してください。有料素材が必要なら、使う前に教えてください。
Canva Freeでも公式連携を利用できます。ただし、すべての素材・AI機能・ブランド機能が無料になるわけではありません。まず無料素材で作り、必要な機能だけ契約を検討できます。
Blenderを操作してもらうには？写真・分解図を渡し、編集できる立体と画像を作る
BlenderはPCに入れて使う3D制作ソフトです。AIが画面を操作する方法と、AIが書いたPythonの指示ファイルをBlenderで実行する方法があります。繰り返し配置する部品や寸法の調整は、指示ファイルにしておくと再現しやすくなります。
- Blenderと作業フォルダーを用意する。公式サイトからBlenderを入れ、AIに「この環境でBlenderを実行できるか」を確認してもらいます。ソフトが入っていても、AIから使う権限がない場合は操作できません。
- 形が分かる資料を渡す。正面・側面・背面の写真や分解図、分かる寸法を渡します。「どの部品が外れるか」「どれが本体と一体か」も伝えると、構造を作りやすくなります。
- 部品を分けて作り、組み立て状態を確認する。部品ごとに名前を付け、まず簡単な形で配置を確認。完成した立体を回転させ、部品の重なりや、ありえない突き抜けがないか確かめてから質感を整えます。
- 元データと、ブログに使う画像を残す。.blendファイル、正面・斜め・分解状態の画像を保存します。AIが実行できる環境なら、指示ファイルの実行と画像の確認までまとめて頼めます。
そのまま頼める指示文
Blenderを使い、添付した分解写真と図面を参考に、壁掛けエアコンの説明用3Dを作ってください。 熱交換器、ファン、ドレンパン、モーター、電装ケースを別々の部品にし、一体型の部分は写真どおりに扱ってください。資料にない部品を想像で足さず、判断できない箇所は確認してください。 まず形と配置を見せ、確認後に色や質感を整えてください。組み立て状態で部品が突き抜けていないか確認し、編集用の.blend、正面・斜め・分解状態のPNGを保存してください。
AIからBlenderを動かせないときは
「このBlenderのバージョンで動く指示ファイルと実行手順を作って」と頼めます。自分で実行する場合は、Blenderの「Scripting」でText Editorを開き、確認した指示ファイルを読み込んで「Run Script」を実行します。画面に出た結果をAIへ見せ、修正を進めます。
Blender本体は無料です。AIの利用料や、有料の素材・追加機能は別です。Blenderを使うだけで内部構造が正しくなるわけではないので、写真・寸法・現物との照合が仕上がりを左右します。
ほかのサイトやソフトを操作してもらうには？ChatGPT／Codexでのブラウザ・画面操作の例
通常のチャットへURLを貼るだけで、必ずそのサイトを編集できるわけではありません。専用のアプリ連携があれば先に確認し、画面操作が必要ならブラウザやComputer Useを設定します。
- 操作するブラウザを接続する。デスクトップアプリの「設定 → Computer Use」で使うブラウザを選び、案内に沿って公式拡張機能を設定します。既存のChromeなどを使う方法と、アプリ内のブラウザを使う方法があります。
- 対象サイトへ、自分でログインする。AIが操作する側のブラウザでログインします。普段のブラウザとアプリ内ブラウザでは、ログイン状態が別の場合があります。パスワードはサイトの画面へ入力します。
- 操作する場所と、終わりの状態を伝える。Work／Codexで「@Chrome」などから対象を選び、ページ名、変更箇所、保存先を指定します。PCソフトの画面操作は、対応環境でComputer Useを有効にして行います。
- 保存後の画面と成果物を確認する。文章の説明だけで終わっていないか、実際に保存されたかを見ます。WindowsのPCソフトを画面操作する場合は、対象を表示し、同じ画面を同時に操作しないようにします。
例えば、サイトの編集を頼むなら
いま開いているWordPressの「道具の選び方」を編集してください。 現在の本文をバックアップし、添付写真を指定した見出しの下へ追加してください。ほかの文章とリンクは変えず、まずプレビューでPC・スマホ表示を確認してください。 読み取りだけなのか、編集・保存までできる接続なのかを最初に確かめ、できない操作があれば理由を教えてください。確認用の画面には個人情報を入れないでください。
使える接続や画面操作は、AIサービス・OS・プラン・管理者設定で異なります。専用連携がないソフトでも操作できる場合はありますが、すべてのアプリが対象になるわけではありません。
手順は公式情報をもとにした利用例です。メニュー名や対応範囲は環境で変わります。
CHATGPT または CLAUDE / 相談
「何を書こう？」から相談する。
ChatGPTかClaudeを開き、普通の会話でお店のことを伝えます。最初から長い指示文を考えなくても大丈夫です。どちらを使っても、この先の手順は同じです。
たとえば「料金は決めているけど、どんな順に見せるか迷っている」。普段の言葉で相談し、質問に答えながら内容を決めます。
① ChatGPTに最初に送る指示文
エアコンクリーニング店のホームページを作りたいです。 まずChatGPTで内容を整理し、決まった指示をCodexに渡して制作します。 目的：料金と作業内容が分かり、お客様が相談しやすいホームページにしたい 屋号：［自分の屋号］ 対応エリア：［市区町村］ 作業内容と税込料金：［実際の内容・料金・追加料金］ 写真：［用意できる自分の現場写真］ 相談方法：［電話・フォームなど、使っている窓口］ 公開先：WordPress 足りないことを3つまで質問してください。 回答をもとに、ページの構成と短い本文を一緒に考えたいです。 口コミ・件数・資格・保証・料金は勝手に作らないでください。 まだ制作は始めず、最後にCodexへ渡す制作指示文にまとめてください。
① Claudeに最初に送る指示文
claude.aiの通常の会話で送ります。内容はChatGPT用と同じで、渡す先をClaude Codeに変えてあります。
エアコンクリーニング店のホームページを作りたいです。 まずこの会話で内容を整理し、決まった指示をClaude Codeに渡して制作します。 目的：料金と作業内容が分かり、お客様が相談しやすいホームページにしたい 屋号：［自分の屋号］ 対応エリア：［市区町村］ 作業内容と税込料金：［実際の内容・料金・追加料金］ 写真：［用意できる自分の現場写真］ 相談方法：［電話・フォームなど、使っている窓口］ 公開先：WordPress 足りないことを3つまで質問してください。 回答をもとに、ページの構成と短い本文を一緒に考えたいです。 口コミ・件数・資格・保証・料金は勝手に作らないでください。 まだ制作は始めず、最後にClaude Codeへ渡す制作指示文と、お店のメモ（CLAUDE.md用）の2つにまとめてください。
CHATGPT → CODEX
決まったことを、ひとつの指示文に。
相談がまとまったら、ChatGPTに「Codexに渡す制作指示文にまとめて」と頼みます。
- 伝える内容誰向けか・頼める作業・税込料金・対応エリア。
- 見た目の希望写真を大きく、文章を短く。参考サイトがあれば添える。
- 使う素材と相談先自分の現場写真、公開してよい電話番号や窓口。
- まだ決めていないこと未定は未定のまま。AIに勝手に埋めてもらわない。
② Codexに渡す指示文をまとめてもらう
ここまで決めた内容を、Codexにそのまま渡せる制作指示文にまとめてください。 次の順番にしてください。 1. 誰に、何を伝えたいサイトか 2. 確定した屋号・料金・対応エリア・問い合わせ先 3. 作るページと、それぞれの見出し・本文 4. 写真の使いどころと、写真がない場所 5. 見た目の希望（配色・日本語フォント・余白・写真の大きさ・編集できる形） 6. スマホでの条件（横にはみ出さない、ボタンを押しやすく） 7. まだ決まっていない項目 8. 完了時に確認すること 確定した内容と未定の内容を分けてください。 WordPressで使うこと、まず確認用の見本を作り、本番公開は確認後にすることも入れてください。 コードは不要です。制作を頼むための文章を1つにまとめてください。
仕上がりを整える / 必要になったら
AIに、作り方のルールを渡す。
「おしゃれに作って」だけでは、好みと違うものができることも。誰に何を伝えるか、どこを編集したいか、日本語をどう見せるかまで決めると、修正する基準がそろいます。毎回使う手順は、Skills（スキル）としてまとめる方法もあります。
プロンプト
今回のお願い。
例：エアコンクリーニングの料金ページを作る。Skills
繰り返し使う作業手順。
例：配色をそろえ、スマホ表示まで確認する。ツール・連携
実際に作成・編集する道具。
例：Canva、WordPress、ブラウザー操作。最初は指示文だけでも始められます。
Skillsは、繰り返す作業をそろえたいときの選択肢です。導入しただけでデザインや内容が正しくなるわけではなく、完成画面の確認は必要です。
作りたいものから、道具と残すデータを選ぶ
- お店のホームページ
- WordPressのブロックや、後から直せるHTML・CSS。縦に読める構成と、問い合わせまでの動きを確認します。
- 料金表・説明図
- Canvaの編集データやSVG。文字・金額・図形を個別に直せる形が便利です。外部ツールとの使い分けを見る。
- 営業・研修の資料
- PowerPointで直すならPPTX、ブラウザーで発表するならWebスライド。出力したファイルでも文字が編集できるか確認します。
紹介したい参考資料は、StudioYebisuのAIスライド制作ガイド（日本語版）です。2026年10月12日の確認時点で、スキル・ツール209件を6カテゴリに整理しています。スライド制作向けの一覧なので、すべてがホームページ制作に対応するわけではありません。
作例の雰囲気だけでなく、出力形式・編集できる範囲・日本語対応を確認しましょう。GitHubは、ソフトや作り方を公開・共有するサービスです。一覧の紹介文が日本語でも、掲載ツールの操作や説明まで日本語とは限りません。
参考：日本語版GitHub。件数・対応範囲は更新で変わります。
日本語フォントと見た目を指定する：指示文を開く
このページからの提案例です。02でまとめた制作指示文の末尾に足せます。
エアコンクリーニング店の、日本語のホームページを作ります。 目的は、初めてのお客様がサービス・料金・対応エリアを理解し、相談先を見つけられることです。 ・白、落ち着いた青、濃紺を基本にし、余白と写真で見せてください。 ・既存サイトがあれば、その日本語フォントを優先してください。 ・新規制作ではNoto Sans JPなど日本語に対応する書体を候補にし、実際に使えるか確認してください。読み込めない場合の代替書体も指定してください。 ・本文は16px以上を目安に、行間と文字の濃さを調整してください。 ・日本語の不自然な改行、文字化け、料金の見切れを確認してください。 ・料金や説明を画像に焼き込まず、後から編集できる文字で残してください。 ・スマホ幅360px・390pxとPCで確認し、横にはみ出さず、相談ボタンを押しやすくしてください。 ・まず1ページの見本を作ってください。公開前に私が内容と画面を確認します。
フォントの候補：Google Fonts「Noto Sans JP」。Webページ・画像・PDFのそれぞれで、最終的な日本語の表示を確認します。
GitHubのURLから、自分に合うSkillsを調べてもらう
まず「何に使えるかの確認」から頼みます。URLをチャットに貼るだけでは、スキルの導入や外部ソフトとの接続が完了したことにはなりません。
参考にしたいGitHubのURL：［ここにURL］ 作りたいもの：［例：WordPressの料金ページ／編集できる料金表／研修用スライド］ あとで直したい部分：［例：文字・金額・写真］ まずREADMEと利用条件を読み、何ができるか確認してください。 今あるAIの機能だけで作る方法と、このスキル・ツールを使う方法を比較してください。 出力形式、編集できる範囲、日本語フォント、対応環境、必要な接続、費用を整理してください。 公開元、更新状況、商用利用の条件、実行する処理や外部へのデータ送信も確認してください。 追加の効果が小さければ導入は不要です。導入・インストールは、内容を説明して私が確認してからにしてください。 試す場合は練習用フォルダーで1ページ作り、表示と編集を確認してください。本番サイトは変更しないでください。
使うAIや環境に対応する方法で導入し、スキル名を指定して試します。星の数や一覧の評価だけで品質を決めず、1ページの結果を見て採用しましょう。無料公開されたコードでも、AI・API・有料素材などの費用が別に必要な場合があります。
気に入った作り方は、自分用のルールに残す
配色・日本語フォント・写真の扱い・スマホ確認など、うまくいった条件を短い制作メモに保存します。繰り返し使うなら「この手順を、自分の環境で使えるスキルにまとめて」と頼む方法もあります。
Skillsは、作業手順を書いたSKILL.mdと、必要な資料などをまとめたものです。まずは小さな作業ひとつから。新しい指示で変更した条件は、保存したルールも更新します。
仕組みと導入条件：OpenAI公式「Build skills」／Skillsとツールの役割。
CODEX または CLAUDE CODE / 作成
指示文を貼って、制作を頼む。
作る道具は2つから選べます。ChatGPTで相談したならCodex、Claudeで相談したならClaude Code。どちらもデスクトップアプリで作業するフォルダーを選び、指示文を貼るだけです。練習なら「ホームページ練習」のような新しいフォルダーが分かりやすいです。
A. Codexで作る
- ChatGPTアカウントでサインインし、Codexを選ぶ。
- 作業場所を選び、「新しいチャット」を開く。
- 下の依頼文に、ChatGPTがまとめた制作指示文を足して送る。
③ Codexへ送る制作の指示文
以下の制作指示文に沿って、WordPressで使うホームページの確認用見本を作ってください。 最初に、選択している作業フォルダーと既存ファイルの有無を確認してください。 既存サイトがある場合は、構成を調べてバックアップし、今あるページを壊さない進め方にしてください。 まずトップページを1ページ作り、ファイルを保存して、ブラウザーで完成画面を見せてください。 コードだけを回答するのではなく、見た目を確認できる状態まで進めてください。 写真は添付した素材を使い、不足する場合は先に教えてください。 使える機能だけで進める方法と、Skillsや外部ツールを使う方法を比較し、効果のある方法を選んでください。新しい接続や費用、インストールが必要な場合は先に説明してください。 日本語フォントと後から編集できる形式を確認し、使っていないツールを使用済みとして扱わないでください。 未確認の料金・実績・口コミは作らず、見本では「未設定」と表示してください。 スマホ幅360pxと390px、パソコンで表示を確認し、文字の見切れとボタンの押しづらさを直してください。 連絡先やフォームは、接続と動作を確認できるまで「使える」と扱わないでください。 この段階では本番サイトを変更・公開しないでください。 【ここに、ChatGPTがまとめた制作指示文を貼り付ける】
保存と表示確認まで頼むのがポイントです。利用できる機能・接続・上限は、プランや環境によって異なります。
B. Claude Codeで作る
- Claudeデスクトップアプリにサインインし、左の「Code」を選ぶ。
- 「フォルダーを選ぶ」で練習用フォルダーを作って開く。
- 相談でまとめたお店のメモを貼り、「CLAUDE.mdとして保存して」と送る。
- 下の依頼文に制作指示文を足して送る。右側のブラウザーに見本が出る。
③ Claude Codeへ送る制作の指示文
以下の制作指示文と、フォルダーにあるCLAUDE.mdのお店の情報に沿って、WordPressで使うホームページの確認用見本を作ってください。 最初に、選択している作業フォルダーと既存ファイルの有無を確認してください。 既存サイトがある場合は、構成を調べてバックアップし、今あるページを壊さない進め方にしてください。 まずトップページを1ページ作り、ファイルを保存して、アプリのブラウザーで完成画面を見せてください。 並びは、何をする店か → 料金 → 対応エリア → 作業の流れ → 相談ボタン。 写真はあとで差し替えるので、今は枠だけにしてください。 色は白と落ち着いた青。本文の文字は16px以上。日本語フォントが正しく出るか確認してください。 未確認の料金・実績・口コミは作らず、見本では「未設定」と表示してください。 スマホ幅360pxと390px、パソコンで表示を確認し、文字の見切れとボタンの押しづらさを直してください。 連絡先やフォームは、動作を確認できるまで「使える」と扱わないでください。 この段階では本番サイトやWordPressを変更・公開しないでください。足りない情報は、作る前に3つまで質問してください。 【ここに、相談でまとめた制作指示文を貼り付ける】
仕事の写真や請求書が入ったフォルダーは選ばず、練習用を作ってから始めます。ファイルの変更前に確認を求める設定のまま使えば、勝手に消される心配もありません。
PREVIEW / 確認・修正
できた画面を見て、言葉で直す。
下は、このガイド用にCodexで実際に作った確認用サンプルです。Claude Codeで作った場合も、アプリの中のブラウザーに同じように表示され、スマホ幅とパソコン幅を切り替えて確認できます。最初の1ページができたら、気になるところを少しずつ伝えます。
④ 見た目を直してもらう指示文
表示されたページを、次の3点だけ直してください。 1. 冒頭の文章を短くして、写真と問い合わせボタンが見つかりやすい配置にする。 2. スマホでもエアコンの写真が途中で切れないようにする。 3. 料金までの移動が長いので、冒頭に料金へのリンクを置く。 屋号・料金・作業内容は変更しないでください。 修正後は、360px・390pxのスマホ幅とパソコンで表示を確認し、実際の画面を見せてください。
「なんとなく違う」より、「写真を大きく」「冒頭を短く」と、変えたい場所を伝えると進めやすくなります。パソコンで表示できただけでは、まだ一般公開されていません。
SETUP / 公開先の準備
公開する場所を用意する。
このガイドでは、WordPressを使って公開します。すでにサイトがある方は、今の環境を確認してから進めましょう。
- サーバーサイトを置く場所。WordPressを使える契約を用意します。
- ドメインサイトの住所。使いたいURLを決め、サーバーにつなぎます。
- WordPressページを編集する仕組み。初期設定と、httpsでの表示を確認します。
用意ができたら、管理画面にログインできるか確認。次の06で見本を下書きに入れ、実際のページとして仕上げます。
準備と6ステップへ戻る ↑WORDPRESS / 下書き・公開
まず下書き。確認できたら公開。
見本ができたら、WordPressに入れて実際の表示を確認します。完成したHTMLが自動でWordPressに反映されるわけではありません。
⑥ WordPressへの反映を頼む指示文
確認した見本を、WordPressの新しい固定ページの下書きにしてください。 まず、この環境でWordPressを操作できる接続があるか確認してください。 操作できる場合は、ログイン後の管理画面から進め、既存ページの内容を保存してから編集してください。 ログインやパスワード入力が必要な場面は私が行います。 いきなり公開やトップページの差し替えはせず、下書きのプレビューを見せてください。 管理画面の操作が使えない場合は、現在のテーマを確認し、標準ブロックで再現する手順と必要な文章・画像を用意してください。 プラグインの追加や有料契約が必要なら、先に理由と費用を説明してください。 最後に、料金・画像・スマホ表示・各リンク・問い合わせの送受信を確認し、公開前に残っていることを教えてください。
ブラウザー操作などの接続が使える場合は、ログイン後の管理画面を使って進められます。操作できない環境では、標準ブロックで作る手順を案内してもらいます。パスワードはチャットに貼らず、ログイン画面で入力します。
公開後 / DOTS 2026年10月4日確認
作って終わりにしない。
dotsで、更新を続ける。
「現場が忙しくて、ホームページまで手が回らない」。そんなときに試したいのが、ChatGPTのdots（ドッツ）です。ひとつの仕事を継続して任せ、会話の合間にも作業を進めてもらえます。調べものや原稿作り、必要に応じたWork・Codexへの作業の振り分けにも対応します。
下の使い分けは、このサイトからの提案です。最初は施工事例1本の下書きくらいから始めると、頼み方がつかみやすくなります。Claudeで作った方は、同じことをClaude Codeで続ける方法にまとめています。
ホームページの仕事で、便利な3つの使い方
掲載してよい写真と作業メモを渡し、見出しと本文の候補を用意してもらう。
指定ページを見てもらい、古い案内や分かりにくい箇所を、修正候補にまとめてもらう。
「先に写真を選んで」「文章を短く」と、仕事の優先順位や仕上がりを調整する。
どれも、必要な資料・接続・権限を用意したうえで頼む使い方です。任せた作業が終わっても、内容や公開画面は自分でも確認しましょう。
始め方は、4つだけ。
- パソコンのChatGPTでdotsを開くデスクトップアプリ、またはパソコンのブラウザーから初期設定します。表示されない場合は、下の利用条件を確認してください。
- 必要な接続だけ用意するメールやファイルのサービスとの接続は、あとから追加できます。手元のパソコンにあるファイルを使いたい場合は、別途そのパソコンを接続します。
- 成果物と、任せる範囲を伝える「記事を1本」「写真の候補と下書きまで」「公開前に見せて」のように具体的に伝えます。分からない情報は質問してもらいましょう。
- できたものを見て、修正を伝える「タイトルを短く」「この写真を先に」と追加で頼めます。対応するスマホアプリなら、初期設定後に同じdotへ続きの指示を出せます。
公式の紹介ページで見る、会話から修正まで。
OpenAIが公開した例では、左でdotに修正を頼み、右で2つのデザイン案を見比べています。作ったものを見ながら、「この雰囲気で、ここを変えて」と伝えられるのが、この画面の分かりやすいところです。
見た目を保ちながら、別の案も見せてほしいと相談しています。
文章だけで判断せず、実際の配置や見え方を確認します。
「この施工写真で2案作って」と頼み、気に入った方を整える使い方が考えられます。
画像は英語版の紹介例です。表示や利用できる機能は環境で異なります。スマホでは「大きく見る」から拡大できます。
指示文はそのままコピーして、写真や作業メモを添えて使えます。下の例はすべて下書き・確認までにしています。
まず1本、記事の下書きを頼む：指示文を開く
ホームページの施工事例を、継続して更新する手伝いをしてください。 今回は、私が渡す公開可能な写真と作業メモから、記事を1本だけ下書きにしてください。 ・読者はエアコンクリーニングを検討している方 ・短い見出しと、普段話すような文章にする ・作業前の状態 → 作業内容 → 仕上がりの順にする ・料金、資格、実績、口コミは創作しない。不明な点は質問する ・顔、名札、住所、車の番号、顧客名、連絡先が分かる写真や文章は使わない ・写真の候補と原稿を見せるところまで。公開・送信はしない まず不足している情報を3つまで質問してください。
毎回同じ確認をするなら、予定を決める。
週ごとのサイト点検を頼むなら、対象ページ・曜日と時刻・期間・知らせてほしい条件をセットで伝えます。「毎週見て」だけで済ませず、保存された予定を確認しましょう。
週1回、サイトの見直し候補を出してもらう：指示文を開く
指定する公開ページを、毎週月曜日の午前9時（日本時間）、今後4週間チェックしてください。 対象URL：［自分の公開ページのURL］ リンク切れ、古い案内、スマホで読みにくい箇所を確認し、修正候補を3つまで挙げてください。 実際に確認できなかった項目は、確認済みと書かないでください。 変更が必要なとき、または私の判断が必要なときだけ、この会話で知らせてください。 勝手な公開変更、フォーム送信、有料契約はしないでください。 実行できる接続があるかを確認し、保存した予定・期間・通知先を教えてください。
パソコンを切っても進む？
dot自身のコンピューターで行う調査や資料作成は、自分のパソコンがオフでも続けられます。必要なファイルやサイトへアクセスできることが前提です。
ローカルのファイルやCodexの作業を使う場合は、そのパソコンをオンラインにし、ChatGPTアプリを開いておく必要があります。
手元のブラウザーでログインしていても、dotのブラウザーにログインが引き継がれるわけではありません。WordPressなどの操作には、その環境での接続とログインが必要です。パスワードは会話や記事に貼らず、専用のログイン画面で入力します。
今までのCodexの作業を続けてもらう：指示文を開く
接続したパソコンにあるCodexの「［既存のチャット名］」の続きを進めてください。 今回直すページ：［URLまたは対象ファイル］ 直したい点：［写真を大きく、冒頭の説明を短く、など］ 最新の公開内容と作業記録を比べ、変更前の内容を保存してください。 承認済みの文章・料金・リンク先は変えず、指定した箇所だけ直してください。 個人情報のない画面で、パソコンとスマホの表示を見せてください。 まず確認用の見本まで進め、本番への反映は私の確認後にしてください。 必要な接続や作業記録が見つからなければ、推測せずに教えてください。
いま何をしている？ 止めたいときは？
デスクトップアプリでは、dotのプロフィールからActivity（アクティビティ）を開くと、任せた作業の進捗や結果を確認できます。定期実行はScheduled（スケジュール）で確認します。表示名は言語やバージョンで異なる場合があります。
会話を閉じるだけでは、頼んだ仕事が止まるとは限りません。一時停止しても、別の作業や定期実行は別に確認します。すでに完了した変更が自動で元に戻るわけでもありません。
公開用の写真・画面は、個人情報を入れずに。
顔や名札、住所、連絡先、車の番号に加え、画面のアカウント名や通知、他の会話も確認します。撮影用の架空データを用意すると、見落としを減らせます。掲載したdotsの画像は、OpenAIの公式紹介例です。運営者や顧客のアカウント画面は使っていません。
dotsが表示されないとき・利用できるプラン
2026年10月4日時点では、対象アカウントへ順次提供中です。日本の個人利用では、18歳以上のPro 100・Pro 200・Pro 500が公式の対象案内に含まれます。Business PremiumとEnterpriseにも展開されていますが、組織の設定によって利用可否が変わり、Enterpriseは管理者の有効化が必要です。
初期設定はパソコンで行います。対応版のスマホアプリでは続きの会話ができますが、スマホのブラウザーには対応していません。対象プランでも、まだ表示されない場合があります。
dotとの会話と、そこから動くWork・Codexの作業では利用枠の扱いが異なります。「ずっと無制限・無料で作業できる」という意味ではありません。契約を変える前に、利用可否と現在の利用枠を公式案内・契約画面で確認してください。
この節は2026年10月4日の公式資料をもとに作成した、エアコン屋の裏方による使い方の提案です。公式の画面例は公式ガイドで確認できます。
公開後 / CLAUDE CODE 2026年10月12日確認
お店のメモを1枚置いて、
Claude Codeで、更新を続ける。
Claude Codeで作った方は、公開後の更新も同じ画面で続けられます。ポイントはお店のメモ（CLAUDE.md）を作業フォルダーに1枚置いておくこと。屋号・料金・対応エリア・やってはいけないことを書いておくと、2回目からは「施工事例を1本書いて」だけで、料金も文体もそろった原稿になります。料金や実績を勝手に作らせないための柵にもなります。
以下は、私がこのサイトの作業で使った方法をもとに、現場の人が使う場面で組み直したものです。どれも「下書き・確認まで」で頼み、公開は自分で行います。
お店のメモを、1枚だけ作る。
コピーして料金と対応エリアを自分の店に合わせ、Claude Codeの会話欄に貼って「これをCLAUDE.mdという名前で保存して」と送ります。「保存しました」と返ってくれば完了です。
お店のメモ（CLAUDE.md）：指示文を開く
# お店のメモ ## 基本情報 - 屋号：［屋号］ - 仕事：家庭用エアコンクリーニング（壁掛け・お掃除機能付き） - 対応エリア：［東京23区・埼玉・千葉 など］ - 料金：壁掛け ［金額］円／お掃除機能付き ［金額］円（税込・出張費込み） - 相談先：［電話番号 または LINE公式アカウントのURL］ - 受付時間：［例：9時〜19時、日曜休み］ ## 文章のルール - 読者は、初めてエアコンクリーニングを頼む方 - 1文を短く、現場でお客様に話す言葉で書く - 「安心・丁寧」で終わらせず、実際に何をするかを書く（例：カバーとフィルターを外し、熱交換器を高圧洗浄） - 料金・実績・口コミ・資格は、このメモにある内容だけを使う。ないものは書かずに私に聞く ## やってはいけないこと - 本番サイトへの公開、フォームの送信、有料の契約 - 顔、名札、住所、車の番号、顧客名が分かる写真や文章を使うこと - 私の確認なしにファイルを削除すること
ホームページの仕事で、便利な4つの使い方
作業前・作業中・仕上がりの写真をフォルダーに入れ、「この3枚とメモから施工事例を1本下書きして」と頼みます。メモの文体ルールがあるので、営業っぽくならず、現場で話す言葉の原稿になります。
Chrome拡張のClaude in Chromeを使うと、自分のChromeで開いているWordPressの管理画面をClaudeが操作できます。ログインは自分で済ませ、「料金を直して、下書き保存まで」と頼めば、変更前と変更後を並べて見せてくれます。公開ボタンは自分で押します。
「この見本をArtifactsで公開して」と頼むと、非公開のURLができます。LINEで送って「料金、分かる？」と聞いてから本番に入れると、作り直しが減ります。
「毎週月曜9時に公開ページを見て、リンク切れと古い案内を3つまで教えて」と頼むと、定期実行として登録できます。クラウド側で動く仕事なので、パソコンを閉じていても続きます。
どれも、必要なフォルダー・接続・権限を用意したうえで頼む使い方です。任せた作業が終わっても、内容や公開画面は自分でも確認しましょう。
写真3枚から施工事例を下書きしてもらう：指示文を開く
フォルダーに入れた写真3枚（作業前・作業中・仕上がり）と、下のメモから、施工事例を1本下書きしてください。 メモ：［例：築10年の壁掛け。お掃除機能なし。においの相談。熱交換器に黒カビ。所要1時間半］ ・CLAUDE.mdの文章ルールに従う ・見出し → 相談のきっかけ → 作業内容 → 仕上がり → 次回の目安、の順 ・料金はメモの金額だけ。実績や口コミは書かない ・写真の並び順と、各写真の一言キャプションも提案する ・ファイルに保存して、ブラウザーで見せるところまで。公開はしない
公開中のWordPressを、Chrome拡張で直してもらう：指示文を開く
先に自分のChromeでWordPressにログインしておきます。Claudeにパスワードは渡しません。
Chromeで開いているWordPressの管理画面で、料金ページを直してください。 直したい点：［例：お掃除機能付きの料金を変更、作業時間の目安を追加］ ・変更前の内容を先に書き出して、私に見せてください ・直すのは指定した箇所だけ。ほかの文章・リンク・料金は変えない ・「下書きとして保存」まで。公開ボタンは押さない ・保存できたら、変更前と変更後を並べて教えてください 画面に出ているボタンが見つからないときは、推測せずに聞いてください。
週1回、サイトの見直し候補を出してもらう：指示文を開く
指定する公開ページを、毎週月曜日の午前9時（日本時間）、今後4週間チェックする定期実行を作ってください。 対象URL：［自分の公開ページのURL］ リンク切れ、古い案内、スマホで読みにくい箇所を確認し、修正候補を3つまで挙げてください。 実際に確認できなかった項目は、確認済みと書かないでください。 勝手な公開変更、フォーム送信、有料契約はしないでください。 登録できたら、保存した予定・期間・結果の受け取り方を教えてください。
やってよかったこと。向いていないこと。
作った画面をその場で見ながら直せるので、「できたと言われたのに見られない」がない。選んだフォルダーの外は触らないので、仕事のファイルを壊す心配がない。公開は自分のタイミングで決められる。
料金や実績を聞かれないまま作ってしまうことがある。お店のメモで「ないものは書かない」と決めておく。パスワードを渡す使い方はしない。本番サイトを直接いじらせず、見本→確認→自分で反映の順を守る。
パソコンを切っても進む？
定期実行や、クラウドで動かすセッションは、自分のパソコンがオフでも続けられます。読み書きできるのは、つないだサービスとクラウド上のフォルダーだけです。
パソコンの中のフォルダーを使う制作や、Chrome拡張での操作は、そのパソコンをオンラインにし、アプリを開いておく必要があります。
dotsと同じで、Claudeのブラウザーに自分のログインが自動で引き継がれるわけではありません。WordPressなどの操作には、その場でのログインが必要です。パスワードは会話や記事に貼らず、専用のログイン画面で入力します。
画面に出てくる英語、これだけ覚えれば大丈夫
- CLAUDE.mdお店のメモ
- フォルダーに置くメモ。毎回最初に読まれます。
- Browserブラウザー
- 作った見本を表示する画面。スマホ幅・タブレット幅に切り替えられます。
- Plan mode計画だけ
- 作業せずに「何をどう直すか」だけ出してもらう状態。大きな変更の前に。
- Permissions確認の設定
- ファイルの変更を毎回確認するか、自動で進めるか。最初は確認型のままで十分です。
- Skills手順の台本
- 「施工事例を1本書く」のような手順を保存して、名前で呼び出す仕組み。慣れてからで大丈夫です。Skillsの考え方へ →
- Connectors / MCP連携
- GmailやGoogleドライブとつなぐ仕組み。問い合わせメールの整理や、ドライブの写真を使う作業に。つないだ範囲だけ読み書きします。
- Artifacts見せる用のURL
- 見本ページを非公開URLで共有する形。本番ではなく、見せるための場所です。
- Scheduled tasks定期実行
- 決めた曜日・時刻に同じ仕事を繰り返す設定。
公式の説明書は確認時点で英語が中心です。会話は日本語で進められるので、ここにある意味だけ分かれば困りません。公式：Claude Codeの概要 ↗ 公式：Claude in Chrome ↗
このサイトでも、2026年10月に記事の説明文の一括設定や画像の軽量化、運営者ページの整理をClaude Codeで行いました。公開中のサイトを触るときは、変更前の内容を残してから直すようにしています。
WordPressの設定を自分で進める場合はこちら
サーバーの用意、固定ページ、写真、問い合わせフォームなど、操作別の手順をまとめています。
まずは、メモと写真。
屋号・料金・対応エリアをメモ。写真は、仕事が伝わる3場面から。
お店の指示文を作ってみる。
まずは屋号とエリアだけでもOK。足りない情報は、あとでAIに質問してもらえます。
公開予定の事業情報だけを入力してください。この指示文作成機能から外部に送信することはなく、入力内容は再読み込みすると消えます。
公開する場所を用意する。
WordPressが使えるサーバーを用意します。すでにお持ちなら、STEP 04へ。
まとめて設定するなら、クイックスタート
エックスサーバーでは、ドメイン・WordPress・SSLの設定を、新規申し込みとまとめて進められます。
クイックスタートは申し込み時に支払いが発生し、10日間の無料お試しは付きません。すでにあるサイトの引っ越し用ではありません。
広告｜サーバーの料金・プランを確認
初期費用無料のConoHa WINGも、WordPressかんたんセットアップで同じように始められます。長期契約のWINGパックは更新後の料金まで確認してください。
ページを、ひとつずつ。
まずは5ページ。料金と作業内容、相談先が分かる形を目指します。
写真で、仕事を伝える。
文章を増やすより、いつもの現場写真を。説明は短く添えるだけで伝わります。
相談ボタンを、つなぐ。
電話やフォームなど、対応できる窓口へ。試しに送って、届くところまで確認します。
スマホで確認したら、公開。
読める・押せる・届く。この3つを、実際のお客様になったつもりで確かめましょう。
できたサイトを、現場で使える形へ。
名刺から予約先へつなぐ。仕上げで止まった箇所は、範囲を絞って人に頼む。完成後の選択肢をまとめました。
公式提供の広告画像 ／ 画像からサービス内容へ
途中で止まっても、ここから進める
AIの文章が、堅くて営業っぽい
「現場でお客様に話すような言葉にして。1文を短くし、抽象的な宣伝文句を削って」と追加で伝えます。「安心・丁寧」だけで終わらず、実際に何をするかを入れてもらいましょう。
AIがコードばかり出してくる
「WordPressの標準ブロックで作ります。コードではなく、見出し・本文・使うブロック名の組み合わせで教えて」と伝えます。
説明に出てくるボタンが見つからない
テーマやバージョンで画面が違います。画面全体のスクリーンショットを撮り、パスワードなどを隠してAIに見せます。「次に押す場所を1つだけ教えて」と頼むと追いやすくなります。
AIが全部、勝手に公開してくれる？
ここで紹介する方法は、AIが原稿を作り、自分でWordPressへ入れる手順です。画面操作を手伝うAIを使う場合も、接続や利用機能によってできる範囲が変わります。原稿ができただけでは公開されません。
無料のホームページ作成サービスではだめ？
必要な機能がそろえば候補になります。広告表示、独自ドメイン、問い合わせ方法、あとから移せるかを確認しましょう。このページは、ページや記事を自分で増やすWordPressの進め方に絞っています。
コピーして使う：困っている画面を相談する
WordPressでホームページを作っています。 今やりたいこと：［例：料金ページをメニューに追加したい］ 今いる画面：［画面の見出し］ 困っていること：［例：「メニュー」という項目が見つからない］ テーマ名：［分かれば記入］ パスワードや個人情報を隠したスクリーンショットも添えます。次に押す場所を一度に1つだけ教えてください。表示が確認できない操作は推測しないでください。
画面確認：2026年10月1日。表示名や機能は環境により変わります。ChatGPTの画像は送信前の入力例、Codexの図は操作イメージ、制作例は実際に表示したサンプルです。このページはOpenAIの公式ガイドではありません。