← IndexWork 20 / 36
音楽クリエイターのポートフォリオ｜Notion を CMS に
Kuron様 ポートフォリオサイト
音楽クリエイター Kuron さんのポートフォリオと、楽曲プロジェクト『心景 -mikage notes project-』のページ。中身はすべて Notion から編集できる。
- Period
- 2025.08 – 2025.11
- Role
- Web デザイン / 設計 / 実装 / WebGL 演出
- Team
- 個人で受託
Overview
プロフィール、制作実績、楽曲プロジェクトの紹介、問い合わせをまとめたサイトです。依頼主がコードに触れずに更新できることを一番に考え、楽曲・実績・プロフィールの文章をすべて Notion で管理するようにしました。
編集の手順は、技術者でなくても読めるマニュアルにまとめて納品しています。
What I did
- 01
Notion を CMS に
楽曲のデータベース、実績のデータベース、プロフィールの設定ページの三つを Notion に置き、それぞれをサイトの API から読み込みます。楽曲には説明やストーリー、YouTube、作詞・イラスト・映像のクレジットまで持たせています。
- 02
曲ごとの色で動く背景
Notion で曲の色を名前で選ぶと、その色がそのまま、曲ごとの WebGL の流体（インク）の背景の色になります。
Facts
- コミット
- 118（2025.08 – 2025.11）
Stack
Next.js · React · Tailwind CSS · three.js（React Three Fiber） · Notion API · Cloudflare Pages