はじめに

こんにちは。プロフィフティーン代表の kaneda です。
このたび、弊社コーポレートサイトをリニューアルしたので本投稿ではその報告をしたいと思います。
今回のリニューアルのコンセプトは、「自分たちのスタイルにあい、更新を継続できる構成にする」としました。

今回、デザインも含めて、AIを活用しながらほぼ一人で構築しました。チャット版のClaudeと壁打ちしながら構成・デザイン・文言を固め、実装はClaude Codeに任せる、という流れで進めました。
この記事では、なぜ作り替えたのか、どんな技術を採用したのか、そして運用がどう変わったのかを、事実ベースでまとめます。

以前のサイト ― 更新が止まっていた

リニューアル前のコーポレートサイトは、市販のテンプレートを使って構築していました。立ち上げ当初はそれで形になっており、デザインも現代的で構成にも特段の不満はありませんでした。

問題は、運用フェーズに入ってから、「私たちの体制ではうまく更新を回せなかった」ことです。

弊社では、広報専門の担当者はいないので、他の業務の片手間でコーポレートサイトを運用する必要があります。いざ更新しようとしても「どこをどう直せば意図どおりに反映されるか」をそのつど確認するところから始まり、手をつけるまでに腰が重くなっていました。仕組みそのものというより、それを使いこなす運用体制を私たちが取れていなかった、というのが正直なところです。

結果として、ちょっとした文言の修正でも後回しになり、更新がほとんど止まっている状態になっていました。コーポレートサイトは本来、お知らせや実績をこまめに更新してこそ価値が出るものですが、その逆を行っていたわけです。

静的サイトへの作り替え

そこで今回は、テンプレートを使った構成から離れ、プレーンな HTML / CSS / JavaScript で構成する静的サイトに作り替えました。

弊社のメンバーは技術者が中心です。変更イメージが直接コードに反映され、Git で履歴を残しながら手を入れていけるという進め方が、私たちの性に合っていました。少人数で、片手間で運用していくことを考えても、やりたい変更をそのままコードに落とせる静的サイトは理にかなっていました。
もちろん、更新の頻度や運用体制によっては、WordPress や Movable Type のような CMS が最適な場面も多くあります。要は条件次第で、今回の私たちには静的が合っていた、ということです。

静的サイトには、表示が速い、攻撃対象になりやすい管理画面やデータベースを公開サーバーに置かなくて済む、といった利点があります。一方で、「更新のたびにファイルを直接編集する必要があり、コツコツとした手作業になりがち」「共通部分の修正には多大な労力がかかる」という弱点があると思います。

このトレードオフを、後述する AI 活用で解消できると考えました。

デザインも Claude で

デザインについても、テンプレートに頼るのではなく、AIを使いながら一から組み上げました。ライトテーマをベースに、シンプルで読みやすいトーンに整えています。

「既製テンプレートの枠に自分たちを合わせる」のではなく、「伝えたい内容に合わせて見た目を作る」方向に切り替えられたことも、今回のリニューアルの収穫でした。

「コツコツ更新」を「ダイナミックな更新」に変える

フレームワークや CMS を使わない静的サイトには、少しの更新や記事の投稿でもコードを修正し、デプロイしなければならないという弱点があります。共通部分を一元管理する仕組みがないため、たとえばちょっとした修正でも、複数のページやファイルに同じように手を加えなければならない場面が出てきます。人間が手作業でやると、これはかなりの手間です。

ここで活きるのが AI です。AI を使えば、複数箇所にまたがる更新も一気にやってくれます。修正漏れや反映ミスを気にしながら一つひとつ手で直す必要がなくなり、これが静的サイトを更新し続けられる原動力になっています。

以前のように「ここを直すにはどこを触ればいいか」を考える必要がなく、AI に変更したいことの指示を出すだけで、考えたことがそのまま具現化します。サイト内の表現を変更したり、デザインを入れ替えたり、記事を投稿することも同様です。AIを活用することで、高速でイメージを形にすることができます。

更新の心理的ハードルが下がったことで、サイトに手を入れる頻度そのものが上がっています。

Claude Code を試したかった、というきっかけ

この形を取り入れたのには、もう一つの動機もありました。Claude Code によるスクラッチ開発を、実際に試してみたかったことです。

自社のコーポレートサイトは、自分たちの裁量で好きに作り替えられる、いわば格好の実験対象でした。AI に開発を任せるとどう動くのか、どこまでできるのかを、自社サイトで体感しながら確かめていったというのが実際のところです。

採用した技術要素

今回のリニューアルで採用した主な技術・サービスは以下のとおりです。

項目採用したもの
サイト構成静的サイト（HTML / CSS / JavaScript）
ホスティングCloudflare Pages
デザイン・実装の補助Claude / Claude Code

今回のサイトはこうしたシンプルな構成にしたことで、サーバー側の構成も軽くなり、セキュリティ・表示速度の両面でも扱いやすくなりました。

これから ― 技術ブログとフレームワークの導入

ここまで「フレームワークも CMS も使わない静的サイト」を推してきましたが、実は今後、技術ブログを追加するにあたってAstro の導入を検討しています。

矛盾しているように見えるかもしれません。ただ、私たちが避けたかったのは「フレームワークそのもの」ではなく、どこを変えればどう反映されるか分からないことからくる「更新が億劫になる」状態でした。

ブログのように記事が継続的に増えていくコンテンツでは、共通レイアウトと記事データを分けて管理できる仕組みがあったほうが、むしろ更新しやすくなります。Astro は静的サイトとして書き出せるフレームワークで、これまでの「AIによる高速実装」、「速くて堅牢」という静的サイトの利点はそのままに、記事の追加だけに集中できる構成をつくれます。

「フレームワークを入れること」が目的なのではなく、あくまで「弊社のスタイルで更新し続けやすい状態を保つための手段」として、必要なところに必要なだけ取り入れていく。今回のブログ追加は、その第一歩として検討を進めています。

おわりに

今回のリニューアルは、単に見た目を新しくしたというより、「更新され続けるサイト」へと運用の前提を変えた取り組みでした。

  • 更新が止まっていたサイトを、自社の運用に合う静的サイトへ作り替え
  • デザインも含めて AI を活用してほぼ一人で構築
  • 「更新しづらい」を「更新の心理的ハードルが低い」状態へ転換

弊社は、こうした AI を活用した開発・構築を日常的に取り入れています。コーポレートサイトのリニューアルや、レガシーなシステムの作り替えなどでお困りの際は、お気軽にご相談ください。