ウェブサイトのデザイン・レイアウトの手法やその構造が著しく変化してきた。
ひとつはレスポンシブ・デザイン・レイアウトがもたらしたデザイン・レイアウトである。デコレイティブなデザインは消え、全体の色調・空白のレイアウトがバランスの良いデザインがメインになってきた。レイアウトはより画一的になってきた。
もうひとつは、その骨子となる、レスポンシブに関わる段落のレイアウト、段落を構成するテキストサイズ(従来では考えられなかった大き目のサイズの使用)やフォント指定(ウェブフォント)やフォントの太さ、画像のサイズと配置とそのズームの方法など基本的なもの。
この基本的なひとひとつをモジュールにしてブラッシュアップしていくだけでも優秀なウェブサイトは構築できる。その中には従来のピクセル単位を「vw」などへ置き換える検証が進行中である。
レスポンシブはずばり、モバイル対応と言い切って良い。ネット上には沢山のウェブサイトのギミックの手法が紹介されているが、現実はモバイルファーストで制作されていない。私もたまに、作業が終わりかけのタイミングでモバイルでは動作しないことが判明して愕然とすることがある。勿論ボツにするが、PCで作業を始めるので確認作業が後回しになるのは仕方がないことなのだが…。
兎に角、レスポンシブは難しい。世の中のウェブデザイナーは効率の良い方法を求めて日常的に四苦八苦しているに違いない。適当なところで手を休めるのは止めて、突き詰めて、徹底的に答えを求めていかないと、正解に近付けない難しさがある。近年のモバイルはスクリーンサイズを大幅に変えてきている。未対応が出ない対策も必要になる。
また、JavaScript のコードをレスポンシブに分ける方法も必要になるかもしれない。
例えば、スクロールをある距離移動させたら発火するアニメーションがある。横長と縦長ではここで設定した「ある距離」を移動させることは同感触にはならない、という難しさがあるからだ。
さて、このページはスクロールに連動したエフェクト「AOS」を使ってみた。
「AOS」はJavaScriptのプラグイン(機能拡張)で導入はとても簡単だ。