【Claude Design × Claude Code】初心者OK！本格カフェサイトを無料で公開！

ホームページは「作って終わり」ではありません

お店や個人事業のホームページが欲しいと思ったとき、多くの方が最初に悩むのは費用です。制作会社に頼むと安心ですが、まとまった予算が必要になります。かといって自分で作るには、デザイン、文章、公開方法が分からない。

その結果、SNSだけで済ませたり、古いホームページを放置したりすることがあります。

けれど、ホームページは本来、事業を伝える大切な場所です。営業時間、メニュー、雰囲気、問い合わせ方法、誰に向けたお店なのか。そうした情報を、必要な人に届けるための土台になります。

Claude Design と Claude Code を使うと、この土台を自分で作り、少しずつ育てる選択肢が生まれます。

AI を使えば、外注費を抑えられる可能性があります。ただ、それだけを目的にすると少しもったいないです。

本当の価値は、自分で直せるホームページを持てることです。

お店の情報は変わります。季節メニュー、営業時間、イベント、予約方法、写真。こうした小さな更新を毎回外注するのは大変です。自分で触れる状態にしておくと、事業の変化に合わせてサイトを育てられます。

AI は、そのための制作パートナーになります。

Claude Design は、サイトの見た目や構成を考えるときに役立ちます。どんな雰囲気にするか、どの情報をどの順番で見せるか、まずデザインの方向性を作れます。

Claude Code は、そのデザインを実際のファイルとして整えたり、公開できる形にしたりする場面で役立ちます。

この2つを組み合わせると、次の流れが作れます。

この流れを一度体験すると、ホームページ制作が「専門家に全部任せるもの」から「AI と一緒に育てるもの」に変わります。

AI は、きれいなデザインや文章案を出してくれます。けれど、お店らしさを最終的に決めるのは人間です。

たとえば、カフェサイトなら次のようなことを考えます。

ここが曖昧だと、見た目はおしゃれでも、誰に何を伝えるサイトなのかがぼやけます。

AI に頼む前に、まず「このサイトを見た人に、どんな気持ちになってほしいか」を言葉にすることが大切です。

GitHub Pages を使えば、静的なホームページを無料で公開できます。小さなお店の紹介サイトや、個人事業のサービスページには十分な場合も多いです。

ただし、無料公開にも注意点があります。

問い合わせフォームや予約機能のように、動的な処理が必要な場合は別の仕組みが必要になることがあります。また、公開リポジトリにしている場合、ファイルの中身は見える前提で考える必要があります。個人情報や内部メモを入れてはいけません。

公開前には、見せてよい情報だけが入っているかを確認します。

最初に公開するサイトは、完璧でなくて構いません。

むしろ、最初から作り込みすぎると公開が遅れます。まずは、必要な情報を載せた小さなサイトを公開し、実際に見てもらいながら直していく方が現実的です。

特に小さなお店では、次の更新が大切です。

Claude Code があれば、こうした小さな更新も相談しながら進められます。

動画では、Claude Design と Claude Code デスクトップ版を使って、おしゃれなカフェのホームページを作り、GitHub Pages で無料公開するまでを紹介しています。

Claude Desktop のインストール、初期設定、GitHub の登録、サイト公開までの流れを1本で確認できます。

この記事では、AI でホームページを作る考え方を整理しました。実際の画面操作や公開手順を見たい方は、動画を見ながら進めるのがおすすめです。

まずは、お店やサービスについて次の5つを書き出してください。

この5つがあるだけで、AI への依頼はかなり具体的になります。ホームページづくりは、デザインツールを触る前の言語化から始まります。