モーダル・ダイアログ・ドロワーの違いとは何かを明確に理解する

目次
モーダル・ダイアログ・ドロワーの違いとは何かを明確に理解する
現代のWebやアプリケーション開発では、ユーザーインターフェース(UI)の品質が体験全体を左右します。その中でも「モーダル」「ダイアログ」「ドロワー」といったコンポーネントは、情報提示やユーザー操作のガイドとして重要な役割を担っています。しかし、それぞれの用語は混同されやすく、明確な使い分けがなされていない場面もしばしば見受けられます。本セクションでは、これら3つのUIコンポーネントの違いを整理し、明確な定義と使い分けの基準を提示します。視認性、ユーザーの操作の流れ、意図されたアクションとの一致性など、多角的な視点からUIの最適化を目指しましょう。
UIコンポーネントとしての役割と意味を正しく把握する
モーダル・ダイアログ・ドロワーはすべてUIの構成要素として使われますが、その役割と意味合いは異なります。モーダルは主に画面全体をブロックし、特定の操作を強制する用途に使われます。ダイアログは軽量で、確認や通知などの短いやり取りに最適です。ドロワーはサイドメニューやオプション一覧など、非表示の情報を一時的に表示するために活用されます。それぞれが適切に使われることで、ユーザーにとって自然な流れで操作が行えるUIが構築されます。役割の違いを正しく理解することは、ユーザー体験を改善する第一歩です。
混同されがちな用語の違いを比較形式で解説する
モーダル・ダイアログ・ドロワーは見た目や動きが似ているため、初心者はもちろん経験者でも混同しがちです。たとえば、ダイアログとモーダルの違いはブロッキングの有無にあります。モーダルは操作を一時停止させるのに対し、ダイアログは補助的な通知や選択肢を提示します。ドロワーは多くの場合、サイドからスライドして現れ、ページ遷移を伴わずに情報を展開します。このように、動作とUI目的を基準に3者を比較することで、設計時にどれを選ぶべきか判断しやすくなります。
ユーザー体験に与える影響を理解して選定する重要性
どのUIを選択するかによって、ユーザーの体験は大きく変わります。たとえばモーダルは、ユーザーの注意を一時的に集中させる反面、誤用すると操作の妨げになります。ダイアログは控えめな存在ですが、適切に使えばスムーズな確認・承諾プロセスを構築できます。ドロワーは情報を整理して格納するのに適しており、複雑なナビゲーションにも強みを持ちます。これらの特性を理解しないまま実装すると、ユーザーの混乱を招き、コンバージョンの低下や離脱の原因にもなり得ます。設計段階での選定が極めて重要です。
それぞれの表示方法・画面占有率の観点から見る違い
モーダルは画面の中心に表示され、背後のコンテンツ操作を一時的にブロックします。これは注意喚起や重要な入力に最適です。一方、ダイアログは通常よりコンパクトで、画面上に浮かぶ形式で補足情報を表示する用途が多く、比較的占有率は小さいです。ドロワーは画面の端からスライドインしてくるUIで、特にサイドメニューやオプションリストに使用され、コンテンツの大半を残したまま操作が可能です。各表示方法と画面占有率の違いを把握することで、用途に応じた適切なUI設計が可能となります。
Web・アプリ開発における適用範囲を整理してみる
Webやアプリの開発では、利用されるデバイスやユーザーの操作環境によって、モーダル・ダイアログ・ドロワーの適用範囲が異なります。たとえば、PC向けWebではモーダルを使って詳細入力や警告処理を行うことが一般的です。モバイルアプリでは、ドロワーをナビゲーションの主軸として使用するケースが多く、コンテンツ切り替えをスムーズに行えます。ダイアログはOS依存のアラートにも似ており、プラットフォームに応じたスタイルが求められます。開発時にはプラットフォーム固有のUI設計原則も加味しながら、最適なUIパターンを選ぶことが求められます。
モーダル・ダイアログ・ドロワーそれぞれの定義と主要な特徴
モーダル、ダイアログ、ドロワーは、ユーザーインターフェースの基本要素として用いられるポピュラーなコンポーネントですが、それぞれの意味や使い方には明確な違いがあります。モーダルは、ユーザーの現在の操作を一時停止させ、特定のアクションを完了するまで画面全体をブロックする形式です。一方ダイアログは、特定の確認や短いやり取りを行う軽量なUIで、モーダル的に動作することもありますが、それほど強制力を持たない場面もあります。ドロワーは、通常は画面の横や下からスライドインし、ナビゲーションや補助情報を提示するための非遮蔽型のUIです。これらを正確に理解することで、UX設計の質が格段に向上します。
モーダルとは何か?画面遮蔽と集中操作のためのUI
モーダル(Modal)は、ユーザーの現在の操作を一時的に停止させることを目的としたUIコンポーネントです。画面全体に半透明のオーバーレイを表示し、背後のコンテンツを操作不能にして、ユーザーの注意を特定のタスクに集中させます。たとえば、「保存しますか?」といった確認メッセージや、「ログインフォーム」などの操作が挙げられます。モーダルは情報の重要性が高く、必ずユーザーに対応してもらう必要がある場合に有効です。ただし、過剰な使用はユーザー体験を阻害し、離脱の原因となるため、使用する場面を慎重に選ぶ必要があります。また、アクセシビリティ対応も重要で、キーボード操作やフォーカス制御にも配慮すべきです。
ダイアログとは何か?ユーザーとのやり取りを行う小窓
ダイアログ(Dialog)は、ユーザーとの一時的なインタラクションのために使われる小型のウィンドウです。モーダルダイアログと非モーダルダイアログの2種類が存在し、モーダルダイアログは画面の操作をブロックしますが、非モーダルなダイアログは他の操作を妨げません。典型的な使用例は「OK/キャンセル」の確認ウィンドウ、エラーメッセージ、簡易設定などです。サイズも小さく、シンプルなレイアウトで構成されており、ユーザーに必要最小限の選択を促します。過度な装飾や複雑な操作を避けることで、ユーザーの意図に沿った直感的なインタラクションを実現できます。また、読み上げソフトへの対応など、アクセシビリティも忘れてはならないポイントです。
ドロワーとは何か?非表示領域を活用するナビゲーションUI
ドロワー(Drawer)は、ユーザーが操作したときに画面の端からスライドインしてくるUIコンポーネントで、多くの場合はナビゲーションメニューや設定パネル、フィルター項目などの表示に使われます。モバイルアプリでは左側からのスライドメニュー、Webアプリでは右側からのオプションパネルとしてよく見られます。画面を完全に遮蔽せず、ユーザーが必要なときにだけ表示する構造が特徴です。そのため、常時表示するには適さないが、補助的な情報や選択肢を提供したい場面に向いています。ユーザーの操作文脈に応じて、情報を出し入れできる柔軟な設計が魅力ですが、閉じ忘れや戻れない設計には注意が必要です。
それぞれのコンポーネントの構造とUI設計上の意味
モーダル・ダイアログ・ドロワーは、見た目だけでなく構造やUI設計上の目的にも違いがあります。モーダルは一時的にメインのUIフローを遮断する構造で、ユーザーの意識を強制的に集中させます。ダイアログは一問一答型の操作に向いており、非同期的な確認や補足機能として活用されます。ドロワーは、画面に隠されていた情報をユーザーが明示的に呼び出すスタイルで、補助的な役割を持ちます。UI設計上では、主目的・副目的、ユーザー導線、画面占有率など複数の観点から適切な選定が求められます。これらを正しく設計することで、UIの過剰装飾や冗長な操作を排除し、ユーザー体験の質を高めることができます。
操作性・アクセシビリティの観点から見た特徴比較
UIの選定には、見た目の違いだけでなく、操作性とアクセシビリティの観点も重要です。モーダルはフォーカス制御が難しく、画面読み上げやキーボード操作の対応を怠るとアクセシビリティに悪影響を及ぼします。ダイアログは比較的短時間で操作が完了するため、操作負荷が軽いですが、小さな画面では読みにくくなることがあります。ドロワーは表示非表示のトリガーをユーザーに委ねるため、操作性は高いですが、開閉の明示性が低いとユーザーが迷う要因になります。それぞれの特徴を理解し、視覚・聴覚・操作面すべてにおいてユーザーが迷わない設計をすることが、優れたインターフェースの鍵です。
モーダル・ダイアログ・ドロワーの代表的な使用シーンと活用例
モーダル・ダイアログ・ドロワーといったUIコンポーネントは、それぞれ特定の使用シーンや目的に応じて最適化されています。どのコンポーネントを選択するかは、ユーザーのタスク、情報の重要度、画面サイズや使用デバイスによって異なります。本セクションでは、これら3つのUIがどのような文脈で活用されるのかを具体的に見ていきます。特に、ユーザー体験に直結する操作性や認知負荷を最小限に抑えるために、適切なユースケースを理解しておくことは、UI/UXデザインにおいて重要な指針となります。
モーダルの典型的な使用例:確認・警告・入力フォーム
モーダルは、ユーザーに対して重要な選択や情報入力を強制的に促す場面で使用されます。たとえば、「本当に削除しますか?」といった確認ダイアログや、「この操作は取り消せません」といった警告メッセージ、または「ログイン」や「会員登録」などの入力フォームが典型例です。これらのケースでは、他のUI操作をブロックしてユーザーに選択を集中させる必要があるため、モーダルが効果的です。ただし、ユーザーに過剰な圧力をかけないよう、閉じる方法を明示したり、意図しない操作を防止するためのフォーカス制御なども不可欠です。視認性や即時性が求められる情報は、モーダルで提示するのが適しています。
ダイアログの使用例:簡単な通知や補足情報の提示
ダイアログは、ユーザーに対して簡潔な通知や補足情報を提供したり、ちょっとした操作を促す場面で頻繁に使われます。たとえば、フォーム送信後の「成功しました」や、設定変更を伴う「この設定を保存しますか?」といった場面が挙げられます。また、詳細を読むための「もっと見る」ボタンを押した際に表示される情報ボックスなどもダイアログの一例です。モーダルと異なり、ダイアログは比較的軽量で、短時間で処理されるインタラクションに向いています。ユーザーが他の操作を継続しながら情報を受け取れる設計が可能なため、情報過多にならずに済む点もメリットです。
ドロワーの使用場面:メニューやサイドパネルの展開
ドロワーは、ナビゲーションメニューやフィルターオプションなど、頻繁に使うが常時表示する必要のない情報を扱うのに最適なUIです。特にモバイルアプリでは、ハンバーガーメニューをタップして左側からスライドインするナビゲーションドロワーが一般的です。また、ECサイトなどでは、検索結果に対して絞り込み条件を提示するフィルター用ドロワーもよく見られます。ドロワーの強みは、画面の主要部分を保持しつつ補助的な情報を柔軟に表示できる点にあります。ユーザーの操作に応じて展開されるため、直感的でありながら、UIをすっきり保てるのが利点です。
デバイス別の使い方:モバイル・デスクトップの視点から
モーダル・ダイアログ・ドロワーの活用は、使用するデバイスによっても最適解が変わります。モバイルデバイスでは、画面が限られているため、ドロワーを使って情報を一時的に表示・非表示にする設計が好まれます。たとえば、ナビゲーションメニューやユーザー設定などはドロワーで展開し、画面の切り替えを最小限に抑えることで操作性を高めます。一方、デスクトップでは広い表示領域を活かして、ダイアログでの補足説明やモーダルでの入力処理を適切に使い分けることが可能です。画面サイズ・入力方法(タップ・クリック)・利用状況を踏まえ、UIコンポーネントの使い分けを行うことがユーザー満足度の向上につながります。
ユーザーの操作負担を考慮したコンポーネント選定法
UI設計においては、ユーザーが行う操作の手間や負担をできるだけ軽減することが求められます。モーダルはユーザーの注意を強く引く反面、過剰な使用は操作の妨げになります。そのため、本当に重要な場面にのみ使用すべきです。ダイアログは比較的軽量で、ユーザーに思考停止を強いない設計が可能です。ドロワーは使い勝手が高く、必要なときにのみ呼び出せるため、タスク集中を妨げません。こうした性質を踏まえ、ユーザーの行動フローや操作ステップに最も負荷が少なくなる選択を意識することが重要です。UI/UXの観点から、最適なコンポーネントを選ぶことで、直感的な操作と高い満足度を提供できます。
主要なデザインシステムでのモーダル・ダイアログ・ドロワーの扱い方
モーダル・ダイアログ・ドロワーは、主要なデザインシステムにおいても明確なガイドラインが定義されており、UIの一貫性やユーザビリティ向上に貢献しています。GoogleのMaterial DesignやAppleのHuman Interface Guidelines、さらにAnt DesignやBootstrapなど、各システムはそれぞれの設計哲学に基づいてUIコンポーネントの使用ルールを策定しています。本セクションでは、これら主要なデザインシステムにおけるモーダル・ダイアログ・ドロワーの定義や設計上のポイント、推奨されるユースケースなどを比較し、実践的な設計判断の助けとなる情報を提供します。
Material Designにおける各UIコンポーネントの定義
Material Designでは、モーダル、ダイアログ、ドロワーは明確に区別されており、役割に応じた使用が推奨されています。モーダルに相当するのは「ダイアログ」で、主にユーザーの意思確認や入力を促す目的で使用されます。また、永続的なドロワー(permanent drawer)や一時的なドロワー(modal drawer)など、画面構成に応じて複数のドロワーバリエーションが提供されています。Material Designの強みは、階層構造を明確に保ちつつ、ユーザーの視線の流れに沿ったアニメーションやレイアウト設計が整備されている点にあります。公式ガイドラインを遵守することで、スマートで一貫性のあるUI設計が可能となります。
Apple Human Interface Guidelinesでのガイドライン
AppleのHuman Interface Guidelines(HIG)では、モーダルなインターフェースを「モーダルビュー」や「アラート」として扱い、ユーザーの現在の操作に対する明確な中断を設けることを推奨しています。ダイアログに相当するのは「アラート」で、簡潔な通知や確認のための用途とされています。ドロワーに関しては、macOSでは「サイドバー」や「スライドオーバー」といった形で実装されており、iOSではモーダルシートやナビゲーションスタックを用いるケースが多く、ドロワーは限定的な使用に留まります。Appleは一貫して「最小限の中断」と「自然なフロー」を重視しており、情報表示の優先順位に応じた適切なUI選定が求められます。
Ant DesignやBootstrapなどの実装上の差異
Ant DesignやBootstrapといったコンポーネントライブラリでは、モーダルやドロワー、ダイアログといったUI要素が柔軟に提供されています。Ant Designでは「Modal」と「Drawer」がコンポーネント単位で提供され、設定項目が豊富なため、用途に応じた細やかな調整が可能です。一方、Bootstrapでは「Modal」が主に利用され、ドロワー的な構造は「Offcanvas」コンポーネントで補完されます。これらのライブラリは、企業アプリケーションや管理画面向けの設計が多く、ユーザー操作を効率化することに重きが置かれています。共通して言えるのは、デフォルトスタイルをそのまま使用するのではなく、用途に応じてカスタマイズし、ブランドやUXポリシーに合わせる工夫が求められる点です。
アクセシビリティ対応におけるガイドラインの違い
デザインシステムごとにアクセシビリティへの対応方針にも差がありますが、すべてに共通するのは「キーボード操作対応」と「スクリーンリーダー対応」の重要性です。Material Designでは、モーダル表示時のフォーカストラップや、ダイアログからの適切なフォーカス復帰などが厳密に定義されています。Apple HIGでも、VoiceOver対応やDynamic Typeなど、視覚・聴覚支援に関する配慮が徹底されています。Ant DesignやBootstrapはARIA属性の活用を推奨しており、例えばrole=”dialog”やaria-modal=”true”を正しく設定することがガイドラインに含まれます。これらの基準を満たすことで、誰もが使いやすいUIが実現でき、法的なアクセシビリティ要件にも対応可能です。
デザインシステムに基づいたベストプラクティス事例
実際のプロジェクトにおいて、デザインシステムに沿ったUIコンポーネントの使用事例は数多く存在します。たとえば、GoogleのアプリではMaterial Designのドロワーを用いて、カテゴリー選択やアカウント切り替えをスムーズに行えるようになっています。Appleのアプリでは、自然なスライド遷移とモーダル表示を組み合わせ、ユーザーの混乱を最小限に抑えたフローが実装されています。また、Ant Designを採用している多くのSaaSアプリでは、設定変更や削除確認にModalを使用し、詳細設定はDrawerで表示するなど、役割を明確に分けた設計が一般的です。これらの事例からも、デザインシステムのガイドラインに沿って構築することで、整合性と品質の高いUXが実現できることがわかります。
適切なUIコンポーネントの選定ポイントと使い分けのコツ
モーダル、ダイアログ、ドロワーは、単なるUI部品にとどまらず、ユーザー体験を大きく左右する重要な要素です。これらの選定は、情報の優先順位や操作フロー、デバイス特性などを踏まえて慎重に行う必要があります。単純な好みや見た目だけで判断すると、ユーザーの混乱や操作ミスを誘発する恐れがあります。このセクションでは、具体的な判断基準を提示しながら、ユーザー視点に立ったUIコンポーネントの選定ポイントと、実務で役立つ使い分けのコツを詳しく解説していきます。
ユーザータスクの複雑性に応じたUI選定戦略
ユーザーが行うタスクの複雑性によって、最適なUIコンポーネントは変わってきます。たとえば、削除や保存といった単一の確認が必要な場面ではダイアログが最適です。一方で、複数ステップの入力が必要な場面では、ユーザーの注意を確実に引きつけるモーダルが望まれます。さらに、補助的な情報やメニューの展開といった、メインタスクの流れを妨げたくない場面ではドロワーが有効です。ユーザーの目的と行動の流れに合わせて、負荷を最小限にし、意図した操作へ導くUIを選ぶことが肝要です。開発者やデザイナーは、こうしたタスクの構造を読み解く力が求められます。
表示領域や導線に合わせたコンポーネントの選び方
画面の広さやユーザーの導線も、UIコンポーネント選定において無視できない要素です。たとえば、モバイル端末では画面が狭いため、ドロワーを使って必要な情報だけをスライド表示する設計が多く採用されています。逆にPCやタブレットなどの広い画面では、モーダルやダイアログを用いても、視認性や操作性に問題が生じにくくなります。また、ユーザーの導線上で自然にアクセスできる位置にコンポーネントを配置することも重要です。突然モーダルが現れると驚かれることがあるため、トリガーとなる操作や意図を明確に示す必要があります。適切なUIは、設置位置や導線との整合性が取れていてこそ、効果を最大限に発揮します。
UI/UX観点からの適切なインタラクションの設計
UIコンポーネントの選定には、見た目だけでなく、インタラクション設計の視点が欠かせません。ユーザーがどのように要素に触れ、どういう流れで次の操作に移るかを想定する必要があります。モーダルでは、背景のブロックや閉じる操作の明示が重要で、ユーザーに閉じ方がわからない不安を与えない工夫が求められます。ダイアログはコンパクトさゆえに表示時間や動作がスムーズであるべきです。ドロワーは開閉アニメーションの滑らかさや、内部の情報配置にも気を配らなければなりません。どのコンポーネントでも「次に何をすればいいか」が直感的に伝わる設計が必要です。UIは単なる見た目ではなく、ユーザーとシステムの対話そのものであるという意識を持ちましょう。
設計フェーズでの選定基準とプロトタイピングの活用
設計初期の段階でUIコンポーネントを選定する際には、プロトタイピングを積極的に活用することが有効です。たとえば、FigmaやAdobe XDなどを使ってモーダル・ダイアログ・ドロワーを試作し、実際のユーザー操作を想定したシナリオで確認してみると、直感的な違和感に気づける場合があります。選定基準としては、操作の完了率、クリックの導線数、エラー率、ユーザーの主観評価などが挙げられます。特にチーム開発では、事前に基準を明示しておくことで、デザインと実装の乖離を防ぎやすくなります。また、プロトタイピングにより顧客やクライアントとの合意形成もスムーズに行えるため、UI設計の精度を高めるために欠かせないプロセスといえるでしょう。
UXテスト結果に基づいた改善サイクルの考え方
一度選んだUIコンポーネントが常に正解とは限りません。実装後に行うユーザーテストやA/Bテストを通じて、実際の利用者がどう反応するかを観察し、その結果に基づいて改善していくPDCAサイクルの運用が重要です。モーダルが閉じにくい、ドロワーが開いていることに気づかれない、ダイアログが読まれずに閉じられるなど、想定と異なる挙動が確認された場合は、適切なコンポーネントへの切り替えを検討します。ログ分析やヒートマップツールも活用し、ユーザーの動きや滞在時間、クリック傾向を解析することで、改善ポイントを定量的に把握できます。UIは一度設計したら終わりではなく、継続的な見直しと最適化がUX向上の鍵となります。
モーダル・ダイアログ・ドロワーのメリット・デメリット比較と実装時の注意点
UIコンポーネントであるモーダル・ダイアログ・ドロワーは、それぞれに明確な利点と同時に留意すべき短所を持ちます。効果的に活用するには、その特徴を理解したうえで適切な場面で使い分けることが求められます。特にアクセシビリティやレスポンシブ対応、操作の中断・回避可能性など、細かい配慮がなければユーザー体験に悪影響を及ぼすこともあります。本セクションでは、それぞれのメリット・デメリットを比較しながら、実装・設計時に考慮すべき重要なポイントやベストプラクティスを紹介します。
各UIのメリットを機能・UX・開発工数から比較する
モーダルは、ユーザーの注意を強制的に特定のアクションへ向けさせるという強力なインパクトが特徴で、重要な入力や確認の場面において非常に有効です。また、ページ遷移を伴わないため、データ保持や状態管理の面でもメリットがあります。ダイアログは、簡易的な通知や選択肢提示に適しており、開発工数も比較的少なく済むため、軽量なUIとして重宝されます。ドロワーは、情報量が多くても整理して表示できることや、メイン画面との連携がしやすいことから、複雑なUI構成において威力を発揮します。それぞれの特性を把握し、プロジェクトの規模や目的に応じて選ぶことが、効率的な開発と良質なUXの実現に直結します。
デメリットや誤用によるユーザー体験の悪化例
UIコンポーネントの誤用は、ユーザー体験に深刻な悪影響を与えることがあります。モーダルを多用しすぎると、操作のたびに画面が遮られ、ユーザーは次第にストレスを感じるようになります。また、閉じ方が分かりづらいモーダルは、ユーザーがアプリケーションの使用を断念する原因にもなり得ます。ダイアログにおいては、文言が曖昧であったり選択肢が不明瞭だったりすると、誤操作を招くリスクがあります。ドロワーは表示が控えめな分、開いていること自体に気づかれないケースや、内容が多すぎて混乱を招く場合もあります。これらの失敗事例を学ぶことで、実装前にリスクを回避しやすくなります。
モーダル誤用による操作ブロックの問題点
モーダルは強制力のあるUIコンポーネントですが、それゆえに誤用された場合、操作ブロックによる問題が発生しやすくなります。たとえば、保存せずに閉じるボタンがなく、必ず「OK」を押すよう誘導されるモーダルは、ユーザーに不快感を与える可能性があります。また、フォーム入力中に誤って外部クリックでモーダルが閉じてしまい、入力内容がすべて消えるといったケースも非常に多く見られます。こうした問題を防ぐためには、明確なクローズボタンの設置、データ保存の確認、フォーカス制御の徹底などが必要です。モーダルは強力なツールであるがゆえに、その扱いには設計上の繊細な注意が求められます。
レスポンシブ対応における注意点と設計指針
現代のWeb・アプリケーション開発では、モバイルやタブレットといった多様なデバイスに対応する必要があるため、レスポンシブ設計が重要です。モーダルは画面全体を遮蔽するため、特に小型デバイスでは窮屈に感じられることがあり、ボタンの押しづらさや誤タップを誘発します。ダイアログは画面サイズに応じて適切に縮小・拡大されるべきですが、フォントサイズやタップエリアも注意深く設計する必要があります。ドロワーは画面の横幅が狭いと内容が圧迫され、ユーザーが迷子になりやすいため、縦方向のレイアウト切替など柔軟な対応が求められます。各コンポーネントがデバイスに最適化されているか、実機検証を含めてチェックすることが欠かせません。
アクセシビリティ・フォーカス制御のベストプラクティス
すべてのユーザーにとって快適な体験を提供するには、アクセシビリティ対応が不可欠です。モーダルでは、表示と同時にフォーカスを内部要素に移動させ、Tabキーによる操作を制限する「フォーカストラップ」が基本です。また、閉じた際には元のフォーカス位置に復帰させる設計が望ましいです。ダイアログについても、内容をスクリーンリーダーが正確に読み上げられるよう、`role=”dialog”` や `aria-labelledby` を適切に設定する必要があります。ドロワーに関しては、開閉のステータスを明示するための `aria-expanded` 属性や、閉じるトリガーのラベル設定が重要です。これらを怠ると、障害を持つユーザーにとって操作不能なUIとなってしまうため、実装段階での検証を怠らないことが肝要です。