モーダルウィンドウとは？設置する上での注意点と実装例
2019.12.01
ECサイトや物件サイトを見ていると、例えば操作しないと次の画面に操作できなかったり、突然広告のポップアップが表示されて、×ボタンをクリックしないとウィンドウが閉じなかったり、した経験はありませんか？
これはモーダルウィンドウと呼ばれる技術を使って表示させています。
近年では、ユーザーの操作性が損なわれる可能性があることから、このモーダルウィンドウを使わないことも増えています。
ただ簡単なメッセージを表示させたり、注意喚起させるためには役立つデザイン技術です。
今回はこのモーダルウィンドウを取り上げていきます。メリットやデメリット設置例も記載していますので是非ご活用ください。
モーダルウィンドウとは
モーダルウィンドウとは、ウィンドウ内で指定された操作を完了したり、キャンセル操作するまで他の画面にすることが出来ないウィンドウの事です。イメージとしてはポップアップに近いですが、ポップアップウィンドウはポップアップしている最中でも他のウィンドウを開くことが出来ますが、モーダルウィンドウは何らかの操作が完了するまで他の画面に遷移することが出来ません。
なおモーダルとは、モードを持つという意味であり、モーダルウィンドウになっているとき、システム上はユーザーの応答待ちの状態になっています。
ポップアップウィンドウについては以下の記事で解説しております。
モーダルウィンドウのメリットとどんな時に使う？
モーダルウィンドウは、メインコンテンツの場所をとることなくメッセージや機能を入れることができます。そのため、主に以下の時に使われます。
ユーザーの注意を引く
例えば重要な情報があり、ユーザーに注意喚起したい場合(エラーメッセージ)や、ヘルプメッセージを表示したい場合に役立ちます。
ダウンロードなどで誤った操作の防止
ユーザーがサイト内のボタンなどをクリックした場合、操作中の処理がキャンセルされてしまいます。そのため、誤った操作を防止するためのメッセージを表示するためにモーダルウィンドウが利用されます。
会員登録を促すなどユーザーに選択や操作させるとき
特にECサイトや物件情報サイトで見かけますが、会員限定のコンテンツを閲覧させたい時に、モーダルウィンドウ内に新規会員登録ボタンや入力フォームを入力させる画面があると、スムーズに会員を得ることができます。また、ユーザーに選択する条件を入力させる時にもこのモーダルウィンドウが使われます。
モーダルウィンドウのデメリット
モーダルウィンドウを設置することのデメリットとしては以下が考えられます。
スマホだと実装が大変
画面が小さいため、スクロール処理する必要がある
PCだとそこまで問題はないですが、スマホだと画面のサイズの都合上、モーダルウィンドウ内で表示させたい情報がすべて入らない場合があります。
また、スマートフォンなどの画面サイズが小さいデバイスなどでモーダルウィンドウを表示させるには、レイアウト的に難しい場面があり、小さい画面上に固定されたモーダルウィンドウを表示させるため、表示させる情報が多い場合は、モーダルウィンドウ内でスクロールさせる等の実装が必要です。
画面が小さいため、誤って背景画像をタップしてしまう可能性がある
一般的にモーダルウィンドウ画面から出る場合は右上の×ボタンからとなりますが、スマホだと画面が小さいため誤って背景画像などをタップしてしまう可能性があります。
ただし、スマホの場合は、モーダルウィンドウの代わりにアコーディオンデザインで表示することが出来ます。
アコーディオンデザインとは、デフォルトでは表示されませんが、+など特定の個所をタップするとコンテンツを表示させることが出来ます。
モーダルウィンドウとの違いは、モーダルウィンドウは別のページに遷移させるのに対しアコーディオンでは同一ページ内に表示することが出来、アコーディオンデザインは、jsを使わずhtmlとcssだけで実装が可能です。
・html
<div class="cp_qa">
<div class="cp_actab">
<input id="cp_tabfour031" type="checkbox" name="tabs">
<label for="cp_tabfour031">メタバリアEXは、どんな人に向かないものなのでしょう？</label>
<div class="cp_actab-content">
メタバリアEXは30日分で4,935円と中々の高価です。そのため安く済ませたいという方には向いていないです。また糖質の吸収を抑えるものでありますので、脂質やカロリーを気にしている方には向いていないです。体質は特に気にしなくても問題ないです。
<div>
</div>
・css
/*以下Q&amp;Aの処理*/
.cp_qa *, .cp_qa *:after, .cp_qa *:before {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.cp_qa .cp_actab {
position: relative;
overflow: hidden;
width: 100%;
margin: 0 0 1em 0;
color: #1b2538;
}
.cp_qa .cp_actab input {
position: absolute;
opacity: 0;
}
/* 質問 */
.cp_qa .cp_actab label {
font-weight: bold;
line-height: 1.6em;
position: relative;
display: block;
margin: 0 0 0 0;
padding: 1em 2em 1em 2.5em;
cursor: pointer;
text-indent: 1em;
border-radius: 0.5em;
background: rgba(27,37,56,0.1);
}
.cp_qa .cp_actab label::before {
font-family: serif;
font-size: 1.5em;
margin-left: -2em;
padding-right: 0.5em;
content: 'Q';
}
.cp_qa .cp_actab label:hover {
transition: all 0.3s;
color: #00838f;
}
/* --質問の＋アイコン */
.cp_qa .cp_actab label::after {
font-size: 1.7em;
font-weight: bold;
line-height: 2em;
position: absolute;
top: 0;
right: 0;
content: '＋';
display: inline-block;
width: 2em;
height: 2em;
-webkit-transition: transform 0.4s;
transition: transform 0.4s;
}
/* 答え */
.cp_qa .cp_actab .cp_actab-content {
position: relative;
overflow: hidden;
max-height: 0;
padding: 0 0 0 2.5em;
-webkit-transition: max-height 0.2s;
transition: max-height 0.2s;
border-radius: 0 0 0.5em 0.5em;
}
.cp_qa .cp_actab .cp_actab-content::before {
font-family: serif;
font-size: 1.5em;
position: absolute;
margin: 0.4em 0 0 -1em;
padding: 0;
content: 'A';
}
.cp_qa .cp_actab .cp_actab-content p {
margin: 1em 1em 1em 0;
}
/* 質問を開いた時の仕様 */
/* --答えの高さ */
.cp_qa .cp_actab input:checked ~ .cp_actab-content {
max-height: 40em;
border: 10px solid rgba(27,37,56,0.1);
}
/* 質問をクリックした時のアイコンの動き */
.cp_qa .cp_actab input:checked ~ label {
color: #00838f;
border-radius: 0.5em 0.5em 0 0;
}
/* 質問をクリックした時の+の動き */
.cp_qa .cp_actab input[type=checkbox]:checked + label::after {
-webkit-transform: rotateZ(45deg);
transform: rotateZ(45deg);
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
ユーザー操作が限定される
Googleに評価されるためには、独自性のあるコンテンツである必要があります。他のサイトにはないオリジナリティに富んだ、十分な分析・研究が織り込まれたコンテンツを作ることを心がけましょう。書籍や他のサイトを参照にした場合であっても、そのサイトならではの付加価値が提供できるようなサイトであることが望ましいです。
また、見出しやタイトルを目立たせたいあまり、不快感を与えるような言葉を使用してはいけません。ユーザーが友人と共有したり情報源として引用したくなったりするようなコンテンツになるように意識しましょう。ただ、文字数だけ増やしても、ユーザーが求めていないコンテンツになる可能性があるので、ユーザーが求めている情報を適切に書かれているかチェックしましょう。
モーダルウィンドウの実装例
モーダルウィンドウの実装例は以下となります。基本的には、jqueryを使いますので、事前にjqueryはダウンロードして適当なところに解凍してヘッダータグに読み込ませます。
・jQueryの読み込み
<head>
<link rel="stylesheet" href="modaal.min.css">
<script src='//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script src="modaal.min.js"></script>
</head>
・html
<!-- モーダルヘの遷移部分 -->
<div id="header">
<ul>
<li><a href="#" data-toggle="modal" data-target="#myModal5"><i class="fa fa-info-circle" aria-hidden="true"></i>モーダルウィンドウとは</a></li>
</ul>
<div>
<!-- モーダル部分 -->
<div id="myModal5" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<div class="modal-title"><i class="fa fa-info-circle" aria-hidden="true"></i>モーダルウィンドウとは</div>
</div>
<div class="modal-body">
<p>
モーダルウィンドウとは、ウィンドウ内で指定された操作を完了したり、キャンセル操作するまで他の画面にすることが出来ないウィンドウの事です。イメージとしてはポップアップに近いですが、ポップアップウィンドウはポップアップしている最中でも
他のウィンドウを開くことが出来ますが、モーダルウィンドウは何らかの操作が完了するまで他の画面に遷移することが出来ません。なおモーダルとは、モードを持つという意味であり、
モーダルウィンドウになっているとき、システム上はユーザーの応答待ちの状態になっています。
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- モーダル部分 -->
・css
.mymodal5 {
position:absolute;
width:100%;
height:100vh;
top:0;
left:0;
display:none;
}
/* オーバーレイのスタイル */
.overLay {
position:absolute;
top:0;
left:0;
background:rgba(200,200,200,0.9);
width:100%;
height:100vh;
z-index:10;
}
/* モーダルウィンドウの中身のスタイル */
.mymodal5 .inner {
position:absolute;
z-index:11;
top:50%;
left:50%;
transform:translate(-50%,-50%);
@keyframes modal{
0% {top:-100%}
100% {top:50%}
}
@keyframes modalClose {
0% {top:50%}
100% {top:100%}
}
・js（jQuery）
$(function(){
// モーダルウィンドウが開くときの処理
$(".modalOpen").click(function(){
var navClass = $(this).attr("class"),
href = $(this).attr("href");
$(href).fadeIn();
$(this).addClass("open");
return false;
});
// モーダルウィンドウが閉じるときの処理
$(".modalClose").click(function(){
$(this).parents(".modal").fadeOut();
$(".modalOpen").removeClass("open");
return false;
});
});
複数のモーダルウィンドウを設置したい場合の実装例
複数のモーダルウィンドウを設置したい場合の実装例は以下となります。
cssは変更せず、htmlとjs（jQuery）の変更のみとなります。HTMLは新たなモーダルウィンドウを追加するだけです。
<!-- モーダルヘの遷移部分 -->
<div id="header">
<ul>
<li><a href="#" data-toggle="modal" data-target="#myModal5"><i class="fa fa-info-circle" aria-hidden="true"></i>モーダルウィンドウとは</a></li>
<li><a href="#" data-toggle="modal" data-target="#myModal5"><i class="fa fa-info-circle" aria-hidden="true"></i>モーダルウィンドウのメリットとどんな時に使う？</a></li>
</ul>
<div>
<!-- モーダル部分(1つ目) -->
<div id="myModal5" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<div class="modal-title"><i class="fa fa-info-circle" aria-hidden="true"></i>モーダルウィンドウとは</div>
</div>
<div class="modal-body">
<p>
モーダルウィンドウとは、ウィンドウ内で指定された操作を完了したり、キャンセル操作するまで他の画面にすることが出来ないウィンドウの事です。イメージとしてはポップアップに近いですが、ポップアップウィンドウはポップアップしている最中でも
他のウィンドウを開くことが出来ますが、モーダルウィンドウは何らかの操作が完了するまで他の画面に遷移することが出来ません。なおモーダルとは、モードを持つという意味であり、
モーダルウィンドウになっているとき、システム上はユーザーの応答待ちの状態になっています。
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- モーダル部分(1つ目) -->
<!-- モーダル部分(2つ目) -->
<div id="myModal6" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<div class="modal-title"><i class="fa fa-info-circle" aria-hidden="true"></i>モーダルウィンドウのメリットとどんな時に使う？</div>
</div>
<div class="modal-body">
<p>
モーダルウィンドウは、メインコンテンツの場所をとることなくメッセージや機能を入れることができます。
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
・js（jQuery）
$(function(){
$('.js-modal-open').each(function(){
$(this).on('click',function(){
var target = $(this).data('target');
var modal = document.getElementById(target);
$(modal).fadeIn();
return false;
});
});
$('.js-modal-close').on('click',function(){
$('.js-modal').fadeOut();
return false;
});
});
まとめ
如何でしたか？モーダルウィンドウのメリットは既存の画面のレイアウトを崩すことことなくちょっとした注意喚起や、
ユーザーの操作を促す画面を作ることが出来ます。ただし、使いすぎるとユーザー操作を強制することにもつながり、
ユーザー体験が損なわれ、せっかく獲得したユーザーを手放すこともあり、スマホも注意して作成しないと誤操作が生まれる可能性があります。
そのためここでのモーダルウィンドウのメリット、デメリットをしっかり把握したうえでモーダルウィンドウを実装してください。
関連
Webサイト制作Web開発
Webディレクション
Webサイト制作Web開発
