100種類以上の目のデザインをFigmaでひたすら試行錯誤した話 | ミーア
【新機能】ミーアが全国47の方言で話すようになりました!

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

はじめに

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

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

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

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

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

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

目のサイズの検証

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

ST7735s 1.44インチディスプレイ

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

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

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

そして最終的には、目の全体が80px, 瞳孔部分が68pxで落ち着きました。当初は虹彩部分はスカイブルーだったのですが、テーマカラーをエメラルドグリーンに変更したので虹彩部分のカラーもそれに合わせました。

目の瞳孔のサイズ感はこれ以上のpx単位の修正は好みによると思いますが、個人的には今のサイズで良いのではと思っています。

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

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

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

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

同じ可愛いでも、アニメの目のリアリスティックな目の表情は他のアイコンとの統一感が薄れそうだったり、妙にリアルだったりなどで採用を見送るなどしました。

結構難しくて、たとえば下記の寝ぼけ眼な表情は、実際に当てはめてみると、猫というよりは人っぽい表情だったりで、違和感あったりしたので、実際に採用したのは2割くらいという肌感です。

そして、抽出した目の表情を喜怒哀楽・皮肉・混乱といった表情タイプで場合分けしていきました。

ミーアが喋るフレーズも喜怒哀楽で分けているので、実際に喋るフレーズと目の表情がマッチするようにプログラムを組むのも行いました。

また、目の表情として静止画とアニメーションを比較したところ、やっぱり動きがあった方が面白いとなり、アニメーションの画像(gif)もできるだけ多く用意するようにしました。

いわゆるアジア文化で受け入れられそうな可愛い表情だけではなく、新しいアイデアを閃いた時の電球アイコンや、怒っている時の炎マークなど、あえて幾何学的なマークも入れて、ロボット感も一部出すようにしています。

googleでひたすら『動物 目』『ロボット 目 可愛い』『アニメ 目 表情』などの検索キーワードで検索して画像結果を物色したり、Xなどで他のキャラクターの目の表情をリストアップしたりしました。

また、googleのマテリアルデザインのアイコンを全部見て、使えそうなものをピックアップしたりしました。

https://fonts.google.com/icons

最終的には様々な表情を、用意できてよかったです。

今後の表情の拡張性

こうして100種類以上の目の表情をデフォルトとして、β版リリース時に用意したのですが、今後はこの目のデザインもユーザー側で作成できるように拡張したいと考えています。

具体的にはアプリで目のデザインを書いたら(ある程度AIで補正してサポートも検討中)、その目のデザインをミーアで再現できるのと、他の人が作成した面白い目のデザインを自分のミーアに取り込めるようにして、みんなでミーアの目のデザインを増やしていく仕組みを作りたいと考えています。

タイトルとURLをコピーしました