オーバーレイ・エフェクトとレスポンシブ・モーダル
「10/27から11/ 1」を対象にした棒グラフで6日表示のケース。
「11/ 2から11/ 7」を対象にした棒グラフで6日表示のケース。
「11/ 8から11/13」を対象にした棒グラフで6日表示のケース。
PC用では横5列に配置した商品リスト。モバイルでは操作上の観点から1列表示がベストだろう。
Grid Layoutを使って2カラムレイアウトを差し込んでみた。
Grid Layoutで複雑なレイアウトを実行してみよう。ここでは文字と文字を重ねてデザインしてみた。
モバイルの横方向の最適なモーダル
2019年12月8日
結論から行こう。こんな具合になった。上の図はモバイル(iPhone SE)をLandscape (横)にしてモーダルを開いたものだ。
モバイルではレスポンシブをLandscape (横)に対応させるかしないかが大きなポイントである。対応させないとなると圧倒的な時間が減る。対応させる(対応できる能力があればだが…)となると、デザイン・レイアウトで大いに苦しむし、労力はかなり増えるだろう。
縦長の画像は左右に空白を足して横長の画像に手直しする。モバイルのLandscape (横)の時のモーダルの幅を「width: 40%;」に設定した。更にモーダルのフッターを無くして、タイトルと閉じるの「×」を同梱して縦方向の余白を削ることで、より大きいイメージが収まることが出来るようにスペースを確保した。これで画像の全体を表示することが可能になった。
従来のモーダルもBootstrapのmodalを使っていた。Bootstrapには「small modal」が用意されているがモバイルのLandscape (横)の時は幅いっぱいに表示されてしまう。画像を小さく左側へ置きテキストを回り込ませるという解決策があるが、複数の画像を縦に一列で並べて表示したい場合には向かない。モーダルで頻繁に使うパターンは「画像と一行コメント」が多いので、一番使いやすいレイアウトを考え直す必要があった。
画像にタップするときの効果について、今やUI(ユーザーインターフェース)デザインにとって必要不可欠な存在になってきた。ユーザーがウェブサイトを快適に使うための設計を心がけることは重要だ。
「10/27から11/ 1」を対象にした棒グラフで6日表示のケース。
「11/ 2から11/ 7」を対象にした棒グラフで6日表示のケース。
「11/ 8から11/13」を対象にした棒グラフで6日表示のケース。
PC用では横5列に配置した商品リスト。モバイルでは操作上の観点から1列表示がベストだろう。
Grid Layoutを使って2カラムレイアウトを差し込んでみた。
Grid Layoutで複雑なレイアウトを実行してみよう。ここでは文字と文字を重ねてデザインしてみた。
