個人的な音楽活動のために公式Webサイトが欲しくなったので、構築しました。先に成果物のリンクを紹介します。
▶︎ https://www.yuguen.net/
自作した理由
Webサイトを作ることにしたのは、ソーシャルメディアプラットフォームにとらわれないメディアを持ちたいと思ったからです。自己満といえばそれまでですが、一応SEO・AIO的なメリットもあります。「今はWixやGoogle Site、StudioなどノーコードWebサイト作成サービスが多く存在するのだから、Webサイトはノーコードで作ればいいのでは」と思いましたか？私自身も今まではBeaconsを利用してリンクまとめサイト(Link in Bio)を作成していましたが、このBeaconsにもWebサイト作成機能があります。しかしあえてコーディングを選択した理由は3つです。
- 1つのデータソースに基づいてコンテンツを表示したい
- Nuxtを試したい
- ノーコードWebサイトツールに課金したくない
- ノーコードツールの無料枠で表示されるサービスの広告を表示したくない
方針
今回、開発は以下のような方針で進めました。
- 実現したいことは自分で決める
- シンプルなデザインにする
- わからないことはAIに聞く
- 表示とコンテンツ(データ)は分ける
- データは構造化してJSONで管理する
- GitHub フローを用いる
- Link in Bioを実装した後、フルのWebサイトに拡張する
開発環境・使用技術
コンピュータ: MacBook Pro 13 (M1, 2020), 16GB RAM, 512 SSD
OS: macOS Sequoia
エディタ: VSCode
生成系AI: Gemini Code Assist拡張機能
フレームワーク: Nuxt(v4)
ホスティング: Vercel
最初からNextかNuxtを使おうと決めており、Reactの経験は全くなくVueの経験は多少あったので、NextではなくNuxtを選択しました。
AIは、Google AI Proの学生向け無料トライアル15ヶ月を利用している関係でGeminiを主に使用しました。Gemini Code Assist拡張機能は時折反応しなくなることがあり、そのような時は一度サインアウトして再サインインすることで解決しました。
どうだった？
まずLink in Bioは半日程度で完成し、デプロイまで到達しました。その後フルのWebサイト開発は3日ほどを要しました。フルのWebサイトは、他の音楽アーティストの公式Webサイトを参考にしながら開発しました。ページ構成としては、Home、News、Profile、Discographyがあり、それに加えてリンクまとめページとしました。出来上がったら独自ドメインをつけたくなってきてしまったので、Cloudflareでドメインを購入して設定しました。
良かったこと
1. ノーコードツールに課金することなく、Webサイトを構築できました。独自ドメインを取得したので結局課金は発生しているのですが、良しとします。
2. データ駆動によるコンテンツ表示を実現できたことで、情報更新の手間を増やさずに済みました。もしもノーコードでLink in BioとWebサイト両方を運用していたとすると、新規リリース情報の更新などは少なくとも2回更新の手間が発生します。一方今回のWebサイトは、同一のDiscography(リリース音楽データ)から自動的に情報を表示するため、情報更新はJSONに加筆した上でアートワーク画像を正しいディレクトリに正しい名称で保存するだけで済みます。
3. Geminiが思ったより優秀でした。今回はなるべく労力をかけずに開発したかったため、Gemini Code Assistを積極的に活用しました。便利だった使い方としては、デザインを参考にしたいサイトのソースをブラウザの開発者ツールで取ってきてGeminiに渡し、参考にしてコードを書かせていました。
大変だったこと
1. Nuxtの礼儀に則って作らないと意図した挙動をしない部分があり、慣れるまでに少し手間取りました(Vueもそこまで詳しいわけではないのですが)。例えばVueRouterの設定が不要な分、/pages配下に.vueファイルを置く必要があったり、動的Routingのために[id].vueと書いたりしました。他にも、プロジェクトのrootディレクトリを示すはずの@/がなぜか動かず、../で代用していました。これは私の設定が悪いのかもしれません。
2. データの整備が大変でした。SpotifyなどのDSP、SNSの情報・アイコンを整理・用意したり、リリースのdiscographyデータを整理したりするのに時間がかかりました。アートワーク画像はMac上でPythonとcwebpを利用して画像サイズとフォーマットを統一しました。
3. スマートフォン向けのデザインで、アニメーションの作成が上手くいきませんでした。デスクトップでは右上に並ぶメニューは、スマホ環境では3本線アイコンに折りたたまれます。アイコンをタップしてオーバーレイメニューが出現・非表示になる挙動の部分で良い感じのアニメーションをつけたかったのですが、Geminiで何度も修正をかけても意図したものができませんでした。そこまで労力をかける部分ではないと判断して諦めました。
まとめ
個人の音楽活動用WebサイトをNuxtで構築しました。全体としてはAIの支援もあり思ったより楽に思い描いたものを実現できたと思います。音楽活動以外でも、クリエイティブ系、エンジニア系のポートフォーリオや自己紹介サイトなどにも応用できそうです。