https://bibinbaleo.hatenablog.com/entry/2024/03/15/094758

アイコン作ったり、アプリのUI作るなどのデザインに役に立ちそうなAI試す。

過去にも何個か試したけどあんまりいいのはなかったが、進化しているかもしれないし新しいツールも出てきているようだ。

bibinbaleo.hatenablog.com

UIデザイン全体

ワイヤーフレーム作成とか、もう全部作っちゃうやつとか

Galileo AI

www.usegalileo.ai

１年前にちょっと話題になってたけどコンセプトムービーだけなのか誰も触れてる人いなさそうだったデザインAI

bibinbaleo.hatenablog.com

Twitterずっとフォローしてたけど最近になっていろいろ動き始めた！

Meet Galileo 1.0: The game-changing prompt-to-UI platform now open to all.

Our mission is to supercharge the creative process of designers and builders, making design easy, fast and magical.

Bring your idea, let AI do the heavy lifting.

Start today: https://t.co/a1xWOnIrQC pic.twitter.com/zoKfB6N6sU
— Galileo AI (@Galileo_AI) 2024年2月6日

Galileo AI is the best UI design AI tool. Very impressive. You all should try it once. #Galileoai pic.twitter.com/VwEnqh5egy
— omar faruk (@omarfaruksabuj) 2024年1月31日

日本でも取り上げてた

UIデザイナー必見。

ChatGPTのようにテキストを入力してUIデザインを生成してくれるサービス「Galileo AI」

試しにフードデリバリーアプリを作った結果がこちら。
しかもFigmaに編集可な状態でコピペできる。

今まで AI × UI は正直使い物にならなかったけど、これは割と使える...かも？ https://t.co/dSdMJyxske pic.twitter.com/8URdRQxhfS
— ❖ ken｜旅するデザイナー @南米バンライフ旅 (@ken_tbdz) 2024年2月7日

使う。フリープランもある

トップ画面でほかの人のデザインが見れる

今まで行ったことのある場所を記録するアプリを依頼した

３パターン作ってくれる

Figmaマークを押すとクリップボードにコピーされる！そんなのできるんだ。

貼り付けたらちゃんとデータになってた

無料版だと基本デザインは公開されるっぽい。Web向けかPC向けか選べる

今度はメタバースアプリのホーム画面みたいなのを依頼した。いい感じ～

一番左のを選んで

「サムネ写真の中に今現在訪問中の人数を記してください。またタイトルの下にワールドの作者名も書いてください。
また全体のデザインテイストを黄色を基調とした明るく子供向けのものにしてください」

と依頼した。

なんか思ってたのと違うけど、一応サムネの中に文字は入った

テイストは別途変える場所があった。

これを適用したらこんな感じ。しぶくない・・・？でもまあ自然には見えるし私が作るよりはおしゃれでまともなデザインだな～

ちなみに生成後よくこのエラー画面になるけど左のタブで会話に戻ったら、ちゃんと生成されてる。

次は一連の流れの画面を作りたいな～できるのかな？例えばメタバースアプリなら、ワールド一覧→入室画面→ワールド内画面みたいな。

聞いたら作ってくれた

へ～いいね～

書き出したデータみたけど、画像の上に文字を乗せる時によくやるグラデーションとかもちゃんとやってて感動した！！

あとオートレイアウトとかもちゃんとしてそう

うわあああ8ポイントルールまで守ってる！！すごすぎる！！！

すごかった・・・

Relume

この記事の時に触った。サイトマップとワイヤーフレーム作成

bibinbaleo.hatenablog.com

アイコン

統一されたアイコンを作るのってムズイですね。基本はMaterial Designのアイコンを使っているが、足りないものがあったときに、別サイトから探してきたりMaterialアイコンを改変したりするが、めんどくさい。

昔アイコンを画像生成AIに作ってもらったことあるがあまりシンプルさがなかった。

Magician

昔からあったけど試してなかった。

AIを搭載したFigmaの魔法のデザインツール
「Magician」が公開！https://t.co/0JoeZ33flP

AIでテキスト入力に基づいたベクターアイコン、コピーライティング、画像を生成する。ベクターアイコンの精度高すぎてビビった pic.twitter.com/xZWfEOPmt7
— やまかず (@Yamkaz) 2022年11月22日

Figmaが買収したのか

Figmaが買収した@diagram はなに者かというと、AI駆動のデザインツールやプラグインを作っている会社なんよ

1. Genius:
- FigmaのAIデザインコンパニオン。テキスト説明だけで編集可能なUIデザインを生成する。デザインシステムとの連携。
今後リリース予定。

2. Magician:
-… https://t.co/fiwuvRe5r7 pic.twitter.com/YpibZC6a51
— しょーてぃー | Experience Designer (@shoty_k2) 2023年6月21日

【 Figma ✕ AI 情報 🪄】
少し前に話題になったAIプラグイン「Magician」を使ってみたよ！AIでアイコンや画像を生成できる。正直クオリティはあまり高くないかな…カンプならいいけど実務ではまだ使えない印象🤔💦気になってた人は見てみてね〜！

▼Magicianhttps://t.co/TVy2JAJ5VV

▼画像生成編 pic.twitter.com/wiUNbndUch
— もち | デザイナー起業家・CDO (@makiko_sakamoto) 2023年4月27日

Figmaプラグインを入れる

magician.design

Figmaの画面でStartFreeTrial

アカウント作ったらアクセスキー作れた。

「手を振る人」

編集できるのはいいね

マテリアルデザイン風でって書いたら変わるかなと思ったけどあんまり変わらなかった。

鳥いいじゃん

その他Figma

UI/UXデザイナーが必ず試すべきAI Figmaプラグイン10選。以前より使えそうのものが増えてる気がする。

1. Ando — デザイナーのためのAI Copilot
2. Magician
3. Figma Autoname
4. Automator
5. Wireframe Designer
6. Relume Ipsum
7. Clueifyhttps://t.co/hvDCa33LPg
— 丸山潤 TRTL Studio CEO (@junmaruuuuu) 2023年8月1日