こんにちは!会社員クリエイターのこばたです!
今回は、モーダルの活用シーンと実際の実装方法までを解説していきます。
この記事さえ読めば、モーダルについて完全理解できるように書いておりますのでぜひ最後までお読みください。
モーダルとは
モーダルとは、モーダルウィンドウの略です。
Webサイトにおける「モーダル」とは、ウェブページの上に重なって表示されるポップアップウィンドウのことを指します。
モーダルはページ遷移することなく情報を伝えることができるため、一般的に、ユーザーに重要な情報を提示したり、特定のアクションを促したりするために使用されます。
モーダルは、以下のような場面でよく見られます。
- 情報の提示: ユーザーに重要なメッセージや通知を伝えるために使用されます。例えば、サイトにアクセスした際に利用規約の同意を求めるモーダル、Cookieの利用に関する通知が該当します。
- 確認・警告: ユーザーが重要なアクションを実行する前に、確認や警告を求める場合に利用されます。例えば、削除操作の際に本当に削除してもよいか確認するモーダル、重要なデータの変更を保存するか確認するモーダルがあります。
- フォームの入力: ユーザーに情報の入力を促すために使われることがあります。例えば、登録フォームや購入手続きの際に、必要な情報を入力するよう促すモーダルがあります。
モーダルは表示されると、背景が暗くなることで、ユーザーがモーダルに集中できるようになります。
そのため、UX(ユーザーエクスペリエンス)を向上させるために重要な要素であり、情報の伝達やユーザーの注意を引くために効果的に使用されます。しかし、過度に使用するとユーザーに不快感を与えることもあるので、適切なタイミングや内容で利用することが重要です。
モーダルの実装方法
今回は先に例に出した、ECサイトでよく見られるクリックすると画像が拡大表示され浮かび上がるという簡単なモダールを作成していきます。
クリックする要素を配置する
はじめに、クリックする要素をお好みで配置していきます。
今回はお好みの写真とテキストを配置してみてください。
2.モーダルを作成する
左のエレメンツパネルより、ページタブの赤枠で囲んだ「追加」を選択します。
ページの種類が4つ表示されますが「モーダル」を選択します。
モーダル内に画像ボックスを配置し、先程と同様の画像を選択します。
モーダルのTransitionを変更する
画像の設定ができたら、お好みで「Transition」の設定を変更してみてください。
Transitionとは、モーダルがどのようなアニメーションで表示されるかという設定です。
デフォルトでは「from-bottom」になっているので、今回は「scale」に変更しておきます。
3.作成した要素にリンクを設定する
はじめに作成した要素にリンクを設定します。
画像を選択した状態で、右のパネルのリンクから、先程作成したモーダルのページを選択します。
下の画像のような状態になっていればリンク設定は完了です。
これですべての実装は完了なので、ライブレビューでうまく動作しているか確認してみてください。
追加Tips
- モーダルのページを選択した状態で、背景をより暗くしたり、色を変更することも可能です。
- 背景をクリックではなく、アイコンを作成し、アイコンにモーダルを閉じるリンク設定をすることも可能です。
まとめ
今回の例では画像をクリックするとモーダルが表示されるように設定しますが、必ずしも画像である必要はありません。
ボックスやテキストに対してもモーダルのリンクを設定することは可能です。
繰り返しになりますが、モーダルはページ遷移を伴わずに情報を提示することができるため、追加情報を提供したり、簡単な操作を行わせる際に非常に便利です。
ただし、不必要な情報のモーダルや、煩わしい頻度で表示されるモーダルはユーザーが離脱する原因にもなります。適切なタイミングと内容で使うことが重要であり、ユーザーエクスペリエンスを損なわないように配慮しましょう。
STUDIOでサイトの制作を依頼したい、STUDIOでWebサイト作りたいけど、何から始めていいか分からない…という方へ。
STUDIOにてサイトの制作依頼やメンター等の依頼も承っておりますので、ぜひお問い合わせよりご連絡ください!
最後までお読みいただきありがとうございました。