keiru ポートフォリオサイト

なぜ作ったか

自分で作ったものをまとめて見てもらえる場所が欲しくて、制作を始めました。

作るうえで一番迷ったのは、何を載せるかでした。実務経験を中心にすると特定の業界に偏って見えるし、個人制作だけでは仕事で何ができるのか伝わりにくい。その整理がつかず、デザインを何度も変えていました。

いまは、まず作品を見たり音楽を聴いたりしてもらえるように、トップページには音楽と制作物を載せています。

このサイトでできること

• 3曲をそれぞれ90秒ずつ試聴
• 選んだ曲に合わせてジャケットと配信リンクを切り替え
• 再生済みの部分が色で分かる、波形のシークバー
• ロック画面やキーボードのメディアキーでの再生・停止・曲送り
• 再生中の音に反応する、トップページのビジュアライザー
• ページ内での動画再生
• YouTubeの最新動画を自動で表示
• 制作物の一覧と、それぞれの詳細ページ
• お問い合わせフォーム
• 日本語・英語の表示切り替え

音を、見えるようにする

試聴用の音源は、各曲の冒頭90秒を切り出しています。途中で急に切れないよう、最後の3秒で音量が徐々に下がるようにしました。

曲を再生すると画面下部にプレーヤーが現れ、波形のシークバーで聴きたい位置に移動できます。この波形には、事前に音源から計算したデータを使っています。再生するたびに解析する必要がないので、そのぶん処理を軽くできます。

トップページのビジュアライザーには、自作の「NERO VISUALIZER」にある「Tunnel」というテーマを組み込みました。こちらは再生中の音をリアルタイムで解析し、輪の形や色を変えています。

画面に表示されていないときまで処理が続かないよう、別のタブに移ったり、スクロールして表示範囲から外れたりすると描画を止めています。動くのは、音楽を再生していて「Visual on」が有効なときだけです。端末やブラウザで動きを減らす設定にしている場合も、描画しません。

また、動画を開くと音楽が止まり、音楽を再生すると動画が閉じるようにしています。動画を閉じた際はプレーヤーも破棄し、裏で読み込みが続かないようにしました。

どう作ったか

HTML・CSS・JavaScriptで制作しました。フレームワークやビルドツールは使わず、依存パッケージも入れていません。

サイトの配信にはCloudflare Pagesを、フォームの処理や外部APIとの連携にはPages Functionsを使っています。試聴用の音源の切り出しと波形データの作成にはPythonを使いました。

実装にはClaude Codeを使い、採用した方法だけでなく、見送った案やその理由もリポジトリに残しました。時間がたってから修正するときに、当時の判断を確認できるようにするためです。

この記録があることで、数週間後に同じところで迷ったり、AIに経緯を説明し直したりすることが減りました。