レスポンシブECサイトaishipRの事例としても、採用サイトが増加しているモーダルウィンドウ。

モーダルウィンドウとは、タップ（クリック）操作をすることにより表示されているページに　コンテンツを浮かび上がるように画面が立ち上がり、コンテンツ内の「×」印や背景をタップ（クリック）することで画面を閉じます。

モーダルウィンドウはスマートフォンでは操作しにくく不向き、というような声もありますが、レスポンシブにも対応した方法で、使う場所や使い方を間違えなければ、十分に使える表示方法だと思います。

導入事例

早速ですが、事例を見ていきましょう。

小川珈琲様：http://www.oc-shop.co.jp/
レスポンシブECサイト構築、aishipRにて作成頂いているこちらのサイトでは、全デバイス共通で表示されるグローバルメニュー箇所でモーダルウィンドウを採用しています。

まずはPCで見ていきましょう。
「カテゴリーから探す」等をクリックすると、モーダルウィンドウが立ち上がります。モーダルウィンドウ内では各カテゴリーメニューを画像とともに表示させるなど、HTML・CSSの利用も可能である為、充実したコンテンツを表示させることも可能です。もちろんレスポンシブにも対応できます。

仮にモーダルウィンドウ内に情報量が多い場合でも、スクロール操作が可能やページ内の文字検索（Ctrl + F）操作が可能です。

モーダルウィンドウから離脱したい場合は、以下の操作で画面を閉じます。
・「×閉じる」を押す
・背景をタップ（クリック）する
・ブラウザの戻るボタンで戻る

次にスマートフォンで見てみましょう。
「カテゴリーから探す」等をタップすると、モーダルウィンドウが全画面表示で立ち上がります。
この「全画面表示で立ち上がる」という点がポイントです。「全画面表示で立ち上がる」ことにより、余白となる背景部分が無くなります。このことで、意図せぬタップ操作にて「画面を閉じる」という恐れが無くなります。モーダルウィンドウ内にて、適切な場所に「閉じるボタン」を用意しておくことで、「閉じる」操作を意図する人だけが画面を閉じることができます。

重要なのはモーダルウィンドウを採用する場所

上記例のように、モーダルウィンドウでは、メニューを「表示」させ次のページへ遷移させる役割で使用しており、操作にストレスを感じることは少ないでしょう。

一方で「入力」についてはどうでしょうか。
モーダルウィンドウ内に入力フォームの設置した場合、例えば入力作業中に誤って画面を閉じてしまうと、ストレスを感じてしまいます。入力内容が保持されていないとするとそのまま離脱する可能性もあるため、モーダルウィンドウ内に入力フォームの設置は控えておいた方が良さそうです。

最後に

aishipRでご用意しておりますオンラインマニュアルも、各オンラインマニュアルへの導線設計を見直し、「目的別で探す」「機能別で探す」メニュー箇所にモーダルウィンドウを採用しました。aishipRの使い方についてご確認頂くだけでなく、UIについてもご確認頂けたら幸いです。

オンラインマニュアル：http://manual.aiship.jp/