GeminiのアイデアをFigmaで仕上げる｜ハコブくんの表情デザイン工程
LOG6では、ロボットにおける顔の役割と、必要な表情のバリエーションを定義しました。
いよいよその表情を具体的なデザインデータとして形にしていきます。ここでカギとなるのが、LOG5でも活躍したAIツールLayermateと、デザイナー自身の手作業によるハイブリッドなFigma制作プロセスです。
AIに任せる部分と人間がこだわる部分を明確に分けることで、効率とクオリティを両立させるアプローチを紹介します。
※薬剤搬送ロボットハコブくんは技術検証用の仮想設定です。 実用化目的ではなく、制御・UIデザイン・HRI（人間とロボットの相互作用）の本質を探求するコンセプトとして定義しています。
AIでアイデア出し。Layermateで可能性を広げる
最初のステップは、アイデアの発散です。定義したパターンをなぞるだけでなく、思いもよらない表現の可能性を探るために、Layermateの生成能力をフル活用します。
定義済みパターンの高速ラフ生成
まず、スプレッドシートにまとめた「にっこり」「真剣」「驚き」といった基本パターンを、Layermateにテキストプロンプトで指示します。
プロンプト例: 黒い角丸のスクリーンに、シンプルな白い図形で「驚いた顔」を描画して。目は大きく真ん丸に見開き、口は小さく丸く開ける。
これだけで、数秒のうちに複数のバリエーションがFigma上に生成されます。一からシェイプを描く手間が省け、スタートダッシュが劇的に早くなります。
意外な方向性の探求
ここからがAIの真骨頂です。定義書にはない、少し抽象的で実験的な指示を投げかけてみます。
プロンプト例: 少しレトロなSF映画に出てくるような、愛嬌のあるロボットの顔、感情が豊かで、少し漫画的な表現の困った顔。
すると、自分の中の引き出しにはなかったようなユニークな目の形や、表現豊かな口のラインなど、意外なデザイン案が次々と生成されます。これらを並べて俯瞰することで、「この目の表現は面白いかも」「この方向性は今回は違うな」といった比較検討を短時間で大量に行うことができます。
AIは、疲れを知らない優秀なアシスタントとして、デザインの可能性を広げてくれるのです。
最後は人による感覚的な仕上げ作業
大量に生成されたラフ案の中から、今回のコンセプト信頼できる愛嬌に最も合うものをピックアップします。しかし、AIが生成したものはあくまでラフです。ここからは、デザイナーの目と手で、最終的なクオリティへと高めていく仕上げの作業に入ります。
AIでは届かない「微細なニュアンス」の調整
Layermateは優秀ですが、「線のカーブをあと1ピクセルだけ緩やかにして、優しさを出したい」「目の配置をほんの少し下げて、幼い印象を強めたい」といった、非常に繊細な感覚的調整はまだ苦手です。
ここはどうしても、人間がFigmaのアンカーポイントを操作し、数値を打ち込みながら、納得いくまで調整を繰り返す必要があります。
調整の例（にっこり顔）: AIが出した笑顔のラフをベースに、口角の上がり方を微調整します。上がりすぎると不自然な「作り笑い」に見え、下がりすぎると「愛想笑い」に見えてしまいます。自然で心からの笑顔に見える「魔法の角度」を、手作業で探り当てます。
グリッドシステムへの落とし込みと統一感
選定した複数の表情が、一つのキャラクターとして違和感なく見えるよう、厳密なグリッドシステムに落とし込んでいきます。目の中心位置、口のベースラインなどを揃え、表情が変わっても顔のパーツが不用意にズレないよう、緻密な設計を行います。これも、現時点では人間の論理的思考が必要な作業です。
まとめ
FigmaプラグインLayermateの大胆な生成能力と、デザイナーの繊細な手作業を組み合わせた、表情制作プロセスを紹介しました。
AI（Layermate）: 疲れ知らずの発想力で、短時間に大量の選択肢と意外なアイデアを提供し、可能性を広げる。
人間（デザイナー）: 繊細な感性と論理的な思考で、細部のニュアンスを調整し、最終的なクオリティと統一感を担保する。
この両者の強みを活かすことで、単独で行うよりも遥かに効率的で、かつ高品質なデザインに到達することができました。
