作成から公開まで

必要なサービスを契約する

まず、以下の4つのアカウントを作成します。

1. Github（無料）: ソースコード管理。作成したWebサイトなどを保管。自動連携の起点にもなる
2. Cloudflare (無料) : 超高速、安全、暗号化(SSL)対応、自動化、アクセス無制限、帯域無制限なのに無料でWebサイトを公開できる。独自ドメインにも対応
3. Claude (Proプランから $17から) : Webサイトを構築するためだけでなく、システム構築も可能。仕事に使うなら、ChatGPTよりも信頼できる。ChatGPTのように通常業務、文章作成、さまざまなことに使える。そのプランの一部で、Claude Code (Webサイト生成、プログラミング)を使う
4. Unsplash (無料) : 無料で高品質が画像を検索、利用するために使います。

開発環境を準備する

プロが使う道具をインストールしますが、これも簡単です。動画の説明や、ドキュメントに従って「コマンド」を実行するだけ。本当に簡単です。

インストールするものは、

1. Claude Code （１行だけのコマンドを実行）
2. Node (１行だけのコマンドを実行)
3. Visual Studio Code (通常のアプリのインストールか、コマンドを１行実行)

スターターテンプレートを準備

Visual Studio Code を開いて、コマンドを実行するだけ。２つのコマンドを実行したら完了です！すると、スターターテンプレートがセットされ、作成開始ができます。

作成開始

Visual Studio Code のターミナルか、拡張機能でClaude Code を立ち上げます。そして、以下のようなメッセージを書きます。Webページの内容について、可能限り書きます。

Webページを作ってください。以下の箇条書きを分析して、考えて、作ってください。

- 私のビジネスは、（こんな感じのこと）です
- 想定している顧客は、（こんな感じ）です
- 私のビジネスの強みは、（こんな感じ）です
- 店舗だけでなく、オンラインショップ（別のURL）でも購入できます
- 顧客からは、・・・・と喜ばれています
- 競合他社と比べて・・・・・だと思っています

編集作業

Claude Code が、自動で作成したデザイン、コピー、画像などをベースに、色々と注文をつけていきます。また、まるっきり違うデザインを作り直しても良いでしょう。あれこれ、修正作業を「自分で行うのではなく、Claude Codeに依頼」していきます。コードは一切触りません。

公開作業

公開するのは、今作ってるWebページ関連のファイル群を「Github」に保存します。これも、クリックしていくだけで簡単に実現できます。クリックできたら、Cloudflare Pages上で、関連付けを行えば、それで世界中からアクセスできる状態になります。