AIに指示するだけで、美容室のサイトを作った

コードは1行も書いていません。店の情報を整理して、AIに渡して、出てきたものを公開しただけです。予約フォームまで含めて、実際にかかった時間は2時間ちょっとでした。

手順を全部そのまま置いておきます。カギカッコの中を自分の店の情報に差し替えれば、同じものが作れます。

制作会社に頼むといくらかかるか

比較の基準がないと「月1,000円」がどれくらい安いのか分からないので、実際に公開されている価格を並べます。2026年8月時点で各社のサイトに出ている金額です。

初期費用だけで、この記事の方法の5年分を超えます。

できあがったもの

架空の美容室「藍」のサイトです。メニュー、スタイリスト紹介、アクセス、予約フォームまで一通り入っています。スマホでも崩れません。

完成したサイトを見る

予約フォームは実際に動きます。入力し忘れがあれば止まりますし、火曜（定休日）を選ぶと弾かれます。確認画面も出ます。

用意するもの

料金は契約期間やキャンペーンで変わります。申し込む前に各社の最新価格を確認してください。ドメインは、サーバーによっては契約が続く限り無料になる特典が付きます。

手順01 ─ 店の情報を、紙に書き出す

ここが一番大事で、しかも一番飛ばされがちなところです。AIは店のことを何も知りません。渡す材料の質が、そのまま出来上がりの質になります。

• 店名・読み方・開業年
• 住所、最寄り駅からの徒歩分数、電話番号
• 営業時間、定休日、最終受付
• メニューと料金（所要時間も。あると予約が減らない）
• スタイリストの名前と、得意なこと
• 他店と違うところを一文で

手順02 ─ AIに指示を出す

実際に使った指示文をそのまま置きます。コピーして、自分の店の情報に差し替えてください。

美容室のホームページを1ファイルのHTMLで作ってください。

【店の情報】
店名：藍（あい）／ hair salon 藍
場所：東京都台東区蔵前　都営大江戸線 蔵前駅から徒歩4分
開業：2019年
営業時間：10:00-19:00（最終受付 17:30）
定休日：毎週火曜・第3水曜
席数：4席
特徴：完全予約制。1枠2時間確保して、担当がひとりで最後まで担当する。

【メニュー】
カット 5,500円（約70分）
カット＋カラー 13,200円〜（約150分）
カット＋パーマ 15,400円〜（約160分）
トリートメント 3,300円（約30分）
ヘッドスパ 4,400円（約40分）
前髪カット 1,100円（約15分）
※すべて税込・ブロー込み

【スタイリスト】
市原 悠（オーナー）：乾かすだけで決まるカットが得意
三宅 果穂：カラー担当。ブリーチなしでの色味づくり
柴田 慧：くせ毛・多毛と頭皮ケアが専門

【入れてほしいもの】
・トップ、コンセプト、メニュー、スタイリスト、スタイル写真、アクセス、予約フォーム
・予約フォームの項目：名前、ふりがな、電話、メール、希望メニュー、
　希望日、希望時間帯、指名、要望
・入力チェックを付ける。必須が空なら進めない。
　メールと電話は形式もチェック。定休日（火曜）は選べないようにする
・入力 → 確認画面 → 完了、の3ステップにする
・スマホで見たときに崩れないようにする
・スマホでは画面下に「予約する」ボタンを固定表示

【デザインの方向】
落ち着いた雰囲気。濃い藍色と生成りの白。
見出しは明朝体。派手さより、清潔感と読みやすさを優先。
写真はまだ無いので、後から差し替えられるように場所だけ作っておく。

ポイントは、「入れてほしいもの」を箇条書きで具体的に書くことです。ここが曖昧だと、それっぽいけれど使えないものが出てきます。逆にここを細かく書けば、一発でかなり近いものが返ってきます。

手順03 ─ 出てきたものを見て、直させる

一発で完璧にはなりません。気になったところを、そのまま日本語で伝えれば直ります。実際に出した修正指示です。

• 「メニューの料金が見づらいので、右揃えにして数字を揃えてください」
• 「スマホで見たときにメニューが縦に潰れます。直してください」
• 「予約完了のあとに、問い合わせ用の受付番号を出してください」
• 「もう少し余白を広くして、ゆったり見えるようにしてください」

2〜3往復で終わります。専門用語を使う必要はありません。「なんか窮屈」でも伝わります。

手順04 ─ ファイルを保存する

出てきたコードをコピーして、メモ帳に貼り付け、index.html という名前で保存します。文字コードは UTF-8 を選んでください。ここを間違えると日本語が化けます。

保存したファイルをダブルクリックすると、ブラウザで自分のサイトが開きます。この時点ではまだ自分のパソコンの中だけです。

手順05 ─ サーバーを契約して、ドメインも同時に取る

ここが唯一、AIだけでは終わらないところです。

前の手順までで、フォームの見た目と入力チェックは完成しています。でも**「送信」を押したあと、その内容がどこにも届きません**。届け先がないからです。お客さんが予約を入力しても、店には何も来ない。

予約内容を受け取って、店のメールに転送する場所が要ります。それがレンタルサーバーです。契約すると、フォームの送信を受け取る仕組み（メールフォーム機能）が最初から付いているので、そこにつなぐだけで動きます。

そしてもう一つ。ドメインは、サーバーと同時に申し込んでください。

サーバーだけ契約すると、URLが長くて覚えにくいものになります。名刺に載せられません。かといって後から別の会社でドメインを取ると、両者を自分で紐づける作業が増えます。同時に申し込めば、その場で設定まで終わります。

さらに、サーバーによっては契約が続く限りドメインが無料になる特典が付きます。年1,500円ほどの費用がまるごと消えるので、使わない手はありません。

契約期間は12ヶ月以上を選んでください。 3ヶ月や6ヶ月より月額が安くなりますし、店のサイトを3ヶ月で畳むことはまずありません。長く契約するほど1ヶ月あたりの負担は下がります。

手順06 ─ 公開する

契約が終わったら、作った index.html をサーバーにアップロードします。管理画面のファイルマネージャーから、画面の指示どおりに上げるだけです。

アップロードした瞬間から、そのURLで誰でも見られる状態になります。ここまで来れば、名刺にもGoogleマップにも載せられます。

手順07 ─ スマホで確認する

最後に必ず、自分のスマホで開いてください。美容室のサイトを見る人の大半はスマホです。

• 文字が小さすぎないか
• 電話番号をタップして、そのまま発信できるか
• 予約フォームが入力しやすいか（キーボードが正しく出るか）
• 横にスクロールしてしまう場所がないか

崩れていたら、その画面のスクリーンショットをAIに見せて「ここが崩れています」と伝えれば直ります。

つまずいたところ

日本語が「???」になった 保存するときの文字コードがUTF-8になっていません。メモ帳なら「名前を付けて保存」の画面の下に選択肢があります。

写真をどうすればいいか分からない 最初は無しで公開して構いません。場所だけ作っておいて、撮れたら差し替えます。ただし、スタイル写真は予約数に直結するので、早めに用意した方がいいです。

フォームから予約が届かない 迷惑メールフォルダを確認してください。それでも無ければ、フォームの送信先アドレスの設定漏れです。

一度で完璧なものを作らせようとした これが一番の遠回りでした。ざっくり作らせて、見ながら直す方が早く終わります。

まとめ

コードを書けなくても、店の情報さえ整理できていれば、この程度のサイトは半日かからず作れます。制作会社に頼むと数十万円かかるものが、月1,000円ちょっとで自分の手元に来ます。

そして自分で作った以上、料金改定もスタッフの入れ替わりも、その日のうちに直せます。個人店にとってはこちらの方が大きいかもしれません。

次は業種を変えて、整体院のサイトを作ってみます。