スクロールを促すアニメーションの作り方【STUDIO】
#
STUDIO
スクロールダウンって何？
今回はファーストビューでよく見るスクロールを促すアニメーション「スクロールダウン」の作成方法についてご紹介します。
どういうものかというと、ファーストビューでよく「スーッ、スーッ」とか「ヒューン、ヒューン」って動いているあの小さなアニメーションのことです。
ちなみに、スクロールダウンのほかにスクロールアニメーション、スクロールアイコン、スクロールダウンボタンなど、いろんな呼び方があるようです。
実は大事なスクロールダウン
普段からいろんなWebサイトを見ている人にとっては意外かもしれませんが、ユーザーによっては画面いっぱいに写真や動画が表示されていると「下にスクロールできないサイト」だと誤解する場合があります。
なので、ユーザーに「下にスクロールできるよ！」って伝えるためにスクロールダウンを置いたりもします。
デザイン的にもちょっとこだわってる感じが出ますし。
STUDIOでスクロールダウンを作ってみた
ということで、STUDIOで実際に作ってみた2パターンのスクロールダウンがこちら。
※記事の後半では実際にクリックもできる「スクロールダウンボタン」の作り方もご紹介しています。
サンプルA
サンプルAは、丸が徐々に透明になりながら下に降りていくパターン。
サンプルB
サンプルBもよく見るパターンだと思います。直線がスーッと降りていくタイプ。
こちらもページ後半で作り方をご紹介しています。
それぞれの作り方は以下のとおりです。
サンプルAの作り方
丸が透明になりながら下に降りていくアニメーションの作り方
①カルーセルの不要な部分を削除
カルーセルを置いて不要なものを削除していきます。
そして、名称がimageとなっているdivだけを残して、そのdivを右クリックの「ボックスに変換」で通常のボックスに変換します。
直接カルーセルをメインビジュアルの中にドラッグ&ドロップした方がスムーズですが、上手く置けない時は、動画のようにいったんメインビジュアルの下側（外側）に置いて作業を進めてもOKです。
※カルーセルの中が「通常のボックス1つだけ」になれば、手順はどんな方法でも大丈夫です。
②ボックスの名前を変更
分かりやすいように、ボックスに変換した要素の名称を「動く丸」にしておきます。
※名称は何でも大丈夫です。
ここまでの作業で、こんな状態のレイヤーになっていればOKです。
ここからデザインに入っていきます。
③カルーセル全体を囲むボックス（div）のデザイン
まずは、カルーセル全体を囲んでいるボックス（div）の設定です。
以下のように設定します。
※数値は自由です。
横幅： 26px
縦幅： 60px
角丸： 16px
枠線： 2px、線の色はRGBA（255, 255, 255, 0.5）
↑の線の色は透過させるためにRGBAにしましたが、透過させない場合は#FFFFFFで大丈夫です。
次に、画面右側の設定を開いて以下のように設定しておきます。
自動再生： ON
再生間隔： 1400
送り時間： 0
ホバーで停止： OFF
↓画面はこんな感じです。
カルーセルをドラッグしてメインビジュアルの下側中央に配置します。
④カルーセルのitem（緑色のdiv）のデザイン
カルーセルのitem（緑色で表示されているdiv）を以下のように設定します。
※数値は自由です。
配置： 絶対位置
はみ出し： 非表示
横幅： 100%
縦幅： 46px
次に、【オレンジ色の矢印の箇所】で中央下揃えを選択します。
⑤「動く丸」のデザインとアニメーション設定
一番下の階層にあるdiv（※②で「動く丸」と名付けたdiv）を以下のように設定します。
まずは白い丸（白いけど透明）を作ります。
マージン： 0（すべて）
パディング： 0（すべて）
横幅： 8px
縦幅： 8px
角丸： 50%
透明度： 0
塗り： #FFFFFF
次に『条件付きスタイル』でアニメーションの動きを設定します。
条件付きスタイル： 出現時
透明度： 1
イージング： ease-in
時間： 600
移動： Y -30px
アニメーションを試してみて、↓のように動けばOK。
直接プレビューでチェックしていただいても大丈夫です。
これでアニメーションは完成です。
あとはデザインを整えていきます。
⑥最後の仕上げ
「Scroll」のテキストを置いたり、配置を調整します。
フォントの内容や配置する場所はお好みで大丈夫です。
⑦完成
サンプルAのスクロールダウンが完成するとこんな感じ。
イージングの種類や時間などアニメーションの設定は、お好みで大丈夫です。
レスポンシブの設定も忘れずに
カルーセルのパーツをそのまま流用しているので、デフォルトのレスポンシブの設定が生きたままになっています。
タブレットやスマホの幅でのチェックや設定も忘れずに行いましょう。
次にサンプルBの作り方をご紹介します。
サンプルBの作り方
直線がスーッと降りていくタイプのスクロールダウン。
それでは作り方をご案内します。
①カルーセルの不要な部分を削除
メインビジュアルの中にカルーセルをドラッグして、メインビジュアルの「中央下揃え」の位置に設置します。
次に、カルーセル内の不要な部分を削除します。
名称がimageとなっているdivだけを残して、そのdivを「ボックスに変換」で通常のボックスに変換します。
ここまでの作業を動画にするとこんな感じです。
②ボックスの名前を変更
ボックスに変換した要素の名称を「白い線」にしておきます。
※分かりやすくするのが目的なので、名称は何でも大丈夫です。
③カルーセル内のボックスを2つにする
上記②のボックスを「グループ化」して、divをdivで囲むようにします。
※ここまで手順を解説していますが、カルーセル内に「divの中にdivがある状態（ボックスの中にもうひとつボックスがある状態）」を用意できれば、どんな手順でも大丈夫です。
ここからデザインに入っていきます。
④カルーセル全体を囲むボックス（div）のデザイン
まずは、カルーセル全体を囲んでいるボックス（div）の設定です。
このボックスを以下のように設定します。
※数値は自由です。
横幅： 60px
縦幅： 50px
※横幅は分かりやすいように広くとっていますが、実際は必要最小限の横幅でOKです。
次に、画面右側の設定を開いて以下のように設定しておきます。
自動再生： ON
再生間隔： 1400
送り時間： 0
ホバーで停止： OFF
↓画面はこんな感じです。
⑤カルーセルのitem（緑色のdiv）のデザイン
レイヤーで緑色で表示されているdivを以下のように設定します。
配置： 絶対位置
はみ出し： 非表示
横幅： 100%
縦幅： auto
次に【オレンジ色の矢印の箇所】で中央上揃えを選択します。
⑥itemの子要素のdivの設定
「itemの子要素のdiv」は、矢印部分のdivになります。
まずはデザイン関係から。
マージン： 0（すべて）
パディング： 0（すべて）
横幅： auto
縦幅： auto
透明度： 1
塗り： なし（透明）
それと『モーション』の設定も行います。
移動： Y 50px
次に『条件付きスタイル』でアニメーションの動きを設定します。
条件付きスタイル： 出現時
透明度： 1
イージング： linear
時間： 400
遅延： 400
移動： Y 0px
⑦一番下の階層のdivの設定
一番下の階層のdivは、前述の②で「白い線」と名付けたボックスのことです。
まずはデザインから。
マージン： 0（すべて）
パディング： 0（すべて）
横幅： 2px
縦幅： 50px
角丸： 16px
透明度： 1
塗り： #FFFFFF
次に『条件付きスタイル』でアニメーションの動きを設定します。
条件付きスタイル： 出現時
縦幅： 0px
透明度： 1
イージング： linear
時間： 400
遅延： 0
アニメーションを試してみて、↓のように動けばOK。
直接プレビューでチェックしていただいても大丈夫です。
これでアニメーションは完成です。
あとはデザインを整えていきます。
⑧最後の仕上げ
「Scroll」のテキストを置いたり、配置を調整します。
フォントの内容や配置する場所はお好みで大丈夫です。
⑨完成
サンプルBのスクロールダウンが完成するとこんな感じ。
イージングの種類や時間などアニメーションの設定は、お好みで大丈夫です。
レスポンシブの設定も忘れずに
カルーセルのパーツをそのまま流用しているので、デフォルトのレスポンシブの設定が生きたままになっています。
タブレットやスマホの幅でのチェックや設定も忘れずに行いましょう。
クリックできるスクロールダウンの作り方
ユーザーによっては「Scroll」と書いてあると、そのテキストをクリックできると勘違いする場合があるかもしれません。
また、スクロール以外にもスクロールできる手段を設けてもいいかもしれません。
そこで、スクロールダウン自体をリンクにするスクロールダウンボタンの作り方もご紹介します。
メインコンテンツをリンク先にする
ファーストビューの下にあるコンテンツ部分にIDを付与して、そのリンクをスクロールダウンのブロックに設定すれば、ファーストビューからスムーススクロールで移動が可能になります。
↓こんな感じです。
まとめ
今回ご紹介した方法ならいろいろなタイプのスクロールダウンに応用できます。
線の太さやイージング、アニメーションの時間などを変えるだけでも印象が大きく変わります。
動く線と同じ太さの背景色を置いておくパターンも作れたりするのでサイトのテイストに合わせていろいろカスタマイズできると思います。
参考になれば幸いです。
ホームページの制作会社をお探しの方やサイトのリニューアルをご検討中の方は、当社へお気軽にお問い合わせください。
集客アップや新規顧客の開拓、ブランディングなど、当社はデザイン性だけでなく、お客様が期待される目的や成果に合わせて導線を重視したホームページを制作しています。
当社はSTUDIOだけでなくWordPressの実績やノウハウも豊富ですので、WordPressと比較した場合のSTUDIOのメリットやデメリットなどもご案内可能です。
この記事を書いた人
田中 寛昭
Design / Marketing
アメリカ・フロリダ州にあるウォルト・ディズニー・ワールドでホテルマンとして働いた経験があり、当時はフランス・イタリア・スイス・ドイツ・アフリカ・モロッコ・メキシコの人達とルームシェアをして暮らしていました。
20代半ばからは、M&Aに伴うデューデリジェンスや国立大学・国立病院の独立行政法人化、地価動向の調査・分析など、官公庁や自治体、裁判所、上場企業、金融機関等の様々な案件を経験。その後、Webサイトの運営や制作を手掛けるようになり起業しました。