サイドプロジェクトにマスコットを誕生させた話
私は日本の顔文字が大好きです。これらの小さな表情は、メッセージに温かみを添えてくれます。
顔文字を探すためのサイトの多くは、古臭い印象を受けます。ページは窮屈で、広告も多すぎます。私は何か違うものを作りたいと思いました。温かみがあり、生き生きとしたデジタルショップのようなものを作りたかったのです。
そこで、Nyamojiを作りました。彼女はページの中に住む小さなマスコットです。カーソルを追いかけ、瞬きをし、呼吸をします。
これらを実現するのに、重いライブラリは必要ありません。プレーンなSVG、一つの pointermove イベント、そして少しのCSSだけで十分です。
彼女に命を吹き込むために行ったことは、以下の通りです：
• 目の動き
単一の pointermove リスナーを使用しています。彼女の顔からカーソルへの方向を計算し、その方向に目を少し動かします。
ここで2つの教訓を得ました。一つ目は、垂直方向の動きを85%に制限することです。目が上下に動きすぎると、不気味に見えてしまいます。二つ目は、小さなCSS transitionを追加することです。これがないと、目はロボットのようにカクカクと動いてしまいますが、これがあることで滑らかに動くようになります。
• 瞬きの修正 最初、ページ上のすべてのマスコットが同時に瞬きをしていました。まるでバグのように見えました。これを解決するために、各マスコットにランダムなアニメーション遅延を追加しました。今では、それぞれが独自のタイミングで瞬きをしています。
• キャッチライト それぞれの目に小さな白い点（キャッチライト）を加えました。この小さなディテールが、単なる「絵」と「キャラクター」の差を生みます。彼女がこちらを見つめているように感じさせてくれるのです。
• ユーザーへの配慮
動きは集中を妨げることがあります。そこで、prefers-reduced-motion メディアクエリを使用しています。ユーザーが動きを抑えたいと考えている場合は、すぐにすべてのアニメーションを停止させます。
• レイアウトシフトの回避 マスコットの顔をHTMLに直接記述しています。空のプレースホルダーを使用すると、JavaScriptが読み込まれたときにページがガタつきます。最初からHTMLに書き込んでおくことで、ページの安定性を保っています。
小さくてパーソナルなものを作ることは、プロジェクトを際立たせることにつながります。
彼女は Kaomojikan で会えます。