ホームページのスクロールアニメーションとは？
ホームページのトレンドは年々変わっており、人気なデザインもまた日々変化しています。
そんな中でも、特にコンテンツの「見せ方」に関しては、様々な技術の進歩とともにこだわりの多いサイトも増えてきました。
特に近年ではホームページ内をスクロールする際、コンテンツに何かしらの動きを付ける「スクロールアニメーション」を見かけることも多くなっています。
今回はそんなスクロールアニメーションを利用したホームページデザインについて、参考事例を交えてご紹介したいと思います。
１．スクロールアニメーションとは？
スクロールアニメーションとは、ホームページ上でページスクロールをした際に画像コンテンツやテキストコンテンツ、背景などに何かしらの「動き」が加わるものを指します。
※実際にアニメーションを実装したホームページサンプルをご覧になりたい方はこちら（サンプルサイトを別タブで開きます）
画像やテキストがスクロールに合わせて徐々に表示されたり、スライドして現れたりする”動き”は、ユーザーの目線を誘導し、ページを最後まで読み進めてもらいやすくする効果があります。
よくあるアニメーション例としては、上記に挙げた通り
- フェードイン（対象が徐々に現れる）
- スライドイン（対象が滑り込みながら現れる）
- ズームイン（表示されている画像を拡大）
などがあります。
２．メリットとデメリット
スクロールアニメーションには多くのメリットがありますが、使い方に注意が必要なポイントもあります。
２-１．メリット
①ユーザーの興味を引きやすい
静止したページよりも視覚的な動きがあるため、「続きを見たい」という心理を生みやすく、離脱防止に効果的です。
②見せたい情報に視線を誘導できる
人は動いているものに視線が誘導されやすいという特性があります。
そのため、スクロールアニメーションは閲覧ユーザーの視線誘導が出来るとともに、訴求したいポイントや伝えたいことをより強調することもできます。
たとえばサービスの特徴、価格表、CTA（コール トゥ アクション、問合せや予約などホームページで最終的に行動してもらいたいアクションのこと）ボタンなどをアニメーションで登場させることで、自然と目が止まりやすくなります。
③洗練されたブランドイメージを作れる
動きのあるページは、デザイン性が高く見えるため、「しっかり作られているサイト」という信頼感につながります。
２-２．デメリット
①過剰なアニメーションは逆効果
動きが多すぎると、読みづらさやページの重さにつながることがあります。
重要な箇所だけに絞って設定するのがおすすめです。
②スマホ表示では見え方が異なる場合がある
アニメーションの強さや速度によっては、PCとスマホで印象が変わることがあります。
当システムでは各デバイスでのプレビューが可能なので、確認しながら設定するのが安心です。
３．当システムのスクロールアニメーション紹介
当システムでは、初心者の方でも簡単にアニメーションを設定できるよう、
厳選したアニメーションパターンを標準搭載しています。
設定できる代表的なアニメーションは以下のとおりです。
- フェードイン（自然な表示で使いやすい万能タイプ）
- スライドイン（左／右／上／下）
→ 無料相談・料金・目立たせたい項目に最適
また、以下の調整にも対応しています。
- 表示スピード（速い、普通、遅い）
- スライドの方向（左から、右から、上から、下から）
複雑なプログラミングなしで、プロのような動きのあるページを簡単に作成できます。
４．スクロールアニメーションの設定方法
「特別な演出は難しそう…」と感じる方もご安心ください。
当システムでは、複雑な設定を必要とせず、直感的な操作でアニメーションを追加できます。
なお、当システムでの設定方法は、サポートサイトにて動画で詳しく解説しています。
ぜひこちらも併せて御覧ください。
参考：サポートサイト｜コンテンツ編集 – アニメーション設定方法
１．まずは当システムにログインし、編集画面で編集したいページを表示します。
ログインの仕方～編集画面の表示については下記動画をご参照ください。
ホームページ作成講座｜ログイン
ホームページ作成講座｜ホームページ選択（ホームページを選択してダッシュボードを開く）
ホームページ作成講座｜編集・プレビュー（編集画面をつかう）
２．アニメーションを設定したいコンテンツにマウスカーソルを合わせると、左に「≡」アイコンが表示されます。
「≡」にマウスカーソルを合わせると表示されるメニューから、「アニメーション設定」をクリックします。
３．アニメーション設定の詳細画面が表示されます。
設定したいアニメーションの種類をクリックします。
アニメーションの種類｜なし
何もアニメーションを追加しない設定です（初期設定）。
アニメーションせず通常どおりコンテンツが表示されます。
アニメーションの種類｜フェードイン
コンテンツが徐々に現れるアニメーション設定です。
「スピード」で表示の速度を「速い」「普通」「遅い」の3段階からクリックして選択します。
アニメーションの種類｜スライドイン
コンテンツが滑り込みながら現れるアニメーション設定です。
「スライドの方向」で滑り込んで来る元方向の設定をします。「左から」「右から」「上から」「下から」の4方向の中からクリックして選択します。
「スピード」で表示の速度を「速い」「普通」「遅い」の3段階からクリックして選択します。
４．設定したいアニメーションをクリックして選択したら、「ＯＫ」ボタンをクリックして設定完了です。
５．設定されたアニメーションを確認するためには、編集画面ではなく、プレビューで「フレームなしで確認」から確認する必要があります。
編集画面上部、右から３番目の「プレビュー」ボタンをクリックします。
６．プレビュー画面がブラウザの別タブで表示されます。
プレビュー画面上部、右端の「フレームなしで確認」ボタンをクリックします。
７．フレーム（画面上部のパソコン・タブレット・スマートフォン切り替え枠）のない状態のプレビュー画面がブラウザの別タブで表示されます。
アニメーション設定したコンテンツまでページをスクロールして、編集内容に問題がないか確認し、プレビュー画面を閉じます。
８．編集画面に戻り、ホームページに編集内容を反映します。
画面左上の「ダッシュボード」ボタンをクリックします。
ダッシュボードへ戻るメッセージが表示されますので、「保存する」ボタンをクリックします。
※この段階では、公開されているホームページに編集内容が反映されていません。
９．ダッシュボードが表示されます。
「更新」ボタンをクリックします。
１０．ホームページを更新するメッセージが表示されます。
「更新」ボタンをクリックすると、公開されているホームページに編集内容が反映されます。
１１．公開したホームページを確認するには、ダッシュボード右上のＵＲＬをクリックします。
公開中のホームページが表示されます。
５．まとめ
スクロールアニメーションは、ページに”動き”を加えるだけでなく、
- 読み進めてもらいやすくなる
- 伝えたい情報を強調できる
- サイト全体のクオリティが上がる
といった、ユーザー体験向上に直結する機能です。
使い方によってはデメリットもある反面、ホームページの雰囲気や見栄えを大きく変えることのできるデザインでもあります。
「読みやすいサイトにしたい」「デザインを少しリッチにしたい」
そんな方にぜひ活用していただきたい機能です。
ぜひ当システムを使って簡単にスクロールアニメーションを設定し、効果的なホームページを作成しましょう！