それを防ぐためには、アニメーションをつける目的を明確にし、過剰にアニメーションを使用せず、必要な分だけ取り入れるようにすることが大切です。また、どうしても使用したいという場合は、画像やCSS、JavaScriptの圧縮などでページ全体を軽くしたり、ローディング画面をつけて待ち時間のストレスを減らすなどの工夫を考えましょう。

しかし、アニメーションの個性を前面に出しすぎると、文字が読みにくくなったりして肝心の内容が伝わらず、結果CV獲得に至らないということもあり得ます。そもそも、ランディングページを作成する本来の目的は、CV率を上げることであるはず。内容がアニメーションのインパクトに負けてしまっては本末転倒です。

アニメーションLPを作る際にもっとも重視すべきゴールは、おしゃれなランディングページを作ることよりも、目的を達成することだといえます。アニメーションの目的や活用の仕方をまず考え、その上でスタイリッシュな見た目も同時に叶える動きを考えてみましょう。

その例として、株式会社トライグループ様の「家庭教師のトライ」のランディングページをご紹介します。このランディングページでは、授業料の問い合わせをするためのボタンに、一定の間隔で光って見えるアニメーションが用いられています。

さらに、ページ冒頭から下へスクロールし、問い合わせボタンが見えづらい位置に来ると、右側の邪魔にならない位置に問い合わせボタンがアニメーションで出現する仕組みになっています。このボタンはその後スクロールしても同じ場所に留まっているため、いつでもユーザーの好きなタイミングでクリックすることが可能です。

どちらもアニメーションとしてはシンプルですが、ページ全体もすっきりとした作りであるため、十分にボタンの存在をアピールしつつも、ユーザーに余計なストレスを与えることがありません。

スクロールされたときにWebページの各要素が起こす動きを個別に設定し、ページに立体感を出す「パララックス（視差）」エフェクトはよく知られていますよね。

スクロールエフェクトは、使い方次第で操作する人に楽しい経験を与えられるため、ユーザーを飽きさせることなく、「最後まで内容を見てみたい」と思わせることができます。つまり、UX（ユーザーエクスペリエンス）を向上させることで、ランディングページからの離脱を防ぐことが可能というわけです。

スクロールエフェクトを使用したページの例として、デジタルハリウッド株式会社様の専門スクール本科CG／VFX専攻紹介ページをご紹介します。

ページに訪問すると、動く背景の上に大きな文字が映し出され、下にスクロールしていくと、下方向から黒いスペースが現れ、そこに次の項目の白い文字の文章が浮かび上がってきます。

スクロールをしても、背景は移動せずその場でアニメーションを続けるので、奥行を感じられるようになっており、スクロールを続けたくなるような仕組みになっています。

スクロールエフェクトで動きがつけられたランディングページは今や少なくないものの、普通のランディングページと違ってデザイン次第で動きに個性を持たせることが可能です。目的や商品、会社のカラーを踏まえて、どんなエフェクトが合うのかを考えてみましょう。

ローディングアニメーションはローダーとも呼ばれます。
よく使われる事例としては、企業ロゴやアニメーションを一定時間表示させることが多いようです。

昔は画面がフリーズしているのか・それとも読み込み中なのかを判断するためのものとして、ローダーが使用されていました。
現在ではそこに「ユーザーの興味を引く」という役割が追加された、と理解できます。

ここではHTMLとCSS、JavaScriptを用いて、以下のアニメーションを作成します。

・はじめに「ローディング中」と表示され、それが消えて「コンテンツ」が表示される

1.HTMLで表示内容を記述

ローダーとして表示されるものを記述します。
画像や企業ロゴ、GIFを置くのが一般的ですが、ここでは単純化のために文字を配置します。
以下は記述の一例です。

ローディング中

コンテンツ

2.CSSでデザインを記述

続いて、HTMLで配置した画像の位置をCSSで調整します。
以下は記述の一例です。

body {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}

.loader {
position: relative;
width: 400px;
height: 400px;
display: flex;
justify-content: center;
align-items: center;
}

.loader h2 {
color: black;
font-size: 2.3rem;
font-weight: 700;
}

.loaded {
opacity: 0;
visibility: hidden;
transition: all 0.3s;
}

.content {
visibility: hidden;
position: absolute;
color: black;
font-size: 1.5rem;
transition: all 0.4s;
transition-delay: 0.3s;
}

3.JavaScriptを記述する

最後にJavaScriptをbodyの中に記述していきます。
以下は記述の一例です。

以上をまとめると、以下のようになります。

ローディング中

コンテンツ

ここからはCSSです。

body {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}

.loader {
position: relative;
width: 400px;
height: 400px;
display: flex;
justify-content: center;
align-items: center;
}

.loader h2 {
color: black;
font-size: 2.3rem;
font-weight: 700;
}

.loaded {
opacity: 0;
visibility: hidden;
transition: all 0.3s;
}

.content {
visibility: hidden;
position: absolute;
color: black;
font-size: 1.5rem;
transition: all 0.4s;
transition-delay: 0.3s;
}