プログラミング知識ゼロからの挑戦

今回は、前回に引き続いてAIを使ったサイト構築のお話になります。

サイト構築において一番活躍してくれた「Claude」をどのように活用したのか、具体的な手順を大半のテーマとして紹介していきます。

なぜ「Claude」を使ったのか？

前からClaude CodeやCodexという名前自体はよく聞いていました。しかし、これまでは日常会話や業務の補助程度でしかAIを使っておらず、ほとんど「リマインダーにセットして」とか「文章のおかしなところを修正して」といった使い方ばかりでした。

他には、簡単なサーバー構築やDiscordのbot作りなどに使ったことはあったものの、「ブログページを作ろう」とはあまり考えたことがありませんでした。でも今回、「せっかくだから性能が良いと噂のClaudeで一回作ってみるか」と思い立ち、挑戦してみたのです。

実際に使ってみて感じたClaudeの凄さは、長いコードを一気に、しかも正確に書いてくれることそしてデザインのセンスが良いことでした。

いきなり「プログラミング言語でコードを書いて」と専門用語を使う必要はありません。まずはコンセプトを普通の日本語で伝えることが大事でした。

私が最初にやったのは、自分の作りたいサイトのイメージを素直にチャットで伝えることです。

▼ 実際に使ったプロンプト

「日記帳みたいなブログサイトを作りたいです。コピペで動くようにHTMLとCSSのコードを出力してください。デザインはシンプルでモダンな感じにしたいです。」

これだけで、Claudeはサイトの骨組みとなるコードをあっという間に生成してくれました。

Claudeが作ってくれたコードをWordpressにそのままアップロードしただけです。

コードのzipファイルをアップロードにペーストするだけ。これだけで一瞬でデザインされたWebページが完成(笑)
なんと所要時間５分…

今まではテンプレートにあるスタイルを使ってやっていたのが自分がやりたいようにできるそれがとても良かった

もちろん、一発で100%完璧なページはできませんでした。なので修正するための箇所の指定で「ここの文字の色を変えたい」などを再度Claude側に指定した内容を送りました。

そしてこのページができました。
まあもう少し改善してトップページも作りますが今のところは日記みたいな感じでだらっと書いていくだけなのでもう少しやる気があれば本格的なページにしていこうと思います。

アイデアとClaudeのような優秀なAIツールがあれば、サイトを形にできる時代になりました。

プログラミングの文法を1から暗記する必要はありません。「こういうものを作りたい」をAIへ語りかけさえできれば、誰でもサイトは作れると思います。

今までテンプレートのスタイルを使っていたりしたがこれからは自分が好きなようにイメージ案を投げるだけで
コードで出力してくれたり、プレビューでこういう感じになるけど「どう？」みたいな感じで出してくれるので修正してほしい箇所を再度投げたりするだけであっという間にできるのが楽ですね。