NØEVA
つくったもの / WEB架空の音楽プロジェクト「NØEVA」の公式サイトです。
コードから運用の判断まで、全部を公開できるショーケースとして作りました。
モックアップではなく、実際のサイトをそのまま撮っています（1440 / 834 / 390px）。
なぜ作ったか
実案件は守秘で中身を見せられないことが多い。コードから運用の判断まで、全部を公開できるショーケースが1つ欲しかったのがはじまりです。
題材にアーティストサイトを選んだのは、静的サイトの中でも情報量が少なく、体験の質で差がつくジャンルだからです。テキストで埋められないぶん、書体・余白・動き・音の扱いがそのまま出ます。
架空にしたのは、実在の人物や団体の権利に触れずに、写真から音源まで自分の判断で組めるからです。ただ、その選択が新しい設計課題を生みました。架空であることを隠さずに、しかし作品世界を壊さずに開示する——ここは最後まで設計の対象でした。
このサイトでやっていること
- 90秒プレビューの再生（画面下端に固定されるプレイヤー、波形のシークバー、ロック画面からの再生・曲送り）
- 日本語 / English / 한국어 の切り替え（77項目 × 3言語）
- 公演情報は日付が過ぎると表示が自動で変わる（放置しても表示が嘘にならない）
- 作品と公演の絞り込み・ページ送り
- 架空であることの明示（フッターの注記＝人間向け、構造化データ＝クローラー向けの二重で持つ）
どう作ったか
素の HTML / CSS / JavaScript です。ビルド工程なし、フレームワークなし、依存パッケージはゼロ。このサイトに必要な機能はブラウザの標準機能で足りる、というのが判断の根拠です。ビルドを入れると「差し替えたのに反映されない」類の別の問題が増えます。
配信は Cloudflare Workers。通信元を制限する設定は、インラインの記述を許す抜け道を使わずに通しています。つまりHTMLの中に script も style 属性も1つもありません。ナビの白黒反転、スクロールに合わせた出現、プレイヤーのガラス面、低域に反応するインジケータ、OSのメディアコントロール連携——このあたりは全部、標準機能をそのまま使っています。
波形は実行時に解析していません。音源から400本ぶんの音量を先に算出しておき、それを読んで描いています。判断はできるだけ実測でやりました。書体の字幅は配信元の実ファイルから、文字と背景のコントラストは背景写真の輝度から、要素の重なりはブラウザに座標を聞いて確かめています。実装は Claude Code を使ったAI支援で進め、コンセプト・配色・書体・コピー・世界観と、各分岐での採否は自分で判断しました。
詰まったところ
うまくいかなかったものも、そのまま書いています。
1. ヒーローの見出しが、全サイズであふれていた
- 課題
- 見出しを画面幅の17%で組んでいました。ただ、この書体の「NØEVA」は実測で6.09文字ぶんの幅があり、掛け合わせると画面幅の103%。最初から一度も収まっていませんでした。気づかなかったのは、横のはみ出しを隠す指定が入っていたからです。1440pxの画面で457pxあふれていました。
- やったこと
- 目分量で2回直して、2回とも失敗しました。最後は配信元から書体の実ファイルを取り出し、文字ごとの幅を直接読んで、その実測値から上限を計算しています。
- 結果
- はみ出しを隠す指定は、不具合そのものを隠します。当たり前のことを、実際に隠されて学びました。
2. 波形のシークバーを、2回続けて誤診した
- 課題
- 波形が出ません。CSSを読んで原因を推測し、2回とも外しました。
- やったこと
- ヘッドレスのブラウザで実際に描画して撮ったところ、幅が0に潰れていて、そもそも何も描かれていませんでした。中の要素をすべて浮かせて配置していたため、列の幅が0と計算されていた、というのが真因です。
- 結果
- 色でもサイズでもなく、レイアウトの問題でした。それ以来、見た目に関わる判断は必ず描画して確かめています。この習慣が、後の作業をかなり速くしました。
3. 公開直前に、プライバシーポリシーが嘘になっていた
- 課題
- 言語切り替えを実装したとき、選んだ言語をブラウザ側に保存するようにしました。ポリシーの第4章は「ローカルストレージおよびセッションストレージを使用していません」のままでした。
- やったこと
- 何を・何のために保存し・外部には送っていないのかを3言語で書き直し、改定日を入れました。見つけたのは、公開前にコード全体を洗い直したときです。
- 結果
- コードは正しく動いていたので、動作確認では絶対に見つかりません。機能を1つ足すと、法務の文書のほうが無効になることがあります。しかもこの2つは、別々にレビューしても見つかりません。
数字
- 依存パッケージ
- 0（ビルドなし）
- 公開ファイル
- 24枚 / 8.1MB
- 言語
- 3（77項目 × 3）
- 収録曲
- 5（90秒プレビュー）
世界観からサイト一式で、といったご相談も受け付けています。
メールで相談する