Claude Codeで弊社サイトをリニューアルしました

弊社サイトをリニューアルしました。今回、現在個人的に試しているAIを利用したサイト制作の実験サイトとして、デザイナーやコーダー、プログラマーといった「人の手」はほぼ入っておらず、すべてにおいて生成AIの実装技術である、「Claude Code」を全面的に採用しました。

作業の順序としては、次のように行いました。

Bolt.newでデザインの検討

Webのデザインは、現状同じ生成AIサービスの「Bolt.new」のセンスが抜群だと考えているため、先にBolt.newを使ってデザインを検討しました。

プロンプトに「スタイリッシュな企業サイトのデザインを考えて」などのプロンプトを与えながら、必要なコンテンツなどを指定したり、ロゴや背景画像などをアップロードして、細かく調整を加えていきました。角丸の細長いグローバルナビは、Bolt.newが考えたデザインになります。

デザインコンポーネントの作成

実際のWebサイト制作には、PHPのフレームワークであるLaravelを利用することを決めていたため、Laravelで新しいプロジェクトを制作しました。フロントエンド技術にはReactを採用しました。

次に、Bolt.newが制作したHTMLファイルを配置し、Claude Codeにコンポーネント集を作ってもらいました。

こうして、Webサイトで利用する各パーツを1つずつ準備していきます。

トップページの制作

コンポーネント集ができたら、改めてそのコンポーネントを利用しながらトップページを作ってもらいました。これには、トップページに掲載したいコンテンツの内容などをマークダウン形式で準備し、それをプロンプトに与えることで、Claude Codeが適切なコンポーネントを使いながら実装を進めてくれました。

ただし、一見すると問題なく見えても、ウィンドウの大きさを変更するとレスポンシブWebデザインが正しく実装できていなくて、画面がくずれてしまったり、内容がはみ出てしまったりなどするため、その都度プロンプトで修正をするか、場合によってはこのあたりは手作業で修正を加えたりしました。

中ページの制作

続いて、同じく中ページのテンプレートを制作しました。ヘッダーやパンくずリストをどこに置くか、お問い合わせのボタンをどこに配置するかなどを決めながら、共通パーツ群は別途コンポーネントとして定義してもらうなど、ページの増産に合わせて管理しやすいようにClaude Codeに指示を出していきました。

こうして、中ページのコンテンツ群を指定しながら、各ページを制作していきました。

ヘッドレスWordPressの利用

弊社はそれまで、WordPressを利用してサイトを制作していたため、ブログの記事などがWordPressに残っています。そこで、このWordPressを別ドメインに移行し、ヘッドレスCMSとして利用できるように環境を変更しました。

Claude Codeには、「WordPressのAPIを利用して、ブログの記事を取得し、トップページに一覧を表示してください」などの指示を出して、プログラムを実装してもらいました。

URLの設計まわりで、過去のサイトとの互換性を保つために少し工夫が必要だったので、このあたりは手作業で実装をしたり、CursorのAIも利用しながら、実装をしていきました。

その他、問い合わせフォームの実装などもClaude Codeにすべて依頼して行っています。ただし、セキュリティ対策のCSRFの実装などは、細かく指示を行いながら安全性を保って実装を進めていきました。

GitHub Actionsの設定

こうして完成したWebサイトは、弊社で運営しているWebサーバーにアップロードしたかったため、SFTPを利用してアップする必要があります。そこで、GitHubに「GitHub Actions」を設定し、プッシュ時にビルドをしてWebサーバーにSFTPでアップロードするというアクションを設定しました。

こうして、プッシュするとビルドされてデプロイされるというしくみが構築できました。

人の手とAIのバランス

今回、「すべて生成AIがサイトを制作したらどうなるだろうか」という構想の下、できるだけ人の手を入れずにサイト制作をするということにチャレンジをしてみました。

ただやはり、デザインについては凝ったことをしようとするとじょじょにAIが暴走して、壊してしまうため、シンプルにせざるを得ない部分がありました。

コンポーネント集などを最初に作る事で、かなりデザインの精度が高まってきましたが、今後はこのコンポーネント集は、プロのデザイナーがデザインをすることで、よりクオリティの高いサイト制作ができるのではないかと考えています。

本取り組みにご興味がありましたら、詳細を共有させていただくこともできますので、是非お声がけいただければ幸いです。今後も、生成AIとサイト制作やシステム開発について、共有させていただければと思っています。