AIでホームページを自作した話｜Claude×Netlify体験談

こんな人におすすめ

そもそもClaudeって何？

Claudeは、Anthropic社が開発しているAIアシスタントです。以前紹介したChatGPTと同じジャンルのツールで、チャット形式で文章を書いてもらったり、相談に乗ってもらったりできます。Claudeが特徴的なのは、文章の作成だけでなく、ホームページのページそのもの（コード）まで作ってくれること。「こんなサイトを作りたい」と日本語で伝えると、実際に画面に表示されるページを組み立ててくれます。

Netlifyって何？

Netlifyは、作ったホームページのファイルを、インターネット上に無料で公開できるサービスです。以前は「サーバーを借りて、難しい設定をして……」というイメージがありましたが、Netlifyを使うと、作ったファイル一式をアップロードするだけで、世界中からアクセスできる状態になります。今回のサイトも、Netlify経由で公開しています。

実際の作業の流れ

STEP1. サイトのコンセプトとターゲットを伝える

「40代の女性・主婦向けに、PCスキルと在宅ワークの情報サイトを作りたい」というテーマと、伝えたいメッセージをClaudeに伝えることから始めました。誰に向けて、何を伝えたいサイトなのかを最初にはっきりさせておくと、その後の作業がぐっとスムーズになります。

STEP2. ページ構成とデザインの方向性を相談する

トップページに何を載せるか、どんなページが必要か（このサイトで言う「PCスキル」「在宅ワーク」「おすすめサービス」といったカテゴリー）を相談しながら、全体の骨組みを組み立ててもらいました。配色やデザインの雰囲気も、「温かみのある、ベージュとピンクを基調にした感じ」のように、言葉で伝えるだけで反映してもらえます。

STEP3. 画像はCanvaで用意する

サイトに使うイラストは、Canvaで作成しました。「こんな雰囲気の画像がほしい」と伝えると、AIがいくつかの案を提案してくれるので、その中から気に入ったものを選んで使っています。

STEP4. Netlifyで公開する

ページ一式ができあがったら、Netlifyにアップロードして公開します。難しいサーバーの知識がなくても、ここまで進めることができました。

STEP5. 公開後の不具合も、相談しながら直す

公開して終わりではありませんでした。実際に使ってみると、お問い合わせフォームがうまく送信できないといった不具合が見つかることもあります。そんなときも、状況をClaudeに伝えると、原因を一緒に確認しながら直してくれました。

やってみて感じたこと

良かったこと

• コードが読めなくても進められる — わからないことは、そのまま日本語で聞けば説明してもらえます。
• やり直しがきく — 「ここをこう変えたい」と伝えれば、その場で修正してもらえるので、失敗を恐れずに試せます。
• 相談しながら形にできる — 一人で抱え込まず、壁打ち相手のように使えるのが心強いところでした。

大変だったこと

• 最初は伝え方に慣れが必要 — 何をどう伝えればいいか、最初は手探りでした。具体的に伝えるほど、思った通りの仕上がりに近づきます。
• 出来上がったものは自分の目でも確認する — AIが作ったものをそのまま鵜呑みにせず、実際に画面で見て、リンクが正しく動くかなど確認する作業は必要でした。

これから自分のサイトを作りたい人へ

最初から完璧を目指す必要はありません。「こんなサイトがあったらいいな」という気持ちを、まずはAIに言葉で伝えてみることが第一歩です。わからないことがあれば、遠慮せずそのまま聞いてしまって大丈夫。AIは、隣で一緒に作業してくれる相棒のような存在だと感じています。

まとめ

このサイトは、AIアシスタント「Claude」と無料ホスティング「Netlify」を使い、プログラミング未経験の状態から形にしたものです。40代からでも、新しいツールを味方につければ、自分の力でここまでできる——それを実感してもらえたら嬉しいです。