販促担当者のためのデジタルマーケティング情報メディア|baXooka[バズーカ]

LP制作を発注するなら抑えておきたい!よく使われる動き7つとその効果まとめ(サンプルGIF付き)

皆さん、こんにちは!バズーカ運営チームの金です。

ランディングページを企画する時、キャッチコピーや原稿・画像はもちろん、「ウェブページ」ならではの「動き」もひとつのポイントになりますね。

商品を目立たせ、最後までページを見てもらいまたは、ユーザーの利便性を向上させてページ滞在時間を増やしてくれる「動き」!
でも、制作を依頼する時に「これ、何と言ったら通じるだろう?」と悩んだことありませんか?

「これかな」と思っても不安で、サンプルをいちいち探して伝えることも手間がかかりますね。今回の記事では、ランディングページによく使われる「動き」の名称とその効果・注意点をサンプルGIFと合わせて整理しました。

制作チームとの円滑なコミュニケーションと効果的なランディングページの完成に役に立つことができればと思います!

メニュー関連

アコーディオンメニュー

選択した項目が広がり、下の断層が表示される動きのメニューです。楽器のアコーディオンのように縮んだり伸びたりすることから、こういう名前になったようです。

最初は大きな項目だけが見え、クリックすると詳細メニューが開いて選択できるようになります。開いたメニューは再度クリックして閉じる仕様が一般的で、メニューの量が多い時もあまりスペースをとらずに、即座に見られることが便利ですね。

一方で、詳細項目が多くない場合は、無駄なクリックが増えて逆に利便性が落ちることになりかねないので、メニュー数と断層をまず考えた上で活用することをおすすめします。

ハンバーガーメニュー

「≡」の形をしたアイコンを画面の隅に表示し、クリックすると詳細内容が表示される動きです。画面が小さくてメニュー全体を見せることが難しいスマホ用のページに有効です。

閉じている時のアイコンがハンバーガーと似ているということで、こういう名前になりました。

一点注意するところは、スマホの利用が日常的じゃないユーザーにとっては「≡」のアイコンの意味が理解できない場合もあるということです。 アイコンと合わせて「メニュー」などのテキスト表記を入れた方が、より多くのユーザーにも受け入れやすくなると思います。

フローティングメニュー

ページをスクロールした時も、画面から消えずに固定されるメニューのことです。特に縦長の形が多いランディングページでは、いちいちページの最初に戻らなくてもメニューをクリックできるので、多く使われていますね。

「浮いている」という意味の英単語「floating」からの名前です、わかりやすい!ただ、常に画面の一部をメニューが占めてしまうことになるので、大事なコンテンツ自体を表示するスペースが足りなくならないように注意してください。ハンバーガーメニューなどと合わせて上手く活用しましょう!

また、メニュー全体ではなくて「TOPに戻る」など、一部の機能を入れたボタンがついてくる場合は「フローティングボタン」という呼び方をします。

コンテンツ表示関連

カルーセル

画像などのコンテンツを横にスライドさせる表示方法です。複数のコンテンツを一つの画面で表示したい時に有効で、主に画像の場合に多く使われています。

しかし、一般的な上下スクロールと異なる操作が必要となるため、ページ全体のスムーズな観覧に邪魔になることもあります。使いすぎないように、注意してください。

モーダルウィンドウ

何かの操作をしないと、補助ウィンドウから元のウィンドウ(ページ)に戻れないようにする表示方法です。サンプルGIFのように「☓」「OK」ボタンを入れて、それをクリックしないと戻らない仕様が一般的んです。

補助ウィンドウの内容に集中させることができるため、詳細内容を表示したり、動画や画像を大きなサイズで見せる時に主に使われています。

一方で、ユーザーの動きを完全に停めることになるので、使い方によっては拒否感を与えることもあると言われています。必要な箇所だけに絞って利用することをおすすめします。

スクロール関連

スムーズスクロール

同じページの中でメニューをクリックして違う内容にスクロールさせることがありますが、「スムーススクロール」はこういう時に画面単位じゃなくて、ライン(行)単位にスクロールさせることです。

いきなり内容が変わるのではないので、視線で追いやすくより滑らかな印象を与えることができます。しかし、ページの長さによってはずーっとスクロールされてしまい、ユーザーに「遅い!」と思われてこともあるので、スクロールスピードを適切に調整してくださいね。

パララックススクロール

ページの何ピクセルの範囲までスクロールすれば、どの要素がどんなスピードで動くかを個別に設定し、ページを見る人に「奥行」があるように見せる動きです。

普通のウェブページとは違う情報の伝え方がと、「自分の操作で動いている!」というインタラクティブな面白さを訪問者に与えることができるのが特徴ですが、制作工数の増加やレスポンシブ対応の難しさが注意するポイントです。

こちらに対しては、前回の記事で事例と合わせて詳しく紹介しています、こちらでご確認ください

まとめ

ここまで、多く使われている動きを中心に整理しました。今後はランディングページを発注する時に、この記事の内容とGIF画像を利用すれば、よりスムーズに制作チームとのコミュニケーションができると思います。

記事の中でも何回か言っていますが、適切に活用しないと逆効果になってしまう危険もあります。あくまでもユーザーの利便性を最優先に考えて取り入れてください!

The following two tabs change content below.
キム

キム

テクニカルディレクター。 フロントエンドコーディング、スマホ、アプリケーション、IoTなどに興味深いです。 たまに変な日本語が出てしまっても許してください…!
販促の最新トレンド、事例をお届け!
メルマガ登録情報入力
必須
必須
メールアドレス 必須
会社名 必須
SNSでフォローする