モバイルのLandscapeに2columnを与える

モバイルのレイアウトが根拠となってPCのレイアウトがこうなった経緯がある。PCの横長レイアウトで段落を普通に記述すると、一行の文字数が長すぎる。だから、最終形としては2columnに落ち着いた。モバイルのLandscapeは本文の段落を1columnにした。モバイルの本文の段落を2columnにすると、読み進めていくと高さが短いのでスクロールを使って後戻りしなければならなくなる欠点が発生する。読み進める方向は下へ下へと一方方向が望ましいので段落は1columnにした。全体のレイアウトは本文の隣に関連情報をレイアウトしているので2columnである。これでモバイルのLandscapeが活きるレイアウトに生まれ変わった。PortraitとLandscapeでは、基本的に高さいっぱい(Portrait)で見るか、横幅いっぱい(Landscape)で見るかの違いである。例えば動画は横長にして大きな画面が主流なのでLandscapeで見る人が殆どだが、動画が主流ではない本サイトはこれまでモバイルのLandscapeでのレイアウトについて良い見せ方を見いだせずにいた。PortraitをLandscapeにする違い・利点が欲しかったので、今回のレイアウト変更でこのレイアウトを発見できたことは収穫が大きい。

2columnをスライドに組み込む

段落についてはこのページのレイアウトで良いのだが、画像を整列させる場合には1columnの中にgridを使ってキッチリ配置する方法が良いだろう(次頁参照)。

スラーダーに全ての基本機能を集結させる

基本として、モーダルウィンドウ、2columnや3column、リンクアニメーション、補足説明のtooltips、ページ下部のフッターメニューを装備した。テキストと画像を梱包する段落について補足する基本機能としてはこの内容で十分だろう。以上の機能をslick.jsの各スライドに組み込むのには長い時間を要した。これこそが本サイトが追及してきたモバイルファーストのウェブサイトのデザイン・レイアウトである。

モーダルウィンドウのおまじない

モバイルで閲覧するときに本サイトはズームを可にしている。ところが、或る時ズームできないモバイルに遭遇した。モバイル側の設定なのだろうが、所有者本人には不明である。そこで、モーダル内を弄ってみるとズームできたということがあった。これは逃げ道だ。

パララックス（視差）はPCだけ

スクロールに合わせてパララックス（視差）やアニメーションの演出が活躍するページは概ねPCだけに留まる。モバイルでは十分な余白を確保できないので使いずらいが、アクセントのフィーリングで使うこういうのとか、左右から動いてくるこういうのは邪魔にならないので現実的だ。

スライダーの前身はページ内リンクだった

本サイトのトップページが本頁のスライダーの前身である。トップページは右側面に色分けしたインデックスをタップ(クリック)することでページ内部の各リンクを頭出しをするもので、縦長のモバイル画面を意識したもの。モバイルではボタンを配置する場合は大きくが原則だから、ボタンの配置は最小限に止めるのが良いだろう。ページが移動するときに体感されるスムーズな動きが必要だ。カタカタするような動きでは便利さよりも不快感ばかりが溢れてくる。一瞬で変わってしまうのもよろしくない。

slick.jsに納まるウェブデザイン・レイアウトがついに完成

前回アップロードした「レスポンシブに2columnから1columnへ(2019年8月3日)」をslick.jsを筐体にした内側へビルトインして完成させた。