1. デザインの味付け
  2. #151/モーダルUIとテレビCMの..
#151/モーダルUIとテレビCMの共通点
2026-04-27 23:07

#151/モーダルUIとテレビCMの共通点

spotify

今回は「モーダルUIとテレビCMの共通点」をテーマに、代表の梅本@dubhunter とサービスデザイナーの神田淳生が話す回です。


一見遠い存在に思える「モーダルUI」と「テレビCM」。実はどちらもユーザーの文脈を遮断する、いわば「強制介入型」のコミュニケーションであるという共通点から、UXの本質に迫ります。ユーザーに嫌われない割り込み方と、心地よい体験の設計について語り尽くします。


番組のキーワード

モーダルUI, テレビCM, UXデザイン, ユーザー体験

感想

まだ感想はありません。最初の1件を書きましょう!

サマリー

今回のエピソードでは、モーダルUIとテレビCMの意外な共通点について掘り下げます。一見無関係に見えるこれら二つは、どちらもユーザーの文脈を遮断し、強制的に特定の情報や操作を促す「強制介入型」のコミュニケーションであるという点で共通しています。記事の閲覧中やアプリ使用中に突然表示される広告モーダルや、テレビ番組の途中に挿入されるCMのように、ユーザー体験を中断させるこれらの要素が、なぜ許容されているのか、その背景にあるユーザーと提供者間の暗黙の了解や、無料コンテンツ提供の対価としての広告の役割について考察します。また、モーダルUIの適切な使用場面と避けるべき場面についても解説し、UXデザインにおけるビジネスとユーザー体験の両立の重要性を説きます。

オープニングとテーマ紹介
デザインの味付け。
はい、始まりました。デザインの味付け。
この番組は、株式会社ajike代表の梅本と、 その仲間たちがデザインについて、
雑談を交えながら話す番組です。
今週は、タイトルコールをゲストの神田が務めております。
梅本さん、よろしくお願いします。
よろしくお願いします。
あれ?
なんか、ちょっと喋り方変じゃないですか。
バレましたか。
どうされたんですか。
矯正を始めました。
口が痛くて話せません。
もう、ラジオにとっても致命的な。
師匠を記者しております。申し訳ありません。
会議とかは大丈夫?
ニコニコだけしてます。
ニコニコだけ。
やっぱ口が痛いとすごく顔が曇っちゃうので、
気づけば顔が曇ってますが、
ニコニコするように頑張っております。
わかりました。
ちょっと梅本さんのいつもの喋り方と違いすぎて、 自分も笑ってしまうんですけど。
笑ってやってください。
よかったです。
お願いします。
今日のテーマは何でしょうか。
今日のテーマはモーダルUIとテレビCMの共通点 というテーマで話したいと思います。
こんな共通点ありますか。
モーダルのUIっていろんなところで使われていて、
設計者側からすると結構便利なコンポーネントですよね。
設計する側としては便利なので、 いろんなところで使うことも多いと思うんですけども、
一方で利用者側からすると、モーダルのUIって ストレスを感じるシーンがあったりとか、
そういうのがありまして、
そのストレスのかかり方みたいなのが テレビCMと似ているっていうところに気づきまして、
今日はそのテーマで話したいなと思いました。
なるほど、いいテーマですね。
モーダルUIとは何か?
ちなみにモーダルを知らない方もいらっしゃると思うので、 モーダルUIって何か説明いただいてもいいですか。
はい。モーダルのUIっていうのはですね、 今ちょっと言及しているものは、
アプリを使っているところとか、ウェブサイトを 使っているときとかを想像しながら聞いていただきたいんですけども、
あるボタンをクリックすると背景が暗くなって、 上に小さいウィンドウが重ねて表示されているあれです。
ウェブサイトとかアプリとかで たびたび目にすると思うんですけども、
モーダルっていうのはUIとしての特徴としては、 上にウィンドウが重なって表示されてくるので、
背景の操作っていうのが無効になりますと。
強制的にこのモーダルの中のコンテンツっていうのを確認させられて、 何か操作しないといけないっていうものですね。
元に戻ろうと思ったら、消すアクション。
右上によく×ボタンがあったりとか、 閉じるボタンが用意されてたりすると思うんですけども、
それが押して元に戻るっていう操作が必要になります。
このモーダルの適切な使い方みたいなっていうのが、 ある自分も見ていた記事で言及されていまして、
それもちょっと紹介したいんですが、 海外のこのEXデザイナーの記事を見たら、
モーダル表示が適しているUIシーンっていうのはすごく限られていると。
一つはこの破壊的なアクションっていうのがあって、
何かというと、何かキャンセルするとか削除する みたいなボタンを押したときに、
本当に削除しますかみたいな確認のモーダルが 入ることがあると思うんですけども、
ああいうシーンでは最後にもう一度ご操作防止みたいなところで、
もう一度念のため確認するっていうところですごく有効だと。
あとは短時間で完了する、警告を出したりとか、
そういうのもモーダル表示っていうのが 適しているっていうふうに言われています。
つまり、他の情報に目移りするっていうのを阻止して、
今はこれを見てくださいっていうようなときに モーダルを使うっていうのはすごく有効ですと。
そういうふうに海外の記事では言われてました。
うん。便利やもんね。
そうですね。
そして対応しすぎると使いづらくなるだろうから、 こういう確認のときとかがいいと言われがちですね。
はい。逆にこのモーダルを避けるべき場所としては、
例えばこのオンボーディングのUIとかですね。
あとエラーメッセージを出すUIとかですね。
そういうものはあんまり適切ではないっていうふうに言われてまして、
オンボーディングとかモーダル使われてるのって 見たりするじゃないですか。
なんですけども、あれはあんまり良くないらしいですね。
このUXデザイナーの記事なんで、
とてもユーザー側に立った言及だなというふうに思ってます。
こういう原則というか、こういうルールは守っていくことが大事なんですよっていうのは、
とても勉強になるんですけども、ただちょっと実際の生活に戻ってみると、
この他にも結構広く使われてるシーンっていうのはいっぱいあるなと思っています。
モーダルUIの具体的な使用例と広告モーダル
梅尾さんにもちょっと聞きたいんですけども、
実際にアプリとかサービス使ってて、
モーダルのUIどんな場面で使われてるか、何か思いつくのはありますか。
どんな場面か。
例えば振り込みとかやったら本当に振り込みますかっていう確認のときとか。
それは良さそうですね。
あとはメールを送るときとかで、メールを破棄するとか。
このときに本当に破棄しますかっていうメッセージも出ますし。
例えばスプレッドシートやったら、
編集中のときにリロードとか閉じるにしたら本当に閉じますか。
は見るかなっていう感じですかね。
確かに確かに。
もうちょっと他のも出していただきたいんですけど。
いやもう無理よ、俺。
しゃべるのが無理やから。
頭回ってないからね、今。
頭回ってない。それはもうしょうがないですね。
でも自分はですね、なんで今日このテーマにしたかと言いますと、
漫画アプリとかを見ていてですね、
ここにモーダルあるわっていうのがきっかけでこのテーマにしたんですけども。
なるほど。
自分がLINE漫画とかピッコマとかを使っていると、
アプリを開いたときに必ずモーダルで広告が出てくるんですよ。
ああ、そういうことね。
あとはメディア系のサイトとかでも、
記事を読んでいって次のページとかに遷移しようとしたときに、
間にこのモーダルの広告が挟まったりするんですよ。
ありますね。
ありますよね。
またそれが一回消しても2個目のモーダルがバッて出てきたりとか。
連続で表示されるみたいなそういうのがありまして、
さっきのこのUXデザイナーの記事からすると、
全然適切な使い方にはなってないと思うんで、
これ良くないっていうふうにも言えると思うんですけども、
ただ一方で、
ずっとそういう使われ方っていうのは結構何年もされていると思うんで、
成り立ってるとも言えると。
それがなんでなんやろうなっていうふうに思ったっていうのもあります。
なるほど。
広告モーダルが許容される理由:テレビCMとの比較
もう早速なんでなんで聞いていい?
自分がしゃべるターン極六今少なくしようとしてるから。
ほんまごめんな。
いい。
漫画のアプリとかメディアの記事とかで、
間に挟まってくる広告とか、
アプリを今からちょっと漫画読もうと思ったら、
まず広告を見させられるとか、
そういうのもあると思うんですけども、
なぜそれが許容されているのかっていうところの仮説です。
先ほどのユーザー中心で考えると、
適切ではないっていうふうには言えると思うんですけども、
世の中のサービスってユーザー中心だけで回ってるわけではないんで、
漫画のアプリとかで使われているモーダルの広告っていうのは、
無料でコンテンツをユーザー側は受け取れてますよね。
その対価として広告を見るっていうのは、
無意識的に合意されていて、
ユーザー側もそういう広告が表示されるっていうのは、
認識しているというか、そういうもんだというふうに思っている。
記事とか無料を漫画で見れる代わりに広告を見るっていう、
暗黙の了解があるっていうようなことなのかなというふうに思いました。
そういう意味では、
普段の地上波のテレビCMとかと似ているなと思っていまして、
テレビ番組とかも当然のように無料で見れますけれども、
その代わりに間々でCMが入るっていうことも許容しているというか、
暗黙の消費者側と事業者側の暗黙の了解みたいなのがあります。
コンテンツを見ている流れっていうのが途中で遮断されるじゃないですか。
もうモーダルって強制的なんで。
ここら辺のストレスっていうのはあるとは思うんですけども、
それも理解されていて、
体制がすでについているっていうのがあるのかなと。
なんでモーダルの広告っていうのは、
日本ならではなのかはちょっとわかんないんですけども、
結構いろんなシーンで現れてくると思うんですが、
ここら辺も結構許容されているのは、
今までのテレビ文化みたいなところからも来ているのかなと思いました。
コンテンツを無料で出し続けたら持続できないから、
当然お金の効果でみたいな話で出せば出そうと。
昔からもちろん言われてることではあるんですけど、
改めてなじみすぎて気づいてないこともあるよね。
そうですね。
もう漫画アプリとかネイティブの人とかは、
あんまりわかんないかもしれないんですけども、
自分とか漫画買ってた世代とかからすると、
アプリでめちゃめちゃ読めるじゃないですか。
無料でこんなに読めていいの?って思ってたときもあったんですけども。
そういう感覚は持っていて、
だからこんだけCMとか出たりしてても、
それはしょうがないよなって受け入れている面があるというか。
わかるわ。
そうですよね。
すごいですよね。
定着しちゃってますけれども、どんどんどんどん読めるというか。
広告ブロックとユーザー体験のバランス
最近おさらい話題になってたのは、
広告のブロックアプリがあるじゃないですか。
はいはい、ありますね。
あれがブロックしている経済効果がいくらなのかみたいなので、
いくらやったかな、8000億円とか800億円とか、
それぐらいで出たので、
広告主側というかコンテンツ提供側としてはめちゃくちゃ困るぞ。
ユーザー側からすると、
結構俺とかおっさんやから、
変な広告めっちゃ出るんですよ。
出ます出ます。
コンプレックスとエロかな。
ハゲとエロとみたいな。
ハゲとエロとデブとみたいな。
狙い撃ちされてる感じがあるんですけど、
あればっかり見たくないもんね。
見たくないです見たくないです。
もう気分が悪くなりますよね。
それを防ぐために、当然広告ブロック系のいろんなサービスあると思いますけど、
そうするとコンテンツを提供できないっていう問題のバランスが、
今どこに落ち着くのかなと思ってはみてますよね。
そうですね。
ああいうコンテンツを無料で享受しているみたいなところに対しての対価というところで、
一部納得しながら使ってる部分はあるんですけども、
やっぱり流れが遮断されたりとか、
あんまり自分の意思とか希望とかから外れるものが見ないといけないみたいなのは、
ストレスになるっていうのがあるんで、
それはどこまで、事業者側としてはどこまでユーザーに求めるのかとか、
どこまで見せるのかみたいなのは、
ちゃんと考えないといけないところかなと思いますし、
あとは利用目的があって、
このアプリを使ってるよみたいなところに関しては、
利用シーンが遮断されるみたいなところはすごく気をつけないといけないと思うんで、
むやみやたらにモーダルを出すみたいなのはやめたほうがいいっていうのは言えるかなと思ってます。
そうね。情報設計とか画面設計するときに、
広告とは別だけど、モーダルを減らそうってプロジェクトメンバーには言ってるもんね。
そうですね。便利なんで、結構使いがちですよね。
そうそう。モーダルの中でさらに遷移させるというか、次へ次へさせるみたいなのもあるんで。
ありますね。
まあ便利やけどちょっとやりすぎかなみたいなときも、設計段階であるよな。
そうですね。ありますし、自分もかなり前ですけども、
ラジオでも言ったことあるんですけども、
結構年配の方のセルフレジの操作を見てたときに、
モーダルで表示されているって言って、後ろが暗くなっていることにあんまり気づいてなくて、
頑張って背景側のボタンを押そうとしてるんだけれども、消せない。
店員さん呼ぶみたいな、そういうのも見たりしたんで、
設計者側は慣れてるんで、分かるでしょっていうのはあるかもしれないんですけども、
ユーザー側は意外と分かってなかったりとか、ストレスに大きく感じてるとかあるんで、少なくしたほうがいいですね。
ほんまそうやな。
そこらへんがまとめですね。
まとめ。確かに。
大きいUXデザインとかの文脈を入れると、
ユーザーの体験とビジネスの体験を両立させなきゃいけないっていうのが大前提あって、
その中でユーザー側のベネフィットと事業者側のベネフィットを考えた上で、
広告モデルをちゃんと出しましょうねみたいな話ですかね、今日は。
神田さんの近況:矯正と食事の苦労
そうですね。まとめありがとうございます。口痛いのに。
もうギリギリ。
みなさん、笑ってください。
ぜひコメントをいただきたいですね。
そうですね。痛いのに話してて、すごいとか頑張ってみたいな。そういうコメント待ってます。
むっちゃ笑ってたらもうお待ちしてます。
今日も帰っていただきましてありがとうございました。
ありがとうございました。
編集工期、お疲れさまでした。
はい、お疲れさまでした。
母の話していい?
ありがとうございます。母の話お願いします。みなさん気になってると思うんで。
気になるかよ。
気になってますよ、これ。何があったんやと思ってます。
そうですね。本当浅い理由で始めました。
ノリでいびきが出てくるようになって。
運動とかしてるんですけど、年に抗えないなと思って病院行ったりして。
C-PAPをするか、歯の調子は地味に効くんじゃないかみたいな。
これは定説ないですけど、言われているような感じですけど。
そしたらそっちやってみようかなみたいな。
C-PAPって器具つけて旅行とか行っても持っていかなあかんよね。
そうなんですか。
でもしょっちゅう多いじゃないですか。
確かに。
しょっちゅう毎回C-PAP持っていくのは無理やなと思って。
そっちに選んだんやけど。今までは2週間未満ですけど。
めちゃくちゃ痛いですね。
それはあれですよね。器具つけてること自体が痛いってわけではない。
口の中が痛んでるってことですか。
そうですね。器具つけると歯の締め付けで痛いっていうのはあるんですけど、
そっちよりも自分はワイヤーで口の中が口内炎いっぱいできてて今。
うわあ、痛そう。
飲み込むの大変やなと思ってます。いろいろ。
今日の夜の予定を教えていただいていいですか。
これ会食です。
会食やばい。
先週東京出張で2夜連続会食でした。
もう本当に大変じゃないですか、それは。
一番気合い入れて望まないといけない。
昨日は知人友人であるデザイン系のYouTubeやってる方と来た給食してくれて、
一緒にカレー食うに行って。
カレー危なそう。
肉全部揚げました。
もう噛めないんですか。
肉とか塊は噛めないですね、今。
あ、そうなんですか。
カレー屋も馴染みなんですけど、店長に大詫びして本当に申し訳ありませんって言って。
あ、そうなんですか。
肉を差し抜いてもらうかもしよければこちらに譲っていただくとかできますかみたいなことを言って。
チキンカレーのみの店やのにチキン食べないっていう。
あ、そうなんですね。すごいな。
ずっとそれが続くわけじゃないですよね。
ないとは聞いてますね。
やっぱり1ヶ月2ヶ月でようやく慣れてくるとは言ってましたけど、
最初はやっぱり1週間2週間しんどいっていう。
おー、なるほど。
今日は講座もあるんで。
そうさ。
このしゃべり方で何教えんねんみたいな。
そうですね。自分は梅干さんと付き合い長いんで、
初めてしゃべり方聞いたときめちゃめちゃ笑ってしまいましたけど。
皆さんどうなんですか?
めちゃくちゃ笑ってもらえるようにちゃんと言ってるよ。
笑ってやってください、ごめんなさいねみたいな。
神田さんはあれですもんね。俺としゃべったと動画検索したんですよね。
吉本新喜劇の芸人の諸見里に似てるなと思ったんで、
ついついあれどんなしゃべり方やったかなと思って、
YouTubeで検索して聞いてましたよ。
どこと比較しとんねん。
何のインスピレーションを受けとんねん。
いや、おもしろいですね。
すみません。たぶんしばらくこんな感じのしゃべり方かもしれませんし、
お聞き苦しいと思いますけど、
そこは私のパートナーの皆さんが頑張ってくれるのでご容赦ください。
ありがとうございました。
ありがとうございました。
23:07

コメント

スクロール