UIXHERO

意図的な摩擦 (Intentional Friction)

ユーザーの行動をあえて妨げ、立ち止まらせるデザイン手法。誤操作の防止、熟考の促進、確認のために戦略的に用いられる「良い摩擦」について。

2026年1月23日
更新: 2026年8月27日
8
by Dengen Yosho(DGYS)
意図的な摩擦 (Intentional Friction)

この記事の要点(UIXHERO視点) XHEROでは、意図的な摩擦を「暴走する効率性にブレーキをかける、安全弁」と捉える。 本記事では、ユーザーを守る「良い摩擦」と、企業のエゴを満たす「悪い摩擦(ダークパターン)」を峻別し、破壊的操作の前に置くべき“思考の段差”を整理する。

意図的な摩擦とは?

通常、は「摩擦(Friction)」を減らし、スムーズな体験を作ることを目指します。 しかし、意図的な摩擦(Intentional Friction)は、あえてユーザーのフローを一時停止させ、確認や思考を促すために戦略的に配置される障害です。

重要なデータを削除する前の「本当に削除しますか?」というダイアログや、高額決済前の2段階認証などがこれに当たります。

なぜ重要なのか

「スムーズすぎる」体験は、時に危険です。 ユーザーが無意識のうちに重要な操作(アカウント削除、全財産の送金など)を完了してしまうリスクがあるからです。 適度なは、システム2(熟慮的な思考)を呼び覚まし、ユーザーをミスから守ります。

良い摩擦 vs 悪い摩擦

良い摩擦 (Good Friction)

  • 目的: ユーザーの利益を守る。誤操作防止、セキュリティ向上。
  • : 「送信内容に『添付』とありますが、ファイルが添付されていません」という警告。

悪い摩擦 (Bad Friction / Dark Patterns)

  • 目的: 企業の利益を優先し、ユーザーを離脱させない。
  • : 退会手続きを意図的に複雑にする()、広告を消すボタンを極端に小さくする。これらは「ダークパターン」と呼ばれ、避けるべきです。

UXデザインでの活用事例

1. 破壊的な操作の確認

削除や初期化など、取り返しのつかない操作の前には必ず確認ステップを挟みます。 より慎重さを求める場合、「DELETE」と文字入力させることもあります。

2. コンテキストの切り替え

モードが変わる際(例:閲覧モードから編集モードへ)に摩擦を置くことで、誤ってデータを書き換えるのを防ぎます。

3. 教育的な摩擦

新機能の導入時に、あえてチュートリアルを強制表示させ、正しく理解してから使ってもらう手法です(ただし、乱用は禁物)。

実装例: 破壊的操作に対する「良い摩擦」

重要なボタンを押した際に、即座に実行せず、ワンアクション(確認スライドやダイアログ)を要求するパターンです。

この原則を実装で見る

この原則が実装でどう形になるかを、GUNJO の部品で確かめられます。

倫理的配慮 (Ethical Considerations)

  • 摩擦の正当性: その摩擦は本当に「ユーザーのため」ですか?解約防止や、メルマガ登録数の維持など、企業都合の数字のために摩擦を導入していないか自問してください。
  • アクセシビリティ: 摩擦(など)が、キーボード操作やスクリーンリーダー利用者にとってもアクセス可能であり、かつ抜け出し可能であることを確認してください。

実装チェックリスト

更新のお知らせ

サイトに載せていない実例や、新しい記事のお知らせはこちらで出しています。

読んだ内容を、自分の画面に当てるとき

UIXHEROは、記事を書くほかに、画面の検品・判定、デザインシステムの構築、実装と改善の伴走を受けています。何を頼めばいいか決まっていない段階の相談も、同じ窓口で受けます。

UIXHEROに頼めることを見る

※ 記事の内容についての質問や、書いてほしいテーマの要望も同じ窓口で受けています

関連する用語 (Glossary)

参考文献

  • Krug, S. (2014). Don't Make Me Think, Revisited: A Common Sense Approach to Web Usability. New Riders. Amazon
  • Kahneman, D. (2011). Thinking, Fast and Slow. Farrar, Straus and Giroux. Amazon
  • Brignull, H. (2011). ": Deception vs. Honesty in UI Design."A List Apart. Deceptive Design (formerly Dark Patterns)

記事をシェア

メールでお知らせを受け取る

最終更新: 2026年8月27日

この記事を書いた人

Dengen Yosho(DGYS)

Dengen Yosho(DGYS)

UI/UXデザイナー兼デザインエンジニア デザイン歴25年以上 情報設計〜UIデザイン〜React/TypeScriptによる実装までを一気通貫で担当 大手企業のDXプロジェクトや決済アプリ領域で、デザインリードとして改善と構築を経験 現在はフリーランスとして、プロダクトのUI/UX改善とデザインシステム構築を支援 長年の実務の中で感じてきたのは、 「良いUI」はセンスではなく、再現可能な判断の積み重ねであるということ UIXHEROは、 心理学や行動科学の知見を、現場で使える設計言語に翻訳するための場所 関心領域は「ユーザーの行動が変わるUI」 人の認知・注意・意思決定の構造を理解し、 “なぜそのUIが機能するのか”を言語化することを目指している

あわせて読みたい

この記事に関連する記事をご紹介します

制約 (Constraints)

ユーザーのエラーを防ぐために、あえて操作の選択肢を制限するデザイン原則。物理的、論理的、文化的な制約を活用し、正しい操作へと誘導する。

2026年1月23日
5

Progressive Disclosureとは?段階的開示の意味とUX設計

Progressive Disclosure(段階的開示)とは、最初に基本情報だけを見せ、必要なタイミングで詳細を開示するUX設計手法です。認知負荷、情報の匂い、アコーディオンとの違いを解説します。

2026年1月23日
10

アフォーダンス (Affordance)

対象物が持つ「操作の可能性」を示唆する性質。ボタンが「押せる」ように見える、ドアノブが「回せる」ように見えるなど、ユーザーが直感的に使い方を理解するための核心的概念。

2026年1月23日
6

もっと深く知りたいですか?

ここに掲載されていないトピックについても、リクエストがあれば解説記事を追加します。 わかりにくい点や、具体的な事例について知りたいことがあれば教えてください。

リクエストを送る