プラットフォーム型

この記事のページを開く

Claude や ChatGPT に HTML を丸ごと書かせ、Cloudflare Pages にアップロードして公開する。月額なし。

1. 1. 載せることを一枚に書き出す名前・肩書き・一言・連絡先・SNS のリンク。写真を載せるなら、ファイル名も決めておく。この一枚がそのまま AI への指示になる。
2. 2. AI に「1ファイルの HTML」で頼むClaude か ChatGPT に、書き出した内容を渡して「CSS を含めた1ファイルの HTML で、スマホでも読める名刺代わりのページを作って」と頼む。色や雰囲気の希望があれば添える。出てきたコードを index.html という名前で保存する。
3. 3. ブラウザで開いて確かめる保存した index.html をダブルクリックしてブラウザで開く。文言の間違い、リンク先、スマホ幅での見え方（ブラウザの幅を狭めて見る）を確認する。直したい所は AI に「ここをこう」と頼み直し、ファイルを上書きする。
4. 4. Cloudflare Pages に直接アップロードCloudflare のアカウントを作り、Workers & Pages から「Pages」を選び、Git 連携ではなく「直接アップロード」を選ぶ。プロジェクト名を付け、index.html（と画像）の入ったフォルダをドラッグして公開する。pages.dev のアドレスで表示される。
5. 5. 独自ドメインを繋ぐプロジェクトの「カスタムドメイン」から取得済みのドメインを追加する。ドメインを Cloudflare で管理していれば、DNS は自動で設定される。他社で取ったドメインなら、指示された CNAME を向ける。詳しくは「独自ドメインを繋ぐ」へ。
6. 6. 直す時は上げ直す内容を変える時は、AI に頼み直すか手で直して、同じプロジェクトに再アップロードする。前の版も残るので、戻すこともできる。

• 問い合わせを受けたいなら、外部のフォームサービスの埋め込みコードを AI に渡して組み込む
• 画像は大きすぎると表示が遅い。上げる前に縮小しておく

この記事のページを開く

テンプレートを選び、営業時間・地図・問い合わせフォームを埋めて公開する。

1. 1. 載せる情報を先に揃える事業所名・所在地・電話・営業時間・サービス内容・写真数枚・問い合わせの受け方。テンプレートを開く前に、テキストファイルに全部書いておく。作業中に探し始めると止まる。
2. 2. テンプレートを「業種」で選ぶSTUDIO のテンプレート一覧を、見た目ではなく「載せる情報の並び」で選ぶ。事業所紹介・店舗向けのものは、営業時間や地図の枠が最初からある。
3. 3. 文章と写真を差し替えるテンプレートの文字をクリックして自分の文章に、画像をクリックして自分の写真に差し替える。要らないセクションは削除、足りないセクションは似たものを複製する。
4. 4. 地図とフォームを置く地図は埋め込み要素に Google マップの共有コードを貼る。問い合わせフォームは STUDIO のフォーム要素を置き、送信先メールアドレスを設定する。テスト送信して届くことを確かめる。
5. 5. スマホ表示を確認する編集画面の表示切替でスマホ幅にして、文字の折り返しと画像の切れを見る。ズレは幅ごとに直せる。
6. 6. 公開して、ドメインを繋ぐ公開ボタンで studio.site のアドレスに出る。独自ドメインを繋ぐ場合は有料プランに切り替え、サイト設定の「独自ドメイン」から設定する。

• 写真は横長・同じ比率で揃えると、テンプレートの枠に収まりやすい
• 無料プランではサービスのバナーが表示される。消す日が有料に切り替える日

この記事のページを開く

Lovable・v0・Bolt に共通する「指示 → 生成 → 会話で直す → 公開」の流れ。

1. 1. 最初の指示に、目的・構成・雰囲気を入れる「何のサイトか」「どのセクションが要るか（見出し・特徴・料金・問い合わせ）」「色や雰囲気」を一度に書く。載せる文章と画像があれば、この時点で渡す。短い指示ほど、後の直しが増える。
2. 2. 生成されたものを、まず全体で見る出てきたページをスクロールして、構成が合っているかだけを見る。細部の文言や色はまだ直さない。構成が違えば「セクションを入れ替えて」「この部分を消して」と頼む。
3. 3. 直しは一度にひとつ「見出しをこの文に」「ボタンの色をこれに」と、一回の会話でひとつずつ頼む。まとめて頼むと、関係ない所まで変わることがある。生成回数（クレジット）を使うので、変えたい所を先に書き出しておく。
4. 4. スマホ幅で確かめるプレビューをスマホ幅に切り替える。崩れている所は「スマホで見た時に◯◯が重なる」と具体的に伝える。
5. 5. 公開して、独自ドメインを繋ぐ各サービスの Publish／Deploy で公開する。独自ドメインは有料プランで繋げることが多い。繋ぎ方は「独自ドメインを繋ぐ」へ。
6. 6. コードを手元に持っておくGitHub への書き出しやダウンロードで、コードを手元に置く。サービスを離れる時、Cloudflare Pages のような置き場に移せる。

• フォームや決済は、AI ビルダー単体では動かないことがある。外部サービスの埋め込みで補う
• 同じ指示でも毎回同じ結果は出ない。気に入った版は、その時点でコードを書き出しておく

この記事のページを開く

サーバー契約から WordPress の初期設定まで。ConoHa WING・エックスサーバーの「かんたん」機能を使う流れ。

1. 1. サーバーを契約し、同時に WordPress を入れるConoHa WING の「WordPress かんたんセットアップ」、エックスサーバーの「WordPress クイックスタート」は、契約の申し込み画面で WordPress の導入まで一緒に済む。サイト名・ユーザー名・パスワードをここで決める。控えを残す。
2. 2. ドメインを決める契約と一緒に独自ドメインを取れる。サーバー会社の特典で取る場合は、その条件（契約プランや期間）を各社の記載で確認する。別で取ったドメインを使うなら、後から「独自ドメインを繋ぐ」の手順で。
3. 3. SSL を有効にするサーバーの管理画面で無料 SSL を有効にし、WordPress の設定でサイトアドレスを https に揃える。ここを飛ばすと、ブラウザに警告が出る。
4. 4. テーマを選び、要らないものを消すWordPress の管理画面「外観 → テーマ」で、事業所向けかブログ向けかを決めてテーマを入れる。最初から入っているサンプル記事・サンプルページ・使わないプラグインは削除する。
5. 5. 固定ページと投稿の役割を分ける会社案内・サービス・問い合わせは「固定ページ」、お知らせや記事は「投稿」。メニューに固定ページを並べ、トップページをどの固定ページにするか「設定 → 表示設定」で決める。
6. 6. バックアップと更新の習慣サーバー側の自動バックアップが有効かを確認する。WordPress 本体・テーマ・プラグインの更新通知は、内容を見てから当てる。

• 問い合わせフォームはプラグインで足す。「問い合わせフォームを付ける」も参照
• テーマを何度も変えると、レイアウトの設定が引き継がれない。最初に決める

この記事のページを開く

ドメインを取り、DNS で置き場を向ける。Cloudflare Pages・STUDIO・レンタルサーバー、どれでも流れは同じ。

1. 1. ドメインを取るレジストラ（Cloudflare Registrar・お名前.com・ムームードメインなど）で、空いているドメインを取る。年単位の費用。事業所名や屋号と同じ綴りが取れるかを先に確かめる。
2. 2. 置き場の側で「このドメインを使う」と宣言するCloudflare Pages ならプロジェクトの「カスタムドメイン」、STUDIO ならサイト設定の「独自ドメイン」、レンタルサーバーなら「ドメイン設定」で、取ったドメインを追加する。すると「DNS にこれを設定して」という値（CNAME や A レコード）が表示される。
3. 3. DNS にその値を入れるドメインを取ったレジストラの DNS 設定画面で、表示された値をそのまま入れる。www あり・なしの両方を設定するかは、置き場の指示に従う。
4. 4. 反映を待つDNS の変更は、すぐ反映されることも、しばらく待つこともある。置き場側の画面で「有効」「接続済み」の表示に変わったら完了。
5. 5. SSL（https）を確認する多くの置き場は自動で証明書を出す。ブラウザで https のアドレスを開き、鍵マークが出ることを確かめる。レンタルサーバーは管理画面で無料 SSL を有効にする操作が要ることがある。

• ドメインを Cloudflare で管理すると、Cloudflare Pages への接続は自動で済む
• ドメインの更新を忘れるとサイトが消える。自動更新を有効にしておく

この記事のページを開く

内蔵のフォーム機能を使う場合と、外部サービスを埋め込む場合。どちらもテスト送信までが手順。

1. 1. 受け取る項目を決める名前・メール・本文。それ以上は増やさない。項目が増えるほど、送られなくなる。電話番号や住所は本文に書いてもらえば足りる。
2. 2. 内蔵フォームがあるなら、それを置くSTUDIO はフォーム要素、ペライチはフォームブロックをページに置き、項目を設定する。送信先のメールアドレスと、送信後に表示する文言を設定する。プランによってフォームが使えない、件数に上限がある場合は各社の記載を見る。
3. 3. 内蔵がないなら、外部サービスを埋め込むAI 自己作成型や、フォームが無いプランでは、Google フォームやフォーム専用サービスで作ったフォームの埋め込みコードを取り、ページに貼る。HTML なら AI に「このコードを問い合わせの位置に入れて」と頼む。
4. 4. テスト送信する自分で送って、設定したメールアドレスに届くことを確かめる。届かない時は、迷惑メールフォルダと送信先の綴りを見る。
5. 5. 自動返信と控えを設定する送った人に「受け付けました」が返る設定があれば有効にする。届いた内容の控えがどこに残るか（メールだけか、管理画面にも残るか）を確認しておく。

• スパム対策（画像認証など）は、内蔵フォームなら設定にあることが多い。外部サービスも同様
• フォームの送信先メールは、日常的に見ているアドレスにする

ホームページの手間は二種類。作る日の手間と、持ち続ける日々の手間。プラットフォーム型は作る日に手を動かし、持ち続ける手間（更新・SSL・サーバー）を月額で預ける。AI自己作成型は作る日の手間が小さく、置き場は無料のことが多い一方、フォームやドメインの設定は自分で持つ。WordPress はどちらも自分で持つ代わりに自由度が広い。まず、どちらの手間を自分で持つかを決める。

多くのサービスに無料プランがある。無料プランは各社の記載では、サービス名入りのサブドメイン・広告表示・容量やページ数の上限が付くことが多い。独自ドメインを繋ぐ日、広告を消す日、フォームの件数が上限に当たる日。そのどれかが、有料に切り替える日になる。ツールごとの「有料に切り替える日」欄に一行で書いた。

サブドメインで公開したURLは、名刺・SNS・検索結果に残る。後から独自ドメインに移すと、そのURLが全部古くなる。ドメインは年単位の費用で、どの型でも繋げる。最初の公開の前に取っておく。取り方と繋ぎ方は「作り方」の「独自ドメインを繋ぐ」に。

プラットフォーム型で作ったサイトを WordPress に移す、その逆。どちらも「データを持ち出して作り直す」に近い。テンプレートの見た目はそのまま持ち出せないことが多く、記事本文と画像だけが残る。できること表の「データ持ち出し」欄は、この時に効く。型は最初に決め、迷うなら更新の頻度で決める。

無料プランでの商用利用、広告の表示、販売機能の有無は、各社の記載で条件が分かれる。事業所の案内や販売を載せるなら、そのプランで商用利用が認められているか、決済機能が内蔵か外部連携か、決済手数料が別にかかるかを公式ページで確認する。当サイトの表は目安で、最終条件は各社の記載による。

Claude や ChatGPT に「こういう1ページを作って」と頼むと、HTML と CSS が丸ごと出る。それを Cloudflare Pages・GitHub Pages・Vercel・Netlify のような置き場に上げれば、月額なしで公開できる。かかるのはドメイン代だけ。直しは AI に頼み直して上げ直す。更新が月に一度以下で、フォームが不要か外部サービスで足りるなら、この型が最も軽い。