モバイル特化の操作性を重視したイメージギャラリーを作る

ギャラリーの構成

全イメージの概要をマルチイメージで掌握し、ひとつのイメージをタップ(クリック)するとビッグイメージがオーバーラップする。

ビッグイメージはモーダルで開く。モーダルは段落の量が多ければスクロールして表示できる。また、左寄せにして右側の空白を確保する。下図のブルー部分(モーダル以外の部分)をタップ(クリック)するとモーダルが閉じる。

モーダルの開く位置

PCユーザーのため、殆どのモーダルは上下左右の中央に表示される。だが、モバイルに特化するには片側に寄せるべきだろう。幅が狭いスクリーンに於いて中央寄せは閉じる範疇の面積を分散させるだけである。

その他

さて、本題の目的は結論を先頭に持ってきたのでここで目的を遂げている訳だが、試行錯誤の最中に作ったものがいくつかあるので、補足として紹介しておこう。

ズームイン効果が粋なサンプル

次に、マウスの hover 時の反応が絶妙なサンプルを紹介する。誤操作を修正してくれるこういう動きはとても参考になる。素早くズームインさせるだけならお奨めだ。カスタマイズして弄ってみた。

ビッグサイズのイメージがオーバーラップするときに3分割されて現れる効果がスマート。

シングルとマルチ

最後に、発展途上のCSSのみで動かす別のパターンのものを提示する。上部のマルチとシングルのアイコンを選択できる。マルチは「ズームイン効果が粋なサンプル」にどこまで近付けるか試してみたもの。レイアウトは flex ではなくて grid で組む方が良いという失敗例。この失敗は先頭に挙げたイメージギャラリーに活かされた。

用意したシングルページのレイアウトは縦一列にイメージが配置されて伸びている。これを一画面だけ表示するように CSS の flex コンテナに次を加える。

scroll-snap-type:  y mandatory;
height: 100vh;
overflow: auto;

　　　

CSS の flex アイテムに次を加える。

　　　

scroll-snap-align: start;
scroll-snap-stop: always;
height: 100vh;

↑ページトップへ