複数ページにまたがるWebサイトよりも、１枚で構成されるシングルページのWebサイトの方が明らかに作りやすいように思えます。しかし実際はユーザーフレンドリーであると同時に見た目も魅力的なサイトという観点では、シングルページで作る方がずっと難しいのです。
シングルページのデザインに、マルチページデザインの10倍の時間がかかることはありません。しかし、言いたいことすべてを１つのページに詰め込むために、しっかりプランを練ることが難しいのです。
もちろん好きなだけページを長くすることができますが、ほとんどの訪問者は３回目のスクロールの後で離脱し始めます。
シングルページの作り方について、この記事では５つの重要な要素を中心に説明しています。シングルページを構成するこれらの要素それぞれについて正しく理解していきましょう。
デザインの成否を決める５つの重要な要素
１. ゴール
Webサイトのゴールを明確にして取り組む
Webサイトが達成しようとしているゴールを理解しないままデザインを始めても意味がありません。そのゴールに基づくことで、サイトの構造を設計できます。
シングルページのWebサイトは、ユーザージャーニーを１つのゴールに向けて設計する必要があります。それは以下のようなものです。
- 何かを売る
- ポートフォリオを見せる
- イベントを告知する
訪問者をすぐに離脱させてしまっているような特徴を探してみましょう。この特徴は、彼らがCTAに応える前に発生しているかもしれません。
たとえばページの読み込み速度です。
このWebサイトのファーストビューにあるインタラクティブな効果は、サイト全体の読み込み速度を遅くするようなことはありません。
BeThemeのあらかじめ作られたこのシングルページの特徴は、動いているように見える静止画です。
ちょっとしたアニメーションが、ページの動作を鈍らせることなくファーストビューにあるイラストを活気づけています。
こちらは、このページのフレッシュな見た目そのものがセールスポイントになっている例です。
大きな画像とスライドパネルが、ユーザーを引き付ける役割を果たしている素晴らしい例です。
アプリを宣伝するのに長々とした技術的な説明は必要ありません。鮮やかな色使い、しっかりした効果、本当にかっこいいプレゼンテーションが成果をあげます。
２. テキスト
最小限にとどめて読みやすくする
シングルページWebサイトのファーストビューをテキストで埋めると、ほとんどのユーザーはわざわざページを下へスクロールしなくなってしまいます。そうではなく、見出しを目立たせることに注力して、テキストの量は最小限にする必要があります。短いパラグラフや箇条書きを使用してもいいでしょう。
ページ内のどこであってもテキストを固まりにするのは避けましょう。テキストはセクションに分けて、見た目を統一させましょう。内容を面白くわかりやすくするためなら、そのほかに何ができるかも考えましょう。
ブックマークすべきシングルページWebサイトは以下のとおりです。
とても面白いサイトなので、すべてのセクションをおそらくもう１度見たくなります。
要素がきちんと整理されている例です。
核となる情報はファーストビュー上にあり、説明に箇条書きも使用してメッセージをできるだけ簡潔にしています。
大きくて魅力的な画像がセールスに役立つ他の例です。ここでは、各画像に対してテキストが適切な位置に添えられています。
この例のように自動車がブランドと同等の人気を持っているときであれば、テキストよりも高品質な画像に重点を置く方が効率的です。
３. 画像
正しい視覚パターンを見極めて余白を賢く使う
人はテキストをＦパターン（F字型）で読み、画像をＺパターン（Z字型）で見る傾向があります。ですので、その流れを保つようにテキストや画像を正しく配置する必要があります。
惜しみなく余白を使うことで、セクション分けができます。またテキストを読みやすくし、訪問者を惹き付けておくこともできます。ただ、やり過ぎないようにしましょう。
秩序をもたらすために余白を活用している例です。
このWebサイトは非常にクリエイティブです。余白がキャンバスのようになっています。
このあらかじめ作られたシングルページWebサイトの余白は、秩序を保っています。また、いろいろなセクションが飛び出してくる仕様になっています。
さまざまなデザイン原理を最大限に利用して、すばらしいビジュアルを作る方法のいち例です。
点鼻薬のプロモーションサイトに面白さを期待することは普通ありません。しかしこのサイトは、スライドや余白、アニメーションを巧みに使うことでその常識を打ち破りました。
４. ナビゲーション
操作しやすく、スクロールを楽しくさせる
ナビゲーションとスクロールの問題ほど訪問者をイラつかせるものはほとんどありません。長いシングルページの扱いには注意すべきです。訪問者がもっと何かを発見したくなるようなナビゲーションをデザインする必要があります。
横に伸びるスティッキーヘッダーやサイドバーメニューを使うのはいいやり方です。ユーザーは１回のクリックだけで、興味のある場所へ簡単にジャンプできます。操作で疲れてしまうこともある、マウスでのスクロールのようなアナログな方法とは正反対です。
自動スクロールするナビゲーションリンクも効果的です。訪問者はセクション間を瞬間的にジャンプする代わりに、自分がリンクを謳歌したときにページ上を遷移する様を楽しむことができます。
ここからはユーザーを惹きつけ、扱いやすいナビゲーションの使い方をしているシングルページを紹介します。
このデザイナーのWebサイトには、３つの異なる自動スクロールのナビゲーションリンクが含まれています。
Be Gameでは、あなたが面白さを見出すかもしれないナビゲーション体験を提供してくれます。
色彩設計、レイアウト構造、マウススクロール３回でページ全部を見ることができる、という３点で優れたサイトです。
Brainflop
最上部と左サイドの２つのメニューによって、ユーザーがWebサイトをすばやく操作できるようにしています。（編注：現在はアクセスできなくなっています）
５. コールトゥアクション
正しいCTAを見定め、ためらわずに使う
一般的に、CTAボタンはWebサイトのゴールとつながっているので、ユーザーに行動を起こさせるために、ためらわずに使ってください。それがむしろシングルページWebサイトの最もいいところです。大抵の場合、ユーザーを１つのゴールに向かわせることができます。
たとえばポートフォリオを載せているなら、CTAボタンはファーストビュー内に載せるのが一般的でしょう。しかしサービスやプロダクトを扱う場合には、複数のボタンが必要になるかもしれません。
このあらかじめ作られたWebサイトでは、CTAボタンはファーストビューとメニューの２か所にあります。
ファーストビューに２個のCTAボタンが設置してあり、ユーザーは見たいものを選ぶことができます。
このサイトでは、目立つCTAボタンを使いシンプルな登録フォームを設置しています。（編注：現在は仕様が変更になっています）
RenezaはCTAボタンに対して特に工夫などはしていません。適切な色とテキストサイズを用いて、賢明に扱っています。
まとめ
ここまでシングルページWebサイトの５つの重要な要素と、その使い方を見てきました。ここからは、あなたがこの技術を習熟するまで練習あるのみです。
とはいえ、気をつけてください。これらの原理は合理的でシンプルなわかりやすいものです。しかし、長いシングルページのWebサイトをデザインするときには、必ずしも簡単にこれらの原理を取り入れることができるわけではありません。もし手っ取り早い方法がよければ、Webサイトのテンプレートを使いましょう。それらはここで述べた５つの原理が組み込んで仕上げられています。
