見出し画像

VTuberのプロフィールサイトをリニューアルした話

こんばんみんみん!
バーチャル幼女プログラマーのきりみんちゃんです。
今回はきりみんちゃんのプロフィールサイトであるkirimin-chan.siteを再構築した話を書いてみたいと思います。

突然ですが、創作活動をしているみなさんは自分のプロフィールサイトを持っているでしょうか。
昔は絵師の人などは自分のサイトを作ってプロフィールや作品などを載せるのが当たり前だった気がしますが、最近は作品を投稿する専用のSNSやサービスが普及し、更にTwitterが情報とコミュニケーションのハブとして広く普及したことにより、プロフィールサイトを持っていないという人も多いかもしれません。大抵の人はTwitterのbioにpixivなどのリンクを貼ることで事足りるかもしれません。

しかしきりみんちゃんの場合はVTuberとしての情報量が多く、、いろいろな創作活動などもしているため、Twitterのプロフィール欄だけでは(文字数的に)伝えたい情報を伝えきれないという事情があります。

無題6

また、興味を持ってくれた人に動画を見てもらうまではハードルが高いため、出来るだけどんな存在なのかが分かりやすいようにしたいという想いもあります。

旧プロフィールサイト

実はkirimin-chan.siteというプロフィールサイト自体は1年ほど前から存在していました。
しかしこのサイトには色々と問題があり、上記に書いたような目的に対して機能していませんでした。

旧サイトは元々技術的な学習と遊びを目的に作ったというのもあり、あまり「なんのためのサイトか」という要件を深く考えていませんでした。

無題1

「とにかくアニメの公式サイトのようなかわいいサイトを作ってみたい」というのがモチベーションだったため、サイトを開くと数秒のCSSアニメーションが流れ、TOP画面のすぐ下には自動再生されるYouTube動画が埋め込まれていました。

無題2

無題7

また、コンテンツ量が多いわりに整理されておらず、情報にたどり着きにくく情報も古くなっていました。

無題3

無題4

他の問題としては、静的サイトにも関わらず特に理由なくReactのSPAで実装したため、メンテナンスが面倒だったりルーティングやキャッシュまわりなどが上手くコントロール出来ず動作が不安定だったりしました。(これは単なる技術力不足)

リニューアル

最近VTuberとしての情報量や関連サイトが増えてきて、あらためて情報のハブとなるプロフィールサイトが必要になってきたため、このサイトをリニューアルしてちゃんと機能するようにすることにしました。

要件定義

今回はきちんとサイトにしたかったため、まず要件定義として、このサイトでどういう体験を達成したいかをユーザーストーリーとして書き出しました。

無題

ワイヤーフレーム作成

このユーザーストーリーを元に、デザインツールでWFを作成しました。
ツールは何を使うか迷いましたが、学習コストが低く汎用的という情報とAdobeCCのコンプリートプランに加入しているためAdobe XDを使用しました。

画像8

今まで個人でアプリなどを作成する時は実装しながらデザインを考えることが多かったのですが、今回はじめてWFを事前に作ってみて、実装の制約に引きずられることなくじっくりとUIや情報設計について考えることができました。

サイト実装

実装にはReactなどのフレームワークは使わず、素のHTMLとCSSのみで行いました。
せっかくなのでコーディングの様子はYouTubeで配信しながらライブコーディングしました。

完成したもの

予定している全てのコンテンツを実装し終えたわけではないですが、MVPとして必要な要件を満たした時点で新しいサイトにリプレースのデプロイを行いました。ちなみにサイトはFirebase Hosting上で動いているため、コマンド一つでデプロイが行なえます。

画像9

画像10

画像11

画像12

画像13

まだリリースして間もないので旧サイトとの数字での比較は出来ませんが、サイトの本来の一番の目的であった「情報のハブとして高速に各関連サイトにアクセス出来る」「知ってほしい情報や必要な情報へスムーズにたどり着ける」という目的は達成できたんじゃないかなと思っています。

この記事が気に入ったら、サポートをしてみませんか?
気軽にクリエイターの支援と、記事のオススメができます!
バーチャル幼女プログラマーです! プログラミングとVTuberの知見などを書くよ! https://www.youtube.com/c/kirimin-chan https://twitter.com/kirimin_chan https://kirimin-chan.site