「AIでアプリ作ってるのに、なんで自分のだけダサいんだ…」
もしそう思ったことがあるなら、原因は才能じゃありません。デザインを"言葉"で頼んでいるからです。
断言します。
これは能力の問題ではありません。
「渡し方」の問題です。
※この記事は保存推奨です。
多くの人が、AIにこう頼んでいます。
「かっこいいデザインにして」
「モダンでおしゃれな感じで」
「今っぽいUIで」。
でも、返ってくるのはいつも無難でふわっとしたUI。
それをまた言葉で直そうとして、沼にハマる。
その繰り返し。
僕もそうでした。
僕が「足元がスッと冷たくなった」日
3ヶ月前、Claude Codeで自分用のタスク管理アプリを作りました。
機能はちゃんと動く。
でも画面を開いた瞬間、こう思いました。
「うわ、なんか2010年の社内システムっぽい…」。
ボタンはやたら角ばってる。
余白はガタガタ。
色は謎の青。
動くのに、人に見せたくない。
足元がスッと冷たくなりました。
「ダサいだけで一気に素人っぽく見えるんだ」。
そう痛感しました。
正直に言います。
当時の僕の頼み方は恥ずかしいものでした。
「Appleみたいな洗練された雰囲気で」。
自分でも何を指してるか分かってない抽象ワードを、ただ並べてただけ。
AIからしたら「かっこいい」の基準がない。
だから毎回、無難なUIしか返ってこなかった。
その気持ち、よく分かります。
言葉を尽くせば伝わるはず、と信じてしまうんですよね。
でも、それが沼の入口でした。
リンク1本で、脱力した
転換点は、あるサイトを知ったことでした。
Mobbin（モビン）です。
実際にリリースされているアプリのUIを、大量に見られるサイト。
Uber EatsもNetflixも見られます。
しかもログイン画面、ホーム画面、決済画面と、機能ごとに検索できる。
ここに出てるのは、海外のガチのデザイナーが作った本物です。
先に言っておくと、これは"丸パクり"ではありません。プロが必ずやる"参考（リファレンス）"の技術です。真似るのは、色でもロゴでもなく、"レイアウトの考え方"だけ。
初めて、Netflixのホーム画面のリンクを貼って「このデザインを参考に作って」と投げたとき。
あの黒背景に、映画のサムネがずらっと並ぶ、あの画面です。
出てきた画面を見て、思わず声が出ました。
「え、いきなりこれ？」。
自分のアプリなのに、Netflixのあの高級感がそのまま宿ってた。
何十回と言葉でお願いしても届かなかったクオリティが、リンク1本で一発。
嬉しさより先に、脱力しました。
「今まで俺が悩んでた時間、何だったんだ…」。
数字で言います。
デザインで悩む時間 → 毎回2時間から10分に。
作り直しの回数 → 5回から1回に。
しかも出来上がりのレベルは前より圧倒的に上。
悩む時間が減って、質が上がる。完全に逆転現象が起きました。
本編｜Mobbin活用の実務テンプレ
ここから具体的な手順です。
やることは「仕様書ドキュメントを1枚用意して、そこにMobbinのリンクを貼る」。
これをClaude Codeに読ませて作らせるだけ。
プロンプト例はこちらです。
1# アプリ概要2- アプリ名: MyFit3- 一言でいうと: 筋トレの記録をサクッと残せるアプリ4- ターゲット: 週2〜3で筋トレする20〜30代56# 主な機能7- ログイン / 新規登録8- ホーム（今日のメニュー表示）9- トレーニング記録の入力10- 履歴・グラフで進捗確認11- プロフィール / 設定1213# デザインの参考14以下のアプリのUIを参考にしてください。15トンマナ・余白・配色・フォントの使い方をこのレベルに寄せてほしいです。16- 全体の雰囲気: （Mobbinのリンク）17- ログイン画面: （Mobbinのリンク）18- ホーム画面: （Mobbinのリンク）1920# お願い21まずは上記を踏まえたデザインの方針を提案してから、実装に入ってください。
効果：AIが「何を、どのレベルで作るか」を最初から共有できる。ふわっとした結果が消えます。
精度を段違いにする、3つのコツ
- リンクは画面ごとに分けて貼る
1本だけで済ませない。
Mobbinは機能ごとに検索できます。
「ログインはこれ」「ホームはこれ」と分けて渡す。
効果：一括で1本渡すより、精度が段違いになります。
- 「何を真似てほしいか」を言葉で添える
リンクを貼るだけだと、色だけ拾ったりします。
だから明記する。
指示例：「余白の取り方、配色、フォントの使い方を参考にして」。
効果：AIが見るべきポイントを外さなくなります。
- いきなり作らせず「まず方針を提案して」と挟む
一回、方向性を合わせる。
指示例：「実装前に、デザインの方針を提案してください」。
効果：後の作り直しがほぼ消えます。
「それってパクリじゃない？」への答え
この手法を勧めると、正直よく言われます。
「著作権的に大丈夫なの？」と。
その不安、よく分かります。
ここは分けて考えてください。
◯ 参考にしていいもの（デザインの"作法"）
・レイアウトの型
・余白の取り方
・配色の考え方
✕ 持ってきてはいけないもの（企業固有の資産）
・ロゴ／ブランド名
・写真／アイコン
・キャッチコピー
その企業固有の資産をそのまま持ってくるのはNG。
そこは自分のアプリのものに置き換える。
UIの定石やレイアウトのパターン自体は、業界全体で共有されている"型"です。
型を参考にするのは、ごく普通のこと。
心配なら、AIに一言添えてください。
指示例：「構造は参考にしつつ、配色とロゴは自分のブランドに変えて」。
これでまるごとコピーにはなりません。
初心者がハマる、3つの落とし穴
落とし穴1｜リンクを貼っただけで満足する
AIはリンク先の"どこ"を見ればいいか分かりません。
「この余白感を真似て」「このトーンで」と補足しないと、ぼんやりした結果になります。
落とし穴2｜参考を詰め込みすぎる
全然違うテイストを何個も渡すと、AIが平均を取りにいきます。
結果、どれにも似てない中途半端なものが出てくる。
テイストは1〜2個に絞るのがコツ。
落とし穴3｜一発で完璧を期待する
1回目で型が出たら、同じ参考を見せながら微調整する。
指示例：「ここの余白もう少し広げて」「ボタンをこのリンクの形に寄せて」。
この2〜3往復で、一気にプロっぽくなります。
「そっくりにならない」と諦める人の多くは、この詰めの往復をやってないだけです。
Mobbinは無料で使える？
「じゃあ今すぐ開こう」と思った人へ、料金を正直に補足します。
Mobbinは無料アカウントを作れば（クレジットカード不要で）使い始められます。閲覧には無料登録が必要です。
結論、今日やる分は無料で十分すぎます。
無料登録で、いますぐNetflixもUber EatsもUIを見られる。
気になった画面のリンクをコピーしてAIに渡す。
今回のやり方は、これで全部回せます。
もっと使い込みたくなったら、そのときProを検討すればいい。
参考までに、無料での主な制限はこの4つです。
・見られるのは最近追加されたアプリ中心（全ライブラリはPro）
・「フロー」機能は無料だと大きく制限される
・複数画面の一括ダウンロードはPro
・コレクション保存は3つまで
どれも「ハマった後」に効いてくる話。
まずは0円で、1画面を貼ってみてください。
本格的に使い込みたくなったら、有料のProプラン（月$10前後・年払い）で解放される。
そういう段階の話です。
まずは無料で触ってみる。
物足りなくなったら有料を検討。
その温度感が正解です。
上手い人とそうでない人を分ける、たった一つの差
ここまで読んで気づいた人もいるはずです。
差は「作る力」ではありません。
「見つける力」です。
一流のデザイナーが作った本物が、ネット上にいくらでも転がっている。
ゼロから捻り出す必要なんてない。
良いものを見つけて、AIに渡すだけ。
あなたが「後でやろう」とこのページを閉じる今この瞬間も、これを読んだ誰かはMobbinを開いています。
Netflix級の画面を、AIに渡している。
明日には、その人のアプリがタイムラインに流れてくる。
差はセンスじゃない。
この10分を、動くか動かないかです。
デザインセンスは、才能ではありません。
良いお手本を「見つけて渡す」という、誰でもできる"行動"です。
まとめ
- 悩む時間は「2時間 → 10分」。作り直しは「5回 → 1回」。
- カギは、参考画面を機能ごとに分けて渡し「何を真似るか」を言葉で添えること。
- 一発完璧を狙わず、同じ参考を見せながら2〜3往復で詰める。
長い説明はいりません。やることは1つだけ。
Mobbinを開いて、好きなアプリの画面を1つ選び、そのリンクをAIに貼る。
それだけで、2時間悩んでいた画面が10分で出ます。
0個で終わる人と、まず1個やる人。
あなたはどちらになりますか。
センスは、もう要らない。
次にあなたがアプリを見せたとき、相手は画面をのぞき込んでこう言います。
「え、これNetflixのやつ…？ 自作なの…？」。
必要なのは、才能じゃない。今日開くMobbinのタブ、たった1つです。
最後に
AI活用の「知ってるだけで差がつく」やり方を発信しています。
置いていかれる差は、今日から埋められます。
そして、ひとつだけ。
この記事で書いたようなAIの使い方を、「読んで終わり」にしないために、
いま期間限定で、超豪華32大特典を無料で配っています。
特典の概要は以下の通り。
・ChatGPT / Claude Code / Codex / Gemini 完全ガイド
・月100万稼ぐAI副業ロードマップ・稼げるジャンルマップ・単価表・相場データ
・AI動画生成・AIエージェント・バイブコーディングなど実践ガイド
・AI活用事例100選 など...
合計32点、総860ページ超。しかも全部、無料です。
セミナーや無料個別相談に参加しなくても、全部もらえます。
嘘みたいな話ですよね。でも、本当です。
受け取り方は、シンプルです。
下のLINEオープンチャットに入るところからです。
ここから入れます。
ただし、この超豪華32大特典は期間限定です。
締め切りは決めていませんが、終わるときは予告なく終わります。
「明日やろう」は、ほぼ全員が忘れます。今のうちに受け取っておいてください。
もう一度だけ、言わせてください。
AIで稼げるかどうかは、才能では決まりません。正しい順番で学べるかどうかです。
その順番は、この32個の特典に全部あります。
