銀河のコンセプトサイト
WebGPU × スクロール演出
勤務先（医療機関向けのWeb制作・ポータル運営会社）のコーポレートサイトを、「散らばった医療情報を、ひとつの流れに整える」という物語で表現した社内提案です。スクロールに合わせて、約22万個の星でできた混沌とした星雲が、4本腕の渦巻銀河へと形を整えていきます。オープンソースの銀河シミュレーションを土台に、演出・カメラワーク・表示できない環境への配慮・スマートフォン対応を加えました。
操作録画（約30秒、WebGPUの実際の描画）：オープニング → 6つの章 → Contact で渦巻が完成。容量の都合で動画では細かな星が少しつぶれています。細部は下の静止画をご覧ください。
コンセプト：
Noise → Structure
読み進める行為そのものが「情報が整理されていく」体験になるよう、星の動きとスクロールを結びつけました。
- 6つの章（Top・About・Service・Career・News・Contact）ごとにカメラ位置と「整い具合（order）」を決め、スクロールに合わせてなめらかにつなぎました。
- 最後の Contact 章で渦巻が完成し、星が中心から外へ弾けて光が一瞬強まります。
- Service 章では、4本の腕と4つのサービスを重ねる演出を、2026年10月の見直しで加えました（会社の事業構成を示すものではなく、表現上の対応です）。
オープンソースとの分担
銀河のシミュレーションは、オープンソースの dgreenheck/webgpu-galaxy（MIT License）を土台にしています。自分で加えた部分と、元のプロジェクトの部分を分けて記載します。
| 元の プロジェクト | WebGPU（three.js の TSL compute shader）による粒子シミュレーション、渦巻の配置式、差動回転、マウスによる反発とばねの戻り、bloom、星雲のテクスチャ |
|---|---|
| 追加した 部分 | 混沌と渦巻の2つの目標位置をスクロールで補間する仕組み／6章のカメラのキーフレーム／「第一の星」のオープニング／Contact 到達時の放射状のバースト／ホバーで効くマウスの力場／静止画への切り替え（下記05）／スマートフォン向けの軽量化／日本語の組版／16の下層ページ |
| 外した 部分 | パラメータの操作パネル、自由視点の操作、FPS表示、ビルド工程（CDN の import map に変更し、ビルド不要に） |
プロセスと判断
- 試作（2026年7月2日）星を混沌と渦巻の2つの位置に結びつけ、スクロールで整っていく原型を作成
- 体験の組み立て（7月3日）オープニング、Contact の演出、下層ページ、お知らせ詳細を追加
- 試して外した案菱形のプリローダーとフッターの星で描くロゴは、私が不採用と判断しました（プリローダーは「コンセプトが統一されない」ため）。粒子で描く見出しは銀河との併用で表示が不安定だったため保留し、星が社名に集まる演出はフッターと重複したため外しました
- 使い勝手の調整（7月6日）スマートフォンのメニュー、マウス操作の処理の間引き（カクつきの解消）
- 見直し（2026年10月7〜8日、提案後）静止画への切り替え、スマートフォンの星の数の削減、Service 章の4本の腕の演出、日本語の改行、キーボード操作、章の長さの短縮など
画面
表示できない環境への配慮
- 端末でモーション軽減（「視差効果を減らす」など）が有効な場合、WebGPU と WebGL2 のどちらも使えない場合、3Dの読み込みや初期化に失敗した場合は、完成した銀河の静止画に切り替え、文章はすべてそのまま読めるようにしました。最初から静止画で表示する場合は、3Dのライブラリ自体を読み込みません。
- WebGPU が使えない端末では、three.js が備える WebGL2 の描画に切り替わります（この切り替え自体は three.js の機能です。WebGL2 で銀河が一点に潰れる不具合を修正しました）。
- スマートフォン（画面幅768px以下）では、PCの約22万個に対して星の数を4万個に抑えました。また、すべての端末で描画解像度の上限を2倍から1.5倍に下げ、負荷を抑えています。
- オープニングで20秒以上読み込みが進まない場合も、静止画に切り替えます。
AIとの分担
コンセプト、表現の方向性、案の取捨選択、仕上がりの確認は私が行い、実装は AI（Claude）と協働しました。git の記録では、68件のコミットのうち54件に AI の共同作者の表記があります。
結果と振り返り
- 社内提案として制作し、会社には採用されていません。公式サイトでもありません。
- 表示速度やフレームレートは、実機で計測していません。
- Service 章の「4本の腕」は、実際の画面でもまだはっきりとは見えず、本文のサービス名の強調で対応を伝えている状態です。腕の形が早く現れるよう、演出を調整する余地があります。
- サイト内の「代表からのメッセージ」は、同社サイトの代表挨拶を提案用に要約・言い換えた仮の文章で、ご本人の発言ではありません。
- お問い合わせフォームは画面のみで、送信機能はありません。
本作品は、株式会社イーエックス・パートナーズ在籍中に社内提案として制作した非公式のコンセプト作品です。同社の公式サイトではなく、同社による採用・承認もありません。会社名・ロゴ・会社概要・事業紹介・お知らせの見出しは同社サイトの公開情報を使用しています。トップのキャッチコピーや採用の文章などは提案用に新たに書き起こしたもので、同社の発言・方針を示すものではありません。銀河のシミュレーションには dgreenheck/webgpu-galaxy（MIT License）を利用しています。
© 2026 Yixin ChenTokyo