Javascriptの設定を有効にしてください。お使いのブラウザはJavaScriptをサポートしていないか、JavaScriptの設定が無効になっています。このサイトでは、JavaScriptを使用しています。すべての機能をご利用希望の方は、JavaScriptを有効にしてください。 演劇理論「異化効果」から学ぶ、大事なことが目立つUIの作り方【前編】 - COLOR CHIPS Webシステム・ITサービス コラム

L O A D I N G

演劇理論「異化効果」から学ぶ、大事なことが目立つUIの作り方【前編】

  • Webシステム
  • Today I Learned

2026.06.26

執筆者

M.N.

ドイツ文学からの理論と考察 1

私は、大学でドイツ文学を専攻していました。

ブレヒトの『三文オペラ』を読んだのはたしか3年生のときだったと思います。
最初は「なんか変な演劇だな」という感想しかなかったのですが、「異化効果(Verfremdungseffekt)」という概念を学んでから、見方がガラッと変わりました。

今回はそのブレヒトの理論をUIデザインに繋げて、「大事なことが目立つUI」について考えてみたいと思います。


ブレヒトと『三文オペラ』について

まず、ブレヒトと『三文オペラ』について少し補足しておきます。
ベルトルト・ブレヒト(1898〜1956)は20世紀のドイツを代表する劇作家・詩人です。

ワイマール共和国時代のベルリンで活躍し、のちにナチスの台頭を受けてアメリカへ亡命。演劇に対する独自の理論と実践で、現代演劇に多大な影響を与えた人物です。

『三文オペラ』は1928年に初演された作品で、クルト・ヴァイルが音楽を担当した音楽劇です。
元はジョン・ゲイの『乞食オペラ』をもとにしており、19世紀ロンドンの暗黒街を舞台に、盗賊の親分マック・ザ・ナイフと、乞食商会の社長ピーチャムが繰り広げる話です。

「銀行を作ることと、銀行を襲うことの違いはなんだ?」というセリフが象徴するように、当時の資本主義社会への痛烈な風刺が込められています。
初演は大ヒットとなり、劇中歌「マック・ザ・ナイフ」は後年ルイ・アームストロングやフランク・シナトラにもカバーされるほど有名になりました。

ちなみに何度も映画化されており、映像作品としても楽しめます。

 

ドイツ文学からの理論と考察 2

異化効果(Verfremdungseffekt)とは

◆ブレヒトが問題にしたこと

ブレヒトが問題にしたのは、観客が舞台に「没入しすぎること」でした。

普通の演劇では、観客は物語に引き込まれ、主人公と感情を共有します。

それ自体は悪いことではないのですが、ブレヒトから見ると「没入しているあいだ、観客は考えることをやめている」状態でした。彼が目指したのは、観客を感動させることではなく考えさせることだったのです。

◆異化効果とは

そこで生まれたのが異化効果(Verfremdungseffekt)です。ドイツ語の「fremd(異質な、見知らぬ)」に由来するこの言葉は、「慣れ親しんだものを、あえて見知らぬものとして提示する技法」と言い換えられます。

具体的には、こんな演出を使います。
・俳優が突然、客席に向けて語りかける
・場面転換を隠さず、幕を張ったまま俳優が登場する
・字幕やスクリーンで説明を差し込む

特に最後のネタバレ演出は印象的です。

「メッキーは娼婦たちに裏切られたが、別の女の愛で監獄から解放される」という予告が幕間に流れます。
「え、そんなこと言っていいの?」と思いますが、これが意図的な仕掛けです。

ストーリーがどうなるかを先に知ることで、観客は「結末を追いかける」モードから外れ、「登場人物がなぜそう行動するのか」「この社会構造はどうなっているのか」という批判的な目で舞台を見るようになる。
ブレヒトはそれを狙っていたわけです。

異化効果とは、一言で言えば「没入を意図的に妨げることで、思考を促す」技法です。
「異化」という言葉は耳慣れないかもしれませんが、「同化」という言葉の対義語と考えると馴染みやすいかもしれません。

 

UIについての考察

UIにおける「慣れ」の問題

さて、ここからエンジニアっぽい話をします。

ユーザーは使い慣れたUIに対して、驚くほど鈍感になっていきます。

毎日クリックしている「保存」ボタンは、そのうち視界に入らなくなります。ダッシュボードに赤いバッジがあっても「どうせいつものやつ」と判断して、無意識に読み飛ばします。
通知が積み上がっていても、その存在ごとノイズとして処理されます。

これはバナーブラインドネスと呼ばれることもあります。広告がいつも同じ場所にあるから目に入らなくなる、あの現象です。UIでも同じことが起きます。

人間の認知は「変わらないもの」を意識的に処理するのをやめていきます。省エネとして理にかなっているのですが、UIとしては困ります。

✓ 「重要な警告が赤字でされているのに、見慣れてしまって気づかなかった」

✓ 「大事な処理の前に『本当に実行しますか?』という確認が出るのに惰性で進めるボタンを押してしまった」

こういった経験のある方は、結構おられるのではないでしょうか。


「目立たせる」の誤解

重要なことを目立たせようとすると、多くの場合「もっと大きく」「もっと赤く」「もっと点滅させよう」という方向に走りがちです。

ただ、
これには落とし穴があって、強調が多すぎると全体が「強調されていない状態」と区別がつかなくなります。

全部太字のドキュメントを見たことはないでしょうか。
何が重要なのか、逆にまったくわからなくなります。あれと同じです。

◆ブレヒトの異化効果との対応

これはブレヒトの異化効果とも対応しています。
『三文オペラ』の演出が効くのは、「普通の場面」があるからこそです。
舞台全体が異化しっぱなしだったら、それはもはや普通になってしまいます。
✓ 「普通」があるからこそ、「違和感」が際立つ。

◆UIへの示唆

UIも同じで、統一感のあるデザインシステムを持つことが、重要な部分を目立たせるための前提条件になっています。
✓ 具体的な実装アイデアは後編でまとめます。

この記事に関連するColorChipsのサービス

BUSINESS

システム開発

業務効率化の答えはここに。
下町が誇る業務システムソリューション

COLOR CHIPS のWebシステム開発部では、業務効率化やDX推進を支援するシステムの受託開発を行っています。業務フローの見える化やシステム導入支援、運用まで一貫して対応し、企業ごとの課題に合わせた最適なソリューションを提供しています。

VIEW MORE

ITサービス

お客様のシステム運用をサポートし、
長期安定稼動のお手伝いをします

COLOR CHIPS の技術者がお客様の社内に常駐し、お客様システムの監視や運用などの各種サポート業務を行います。
お客様の社内で密接な関係を築きながら業務を行うことでより迅速に、かつご要望に添ったサービスをご提供しています。

技術開発

COLOR CHIPS 先端技術開発ラボ
先端技術で業務をより効率的に!

COLOR CHIPS の研究開発部門は、AI解析、クラウド/スマホアプリ開発、IoT・ウェアラブル機器など、多岐にわたる先端技術に挑戦するラボです。知識と好奇心を武器に、新たなソリューション創出を目指し、未来を切り拓く技術革新に取り組んでいます。

VIEW MORE

オリジナルデザイン時計

NEW COLORS
オリジナル腕時計製作について

NEW COLORSは、20年以上の実績を持つオリジナル腕時計製作の専門ブランドです。卒業記念品や周年記念、ノベルティ、OEMまで目的に応じたデザイン・仕様で対応。初心者でも安心の制作サポートや、ペットの写真から作る「うちの仔オリジナルクロック」など、心に残る記念品づくりをお手伝いします。

VIEW MORE

お問い合わせ
CONTACT

記事にある技術に関するお問い合わせなどは
こちらのフォームからおねがいいたします。

TOP