アニメーション・グラフを羅列する

要件はグラフのアニメーション化、オンマウスで対象の棒グラフの色を変える、そしてクリック（タップ）すると補足情報をモーダルウィンドウで開ける、以上の三点をモバイル・レイアウトに組み込むんだ。

伸縮するflexとモバイルの viewport

モバイルデバイスでは、viewport 指定を省略した場合、デフォルトの width 値内に収まるように表示される。デフォルトのwidth値は 980px である。

遠近を定める perspective と perspective-origin

テキストを対象に遠近感を表現するために、perspective、perspective-origin を使って検証した。全体のレイアウトはグリッドレイアウトで配置した。

SCROLL すると徐々にイメージがZOOMする

このページでは、jQuery の CDN(Contents Delivery Network) よりファイルのリンク先を取得している。CDN の知識を少し増やしておこう。

鮮やかな背景色で彩るデザイン

四色の背景のスライドをJavascriptアニメーションライブラリTweenMax.jsを使ってスムーズな背景色の変更を行うアニメーションで遷移する。。

モバイルのイメージギャラリー

イメージのサマリーがページ全体に及ぶ。そのひとつをクリック(タップ)すれば大きな画像が開く、もしくは画像と説明を伴い、リンクが設定されたテキストが表示される。長い段落はスクロールするかもしれない。

モーダルの出現はアニメーションを伴うことで快適さが増す。ひとつ表示したら、閉じる。次を開く。こういう絶え間なく継続する動作を如何に簡易に快適に操作ができるかが重要である。

モバイルの場合、大きいイメージサイズはデバイスのスクリーンサイズを越えてスクロールさせて見せる方が良いのか、越えない方が良いのか、ピンチアウトさせれば同じだし、だったら最初から適切なサイズを与えた方が良いのか、そんなことを考えながらサイズを設定していった。

slick.js

四色の背景のスライドを文字詰め、モーダル、レスポンシブの内容を纏めた slick.js を使ったページ。

CSSスライダーを段落へ差し込む

レスポンシブ対応のCSS スライダーのコンテナの高さを算出する方法にアスペクトレシオと vw を使う。

イメージの上に大き目の縦書きテキストを載せる

縦書きで右寄せレイアウトを定義するにはどうしたら良いか。モバイルには意外と縦書きが似合うかも。

HTML5のsrcsetの検証

4列×3行のイメージサイズを次の種類で作成して列挙した。320w、640w、800w、1094w。あなたのデバイスではどのサイズが表示されるだろうか。実機のiPhone SE では「640w」、iPhone 13 では「1094w」を表示した。

グリッドレイアウトを極めてポスターのレイアウトを作る

ポスターデザインやタイポグラフィのポスターを頭に浮かべてみよう。文字列はアーチ状に描かれ、均等に納まる、そういうデザインとレイアウトを考える。

イメージをコラージュする

グリッドに従って、グリッドアイテムにイメージを指定して重ねたりしてコラージュしてみよう。