NØEVA
つくったもの / WEB架空の音楽プロジェクト「NØEVA」の公式サイトです。
実案件では公開しづらい、設計や実装、運用まで含めて見せられるショーケースとして制作しました。
モックアップではなく、実際のサイトをそのまま撮っています（1440 / 834 / 390px）。
なぜ作ったか
実案件は守秘義務の関係で、中身まで見せられないことが多くあります。
そこで、完成した画面だけでなく「なぜこの作りにしたのか」まで公開できる作品をひとつ作ろうと思いました。
題材に選んだのはアーティストサイトです。
情報量が少ないぶん、書体や余白、写真、動き、音の扱いがそのままサイトの印象になります。その難しさがおもしろいと感じました。
このサイトでできること
- 楽曲の90秒プレビュー再生
- 波形シークバーとOSのメディアコントロール連携
- 日本語 / English / 한국어 の3言語対応
- 公演終了後の表示自動切り替え
- 作品・公演情報の絞り込み
- microCMSによるコンテンツ管理
- GitHub ActionsからCloudflareへの自動デプロイ
どう作ったか
HTML / CSS / JavaScriptで制作しています。フレームワークは使わず、依存パッケージもゼロです。
ブラウザの標準機能で足りるものは、できるだけそのまま使いました。
実装にはClaude Codeを使っていますが、コンセプト、配色、書体、コピー、写真、音楽、世界観などの判断は自分で行っています。
microCMSを入れた理由
フルスクラッチの良さは、サイト構成やデザインを自由に設計できることです。
その自由度を残したまま、更新しやすいサイトにするため、コンテンツ管理にはmicroCMSを採用しました。
フロントエンドとCMSを分けることで、デザインや機能をCMSのテンプレートに合わせる必要がなく、必要な情報だけをAPIから取得できます。
- デザインや機能を自由に設計できる
- シンプルな管理画面から更新できる
- CMS本体のアップデートや保守の負担を減らせる
- フロントエンドと管理画面を分離できる
- ひとつのデータをWebサイトや他の媒体でも使える
NØEVAでは、公演情報や作品情報をmicroCMSで管理。公開するとGitHub Actionsがデータを取得し、サイトへ自動反映する仕組みにしています。
フルスクラッチの自由度と、CMSの更新しやすさ。その両方を持たせることを目指しました。
設計で意識したこと
CMSはブラウザから直接呼ばず、生成時にサーバー側で取得しています。そのため、APIキーがブラウザに渡ることはありません。
また、何でもCMSに入れるのではなく、更新する可能性がある文章だけを管理対象にしました。
依存パッケージも増やさず、生成処理はPythonの標準ライブラリだけで書いています。
詰まったところ
うまくいかなかったものも、そのまま書いています。
波形が表示されない原因を2回外した
CSSを読んで原因を予想しましたが、どちらも外れました。
実際にブラウザで描画して確認すると、波形の親要素の幅が0になっていることが原因でした。
それ以降、見た目の問題はコードだけで判断せず、必ず実際の描画を確認するようにしています。
数字
- 依存パッケージ
- 0（npm なし）
- 公開ファイル
- 24枚 / 8.1MB
- 言語
- 3（77項目 × 3）
- 収録曲
- 5（90秒プレビュー）
世界観からサイト一式で、といったご相談も受け付けています。
メールで相談する