ファン企画の活動3周年記念WEBサイトデザインを語りたい！

はじめに

※このnoteは、上記動画の文字起こしバージョンです。

個人VTuber佐藤ホームズさんの活動3周年を記念して、ファンメイドでWEBサイトを作成しました。ファン企画なので非公式です！
WEBサイトはこちら▶︎https://satouholmes-thefootsteps.studio.site/

動画ではWEBサイトを見せながら解説しておりますが、note版では実際にWEBサイトを閲覧しながら読んだ方がわかりやすいかと思います。

企画の目的

まず企画で守るべきこととして、
・佐藤ホームズさんが主役！
・活動に焦点を当てる！
こちらを意識しました。

ホームズさんは様々な活動を成し遂げてきていますよね。 それらを視覚化して振り返ることで「ホームズさん本当にすごいよ！！！」って褒め称える(?)という目的があります。

さっそくWebサイトを見ながら語っていきます！

トップページについて

トップページ：https://satouholmes-thefootsteps.studio.site/

まずはトップページのファーストビュー！
最初に目に入る場所なので、サイトに訪れたユーザーの心をつかむ必要があります。今回は佐藤ホームズさんの探偵事務所、という設定にして、写真を大きく使い、印象づけています。

次にホームズさんの活動内容を紹介していきます。
探偵事務所という設定にしたので、事務所にありそうなアイテムを使うことにしました。

■名刺
名刺はふつう職業や肩書き、連絡先を記載します。
ホームズさんはお仕事用のメールアドレスを公開していますが、この非公式ファンサイトに記載することでスパムメールが届いてしまったら申し訳ないので、代わりにtwitterへのリンクを繋げています。インターネットの連絡先といえばTwitterですよね。

パソコンだとマウスオーバーで、カクっと傾いたり色が変わったりするギミックをつけています。

■手帳
次に手帳です。
手帳には予定を書き込みますよね。ここではYouTubeチャンネルとMoguliveへリンクを繋げています。
気になるこちら※はホームズさんが落書きしたという設定で入れてみました。この正体を知りたい方はぜひ例の配信アーカイブをご覧下さい！

※「気になるこちら」の画像

■スマホ
ホーム画面にアプリアイコン風にリンク先を繋げている他に、初めて書かれたTRPGシナリオである「命盟」のことも紹介したかったのでスマホ画面内で紹介しています。
ちなみに「命盟」もこちらのハッシュタグ佐藤ホームズもリンクが繋がっています。
Virtual worldにしたのもこだわりです。

■新聞
最後に新聞です。5月19日のニュースである活動3周年を目立たせています。
このメニューから他のページを見に行けるようになっています。他のページは新聞をイメージしたデザインにしているため、これで繋がりが出来ました。

トップページの役割

初めて訪れたユーザーをWEBサイトから脱落させないことです。興味を抱かせて世界観に魅了させることが大事です。そのため、アニメーションを加えたり、文字だけではなくて写真や図などのビジュアルを使って飽きさせない工夫をしています。簡単に言うと、ユーザーをわくわくさせよう！

■画面構成での1番の工夫
トップページではメニューを下に配置したことです。上から順に見て行ったときの、探偵事務所があり、探偵の持ち物があり、新聞によってニュースを知るという一連の物語性を大事にしました。一番上にメニューがあると、この一連の物語を見る前に先に他のページを見に行ってしまうかもしれないので、それを防ぎました。

■気をつけたこと
ファンの自我を出しすぎないようにしました。主役はホームズさんであり、その活動に対する記念ファンサイトだからです。
初期の製作段階では、トップページにホームズさんの立ち絵ファンアートや3周年記念ロゴを配置しようと考えていました。しかし、先ほど説明した一連の物語においてはノイズになってしまうと思いやめました。

ただデザイン自体は私が作っているのですが、デザインに何かしらの自我を感じられてしまったら私の力量不足です。本来ならデザインは制作者の自我は見えてこないものです。すんなりと楽しめて頂いてたら成功だと思います。

VTuber活動経歴のページとTRPG参加履歴のページ

VTuber活動経歴：https://satouholmes-thefootsteps.studio.site/VTuber

TRPG参加履歴：https://satouholmes-thefootsteps.studio.site/TRPG

他のページについてですが、まずウェブサイトを作ると決める前から、活動年表を作ろうと言う話が決まっていました。
それがVTuber活動経歴のページとTRPG配信履歴のページになっています。

あとはfanboxで「人生のリザルト画面を見たい」的なことを書いてらしたので、理想通りではないけど代わりになれるものを作れたら良いなと思い、2つのページを用意しました。

視覚化することで、ホームズさんは改めて振り返ることが出来ますし、ファンは「こんな活動もしていたんだ！」と新しい発見に繋がります。

ファンアートページ

ファンアートページ：https://satouholmes-thefootsteps.studio.site/FANART

イラストは提出頂いた順に掲載しています。
Twitterアカウント共有して下った方はTwitterのプロフィールページにリンクを繋げています。メッセージの方も同じくTwitterアカウントを掲載している方はTwitterに飛べます。

■TRPGアンケート結果
「佐藤ホームズさんが参加されているTRPGセッションで、好きなセッションと初見の方にオススメしたいセッションは何ですか？」というアンケートを集計しました
ファン企画として3月に行ったもので、150以上の回答数がありました

アンケートを行ったのも理由がありまして、
ひとつはホームズさんの活動でTRPG配信が欠かせないものになっていること、もうひとつは、fanboxで書かれていた内容ですが、セッションやロールプレイについてリスナーからの反応が気になっている様子だったからです。
そのアンサーとして企画しました。

いまアンケートを行ったら違う結果になるかもしれませんね！

企画班のクレジット

クレジットページ：https://satouholmes-thefootsteps.studio.site/Credit

企画班を紹介したページがこの場所にあります。
重要度が低いのでわざわざメニューを開いてからじゃないと行けないところにリンクを繋げました。
ふつうにサイトを眺めた場合には気づかなくてよくて時間をかけて全てを見たいよという方だけが辿り着く場所になっています。

重要度が低いとはいえ、それはサイトにおける掲載内容の重要度であって、企画班としての貢献度はとても高いです。無償で協力してくださっているのでお名前をしっかりと掲載しました。
何を担当して下さったのかも細かく書いています。

まとめ

企画の目的としては、ホームズさんの活動を振り返り、ホームズさんってけっこういろんなことしてるし継続出来てるしすごいよ！と褒め称えることです。
そのためにウェブサイトで活動内容を視覚化しました。
ホームズさん自身とその活動が主役なので、それらが目立つように構成しています。

……以上です！ここまで読んで下さりありがとうございました。続きとなる、「制作時の裏話」と「反省点」は別のnoteにて書きます！そちらもよろしくお願いいたします。
※追記！noteではなくブログにて続きを書きました！こちら→https://yukanote.com/2021/06/28/1308/