長くなりがち！シングルページのスマホ表示で気を付けるべきこと

たった1ページで仕上がるシングルページは、離脱させることなく申込みや購入に繋げやすいとして近年注目のサイト構成です。
ただし、1ページに情報を盛り込むだけに、特にスマホ表示時には気を付けないと物凄く長いページになってしまい、コンバージョンに繋がる前に途中で離脱されてしまうなんてことも。

そこで、実際にシングルページで作られたフォトフェスタのサイトを例に、申込みに繋がりやすい演出ノウハウと、スマホ表示で気を付けるべきことをWebデザイナーが紐解きます。

目次

1.目を引く演出で、サイトの趣旨や目的を読ませる
2.スマホ表示で注意！情報をスッキリ見せるレイアウト術

目的に合うシングルページのテンプレートを選ぶ

BiNDクラウドの中には、シングルページで設計されたテンプレートが多数存在します。
申込みに繋げるもの、キャンペーンのような販促目的のもの、問合せに繋げるもの・・など、これらはあらかじめ目的達成のための情報設計がなされているので、自分が作りたい目的と一致するテンプレートを選ぶのが賢い方法です。

今回のサイトの作者、くまぱぱさんは「求人サイト」のシングルページのテンプレートをベースにサイトを制作。
ゴールを「申込み」に置かれたサイトという意味で、テンプレート選びはばっちりです。
それらの情報設計を活かしてテンプレートをアレンジすれば、コンバージョンに導きやすいサイトに仕上がります。

▼写真のワークショップやコンテストを主催している「八ヶ岳フォトフェスタ」さん。

背景全面に入れた写真と、スクロールに反応して動くアニメーション効果によって、ダイナミックかつ印象的な見せ方のバランスが優れた素敵なサイトです。

こちらのサイトは、企業のリクルートサイトを想定した「KEY Agency recruitment」のテンプレートをベースに上手にアレンジしています。

1.目を引く演出で、サイトの趣旨や目的を読ませる

このサイトの成果に繋がる「応募フォーム」の導線は、閲覧者がページのどこを見ていても辿り着くような場所を意識するのが望ましいです。ページをスクロールしても、ページ上部のヘッダにメニューが固定する機能を上手に利用し、コンテンツを読み進めながらいつでも申し込みができる自然な流れを作りましょう。

BiNDで設定するときのポイント

このテンプレートで使われているテクニックですが、ヘッダーエリアのロゴがフワッと浮いて現れる演出やスクロールで現れるゴーストヘッダーにブロックアニメーションの効果をダブルで加えて目に入るように工夫しています。これらはブロックエディタの設定タブのブロックアニメーションで、各種エフェクトを選べば設定可能です。

コンバージョンはひとつがベター

なお、ページ内に2つのフォームが設定されていますが、基本的にはフォームはひとつに絞ったほうがベターです。
例えば、トップには成果により繋げたいお申込み用のフォームのみにして、問い合わせ用のフォームはリンクボタンのみにして入口だけ用意し、別ページに設置するのが良いかもしれません。
テンプレートをアレンジするときは必ずサイトの目的に立ち戻って、コンテンツを追加することでわかりにくい導線にならないかを考えながら進めましょう。

2.スマホ表示で注意！情報をスッキリ見せるレイアウト術

スマホでの見せ方を意識

シングルページのサイトは情報量が多くなりがちで、スマホではどうしても縦長になりすぎるので、見やすさをもっと考慮することを心がけるとワンランクアップできます。
BiNDのレスポンシブWebではPC表示とスマホ表示で個々に設定ができるようになっています。

基本的にテンプレートは、スマホでの表示が自動で最適化されるように考慮されていますが、自分で要素を追加した箇所は必ずスマホ表示に切り替えて、意図した見せ方になっているかチェックしましょう。

BiNDで設定するときのポイント

ブロックエディタの設定タブでスマホ表示に切り替えて、レイアウトのオプション（カラムの段数）をコンテンツ内容に合わせて変更します。

文章が長い場合は、スマホのみカラムを1段に設定してひとつひとつをしっかりと見せるレイアウトの方が読みやすくなります。

写真が多く一気に見せたいコンテンツはカラムを複数段にすると無駄な余白がなくなりスッキリします。

いかがでしょうか？テンプレートからアレンジした部分は特にスマホ表示で必ずプレビューして、見やすいかどうかチェックしてみてくださいね。

今回紹介したサイト以外にも、BiNDupで使えるテクニックが満載の素敵なサイトはナイスサイトでご覧いただけます。ぜひご覧ください。

新しいNiceSiteをチェック