CMのスマホ画面、よく観察したことはありますか？

突然ですが、皆さんは通勤中の電車内やYouTube広告などで流れる「アプリのCM」を、じっくり観察したことはありますか？スマートフォンの画面の中で軽快に操作される、SaaSの管理画面やフィンテックアプリの送金シーン。とても洗練されていて、直感的に使いやすそうに見えますよね。

プロダクトデザイナーという職業柄、私はどうしても画面に映し出されるUIに注目する癖があるのですが、普段から観察していると「あること」に気がつきました。

それは、「実際にリリースされているサービスのUIとは違い、CM用にカスタマイズされている」ということです。

目を凝らしてみると、フリマアプリの商品リストにあるはずの情報がかなりシンプルになっていたり、アイコンが極端に簡略化された図形に置き換えられていたりします。あるいは、現実のアプリには必ず存在するはずのStatus bar（時計やバッテリー表示）が、きれいさっぱり消えていることも珍しくありません。

本物のプロダクトは既に存在しているはずなのに、なぜ企業はわざわざ広告のために、デフォルメされたUIを作り直すのでしょうか？

おそらく、本物のUIが「ユーザーがタスクを完了するための道具」だとするなら、広告の中のUIは、「プロダクトの価値を一瞬で伝えるための翻訳装置」としての役割を担っているからではないかと考えられます。

この記事では、そんな広告やプロモーション媒体の中にだけ存在する、“あえて”再構成されたUIを「UIサンプル」（食品サンプルのようなイメージで命名しました）と呼び、事例と共にそのデザイン意図を考察していきたいと思います。

映像広告という短時間で価値を訴求する媒体のために、どのようなデフォルメを行っているのか。そこにはどんな意図や願いが込められているのか。 「情報を減らすことで、価値を際立たせる」という、コミュニケーションデザインの妙が隠されているかもしれません。

ぜひ、実際のUIと比べながら読んでいただけると幸いです。

事例1：Uber Taxi──「どんなアプリなのか？」を伝える要素を確実に配置する

まずは、Uber TaxiのCMを見てみましょう。0:25あたり、ピンクのキャラクターが広告を見てアプリで配車をしようとしている場面にご注目ください。

出典：Uber『タクシーがつかまらないとき編 | Uber』（https://www.youtube.com/watch?v=AzzIH7nvu-A ）

たった数秒のシーンですが、そこには配車アプリとしてのMVPを伝えるシンプルな「UIサンプル」が映し出されます。画面にある情報は以下の通りです。

• 近辺のマップと乗車地点のピン
• 送迎に向かっている車の位置を知らせるアイコン
• 乗車地点とタクシーの距離
• Uber Taxiのサービスロゴ
• 運転者と車の情報

短いシーンですが、サービスロゴを大きく掲載することで名前を訴求し、マップ・ピン・車・距離といった必要最小限の情報に絞ることで、「配車に関するスムーズな利用体験」を訴求しています。

面白いのが、このUIサンプルにはアクションの導線がどこにもないことです。 戻るためのシェブロンアイコンもなければ、詳細を確認するための導線も削ぎ落とされています。実際に使うとなると、おそらくこの画面からはどこへも行けません。 それでも、数秒の間で理想の体験を届けるために必要な要素を大きく表示し、価値訴求に繋げているのです。

事例2：iAEON（アイイオン）──会員バーコードとロゴをメインに、誰にでも伝わる要素で再構成する

続いて、iAEON（アイイオン）のCMです。0:03あたり、デバイスを持った山田孝之さんがこちらを凝視しているシーンを見てみましょう。

出典：イオンカード【公式】『【山田孝之×横浜流星】イオンカード　ヒーロー篇』（https://www.youtube.com/watch?v=uSxv-FCu6e8）

先ほどのUber Taxiよりもさらに情報を削り、このUIサンプルでは「サービスのロゴ」と「バーコード」の2つのみが掲載されています。 あまりにシンプルな構成のため、不安になって再度実際のアプリを確認しにいってしまったほどです（笑）。（※実際のアプリではチャージ払いやポイント利用などの機能が充実していました）

iAEONのUIサンプルも、サービスロゴが一番大きな情報として配置されています。俳優さんの顔と共にロゴを映し出すことで、閲覧してもらえる確率が高まります（デバイスが顔と同じ高さまで上げられているのもポイントですね） 。この構図とUIサンプルは、一枚絵として切り出しても訴求力の強い絵作りを目指していると考えられます。

また、生活インフラとなる事業では、老若男女が幅広く利用するサービスとして設計する必要があります。 アプリに慣れていない層も使うことが予想される場合、「バーコードを見せるだけで支払いができる」という価値と認知、そして「バーコードの画面にたどり着ければ使える」という勘所を知ってもらうことが重要です。

かなり攻めたデフォルメですが、これくらいシンプルな方が記憶に残りやすいのかもしれません。

事例3：Paidy──サービス名と利用体験を明確に認知させる、シンプルな価値訴求

続いて、PaidyのCMを見てみましょう。0:01、開口一番で菊池風磨さんが手をかざしながらデバイスを持っているシーンです。

出典：Paidy『【菊池風磨さん出演】ちょっといいお買い物、どう払う？｜ペイディCM』（https://www.youtube.com/watch?v=cBZfGogQ5Xg）

ここまで来るとパターンが見えてきました。こちらのUIサンプルにもロゴと商品が掲載されています。やはり、広告という性質上、サービスを覚えてもらうためにロゴを大きく掲載するのは必須条件のようです。

そしてPaidyのUIサンプルでは、これまでの事例にはなかった「ボタン」が登場しています！ プライマリーボタンのようなスタイルで「ペイディで購入」と書かれた大きなボタン。 実際には、商品ページ遷移後に支払い方法をPaidyに設定するという流れになるはずなので、実際の操作とは異なります。しかし、「ペイディで支払う」というイメージの訴求に一役買っている構成ではないでしょうか。

さらに、ロゴはアルファベットなのに対し、ボタンはカタカナ表記になっています。ロゴだけでは伝わらない「読み方」までもクリアにする、非常にていねいなUIサンプルです （スマホカバーがパープルで統一されている点にも、抜かりないディレクションを感じます）。

事例4：Amazon──UIサンプルの金字塔。Amazonの洗練された「情報の抽象化」

続いて、Amazon PrimeのCMです。0:08や0:21で登場する「お急ぎ便」の注文UIにご注目ください。

出典：Amazon Japan Official『Amazon プライムCM: One Prime 「ラーメンプログラマー」 篇』（https://www.youtube.com/watch?v=rxMnmlkVIv4）

例に漏れず、こちらもサービスロゴが一番大きく、青い色面の上に載せられているため画面内で最も目立ちます。ロゴとブランドカラーを覚えてもらうためのこだわりを感じます。

肝心の操作部分ですが、こちらのUIサンプルには「お急ぎ便」と書かれたボタンが配置されています。 機能の名称のみを採用したシンプルなラベリングです。商品のテーブルには値段なども書かれておらず、「次の日に届く」というCMの意図を伝えることに特化したUIサンプルと考えられます。Status barなども表示されていませんね。

また、21秒からの場面では赤いライトに照らされてデバイスの縁が赤くなります。 UIサンプルのメインカラーである「青」の補色関係に近い、褐色〜赤色などの色相を周囲に使うことで、さらに青色が際立ちUIに目が行くようになっています。 前半は白いライトでなじみよく訴求し、後半は色彩の対比を使う。AmazonさんのUIサンプルは非常にテクニカルで高度だと言えます。

事例5：助太刀──着ぐるみになることを想定した、高度な平面構成

最後に、助太刀のCMを見てみましょう。0:02で急に現れる、UIサンプルを“着た”長州力さんに注目です。

出典：oricon『長州力、スマートフォンになって職探しのサービスを開始！？　建設業界マッチングサービス「助太刀」新CM』（https://www.youtube.com/watch?v=XAP7BTsFvYk ）

こちらのUIサンプルは、これまでとは少し違う点がいくつかあります。 まずサービスロゴがありません。そして画面上部にはStatus barが配置されています。要素もこれまでのものより多く、比較すると一番操作をイメージできる「リアルなUIサンプル」です。デフォルメ具合で言えば一番控えめかもしれません。

面白いのは、“着るUIサンプル”として、長州力さんが顔をはめる場所に余白が設けられている点です。 建設会社の名前も大きく配置され、メリハリがついています。実際のUI設計では、長い名称が入るケースを考慮してここまで大きくはできませんし、顔が入るための余白も、実際のUIでは「もったいないスペース」になるため採用しづらいでしょう。

その点で見ると、パッと見は一番リアルさを感じさせつつも、これまでの事例にはなかった「“着る”ための考慮」がなされた素晴らしいUIサンプルです。 長州力さんも、スマホをとても上手に着こなしています。

「一番伝えたい情報」だけを残す勇気

広告における「UIサンプル」の世界、いかがでしたか？

当初、私が抱いた「実際のUIと違う」という違和感。しかし、その正体は「嘘」や「偽物」ではありません。それは、限られた時間の中でプロダクトの魅力を最大限に届けるための、徹底的な「情報の引き算」であり、計算された「演出」だったのです。

私たちデザイナーや作り手は、日々の業務において、どうしても「機能の正確さ」や「情報の網羅性」に囚われてしまいがちです。もちろん、積み上げた緻密なUIは道具としては正解です。けれど、まだそのプロダクトを知らない誰かにとって、その緻密さは時として「ノイズ」になり得ます。

「UIサンプル」のアプローチが教えてくれるのは、「本当に伝えたい価値は何なのか？」という問いです。複雑な情報をあえて削り、たった一つのボタンだけを鮮やかに光らせる。その潔さこそが、ユーザーに「簡単そうだ」「使ってみたい」という感情を抱かせるのかもしれません。

2025年、私たちの手元のデバイスには、かつてないほど膨大な情報が溢れています。 だからこそ、情報を足していくのではなく、削ぎ落とすことで本質を際立たせる。そんな「翻訳者」としての視点を持つことが、これからのデザインにはより一層求められているのではないでしょうか。広告で扱われているUIサンプルから、日々のプロダクトデザインにも生かせるような考え方が見つかるような気がします。

もし今度、街中で洗練されたアプリのCMを見かけたら、ぜひ画面の中身に目を凝らしてみてください。 そこには、本物のUI以上に、そのプロダクトが目指したかった理想の体験が描かれているはずです。

お知らせ：2025年アドベントカレンダー開催中🎄

この記事は、Goodpatch Design Advent Calendar 2025 Day5の記事です。他の記事もぜひどうぞ。

また、エンジニアも参加しているGoodpatch Advent Calendar 2025も開催中！そちらも併せてご覧ください！

・
・
・

supported by notty