画面が切り替わるとき

今は動きを付けたアニメーションや変化させた色などを用いて、「画面が切り替わっている」を体現させてくれる。この演出が心地良いかどうかということは、とても意義が増してきた。

一時期はPCのスクリーンで実現させた「パララックス効果」が勢力を伸ばすかに見えたが、モバイルへの移行に伴って、別の何かが模索されているのが実状だ。

このページは「pure-css-tab」とネーミングされたものを弄ってみた。動きと色で「画面が切り替わっている」を演出する。

full screen,responsive

一時的なもであろうか。フルスクリーンで画面を切り替える方式が多く存在する。このページも同様である。

だが、レスポンシブで対応するのは、いささか効率的ではない。縦長のモバイルとちょい横長のPCで同等の内容を表示させようとすると、本ページのようにPCで閲覧できるコンテンツの幅をモバイルの幅へ近付けるしかない。

近付いた状況で、Portrait を Landscape へチェンジさせてみる。文字が溢れていないかをチェックする。

モバイルデザイン進捗中

水平方向だけに限定したスワイプ」は、画面に垂直方向へのスクロールを可能とする。

この方式が一番現実的に王道のようだ。あれもこれも取り込んで使えそうな余力が残っている。

だから、このページで学んだ効果を「水平方向だけに限定したスワイプ」へ付加して完成度を高めることこそに力を注ぐ意義があるだろう。

「水平方向だけに限定したスワイプ」は「slick」を使っている。モバイルのウェブで使える「slick」は今後ともども要注目である。

スクラップ

本格的にモバイルファーストによるモバイルのウェブデザインに着手してから、スクラップの在庫が凄いことになっている。リファレンスのページがモバイル用ではないことも手数がかかる要因である。

その多くは未解決なる問題点を残しているので、スクラップのフォルダの域を出ることは無い。

かくして、あれやこれや手を付けて、解決策を講ずるが打開できずにスクラップへ、という多大な時間を費やしたものが多く、クリアした一握りのページを公開しているのだ。このページは忘備録用だ。