Motiffは、中国スタートアップが開発したAI搭載のUIデザインツールです。一般的なデザインツールと同様に手を動かしてUIデザインが作成できる他、一部AIを活用したデザイン生成が可能です。
今回は、Motiffの基本情報やAI機能についてご紹介したいと思います。
Motiffとは
Motiffは、中国スタートアップが開発したAI搭載のUIデザインツールです。一般的なデザインツールと同様に手を動かしてUIデザインが作成できる他、一部AIを活用したデザイン生成が可能です。
クラウド上での複数人での作業や、プロトタイピングの機能も一通り提供されており、使用感としてはかなりFigmaに近い形になっています。
ブラウザ上で動作するデザインツールですが、デスクトップアプリやスマホアプリも提供されていて、アプリで作業を行ったりスマホからプレビューを確認することが可能です。
現在はベータ版ですが、AIによるデザイン作成やサポートの機能が提供されていて、デザイン生成や作業効率化などが行えます。
Figmaを意識して設計されているようで、公式サイト上にはFigmaとの比較が掲載されていたり、デザインツールのインターフェイスなどもかなり似ています。
MotiffのAI活用機能
現在ベータ版のAI機能ですが、一部ご紹介していきたいと思います。
AI複製
コンポーネントを1つ作成すれば、AIを使って簡単に複製することができます。
ただ複製するだけでなく、名前や画像、価格、評価などそれぞれ異なる情報が入力されるため、手動でバリエーションを増やす必要がありません。
AIレイアウト
デザイン上に無秩序に並べられたレイヤーを、AIを使って構造化されたデザインに更新することができます。
縦方向に要素が並ぶレイアウトや、横方向に要素が並ぶレイアウトなどを自動で判別して作り変えてくれるので、後から要素を追加した場合でも自動でレイアウトが更新され、整った状態を保つことができます。
AIデザインシステム
作成したデザインファイルをAIで読み取り、デザインシステムを出力することができます。
タイポグラフィや色、アイコン、コンポーネントなどを整理してデザインシステム化することができるので、人間の手でデザインシステムをメンテナンスしなくても、AIを使って常に最新の状態を保つことができます。
AIデザイン生成
プロンプトを入力することで、UIデザインをあっという間に生成することができます。
一般的なAIでのデザイン生成は画像か、コード形式で出力される場合が多いですが、Motiff上で編集できる状態で生成されるため、そのままデザインツールで微調整を行うことが可能です。
実際にUIデザインをプロンプトで生成してみた
Motiffのデザインツールのインターフェイスは下記のような見た目になっています。
上記の画像だと分かりづらいかもしれませせんが、細かなツールやプロパティの配置など、かなりFigmaに近いUIで作られていました。
次に、AIによるデザイン生成を使って、下記のプロンプトでUIデザインを生成してみました。
実際に出力されたデザインは下記の通りです。
所々気になる点はあるものの、普通にアプリとしてリリースされていてもおかしくないレベルのクオリティのUIデザインを生成することができました。
現段階では、PCサイズのデザインは生成できず、主にスマホアプリ向けのUIデザインの生成に対応しているようです。
デザイナーでは無い人でもプロンプトを使って一瞬で上記のようなデザインを生成できるのであれば、モックアップ作成やプロトタイプ作成でかなり役立ちそうです。これが一般的になると普段の制作フローも一変するのではないでしょうか。
色々と調べてみると、どうやらMotiffは様々なテンプレートが予め用意されていて、適したテンプレートを選択してデザインを生成しているようです。
そのため、細かな調整やデザインのテイストの変更などはできないようです。
例えば、
というプロンプトを投げてみた所、下記のようなデザインが出力されました。
やはり既存のテンプレートを組み合わせてデザインを生成しているようで、高度なデザインの指示や無茶振りには対応していないようです。
下記のページでShowcaseとして生成されたUIデザインの一覧が掲載されています。
Motiffの料金プラン
Motiffの料金プランは下記の通りです。
| プラン | 月額費用 |
|---|---|
| Free | 無料 |
| Professional | 4ドル |
| Organization | 15ドル |
無料プランでも個人用のデザインファイルは無制限で作成することができ、共有するファイルは3つまでに制限されています。
Professionalプランにするとファイル数の制限がなくなり、利用できる機能が増えます。
Organizationプランは、組織用のプランなので権限管理など組織向けの機能が追加されています。
なお、Motiff AIについてはベータ版としての提供なので、プランに関わらず1ヶ月に利用回数の上限が決められているようです。
まとめ
AI関連ツールはどんどん進化しており、UIデザイン領域のAIサービスも度々耳にすることがありますが、まだ決定打となるようなサービスは登場していないように思います。
Figmaも2024半ばに「Figma AI」を発表しており、現在はベータ版として一部のユーザーに提供されている状態ですが、標準機能として一般公開される日も近いかもしれません。
また注目のツールやサービスを見つけたら、ご紹介したいと思います。
