【本日】誠に勝手ながら、全社員研修のため、2017年4月20日(木)の13:00以降はお電話によるサポート受付を休止させていただきます。

ECサイト構築クラウド型プラットフォーム

【本日】誠に勝手ながら、全社員研修のため、2017年4月20日(木)の13:00以降はお電話によるサポート受付を休止させていただきます。

モバイルファーストマーケティングラボ

レスポンシブにも対応!モーダルウィンドウの効果的な使い方

レスポンシブにも対応!モーダルウィンドウの効果的な使い方

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

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

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

導入事例

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

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

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

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

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

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

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

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

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

最後に

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

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

”スマホで売れる”ためには必須の「レスポンシブECサイト」とは?

CTA-IMAGE 2019年、ECサイトの利用者は今やスマ―トフォンからが7割を超え、市場のニーズは完全にPCからスマホに転換しました。
また、検索エンジン大手のGoogleも「モバイルファーストインデックス」を打ち出し、スマホ対応の手段として正式に「レスポンシブWEBデザイン」を推奨しています。 そのような背景から、昨今のEC市場ではスマートフォンへの適切な対応が急務となっており「レスポンシブECサイト」のニーズが非常に高まってきています。本パンフレットではECサイト運営を取り巻く環境の変化を、レスポンシブECサイト構築導入実績No.1のプラットフォームである「aishipR」の機能や実績を踏まえながらまとめました。

・レスポンシブECサイトがなぜ今選ばれるのか
・これまでのECサイトの課題とは何なのか
・どのようにすれば解決できるのか

といったノウハウから、プラットフォーム変更で得られる効果の実例まで網羅して解説しています。
ECサイトの運営されておられる経営者様だけでなく、運営担当者様にも必ずお役に立つ内容となっておりますので、是非ご活用ください。
機能のご確認はお気軽にお問合せ、もしくは2週間無料お試し利用で。
aishipRの無料体験、お問合わせはお気軽に。説明会・資料請求も受付中。
0120-173-163
0120-173-163
無料体験
  • 無料体験
  • 問合せ
  • 説明会
  • 資料請求
  • 問合せ
  • 説明会
  • 資料請求
+