アバターを作る感覚でイラストが生成できるFigmaプラグイン「Humation」はどのようにして生まれたのか
2024.09.09Humationは、デザインツール「Figma」で利用できるプラグイン。まるでゲームのアバターを作るようにイラストを生成できるのが特徴だ。
使い方は簡単で、「Head」「Body」「Bottom」の3つの要素を自由に組み合わせ、好きな色を選び、「Export」を押すだけ。イラストはそのままFigma上にPNG画像として書き出され、作業中のデザインにイラストをそのまま取り入れられるところが嬉しい。
Humationは瞬く間に人気を博し、公開後3ヶ月でユーザー数20,000人を突破。利用者層が限られるFigmaプラグインとしては驚異的な数字と言える。
リリース当初は イラストシステムとして Humationのみを提供していたが、8月よりPen-chan’sと Whocares?の2つのシステムも使えるようになり、さらなる盛り上がりを見せている。
一体どのような思いでHumationを制作されたのか、また、今後どのようにHumationを展開していきたいのか。開発者であるen.さんにお話を伺った。
en. / Product Designer
dely株式会社にてクラシルのサービスデザインや新規事業のプロダクトマネジメントを手掛けたのち、2022年に独立。プロダクトマネージャー兼デザイナーとして、モビリティ、金融、エンタメなど幅広く新規事業のデジタルプロダクト開発を支援。2023年にエンタメ×AIのスタートアップ株式会社Day1を創業。
――Humationはどのようにして生まれたのでしょうか。
en.：昨今のコミュニケーションデザインにおいては、親しみのあるイラストが重要になってきています。たとえば、Notionやみんなの銀行のようなプロダクトを見ても、その傾向は顕著だと思います。
しかし、Webやアプリなどのデジタルサービスにそういったイラストを取り入れようと思っても、難しいことが多いです。なぜなら、サービスのデザインを作っているデザイナーは情報設計を中心に仕事をしており、情緒的なイラストの制作やディレクションが得意な人はそう多くないからです。もちろん両方できる人もいるとは思いますが、そういった人はあまりに希少です。
僕もサービスのアウトラインとUIを爆速で作ることは得意なのですが、グラフィックには苦手意識があります。でも、デザインする中でにイラストを使いたいシーンは多い……。そんなことを考えているうちに、Humationのアイディアが生まれました。
――HumationはFigmaのプラグインとして提供されていますが、なぜ提供プラットフォームとしてFigmaを選ばれたのでしょうか。
「Figmaのことが大好きだから」です。大学生のころにFigmaの存在を知ってからはずっとFigmaばかり使っています。会社の業務でも自分のプロジェクトでもFigmaを使っているので、もはやFigma無しの生活は考えられないです。
だから、「Figma上で何かを作ってみたい」というのが始まりなんですよね。Figmaが無かったらHumationというサービスの発想自体生まれていなかったと思います。
それから、実務的な面でもFigmaのプラグインとして提供することのメリットが2つあります。
1つは、すでに様々な機能がFigmaに用意されていること。たとえば、アカウント登録機能、決済機能、デザインの操作画面などは、自分でいちから作ろうと思うと凄く大変です。でも、Figmaを使えば、そういった機能がすでに用意されているので、ニーズの検証をスムーズに進めることができるんですよね。
２つめの理由は、Fgimaのコミュニティの熱量が高いということ。デザインに興味のあるコアなユーザーが集まっており、交流も活発なので、積極的なフィードバックが得られると思いました。実際、FigmaのDesigner Advocateの方にHumationを取り上げていただいたりして、それをきっかけに利用していただけるユーザーがグッと増えました。
――これまでエンジニアのご経験は無いとお聞きましたが、プラグイン開発はどのように進められたのですか。
en.：実は、会社でちょっとしたフロントエンドの開発を担当したことがあるんです。当時の上司に「これからの時代はエンジニアリングもできるデザインエンジニアになるべきだ」と言われて。開発の肌感があるかないかでミニマムな要件定義の確度が変わるので、今となっては幅を広げていただけてありがたいです。
ただ、その時の経験を頼りにしていては、開発を進めるのにとても時間がかかります。そこで、Chat GPTの手を借りました。GPT-4に「これ、どうやるの？」ということをまず聞いてみて。自分で書いたコード、出ているエラー文、実現したいことを一つにまとめてまたGPT-4に投げて、そこで回答されたものを試してみる。Figma Pluginの開発をしたことがなかったにもかくぁらず、GPT-4との会話を繰り返しているうちに、1週間でとりあえず動くものを作ることができました。
――完成後は、どのように広まっていったのでしょうか。
手元で動くプロダクトが完成したは良いものの、「これって本当に使われるんだろうか？」という懸念がありました。そこで、特に何も告知せずに、気軽な気持ちでFigma Communityに公開したんです。
すると、どこから発見していただけたのか分からないのですが、毎日数百人ずつユーザーが増えていくような状態になって。「これは急いで機能を整備しないと！」と思い、追加実装をして本リリースを行いました。
企画を思いついてFigma Communityにアップするまでが2週間で、そこから本リリースを行うまでが2週間でしたね。かなりスピード感を持ってリリースを行うことができたと思います。
また、海外ユーザーからの反応が非常に良いのも嬉しいポイントです。もちろん日本のユーザーにも使っていただけているのですが、盛り上がりとしては海外の方が大きいです。
――今後は、どのように展開されていく予定なのでしょうか。
Humationは「誰でも簡単にイラストを使えるようにする」を目指しています。なので、様々なイラストレーターさんとコラボして、提供できるイラストの種類を増やしていきたいと思っています。
リリース当初は373さんに提供していただいたイラストから作成したシステムのみを提供していたのですが、8月からはemmyさんによる「Pen-chan's」と、named_youさんによる「Whocares?」も加わり、より幅広いデザインに対応できるイラストが生成できるようになりました。
まだまだHumationを一緒に盛り上げていただけるイラストレーターの方を募集しているので、興味のある方はぜひご連絡ください！
Humationの導入方法
今回紹介したHumationについて、簡単な使い方を以下に紹介する。
Figmaでアカウントを作成する
Humationを使うために、デザインツール「Figma」のアカウントを作成していく。（すでにアカウント登録がお済みの方は、この手順は飛ばしていただいて結構です）
まず、Figmaのページにアクセスし、画面右上の「無料で始める」をクリックしよう。
続いて、メールアドレスとパスワードを入力し、「アカウントを作成」をクリックする。この時、「Googleで続行」をクリックすると、お使いのGoogleアカウントを使って認証を行うことができる。
Figmaからメールが届くので、その中の「メールを確認する」をクリックしよう。
以上で、アカウント作成は完了だ。
Figma上でHumationを使う
Fgima上でHumationを使うために、まずはデザインファイルを作成していく。「〇〇〇〇のチーム」 > 「プロジェクト名」と進む。
次に、「+デザインファイル」をクリックする。
（なお、無料ユーザーの場合は作成できるデザインファイルやプロジェクトの数に制限がある）
新規のデザインファイルが開くので、デザインファイル上の何も無いところで右クリックをし、「プラグイン」→「プラグインを管理」とクリックしていく。
次に、検索窓に「Humation」と入力する。すると、検索結果の一番上にHumationが表示されるので、クリックする。
プラグインが読み込まれ、画面上にHumationが表示されれば成功だ。
実際にHumationを使ってみる
Humationでイラストを作成するデモを行ってみる。
今回は、373さんによる「Humation Origin」を使用する。使いたいイラストをクリックすることで、Humationのイラストシステムが起動する。
使い方は簡単だ。「Head」「body」「Bottom」の3パーツをクリックして入れ替えていき、好みのイラストに仕上げていく。
作成イラストに色をつけることもできる。変更できるのは、「Stroke」「Skin」「Head」「Body」「Bottom」の5種類だ。
作成したイラストは、「Export」をクリックするとそのままPNGファイルとしてFigma上に書き出される。あとはFigma上でデザインを行っていくだけだ。
また、イラストを大きく引き伸ばして使いたい場合などは、エクスポートのオプションとしてSVG形式のファイルを選ぶこともできる。こちらを使うためには、月額3$のPlusプランに加入しよう。
なお、この記事のサムネイルも、Humationのイラストを活用して作成している。
姉妹サービス「Whocares?」
Humationの姉妹サービス的な位置づけである「Whocares?」も利用してみた。
Humationと同様に、プラグインで「Whocares?」と検索すれば検索結果の一番上に出てくるので、クリックして起動する。
Whocares? では、「Face」「Hair」「Top」「Outer」「Bottom」「Socks」「Shoes」「Other」の8項目を調整してイラストを生成することができる。
さらに、それぞれのパーツごとに色を変更することが可能だ。Humationに比べると要素が多い分複雑で、良いイラストを作成するのにはセンスが求められるが、出来ることの幅が増えているのは嬉しい。
作成したいイラストの雰囲気やかけられる時間などによって、それぞれのプラグインを使い分けると良いだろう。
さいごに
今回Humationを使ってみて、非常に有用なサービスだと感じた。実際に、私も個人で運営しているブログメディアのサムネイル制作などにHumationを活用している。
また、海外のプロダクトをはじめとしてHumationで作成したイラストを使用している事例も増えてきているようだ。
Figmaをお使いで、かつ便利なイラスト生成システムを探している方は、ぜひHumationとWhocares? を使ってみてほしい。
