Webページに動きを加えたデザインの作成方法を紹介します。
jQueryやCSSを使ってできるデザインについて知ることが目的です。
カルーセル・スライダー
jQueryプラグイン「slick.js」を使ったカルーセルスライダーです。
カルーセルスライダーは、ページのレイアウトを省スペース化できるデザイン手法の一つです。
複数ある画像を、カード・タイルレイアウトのようにグリッドに沿って一覧で見せるほど数も多くない時や、印象・イメージを伝えるために複数の画像を使う時などに効果的なデザイン手法です。
<li>で囲まれた範囲がスライドするので、商品画像と商品名・価格をカードのようなボックスにデザインし、スライドさせて表示することもできます。
モーダルウィンドウやリンクを組み合わせて、詳細情報へ誘導することもできるので、アイデア次第で複数の画像を効果的に使うことができるでしょう。
フルスクリーン・スライダー
jQueryプラグイン「vegas.js」を使った背景画像のスライダーです。
背景画像でスライド表示するので、デザイン向きなスライダーで印象・イメージを伝えるのに向いています。
トップページの最初の画面（ファーストビュー）にフルスクリーンでスライドさせると、印象・イメージにインパクトも追加され、効果的に画像を魅せることができます。
フルスクリーンで画面全体に画像を表示する時は、画質やファイルサイズに注意しておきましょう。
画質が悪くなると印象・イメージも下がり、逆効果につながってしまいます。
また、ファイルサイズが大きすぎると表示されるまでに時間がかかり、ページ閲覧の機会を失います。
ボックスの背景画像ならどこでも使えるので、フルスクリーン以外でも活用できるのが特徴です。
スクロールアニメーション
javascriptライブラリ「aos.js」を使ったスクロールアニメーションです。
ページをスクロールすると、フェイドインで下から上へアニメーション表示されるアレです。
表示される前は空白で表示されるため、コンテンツをアニメーションして表示することで、誘目性が強くなり、また印象・イメージもコントロールしやすくなります。
スクロールと連動してコンテンツが動いて現れるので、動く場所や方向・速度など、ページ全体である程度統一感を持たさないと、安っぽい印象を与えかねません。
ただ、全部同じ動き・方向だと単調すぎて飽きさせる原因にもなるので、適度な抑揚・リズム感も必要になります。
スクロールと連動して動きながら現れるので、そのページのコンテンツやトピックの「登場シーン」と捉えると、効果的な使い方も見えてくるのではないでしょうか。