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