「ねずみのANDY」Webサイト制作のちょっと裏側
長野県の山麓にアトリエを構えて活動する、松本セイジさんが描くアート作品のキャラクター「ねずみのANDY」オフィシャルサイトを制作させていただきました。ANDYの紹介はもちろん、松本さんのこれまでの個展や仕事紹介も掲載されています。
ANDYって、一度見たら忘れられない個性的なフォルムと、ちょっととぼけた表情がたまらなくかわいいです。特に目が好き。松本さんご本人も、目にすごくこだわってると仰ってました。デジタルで描いていると思うかもですが、すべてアナログなのです。ぜひ、描いている様子がわかるこちらの動画もご覧ください。
松本さんとの出会い
2020年3月31日に東急東横店が幕を閉じるのに合わせ、特設サイト「#東横デパート 閉めるってよ」が公開されました（サイトはすでに閉鎖）。そのサイト・ポスターデザインと制作を担当させていただいたのですが（プロデュースはCamp Inc.さん、ディレクターがMULTiPULさん）、イラストを担当されたのが松本さんでした。最初の打ち合わせのときに、当時東京在住だった松本セイジさんと初めてお会いしました。仕事を通じて、松本さんのイラストにすっかり魅了されました。
長野で再会
その後、松本さんが長野県に移住されたことを知り、フォレットコーヒーさんでの個展にお伺いして1年振りくらいに再会。しばらくして、Facebook経由でANDYサイト制作の相談メッセージきたときはびっくりしました。もともとキャラデザイン、とりわけ2〜3頭身サイズのものが好きで、その中でもANDYはイチオシでしたので感無量でした。その数日後、エルにご来社いただき打ち合わせ。あれよあれよという間にプロジェクトがスタート。
余談ですが、とある休日、いつものように県内の山々をドライブしていて、ランチするところ探して見つけたお店に入ろうとしたら、まさかの松本さんが目の前で犬の散歩してて！向かいがご自宅で！そのまま職場に招待してもらって！グッズもいただいた！という、ミラクルもありました。
Webデザインのポイント
さて、Webサイト制作の裏側を少しばかり。ANDYはキャラ単体で完結しているデザインが多く、それだけの強さがあるんだなぁ、と感じてました。実際、最初にアートボード上にANDYをおいたとき、「何もする必要ない…！」と思いました。装飾したりレイアウトの妙を狙ったりしない、ある意味「何もしないデザイン」をしようと心がけました。
「なるべく何もしないデザイン」とはいえ「何も考えない」わけではありません。Webサイトとして必要なUIやレイアウトをどう作っていくかは、何もしないスタンスならではの難しさもあるかと思います。
下の図は、レイアウト検討中の案あれこれ。
ANDYのサイズ感と配置位置について、サイズ大きくするとインパクトありますが、ねずみとしてのスケール感としてそぐわないので、小さめに配置しました。
メニューの位置は、チーズを持ち上げているANDYの上に要素を置くと、余計な重力を与えてしまうと思い、左袖にしました。
ANDYのロゴが右下にあるのは、ほかの作品のように、ファーストビューが一枚絵として完結する画にしようと思いました。
このように、必要な要素について、配置する理由を考えながらデザインを進めていきました。ANDYが一番ANDYらしく見えるにはどうすればいいか？を考えながらデザインすることが、大事なのかなと思います。
個人的には、画面左上にANDYの顔を配置してホームボタン代わりにしたデザインが、チャームポイントになっているかなと思い、気に入っています。
真っ先にポイントを抑えていたので、デザインに関しては松本さんのイメージされていたものと乖離がなく、最初の提案でOKいただきました。
アニメーションについて
当初は、静止画ANDYが真ん中にいるだけで完結するつもりでしたが、松本さんと話し合うなかで、走らせる→横切らせる→猫（LITTLE）に追わせる→数パターン用意する、とアイデアが膨らんでいきました。
スピード感も、速すぎず、ゆっくりすぎずな調整を何度も行いました。スピードによって全く印象が変わりますし、ANDYの性格を表す重要なポイントだったと思います。ANDYと、それを追いかけるLITTLEの距離感も数パターン検証しました。
こうして、無事サイトはリリースされました。
ANDY FIGURE COLLECTION
今日はこれをお知らせしたくて。待ちわびていた、ANDYのフィギュアが発売されました。（かわらさんのツイートで知りました）
僕も買いました。あとひとつでコンプリート。ECサイトでも購入できます。
お仕事で松本さんとご一緒できて楽しかったです。これからもANDYと松本セイジさんのいちファンとして、応援します！
この記事が気に入ったらサポートをしてみませんか？