アプリを開発していて、AIが作るUIがどうにもしょぼい。
プロンプトで何度指示しても、自分が納得できるUIやデザインが出てこない。見た目への不満が解消されず、しびれを切らした。
それが、デザインの実例や素材を探し始めたきっかけだった。
良い画面や動きの実物を、自分の目で見たい。好みに合う例を選んで、AIとの制作に持ち込みたい。そこでChatGPTに、アプリの画面遷移や操作への反応、装飾や演出の参考を探してもらった。作品に使う画像・動画、BGMや効果音の入口も知りたかった。
まず開いてみたい、4つのサイト
今回見つけた入口を、用途ごとにまとめておく。気になるものを一つ開いて、好みの実例を選ぶところから始められる。
| サイト | 探せるもの | 使いどころ |
|---|---|---|
| Pexels | 写真・動画 | 作品の雰囲気に合う画像や映像を探す |
| Mixkit | 動画・BGM・効果音 | 演出や音の候補を探す |
| Mobbin | UI画面・操作フロー | 画面構成や導線を参考にする |
| 60fps | UIの動き・アニメーション | 画面遷移や操作への反応を参考にする |
上の2つは作品に使う素材の候補、下の2つはUIを観察する参考。素材を採用するときは、個別の利用条件も確かめたい。
まず自分の目で、良い画面や動きを見たい
AdobeやCanvaにはお金を払っている。それでも、今回の目的に合うサイトを知り、パソコンの大きな画面でたくさん眺めたいと思った。
AIに探してもらいたい一方で、最初から全部選んでもらいたいわけでもない。「これが好き」「こういうものは違う」と感じる時間は、自分に残したい。
その後なら、言葉に加えて実例を示しながら相談できる。情報の並べ方なのか、余白なのか、画面の切り替わり方なのか。気に入った理由を伝え、それに近い参考を探してもらう。
たとえば、次の依頼文を試せそうだ。［ ］の部分を自分の制作内容に変えれば、そのままAIへ渡せる。
作っているもの：［アプリや作品の概要］
改善したいこと：［画面・動き・素材の用途］
好きな参考URL：［URL］
好きな点：［余白・配色・動きなど］
候補の入口：
- Pexels（写真・動画）：https://www.pexels.com/
- Mixkit（動画・BGM・効果音）：https://mixkit.co/
- Mobbin（UI画面・操作フロー）：https://mobbin.com/
- 60fps（UIの動き・演出）：https://60fps.design/
必要な用途に合う候補を合計3件探してください。
各候補に、元URL、好みに合う理由、取り入れ方、
利用条件の確認先を添えてください。
UIの参考と作品に使う素材は区別してください。
閲覧できないもの・未確認の条件は明記し、
最後は私が選べる形にしてください。
これは、これから試す依頼例だ。参考を持ち込んだ結果、UIが良くなったと検証できた段階ではない。自分の制作で感じた不満から、次の方法を探している。
情報の海で、良い入口まで忘れてしまう
サイトを教わると、別の困りごともある。今のAI時代は、会話でも調査でも次々と情報が入ってくる。良いものを知っても、いろいろ忘れてしまう。必要なときに思い出せず、取りこぼしてしまう。
素材サイトに限らず、その部分もAIに支えてほしい。今回も、制作の相談中に「こういう場所もありますよ」と思い出させてもらえるよう頼んだ。
UIの話をしているなら、画面や動きの参考を。BGMの話をしているなら、音楽を探せる場所を。毎回長いサイト集を読み直すより、そのときの用事につながった入口が出てきてほしい。
納得できるUIを作るために見つけた情報を、必要な場面で使えるようにもしたい。AIに思い出すことを支えてもらうのは、そのためでもある。
「作品に使う素材」と「参考に見るもの」
調べていくと、同じ素材集として保存しても、用途はそろっていないと分かった。
- 作品に使う素材
写真・動画・BGM・効果音。使う作品と媒体に合う条件を確認する。
- UIや演出の参考
他社の画面や操作の流れ。分かりやすさや動きの理由を観察する。
- 実装に組み込む部品
公開アニメーションやコード。個別の利用・改変・配布条件を確かめる。
たとえばPexelsは商用利用できる写真・動画を提供している。ただし、写っているブランドや人物等の権利まで、どんな用途でも解決されるわけではない。
音も、サイト名だけで判断できない。Mixkitの音楽の条件ではゲーム内の利用は認められていない一方、効果音の条件ではゲームを含む完成作品への利用が案内されている。同じサイトでも、素材の種類と使う場所で確認することが違う。
Mobbinや60fpsは、UIや動きを考える参考の入口になる。AI向けの公式連携も案内されているが、私の環境で導入・接続できたことはまだ確認していない。参考画面が見られることを、そのまま転載してよいという意味にはしない。
「見つけた」「気に入った」「今回の作品に使える」は、それぞれ確かめたいことだ。
次の制作では、小さく一周させたい
素材サイトを増やすことに加えて、必要な場面でそこへ戻れる流れを作りたい。
- 自分で眺める
画面や動きを眺めて好みを選ぶ
- 好みと用途を伝える
気に入った理由と使う場面を添える
- AIが思い出し、探す
制作の話に合う情報源と候補を出す
- 実装や作品で選ぶ
自分の目的に合うか確かめて採用する
- 使った理由を残す
出典と利用条件への参照も一緒に
残すのも、URLだけでは足りないかもしれない。何に使いたいのか、どこが気に入ったのか、採用したのか保留なのか。その一言があれば、次にAIへ相談するときにもつながる。
まずは一つの制作で試してみたい。候補探しが楽になったか、選びたいものが見つかったか。それを見てから、集める場所や自動化の範囲を考えていく。
納得できるUIが出てこないから、実例を見て選び、次の制作へ持ち込みたい。 その過程で得た情報を取りこぼさないためにも、AIには思い出すことと探すことを手伝ってもらいたい。
サービスの公式資料は2026年11月4日、一覧の公式リンクと用途は11月5日に確認。個別の契約や素材の条件は、採用する時点で確認する。この記事の調査・構成・文章整理には生成AIを利用している。