LPの文字を順番に出したい？最初から読める情報を決める

LPの写真や文字を、スクロールに合わせて順番に登場させたい方へ。演出を頼む前に「最初から読める情報」と「動かして見せる部分」を分けましょう。特にメニュー名や料金条件は、登場演出が終わるまで待たなくても確認できる形を基準にすると、希望を具体的に伝えられます。

まず、動きが終わった画面を決める

こちらは架空のサロン「salon komorebi」の制作見本です。自主制作の掲載用サンプルで、写真は生成イメージです。実店舗や実際の施術、受注・納品実績、集客成果を示すものではありません。

制作見本｜LP全体。ここでは、メニューを読む部分に注目します。画像は保存した実画面で、登場アニメーションの動作を検証した記録ではありません。

制作見本｜スマホ用メニュー欄の拡大。写真、名前、説明、参考の時間・料金が一つのカード内にあります。画面内のメニュー・金額はデザイン検討用の架空設定です。

このように必要な情報がそろった状態を、先に完成形として確認します。そのうえで、何をどの順に登場させたいかを相談すれば、「最後の画面は合っているのに、読む途中で困る」という違いも確認できます。

写真の登場と、文字を読める時点を分ける

たとえば「写真だけがゆっくり現れ、名前・説明・料金条件は最初から読める」という頼み方があります。反対に、名前、説明、料金、注記を一つずつ遅らせると、途中では条件の一部しか見えない状態になります。

これは制作を依頼する場合の説明用の案で、見本へ追加実装した機能ではありません。重要な文字まで動かす必要があるかを、対象ごとに決めるための比較です。

「全体をふわっと」だけでなく、「写真は動かしたいが、メニュー名と条件は残したい」と指定します。参考ページの動画を見せる場合も、動いてほしい部分と、変えたくない部分を分けて伝えるのがポイントです。

戻って読んだときも、毎回動かす？

登場のタイミングには、初めてその場所へ来たときだけ動く方法と、画面に入るたびに動く方法があります。料金を比べるために上下へ行き来する読者なら、戻るたびに文字が消えて出直す動きは、読み直す場面と相性を確かめたいところです。

初稿の静止画だけでは、この違いは分かりません。実装を依頼するなら「下へ読む」「上へ戻って読み直す」を確認する操作として決めます。スマホでは演出を省くか、動きを抑えた表示では何を見せるかも、対応できる範囲を相談してください。

動かす方が合う場面、動かさない選択

区切りにある小さな図など、本文を読む邪魔にならず、ページの雰囲気に合う部分だけ動かす方法もあります。一方、料金やコースを行き来して比較することが中心なら、文字は動かさず読める状態を保つ選択ができます。

どちらを選んでも、動きを加えただけで内容が分かりやすくなる、申込みが増えるとは限りません。また、静止したデザイン案を確認したことと、登場前・登場中・登場後の表示を確認したことは別です。確認できた状態を分けて合意しましょう。

そのまま使える依頼メモ

・動かしたい場所と、その理由：＿＿＿＿

・最初から読める状態にしたい文字・条件：＿＿＿＿

・登場後に残る完成画面：＿＿＿＿

・初回だけ／戻って来るたびに動かす：＿＿＿＿

・スマホや動きを抑える場合の希望：＿＿＿＿

・実装後に確認する操作と端末：＿＿＿＿

記入例：「メニュー写真は初回だけ登場。名前と条件は最初から表示し、上へ戻ったときには再演出しない。スマホでの扱いは相談したい」。再現したい演出の可否と、確認する範囲をすり合わせる材料になります。

USER ABILITIESのLP制作では、構成・デザイン・実装、PC・スマホ対応を案内しています。個別のアニメーションがすべて標準料金に含まれるとは限りません。参考と上のメモを添え、対応可否・制作範囲・必要な費用を購入前に確認してください。

LP制作サービス