【ミーア】100種類以上の目のデザインをFigmaでひたすら試行錯誤した話

はじめに

ミーアは、可愛らしい目の動きと、頭を撫でた時の喜怒哀楽の豊かな目の表情が特徴的（だと思っている）ですが、今回は、100種類以上の豊かな目の表情をFigmaで試行錯誤しながら作成した話を記載したいと思います。

当初は口もあったが、制御が難しかった

ミーアは実は最初は口もついていて、弾力性のあるゴム（ヘアゴムなど）を釘で数カ所固定しておいて、モーターを動かすと口が動くという仕様にしていました。

今見返してみると、製品版と比較して2回りも大きく若干怖いのですが、そこはご愛嬌で。

ただ、ゴムが外れない仕組みを維持するのが大変だったのと、モーターの音をできるだけ静音にしないと、ミーアの喋りがモーター音でかき消されてしまうという問題がありました。サーボモーターやステップモーターを使ったり、静音ブラシモーターを使うなどいくつか検討をしましたが、価格も含めてなかなか最適解を出せなかったので、途中から『口は無くしてしまって、目だけにしようかな』と思うようになりました。

豊かな表情を再現したいという思いはあったので、口をなくすぶん、『目のLCDディスプレイだけでいかに喜怒哀楽を表現するかに注力しよう』という方針に切り替わりました。

目のサイズの検証

今回、目のディスプレイとして使用しているのは、ST7735S 1.44インチ 128×128ピクセルです。正方形で128ピクセルのサイズの中で、目の大きさをどのくらいにするのが良いかを試行錯誤しました。

最初は、目の虹彩含めた全体のサイズを100px, 瞳孔部分を72pxで作成していて、虹彩部分が28pxと大きかったのですが（下図左）、違和感があったので、全体を92px, 瞳孔部分を76pxで交際部分を16pxと狭めました（下図右）。

これで、違和感がなくなったので、一旦このサイズで進めました。

ただ、次第にバージョンアップとともに筐体全体が小型化してきたので、目の全体が92px、瞳孔が76pxだと（下図左）、これはこれで可愛いけど、ちょっと目の部分が強調されすぎているかなと思い始めました。

そして最終的には、目の全体が80px, 瞳孔部分が68pxで落ち着きました。当初は虹彩部分はスカイブルーだったのですが、テーマカラーをエメラルドグリーンに変更したので虹彩部分のカラーもそれに合わせました。
目の瞳孔のサイズ感はこれ以上のpx単位の修正は好みによると思いますが、個人的には今のサイズで良いのではと思っています。

様々な目の表情をひたすらFigmaで検証

当初、 目だけではなく、口も添える想定のデザインの段階から昼まで様々な目のデザインを検証していました。

100種類以上、試行錯誤も含めると200種類以上作成したと思います。

完全にアニメっぽいものを作成したり、モンスターエナジーの文字『m』が垂れ下がっているのを持ってきて、ホラーっぽい・寝不足っぽい表情を試してみたり、幾何学模様を、、

続きは、こちらで記載しています。

100種類以上の目のデザインをFigmaでひたすら試行錯誤した話