どうも営業の佐々木です。
先日代表との面談がありました。その内容は、去年の自分の仕事について、そして今後会社にとって自分ができることなどなどなど。その話をコーディングやプログラム構築担当の江藤さんとしていた時のこと。
佐々木「江藤さんは竹田さん（代表）と何を話したんですか？」
江藤さん「去年はトミーバースのサイトがとにかく大変だったて話したよ（笑）」
佐々木「あ、そうなんすね！」（う…担当わたし。まじか…。なんかごめんなさい…。）
ちなみに、佐々木はモンブランで最もコーディングやプログラムの知識がないメンバーと自覚してます。でもいつまでもいつまでも「技術的なことはよくわからないんっすよね〜〜〜（てへぺろ）」じゃだめだと思ったので、これはちょっと踏み出してみよう！と思い立ちました。
と、いうことで
「コーダー江藤さん的2022年一番大変だったサイトトミーバースのサイトの構築について聞いてみた。」
はじまりはじまり〜〜〜！！！！！🎉
トミーバースのサイトってこんな感じ。
見ていただいたらわかると思うんですが、このサイト3種類のイラストが混在していて、イラストが可愛く動く動く。動く動く。くるくる、しゅっしゅ、ふわふわ、ぽわぽわ…。
ぜひ一回ご覧になって、このブログに戻ってきてください。
絶対戻ってきてね！！！！！
Q：コーダー的にトミーバースをあえて一言で表現するなら？
ゆるい爆発。
世界観を爆発させたようなサイトだなと。
でもダイナマイト的な爆発じゃなくて、
内部的にはすごい優しさを感じるので。
ゆらゆらふわふわ。ゆるい爆発。
ぶっとんでるけど、動きはゆるふわ。
Q：全体的にイラストが多くとてもかわいらしい動きが印象的です。意識したことはありますか？
全体的にゆるいイラストが多いので、ゆらゆらふわふわとゆっくりとした動きを意識。
毎度の事ながらそれぞれのイラストにあうような動きに設定してます。
また、ドット絵のイラストはコマ撮り？のような動きにしました。ドット絵ってこういう動きですよね？
緩急をつけるため吹き出しは「ポンッ」って感じで早い動きで出現させてます。メリハリ！
細かいこだわりとしては、動くイラストが多く、タイミングがバラバラに動きすぎると見辛いので、1画面上の動きのパターン3つ程度に設定してます！
Q：ざっくり制作に何時間かかりましたか？
向き合った時間はおそらく2ヶ月ちょっと。
トップページのコーディングに1ヶ月位かかったきがします。
いつも以上に作っても作ってもなかなか進まずぜんぜん終わらなかった。
終わる気がしなくて怖かった。。。。
Q：一番大変だった部分はどこですか？
ファーストビューですね。。
バルス/松原さんのデザインは毎度動きの指示もあるのですが、
今回の指示内容は下記のような感じでした。
リアル宇宙（星）・文字がボヨンと出てきて、イラストがボンッ！って弾ける感じで出てきた後に
リアル地球とイラスト地球が連動して回るファーストビュー組まないといけないの？？？？
ってなりました。絶望。
てかリアル宇宙ってなんなんだ。
Q：FVのリアル宇宙はあれは何がどうなってるんですか！？
これ↓
どうなっているんでしょうね。もうあんまり覚えてない。。
イラストを配置するのは単純に工数が多かっただけだけど、
やっぱり２種類の地球の位置と、画面株のベタ塗り背景、地球裏側に隠れてまわる電車とか重なり順を考えたりそういう部分の調整がめっちゃ大変だったのは覚えてます。
あと、地味に大変だったのが各地球の中心点に合わせて回す部分。
イラストがはみ出てる分高さが出るので、単純に真ん中がどこかとか、画像のどこまで余白に含めて書き出すかとか。
要領わるいので何回か書き出して動かして、違和感無い感じに調整しました。
ちなみに、もとのイラストはこんな素材。
佐々木：ちょ、ちょっと理解が追いつかない…。なるほど、こうやって地道な試行錯誤でサイトが作られていることは理解できました。
江藤：そうですね。いつもひぃひぃ言いながら、なんとかサイト構築してます。
佐々木：な、なるほど…。確かに江藤さんがちょっと愚痴りながら、でも諦めずにサイトの構築をしてたの、隣で見てましたが、確かにひぃひぃ言ってましたね。笑
こんなふうに試行錯誤しながら作ったことを教えてもらって、よりWEB制作の奥深さを感じた佐々木でした。
ちなみに、トミーバースのトミーさんからは、サイトを公開してすぐ数件問い合わせがあったことや、一緒に働きたい！という問い合わせをかなりの頻度であっているとの声を頂きとても嬉しく思っています。