「AIにホームページを作ってもらう」と聞くと、なんだか大げさで、私のような未経験の主婦には縁のない話に思えていました。でも実際にやってみたら、写真1枚も用意しないまま、居酒屋のトップページが1日で形になったんです。
この記事は、私（40代・未経験）がAIツールのクロコ（Claude Code）と一緒に、架空の居酒屋のホームページを作った全記録です。吹き出しのやりとりは、当時のログに残っている実際の文面をそのまま載せています（クロコの長い返答は一部を抜粋しています）。
先にお断りしておくと、今回作ったお店「炭火と肴（さかな） たか田」は実在しません。Web制作の練習用に設定を考えた架空のお店です。いきなり本物のお店の仕事を受けるのは怖かったので、まずは練習台を1軒つくってみた、という段階です。
「クロコって何？」「そもそもAIでホームページって無料でできるの？」という方向けの入門編も公開しています。この記事は、実際のやりとりを見てみたい方向けの実践編になります。
きっかけは、私のこんな相談だった 🏮
そもそもの始まりは、「ホームページ作りを副業の練習にしたい」とクロコに送った、この相談でした。原文のまま載せます（誤字もそのままです）。
「HPがないお店に、AIで作ったHPを売り込む」という副業の第一歩として、まず練習用の架空のお店を1軒作ろう、という計画です。業種は私から提案しました。
クロコいわく、個人経営の居酒屋はホームページがないお店が多く、練習がそのまま将来の営業先の予行演習になる業種なのだそうです。こんなプロっぽい豆知識も返ってきました。
店名は、クロコが3案を出してくれました。これも実際の文面のままです。
A案：炭火と肴（さかな） たか田（落ち着いた大人の店）
B案：大衆酒場 まる八（昭和レトロ・にぎやか系）
C案：旬菜居酒屋 ゆずの木（女性も入りやすい和モダン）
私の返事は、一文字でした。
これで「炭火と肴 たか田」に決定です。すると、クロコが「店舗設定書」というメモを自分で作ってくれました。大将の人柄（56歳・無口だが焼き場で目が変わる）からお品書き、営業時間まで入った本格的なもので、要点はこんな設定です。
- 店名：炭火と肴 たか田（創業15年・夫婦で営む個人店）
- 売り：焼き鳥屋ではなく「備長炭の炭火焼き」の店。市場で選ぶ日替わりの肴
- 席数：カウンター8席＋小上がり2卓（最大18名）
- 雰囲気：黒×木目×炭火のオレンジを基調にした、落ち着いた大人の和の店
正直に書くと、ここまでで私がやったのは「業種の思いつきを言った」「店名をAで選んだ」の2つだけ。設定書づくりも、このあとのコードも、ぜんぶクロコの仕事でした。
頼んだら、5分で「開店」した ⚡
制作当日の夜。私がクロコに送った指示は、これだけでした
設定書の当初案は4ページ構成でしたが、まずは1枚に全部入った「1ページ完結版」から。あとから思えば、近所の居酒屋のホームページを何ページも読み込む人はいないので、個人店にはこれで十分でした（実際、のちに公開したのもこの1ページ版です）。そして数分後、完成報告が届きました（原文の冒頭部分を抜粋します）。
写真を1枚も使わず、CSSだけで作った第1版です。
・トップ：家紋風の「田」マーク、大きな明朝体の店名、下からほんのり炭火の火明かり
ブラウザには、真っ黒に近い背景の下のほうにオレンジの光がじんわり広がって、「炭火と肴 たか田」の店名が明朝体で大きく浮かんだページが映っていました。ちゃんと居酒屋に見える。写真は1枚も入っていないのに、です。実物がこちらです。
あとからログの時刻を見返して驚いたのですが、私が「たか田もやって」と送ったのが22時49分、クロコの開店報告が22時54分。最初の1枚ができるまで、たったの5分でした。「ホームページ制作」と身構えていた自分が、ちょっと恥ずかしくなるスピードです。
写真がなくても「和の空気」は作れる 🎨
今回いちばん感心したのが、この「写真なし」で雰囲気を出す工夫でした。お店の実物写真は1枚もありません（架空のお店なので当然ですが）。それでも安っぽく見えなかった理由を、できあがったページの中身から挙げると——
- 配色：墨色の黒・木目の茶・炭火のオレンジ・金の4色でまとめる（設定書どおり）
- フォント：見出しは明朝体（Shippori Mincho）で和の格を出し、本文は読みやすいゴシック体
- 炭火の明かり：写真ではなく色のグラデーションで表現。だから画像の読み込みがなく、表示も軽い
- 家紋風のロゴ：「田」の一文字を金色の丸で囲んだだけ。素材いらずで「らしさ」が出る
細かいところでは、ページの一番下に「架空店舗のサンプルです」という注記まで、頼んでいないのにクロコが自分から入れていました。練習用と本物をきちんと区別する、という気配りです。
「写真がないと何もできない」と思い込んでいたのですが、色と文字の組み合わせだけでも、ここまで雰囲気は作れるんだと知れたのが、この日いちばんの収穫でした。本番でお店の写真が用意できたら、あとから差し替えればいい。まずは「土台」ができたことが大きいです。
スマホ表示の崩れは、クロコが自分で見つけて直していた 📱
ここまで順調すぎるくらいですが、実は一発で完璧だったわけではありません。スマホで見るとヘッダー（上のメニュー部分）が崩れる問題が、実際に起きていました。ただ——私がそれを知ったのは、クロコ自身の報告からでした。完成報告には、こう書いてあったんです。
つまり、私に見せる前に、クロコが自分でパソコンとスマホの両方の表示を確認して、崩れを見つけて、直してから持ってきていたんです。「AIの作ったものは人間が全部チェックしないと」と身構えていたので、先回りされたのは正直びっくりしました。
とはいえ、「確認は全部AI任せでいい」とは思っていません。お店のホームページを見る人の多くはスマホからのはず。この先、本物のお店の仕事をするなら、最後に自分のスマホで開いて確かめる習慣は残すつもりです。「パソコンできれいでも、スマホで確認するまで完成とは言えない」——それをAIが手順として持っていたことも含めて、この確認の大切さが今回の学びでした。
私が送った言葉は、実質4つだけ 📝
「専門用語で細かく指示しないとダメなのでは」と思われるかもしれません。でも、ここまでの吹き出しを見返してもらうとわかるとおり、この日までに私がたか田のために送った言葉は、最初の相談・「個人営業の居酒屋とかどう？」・「A」・「２のたか田もやって」の実質4つだけ。指示というより、思いつきの相談と相づちに近い言葉ばかりです。
設定書のような「ちゃんとした準備」はクロコのほうが得意なので任せてしまって、私は「どんなお店にしたいか」のイメージと、できたものへの感想に集中する。最初から完璧な指示を目指さない、この分担がいまのところ一番うまく回っています。
ちなみに、こうしたAIツールを使ったホームページ作りに挑戦するなら、あわせてWordPressを置くためのサーバーがあると、練習の成果をそのままネットに公開する練習まで進めます。私が実際に使っているのは、次のサービスです。
- ✓ 月660円〜・最安値クラス
- ✓ 申し込み10分でWordPress開設完了
- ✓ このブログで実際に稼働中
1日目にできたこと・まだできていないこと ✅
前の晩に相談と設定書づくり、当日の夜は22時49分に頼んで5分で第1版——という、拍子抜けするほどの1日目でした。整理すると、こんな進み具合です。
1日目でできたこと
- お店の雰囲気・こだわり・お品書き・宴会・店舗案内までが1ページに収まったトップページ
- 写真なし・色とフォントだけで作った「和の居酒屋」らしい見た目
- パソコン・スマホの両方で崩れずに見られる状態（ヘッダーの崩れはクロコが自分で発見・修正済み）
まだできていないこと
- 料理や店内の画像（今回は写真なし。あとからAIで生成した画像を足す予定）
- 実際にネットへ公開する作業（この時点ではまだ手元で見ている段階）
- 細かいデザインの微調整（ここからが2日目以降の宿題です）
（その後の追記）ここまでが1日目の記録です。このあと、料理や店内の写真をAIで生成して追加し、ネットへの公開まで実際にできました。公開までの流れは入門編で紹介しています。写真が入った現在のたか田は、こうなっています。
「こだわり」のセクションには、備長炭の炭火焼き・お造り・地酒を紹介する写真も並んでいます。
正直に言うと、1日目の私は「見て、感想を言う」以外ほぼ出番がありませんでした。それでも、このあとの写真の追加や公開作業では「感想→修正」の往復が何度もありました。AIに頼めば全部一瞬で終わる、ではなく、任せるところは任せて、決めるところ・確かめるところは人間がやる——この距離感がつかめたのが、1日目の一番の収穫だったと思います。
この練習の先には、「知り合いのお店のホームページを作る」といった小さな仕事につなげていく計画があります。副業としてどう育てていくかは、別の記事で少しずつ書いていく予定です。ブログで副業の収入を作っていく全体像は、こちらにまとめています。
「そもそもクロコ（Claude Code）って何？」「AIでホームページ作成は本当に無料でできるの？」という基本から知りたい方は、入門編もあわせてどうぞ。同じ「未経験から始めてみたい」という方の、最初の一歩の参考になればうれしいです。
コメント