ボカロPとして活動する上で最も必要で不要なWebサイトの話
ボカロPの活動が長くなり、様々な場所で自分の制作物が公開されることが増えてきたので、あらゆる活動を集約したWebサイトを公開しました。
今回は前半部で簡単に仕様の解説をしつつ、後半ではボカロPの情報発信のあり方について考えていこうと思います。仕様については全くWeb技術に触れたことのない人にとってはわからない言葉が多いと思いますので、読み飛ばすことをおすすめします。
ボカロPにWebサイトは必要か
既にプロとして音楽活動をしているのでもなければ、自分のWebサイトを構えることは必須ではありません。広報はSNSのアルゴリズムや共有を利用したほうがはるかに効果的ですし、連絡も各種SNSのDMやプロフィール欄に貼ったメールアドレスで事足ります。長文を載せたければnoteがありますし、pixiv FANBOXなどを使えばファン向けにクローズドにコンテンツを出すこともできます。
私がこのWebサイトを作った主な目的は、利用しているSNSの数が増え、それぞれにコンテンツが分散しているのを集約したいというものでした。このようなポートフォリオサイトはあると便利ですが、制作・運用のコストが見合わなければ持つだけ損になってしまいます。しかしながら、最近はお金をかけずにやる方法が様々あるので、開発自体を楽しめるのであれば作ってみると面白いと思います。
Webサイトの仕様
今回のWebサイトに求められたのは
各種プラットフォームに散らばった制作物にスムーズにアクセスできるようにすること
活動内容に合った印象であること
開発、運用にコストがかからないこと
でした。ノーコードでWebサイトを作るツールも多くありますが、就活を控えプログラミング経験欄に書きたいという理由から、Next.jsとTailwind CSSを使用したモダンな開発環境を採用しています。フロントエンド開発のトレンドに近いやり方ですが、実装する機能がほぼ無いのでHTMLと CSS、JavaScriptに多少触れたことがあればこのくらいはすぐできると思います(私もプログラミングはほとんどできません)。
Next.jsはReactをベースにしたJavaScriptフレームワークです。HTML、CSS、JavaScriptそれぞれのファイルを用意するWebの基本的な作り方に比べ、このようなJavaScriptフレームワークを採用すると複雑なWebアプリに必要な様々な機能を提供してもらうことができます。今回は複雑な機能はありませんが、Next.jsは事前にHTMLを生成しておくSSG（Static Site Generation）に向いていて表示速度の向上をはかることができ、今後CMSを作るなど機能を拡張していきたいときにもスムーズに実装することができます。Node.jsを前提としているのでPC上でローカルホストサーバーを立ち上げながら作業したものをそのまま静的Webホスティングサービスにデプロイすれば、バックエンドの複雑なことを考えず使えてしまうのも、できるだけかける労力を少なくしたい個人開発では利点です。
プロジェクトはGitHubのリポジトリにpushし、Vercelと連携してそのままデプロイしています。個人で使う分には無料プランで十分なのでコストの心配は要りませんし、WebGLなども普通に使えてカスタムドメインにも対応しているので大抵のことは実現できます。最初はGitHub pagesで公開する予定だったのですが、エラー文と格闘しているうちにNext.jsの開発元であるVercel自体がホスティングサービスをやっていることを知り、こちらを使うことにしました。Next.jsでプロジェクトを作成しブラウザで表示させると初期状態でページが表示されるのですが、そこのDeployと書いてあるところをクリックするとそのままVercelにサインインして公開することができます。
また、今回はApp Routerという機能を使ったのですが、これが旧来のPages Routerとディレクトリ構成が変わってしまうにもかかわらず新しすぎて情報がほぼありませんでした。従来のNext.jsではpagesフォルダの中にすべてのページを生成するjsファイル（私はTypescriptで書いたのでtsxファイルでした）をまとめるのですが、App Routerをオンにすると普通にHTMLファイルを書いた時のようにフォルダで階層構造を作り各部分にpage.tsxを入れることになります。
そのため複数ページを実装するのが面倒だったので、ホームの右上のmoreをクリックすると詳しい作品が出てくる部分はCSSの切り替えによって行っています。CSSフレームワークとしてTailwind CSSを使用しましたが、最初はクラス名で見た目を指定することへの違和感があるものの、慣れてくるとある程度使える値が限られている分統一的なデザインが勝手にできていくので、考えることが少なくなり書きやすいと感じるようになりました。特にレスポンシブ化する際には毎度CSSファイルを見に行かなくても要素のところで指定できるのが便利でしたし、画面が小さい状態をデフォルトとしたモバイルファーストな書き方も現代の開発に合っていると思います。
作品リストについてはページに直書きすることはせず、data.tsという別のファイルを用意してその中の配列に作品名やリリース日、クレジットなどを書き込んでそれを読み込ませています。今後CMSを作った際にはこれを書き換えるようにすればすぐに実装できますし、データの場所を分離しておくことでSQLなどでデータベースを操作するようにしても参照先を変えるだけで大きくページを改修せずに済みます。
以上が今回作ったWebサイトの簡単な仕組みです。正直、内容が理解できた方は私よりはるかに詳しいエンジニアだと思いますのでコードまで載せて解説するのは控えておきます。学校の情報の授業や往年の個人ホームページを作った時の記憶はあるけれど、もっと現代的でお洒落なサイトが作りたいという方は、出てきた用語をGoogle検索してもらえれば詳しい解説が出てくるので調べてみてください。
情報発信をプラットフォームに依存しないということ
SNSはもはやあらゆる活動に欠かせないツールですが、一方でSNSという形自体は行き詰まりを見せています。
今大手プラットフォームは広告代理店的に誇張された綺麗な現実か、あるいは他人へのヘイトやフェイクにあふれていて、イーロン・マスク以降のTwitterもといXのようにいち営利企業が世界の支配者のように振る舞うことができるような場所になっています。misskeyやBlueskyのようなまだ有名でないSNSも、現時点では広報のために進出するほどユーザー数がおらず、拡大すれば他の大手と同じ結末に至ることは想像に難くありません。これに辟易している人は少なからずおり数年前から「SNS疲れ」という言葉は登場していますが、移行先がないことから皆SNSを使い続けているという状況が続いているのでしょう。
また、プラットフォーム上でのあらゆる活動はアーキテクチャや規範の影響を受けることになります。例えばミュージックビデオを制作するにしても、niconicoを主戦場にボカロPとして活動するのであれば他の音楽活動に比べアニメ調のイラストを使ったりコメントが付きやすいネタを仕込んだりするほうが再生数が伸びやすい傾向があるのは否めません。noteとTwitterでは書く文章が異なるように、UIや機能、ユーザー層によってどのような表現が流通しやすいかが決まってきます。そして、プラットフォームは再生数が伸びるほど広告収益が増え利益を上げられるので、基本的に再生数が伸びる傾向のある表現を推奨します。そのような側面からも、表現の自由さや多様性を伸ばす力は働きにくいのがプラットフォームの性質です。
インターネット以前の時代には、多くの人に向けて何かを発信できるのはマスメディアに関わる一部の人のみでした。それに比べれば、SNSの登場によって誰もが世界に向けて投稿ができるようになったことは、情報発信の民主化といえるかもしれません。しかし、私たちは完全に自由になったわけではなく、常に流通経路からの大きな制約を受けた状態でしか情報伝達をすることはできないのです。
あらゆるプラットフォームはサービスが終了すればすべての投稿は失われますし、その場のコミュニケーション(という承認交換のゲーム)に適応できなければ良い作品でも届きにくくなってしまいます。もし単にバズろうという以外に何か良い表現を届けたいという思いがあるのなら(かつてパンクやその影響を受けたミュージシャンたちが制作会社を通さず自分たちで作品を流通させたように)その発信方法を自分のコントロール下に置こうとするのはより良い伝え方をするための有効な策だと思います。Webサイトも結局は検索エンジンの仕組みからの影響を避けることはできませんが、それでも見た目から機能まで多くの部分を自分でデザインするというのは、少しでも作品の伝わりを自らの手に取り戻すための営みといえます。はじめにボカロPとしての活動にWebサイトは不要だといいましたが、こうした視点から考えると実はWebサイトを持つことは最も重要なことだともいえるのではないでしょうか。
この記事が気に入ったらサポートをしてみませんか？