キズナアイ 活動10周年特設サイト
年表を並べるだけの資料（これまで）
10年を1ページで振り返る（その後）
VTuber キズナアイの活動 10 周年を記念する特設サイト、という設定で作った授業課題です。固定した 3D モデルの前を内容が流れていき、ページを移ることがカメラを切り替えることになります。活動休止の章では画面から人が消え、復帰とともに戻ってきます。
HAL東京の授業課題として制作した非公式のサイトです。登場する作品・名称・画像の権利は、それぞれの権利者に帰属します（©Kizuna AI）。下のプレビューは、提出したサイトそのものです。
01課題
アーティストの情報サイト
- 3 ページ以上で、トップにはページ内リンクを置くこと。活動の履歴と作品の紹介を、優先順位を考えて載せること。
- CSS フレームワークや UI テンプレートは使わない。Firefox と Chrome の最新版で確認すること。
- 3 校合同の学内コンペ「美しい WEB デザイン」への参加作品を兼ねた課題です。
02ねらい
10 年を 1 つの画面で振り返る
「10 周年の特設サイト」という設定にしたのは、本人に実際の特設サイトがいくつもあること、2026 年がちょうど 10 周年にあたること、そして「活動の履歴」をサイトの軸にできるからです。
中心にあるのは、背景に 3D モデルを固定し、その前を内容が流れていくという構成です。本人が 3D モデルとして存在しているので、ページの移動をカメラの切り替えとして見せられます。
活動休止の章で人が消えるのは、あとから足した演出ではありません。「黒い色面は事実と記録の側」「休止の章にはピンクを使わない」という 2 つの決まりが重なって、自然にそうなりました。
03設計
色・角度・装飾の出どころ
- 色は公式サイトの CSS から読み取りました。ピンク #ee4f87 は髪のリボン、ほぼ黒の #1a1a1a は復帰時の特設サイトから。
- ピンクの色面は本人の側、黒の色面は事実と記録の側。休止の章だけはピンクを一切使わず、「色がないこと」で沈黙を表します。
- 色面の上下は約 3° の斜めに切り、テープの角度と合わせて、サイト全体で角度を 1 つにそろえています。
- 「Kizuna Ai ♥」の文字の輪は自作の 4 枚で、80 秒で 1 周し、向きを交互に変えて回ります。
- テープも自作です。平らに貼るのは MUSIC の「9 週連続リリース」だけ、縦に貼るのは CHARACTER の紙の端だけで、どちらも境目を隠す役目です。
| モチーフ | 出どころ |
|---|---|
| 2016–2026 | 活動 10 年 |
| リボン | 髪のリボン。ピンクの出どころでもある |
| hello, world | アルバムの名前で、プログラムの最初の一行。「最初の一人」と重ねている |
| 2 月 26 日 | 活動休止と復帰が、ちょうど 3 年違いの同じ日 |
| つながりの線 | 「つながり」という言葉 |
ハートや筆の帯など、サイトの中で生まれた記号は、出どころのない自作のものとして区別しています。
04作り
モデルの前を流れる構成
- 公式配布のモデルを Blender（MMD Tools、EEVEE）で描画し、4 ページそれぞれに別のコマを当てています。
- モデルは画面に固定するのではなく、本文と同じ高さの枠の中で貼り付くように置いています。
- TOP の登場は 28 コマの画像を順に送るアニメーションです。HISTORY は縦のスクロールを右から左への横の年表に変え、文字は縦書きにしています。
- MUSIC では 24 枚のジャケットが軌道を描いて並び、位置も大きさも 1 つの角度から計算しています。休止していた 3 年分は、軌道に空きを残しました。
- JavaScript を切っても、内容は 1 文字も欠けません。スマートフォンから組み、768px と 1024px で段階的に広げています。