架空のアニメの公式サイトを作った話

この記事は、定期ゲ・樅 Advent Calendar 2020 18日目の記事です。
adventar.org

こんにちは～
25氏です。

はなたばアンリアル、ご視聴ありがとうございました！ pic.twitter.com/yNZGMHQITb

— ⚫²⁵ (@Mr25sec) 2020年11月8日

ハロハナおつかれさまでした～～～(終了から1ヶ月経過)

振り返りもかねて制作後記的に書き綴りたいな～とかねてから思っていたので、
定期アドカレ制覇のついでに語っていきたいと思います。
この記事にはフタハナの話題が含まれます。ご注意ください。

そのまえに

『はなたばアンリアル』とは？

双華学園に通う女子高生の花咲あかねは、ひょんなことから友人の夏目るり、橘こがね、茨木みどりたちと一緒に流行りのVR機器を得たことからVRの世界──VRWacha──に遊びに行くことに！
でもそのためにはまずVR世界でのカラダを手に入れることかららしく…？

http://wdrb.sakura.ne.jp/halohana2020/futahana.html

といった雰囲気でお送りする、VRをテーマにした日常モノ(きらら系)アニメです。
まあ存在しないんですが。
原作者の丹越25って誰？ さあ……

『タマユラ』とは？

@ft_kabe ということで、Eno.7番、タマユラでした～～～
みなさんも自分の没キャラ、大事にしてあげてくださいね pic.twitter.com/BJA0JdgMJf

— ⚫²⁵ (@Mr25sec) 2020年11月7日

■Backscatter
或る作品から没とされた"生まれなかった"存在。
世界の境界線をも超える招待状が、絶たれた可能性に形(if)を与えた。
ゆえに、"創られた存在"その全てに羨望の感情を抱く。
　　　　
彼女に願いは存在しない。
彼女は己の"可能性"を力へ替え、参加者《うまれしもの》の願いを全て壊すことを望む。

http://wdrb.sakura.ne.jp/XXXX_orig/unknown.html

『はなたばアンリアル』という作品から没にされてしまったキャラクターが、
フタハナの招待状という"可能性"によって形を得た存在……それがフタハナにおける『タマユラ』です。
Backscatterというのは後方散乱(オーブ)、つまり玉響現象のことです。

『はなアン』という作品があり、『タマユラ』という没キャラクターがいる。
とりあえずそれだけ覚えてもらえれば多分大丈夫です。

壮大な前準備

話は3月に遡る

１０月までは突発ハナも含めてないです

— 『*フタハナ*』運営 (@futahana_pr) 2020年3月25日

3月某日、ホワハナが終わってからこの告知がされたものの、
某所では次回開催のためのビルドやキャラ談義で盛り上がっておりました。
終了後特有のアレですね。「来期はああいうのやりたいな～」みたいな。

その中でふと出た会話。



安黒の原型じゃん。
意訳すると「初手で積めるバフ全部積んで暴れるから使い捨てブースターください」なんですけど、
今思うとメチャクチャ人の心がない発想だなと思います。よくないよ

が。
それに対して、25氏も何か一発ちゃんとやりたいなと薄ぼんやり考えていたらしく……

その原案がこちらになります。



タマユラの原型じゃん。
というか、アニメより先に没キャラが生まれてるじゃん。
人はそれを没キャラとは言いません。

ちなみにアニメに拘る理由もちゃんと存在していて、

• アニメサイトのデザインは既に様式がたくさんあるから真似しやすい
• ビジュアルとデザインで何やりたいかが伝わりやすい
• 架空のアニメサイトを作るのが夢だった

などが上げられます。 特に3つ目。 htmlやりはじめたきっかけですからね。
まだ自創作のサイトすら作ってないんですけども。

高すぎるハードルと強すぎる絵師

しかし25氏はまだまだ絵に関してはその辺のゴロ。1人ではビジュアル面が非常に高いハードルです。
そこで…… アニメをやったことがあり、面白そうなことに食いついてくれる助っ人(共犯者)に声をかけることになります。
餅は餅屋ですね。そして餅屋といえば……




そう、マチヒロドンですね。
氏の描画速度、描画能力、そして面白そうなことにフルパワーを出してくれるエンジンは非常に頼りになりました。
本当にありがとうございました。



マ～～～～～～とにかく行動がはええんだわ。 怪物です。あいつはモンスターの類です。
名前が水属性の割に行いが火属性すぎるし。左手でも口でも絵描けるし。

とはいえ、氏もきらら系アニメは未知の領域。
しかも『キャラデザ』『立ち絵』『トップ絵』『アイキャッチ』と、氏ひとりでは到底人手が足りません。
それはそうなんだよな。

そこで、マチヒロドンの周囲の人間……通称"貝"へと助けを乞うことになります。
これが後のはなたばアンリアル製作委員会発足の瞬間となるのでした……

そうしてここにアニメが生まれた

人手の不足に困り果てる25氏の前に現れた数多の助っ人！！
まずはその頼れるメンバーを紹介していくぜ！

~ はなたばアンリアル製作委員会メンバー ~

• 25氏：企画者にしてサイトデザインとコーディング担当。特技はエアプをかますこと。
• マチヒロドン：共謀者にしてキャラデザインとアイキャッチとトップ絵担当。絵がメチャクチャ上手い。
• 綾歌さん：助っ人イラストレーターその1。キャラ紹介の人間側担当。絵が死ぬほど上手い。
• タムラベソン：助っ人イラストレーターその2。キャラ紹介のアバター側とトップ絵担当2。絵がクッソ上手い。
• そらみちさん：助っ人脚本家。キャラ説明やあらすじなどの文字部分担当。絵もド上手い。
• レモウン：助っ人デザイナー。完璧なロゴを生み出したり、各所の見栄えに助言してくれた。絵もマジで上手い。
• はるかぜさん：応援と合いの手担当。バクソ忍者がかっこよかった。絵もスゲ～上手い。

豪華メンバーがすぎる
本当に各位ありがとうございました。 バイト代を出したら25氏が無限回破産すると思います。
大規模プロジェクトなんだよな。プロジェクトリーダーの25氏です。本日はよろしくお願いします。


さて、メンバーが集まった所でプロジェクトが始動し始めます。
まず最初にやることと言えば、そう、コンセプト決めですね。
コンセプトは骨子だってゆうさんも言ってたし。

とはいえ『きらら系のノリ』『お話が進む(サザエさん時空にはしない)』『キャラは4人』などなど...
コンセプトは早期にはっきりしていて、あとはそれらを踏まえて雰囲気アニメ概要をでっち上げるだけなのだが……
一般的に無からアニメの概要を考えるのは難しいとされています。みんな知ってるね。

が、それをしないと始まらないので考え……考え……
そういえば友人がクッソVRCにハマって、流れでUnity習得してそのままUnity技能で就職決めてたな……
これだわ。遊びながら楽しみながらも、将来を見つけて進んでいくストーリーじゃん。
VR、最高～(25氏はその友達の家で触らせてもらった以外でVRをロクに体験していません)

それでできたのが以下の原案。



原案です。(あとタマユラもここで初めて初期設定ができました)
いま思うとわりとNEWGAME!!だな～って思います　影響されてますね。八神さんと阿波根さんが好きです。
まあストーリーラインは最終的にレディプレイヤーワンになりましたが。

ともあれ原案はできたので、ここから企画の肉付けと実装範囲の確認をしていきま



早いが？

……ともかく、こうして半年をかけてじっくり煮詰めるように企画が進めていくのでした。


そして……




集団幻覚を見たり……





時にはCVにされそうになったり……





本題が決まったり……





力菓子あた代が生まれたり……





10000字の境界を行ったり来たりし……




あっという間に9月も終盤。
企画の地盤は概ね固まり、サイトの作成が進んでいる状況にまで進みました。
サイトが完成さえすればあとはコンテンツ(画像や文章)が上がるのを待つだけです。

が、悠長に待ってる余裕はありません。Minecraftをしている場合でもありません。
8月はほぼ全てマイクラに捧げました。楽しかったです。

コンテンツが上がるまでの間、タマユラの準備をする必要があります。
こちらはプレイアブルである自キャラクターなので、貝メンツを頼るわけにもいかないですし。
(いうても言ったら多分手伝ってくれた気はする)

SPECIALの部分を使わせてもらいつつ、タマユラ用の作業を始めていきます。


メインキャラクター陣が4人で赤青黄緑なので使われなかった橙藍紫をお借りして、
浮遊感のある道士っぽい服にし、同時に大陸系テイストで蓮を少しデザインに取り入れちゃったりして、
あとついでに獣耳をつけて……(これは自分の趣味)

設定側に関しては、没キャラクターなら好きに設定を載せれるという特権も活かし、
『足が不自由だが、自由に動けるVRの世界が好き』とか『父親が関係者でVR機器やアバターを入手できた』的な、
普段ならちょっと躊躇するような設定なんかも載せてみたり……

サイト側はせっかく電子の世界が舞台ならデータ感を出していきたいな～と考えて、
その中でデータの墓場っぽいノイジーでディープウェブ的な雰囲気でハブられた恨みを醸す感じで……
思えば今回ロックマンエグゼとアクセルワールドの2作にかなり影響されていますね。どちらもいい作品です。

そんなことを考えつつキャラクターを描いて、ノイズの画像素材を集めて、コードをダカダカ打って――
ガッ！ ドン！！ バンッ！！！




OK！！！！
25氏の絵柄のせいで、途中までの怨嗟からの落差がある気もしますが、とりあえずOKです。
やりたいことが自分の絵柄が合わないことは多々ありますが、今回はそうも言ってられません。
粗はあれど自分で見てかわいいと思うので及第点です。
というかレスポンシブ対応に一番苦労しました。

そもそもアイコンなどの諸々画像を用意しないといけないですよね。やることが多すぎる。
幸いFlowerは戦闘は出ないことを前提にできるため、フタハナ特有の縦カットインを割愛できます。
Flower、工数を節約できるいい役職ですね。



そうこうしてる内にイラスト班からは絵が、シナリオ班からは文が、応援班からは応援が流れてきました。
そして、それらをサイトに組み合わせれば…………







できました。
TVアニメ『はなたばアンリアル』公式ホームページの完成です。

スゲ……アニメのホムペやん……マジか……夢叶っちゃったやん……
あとは始まったらこれをプロフィール欄に埋め込んで、動くのを確認すればOKです。

そう、この時点でまだフタハナは始まっていません。

おまけ - はなアンの細かいいろいろ

• はなアンの内容について

・主人公組の4人



本当にかわいい。25氏は橘こがね推しです。
名前の頭文字が『は』『な』『た』『ば』になっていたり、下の名前が『茜』『瑠璃』『黄金』『緑』だったり……
とにかく小ネタが盛りだくさん。末尾だけ読むとねりねりだし。

HNも性格を意識させつつも、ありそ～な感じの部分をメンバーで模索していました。
oden_oishi_いいですよね。 親近感も感じるし。


ここすき。


・サブタイとかの小ネタ



全て、既出定期ゲームのタイトルです。どれくらい分かります？
わざわざ考えたマチヒロドン、ありがとうございます。

放送局も実在する放送局のもじりだったり、スタッフもメンバーが元ネタだったり、
だいたいどこからか持ってきてます。声優は流石に完全に架空の人間ですが。


実在の作品とは一切関係がありません。大丈夫です。

• サイトデザインについて

文字数調整にメチャクチャ苦労しました
20000文字ぐらい欲しかったです。

普通のアニメサイトはページ変えて画面遷移させるんですけども、
フタハナのプロフでURLが変わったらそれはもう違くね？ということで、1ページで全部やりました。
jQuery様々です。それはそれとしてハナ運営は最新版のjQueryを入れてください。HTML5にしてください。

というかWebやって初めて文字数を削るということをやりました。普通はこんなことしません。
よく使うクラスの文字数を削り、画像URLは全て短縮URLにし、長い文字はCSSでcontentプロパティに書き……
その上でキャラ紹介とあらすじは画像です。そらみちさん本当にありがとうございました。

文字数があったら、背景でなんか飛ばしたりSPECIALをもう少し盛り上げたかったりしたかったですね。
終わった頃には燃え尽きてて何も作業手に付かなかったわけですけど。


小ネタらしい小ネタを用意する余裕はあんまりなかったのですが、
こちらもメニュー欄や右上などの各所が七色に対応してたり、Twitterが運営だったりしてますね。
運営のTwitterがすぐ確認できてメチャクチャ便利でした。

サイトを作る過程で参考にしたサイトは数多いんですけれども、
サイト構成はゆらぎ荘の幽奈さん、キャラ紹介などの手触りに恋する小惑星、
その他おちこぼれフルーツタルトとNEWGAME!!あたりを参考にしています。

あと代打三兄弟のパロ技術はかなり参考にしました。マジで凄いので見てください。

おわりに

アニメを作るのは大変
内容そのものは一切ないのに、ガワだけでこんなに大変なんだなあと思いました。
達成感はやばかったです。初めてチームプロジェクトを完遂したかもしれん。

あと、実は普段あんまりアニメを見ないおたくなので、タスクが落ち着いたらアニメを見たいですね。
はなたばアンリアルとか。



ホントは開催後のタマユラの話もしたかったんですけど、タスク山積みで無理なのでそのうちします。
他の記事を書き終わったら……

ということで、はなアンの制作後記は以上となります。
ここまで読んでいただき、ありがとうございました～～～～～～



25sec