2026.11.01お知らせ

Webサイトをリニューアルしました。霧の街と、CODE4の名前の由来

株式会社CODE4のWebサイトをリニューアルしました。社名の由来から決めた世界観、AIと一緒に進めたつくり方、静的なサイトにした理由、そして検索とAIへの考え方まで、今回のサイトづくりについてまとめます。

制作事例としてのまとめ

依頼主: 株式会社CODE4（自社サイト）
課題: 以前のサイトは事業の立ち上げ期につくったもので、その後に広がったAIを活用したデザインと開発の仕事を、十分に紹介できていませんでした。社名の由来や会社の考え方も、もっと伝わる形にしたいと考えていました。
やったこと: 社名の由来から世界観を設計し、トップページを3Dの物語として構成。下層ページは読みやすさを優先した白黒のデザインに。デザインから実装まで、AIを使って短いサイクルで試作と修正をくり返しました。
技術: PHP・WordPressを使わない静的サイト／3D表示（three.js）／全ページに構造化データ／AI向けの説明ファイル（llms.txt）
できたこと: PHPやWordPressのような狙われやすい仕組みを持たない構成で、演出の多いトップページでも、検索エンジンとAIに内容が伝わるサイトになりました。

CODE4（コードフォー）という社名は、アメリカの警察無線で使われるコードに由来します。現場の状況を確認し、問題がないことを、駆けつけた仲間に伝える合図です。

新しいサイトは、この「現場がクリアになるまで」を物語にしました。大規模な障害で霧に包まれた街に、1つずつ状況を確認し、街を立て直し、明かりを戻していく。最後に霧が晴れて「現場、クリア。」となる流れです。

見た目は、初代PlayStationの頃のゲームのような質感にしています。細部まで描きこみすぎない映像は、見る人が想像で補う余白を残してくれます。デザインとITの問題がもつれた「現場」を、少し引いた目線で見てもらえたらと考えました。

霧に包まれた街、無線で交わす通信画面、装甲車での移動など、サイトの各所には、あの頃に遊んだいろいろなゲームへのオマージュを込めています。気づいた方は、ぜひ探してみてください。

今回のサイトは、AIを道具として使いながらつくりました。

3Dの街と演出：画像ファイルではなく、プログラムで描いています。建物、電柱、走る人、装甲車の内部まで、AIと対話しながらコードを書き、調整を重ねました。
通信画面のキャラクター：AIで生成した画像をもとに、ドット絵風に仕上げています。
文章と構成：伝えたいことの整理と最終的な判断は、私たちが行っています。

AIを使うことで、試してはやり直す回数を大きく増やせました。ただ、どの演出が伝わるか、どこで止めるかを決めるのは人です。CODE4がお客様の制作でAIを使うときも、この考え方は同じです。

サイトは、PHPもWordPressも使わない「静的なサイト」として構築しています。完成したページをそのまま配信する仕組みのため、PHPの脆弱性の影響を受けず、ログイン画面や管理画面もありません。

これは、CODE4の月額制ホームページと同じ考え方です。PHPの深刻な脆弱性が話題になるなかで、「更新を頑張る」よりも「仕組みそのものを狙われにくくする」ほうが、多くのサイトにとって現実的だと考えています。まずは自分たちのサイトで、それを形にしました。

見た目の演出が多いサイトでも、内容がきちんと伝わることを大切にしました。

検索結果だけでなく、AIに質問したときの答えの中でも見つけてもらえる。これからのWebサイトには、その両方が必要だと考えています（LLMO：AI検索への最適化）。

新しいサイトの最後には、「現場、クリア。」という言葉を置きました。デザインとITでもつれた問題を整理し、関わる人が安心して次へ進める状態をつくる。それが、CODE4の仕事です。

Webサイトのこと、アプリのこと、まだ形になっていないご相談も歓迎です。まずは、現場の状況をお聞かせください。