このサイトができるまで
会社案内も、名刺代わりのホームページも、もう終わりにしませんか。私たちが実際に使っている制作の裏側を、隠さずお見せします。
WHY WE REBUILT
IT企業なのに、技術力が伝わっていなかった
私たちはIT導入支援事業者として、中小企業のデジタル化を支援しています。ですが、それを謳う自社のホームページ自体が何年も前のまま更新されておらず、正直なところ説得力がありませんでした。だからこそ、自分たちの技術力を一番わかりやすい形—自社サイトそのもの—で証明することにしました。
HOW WE BUILT IT
生成AIとの共同開発フロー
進め方はとてもシンプルです。画面を見ながら「ここはこうしたい」「もっとかっこよく」と会話するように伝える。すると生成AIがその場でコードを書き換え、すぐに見た目や動きが変わって返ってくる。それを見てまた次の要望を伝える——この繰り返しだけで、1ページずつ確実に仕上げていきました。 デザインカンプを何度もやり取りする時間も、実装が上がってくるのを何週間も待つ時間もありません。会話のスピードが、そのまま制作のスピードになります。
WHAT WE IMPLEMENTED
実装したフィーチャー
このサイトの中に、実際に組み込んだ技術要素の一部をご紹介します。派手な演出だけでなく、見えない部分の作り込みも含めてすべて実例です。
WebGLシンセウェイブ演出
リアルタイム3Dグラフィックスによる背景グリッドと、マウス連動のパララックス表現。
マウス追従スポットライト
カーソルの位置に反応してカードが発光する、インタラクティブなホバー演出。
無限スクロールカルーセル
末尾から先頭へシームレスにループし続ける自動スクロール。長押しで早送りにも対応。
HUDパネルのデザインシステム
コーナーブラケットやグリッドテクスチャなど、サイト全体で統一されたSFライクなUI言語。
タイプライター演出
社名の由来を1文字ずつ描画するアニメーションで、ブランドストーリーを表現。
見えない部分への配慮
装飾要素の読み上げ除外や、モーション削減設定への対応など、体験の質を底上げする作り込み。