映画『超かぐや姫！』仮想公式サイト
作品情報の一覧（これまで）
トップページが配信画面になっている（その後）
好きな映画の「仮想の公式サイト」を作る授業課題です。物語の舞台が仮想空間＜ツクヨミ＞のライブ配信なので、トップページを、配信を観ている画面として組みました。
HAL東京の授業課題として制作した非公式のサイトです。登場する作品・名称・画像の権利は、それぞれの権利者に帰属します。下のプレビューは、提出したサイトそのものです。
01課題
好きな映画の公式サイトを仮に作る
- トップ 1 ページと下層 3 ページ以上。HTML で構造を、CSS でレイアウトを作り、作品を知らない人にも伝わること。
- フレームワークは使わない。JavaScript は評価の対象外。
- 授業の演習（960px 固定・Flexbox のみ・レスポンシブなし）の中身を差し替えただけなら 3 点、構成とレイアウトまで作り込めば 5 点、という評価基準でした。
02ねらい
配信画面をそのままトップに
この映画を選んだのは、情報が自然に 4 つに分かれること、音楽が作品の中心にあること（6 組のボカロ P による 11 曲）、そして演習で使った黒と赤から色相がいちばん遠いことが理由です。
いちばん大きな決定は、トップページを「配信を観ている画面」にしたことです。配信画面の部品に、そのまま映画の情報を割り当てています。下層ページは、資料を読むための落ち着いた版面にしました。
| 配信画面の部品 | 載せた情報 |
|---|---|
| ON AIR | チャンネル名 |
| プレイヤー | メインビジュアル |
| 視聴者数 | 実際の興行収入 |
| コメント欄 | NEWS 5 件 |
| 概要欄 | INTRODUCTION |
| 関連動画 | 各ページへの入口 |
03設計
装飾にはすべて出どころがある
- 七色は作品の象徴「ゲーミング電柱」（原典の「光る竹」）から。サイト全体で、再生バーにだけ使っています。
- 背景は、金色の月、＜ツクヨミ＞のネオン、72px の座標の格子などを重ねています。
- 配色は公式サイトにならって白地と紺。差し色は朱 #ef4a57 と青緑 #35c2c2 で、金は紺の上にだけ置きます。
- 三角格子・【】の括弧・網点などの和柄は CSS で描き、ネオンは暗い所に、線画は白地にだけ置く、という公式の使い分けに合わせました。
- 見出しは「第一章／CHAPTER 01」のように、和と洋を並べて書いています。
04作り
JavaScript を使わずに動かす
- 流れるコメント（弾幕）は CSS だけで作り、開いた瞬間からもう流れているように見せています。動きを減らす設定の人には出しません。
- ミラーボールは 10 コマの画像を順に送るアニメーションです。曲の一覧は開閉できる要素で作り、対応するブラウザでは高さもなめらかに変わります。
- MV は埋め込まず、サムネイルからのリンクにしました（ファイルを直接開いた時に再生エラーになるため）。
- JavaScript は 1 行も使っていません。W3C の検証は 5 ページとも、エラー・警告とも 0 件でした。
- 1440・1024・768・480px で段階的にレイアウトを変え、320〜414px の 8 種類の幅で横スクロールが出ないことを確かめています。