シングルページデザインの成否を決める5つの重要な要素

Designmodo Editorial

Designmodoは2010年から運営しているWebデザインのトレンドなどを紹介するメディアです。

この記事はDesignmodoからの翻訳転載です。配信元または著者の許可を得て配信しています。

The 5 Critical Elements That can Make or Break Your One-Page Website’s Design

複数ページにまたがるWebサイトよりも、1枚で構成されるシングルページのWebサイトの方が明らかに作りやすいように思えます。しかし実際はユーザーフレンドリーであると同時に見た目も魅力的なサイトという観点では、シングルページで作る方がずっと難しいのです。

シングルページのデザインに、マルチページデザインの10倍の時間がかかることはありません。しかし、言いたいことすべてを1つのページに詰め込むために、しっかりプランを練ることが難しいのです。

もちろん好きなだけページを長くすることができますが、ほとんどの訪問者は3回目のスクロールの後で離脱し始めます。

シングルページの作り方について、この記事では5つの重要な要素を中心に説明しています。シングルページを構成するこれらの要素それぞれについて正しく理解していきましょう。

デザインの成否を決める5つの重要な要素

1. ゴール

Webサイトのゴールを明確にして取り組む

Webサイトが達成しようとしているゴールを理解しないままデザインを始めても意味がありません。そのゴールに基づくことで、サイトの構造を設計できます。

シングルページのWebサイトは、ユーザージャーニーを1つのゴールに向けて設計する必要があります。それは以下のようなものです。

  • 何かを売る
  • ポートフォリオを見せる
  • イベントを告知する

訪問者をすぐに離脱させてしまっているような特徴を探してみましょう。この特徴は、彼らがCTAに応える前に発生しているかもしれません。

たとえばページの読み込み速度です。

Bistro Agency

このWebサイトのファーストビューにあるインタラクティブな効果は、サイト全体の読み込み速度を遅くするようなことはありません。

Be Moving 3

BeThemeのあらかじめ作られたこのシングルページの特徴は、動いているように見える静止画です。

Think Pixel Lab

ちょっとしたアニメーションが、ページの動作を鈍らせることなくファーストビューにあるイラストを活気づけています。

Be Product 2

こちらは、このページのフレッシュな見た目そのものがセールスポイントになっている例です。

Sheerlink

大きな画像とスライドパネルが、ユーザーを引き付ける役割を果たしている素晴らしい例です。

Be App 4

アプリを宣伝するのに長々とした技術的な説明は必要ありません。鮮やかな色使い、しっかりした効果、本当にかっこいいプレゼンテーションが成果をあげます。

2. テキスト

最小限にとどめて読みやすくする

シングルページWebサイトのファーストビューをテキストで埋めると、ほとんどのユーザーはわざわざページを下へスクロールしなくなってしまいます。そうではなく、見出しを目立たせることに注力して、テキストの量は最小限にする必要があります。短いパラグラフや箇条書きを使用してもいいでしょう。

ページ内のどこであってもテキストを固まりにするのは避けましょう。テキストはセクションに分けて、見た目を統一させましょう。内容を面白くわかりやすくするためなら、そのほかに何ができるかも考えましょう。

ブックマークすべきシングルページWebサイトは以下のとおりです。

Dangerous Robot

とても面白いサイトなので、すべてのセクションをおそらくもう1度見たくなります。

Be Tea 3

要素がきちんと整理されている例です。

Hello Alfred

核となる情報はファーストビュー上にあり、説明に箇条書きも使用してメッセージをできるだけ簡潔にしています。

Be Cakes

大きくて魅力的な画像がセールスに役立つ他の例です。ここでは、各画像に対してテキストが適切な位置に添えられています。

Mercedes-Benz

この例のように自動車がブランドと同等の人気を持っているときであれば、テキストよりも高品質な画像に重点を置く方が効率的です。

3. 画像

正しい視覚パターンを見極めて余白を賢く使う

人はテキストをFパターン(F字型)で読み、画像をZパターン(Z字型)で見る傾向があります。ですので、その流れを保つようにテキストや画像を正しく配置する必要があります。

惜しみなく余白を使うことで、セクション分けができます。またテキストを読みやすくし、訪問者を惹き付けておくこともできます。ただ、やり過ぎないようにしましょう。

Chris Connolly

秩序をもたらすために余白を活用している例です。

WeShootBottles.com

このWebサイトは非常にクリエイティブです。余白がキャンバスのようになっています。

Be Dietician 2

このあらかじめ作られたシングルページWebサイトの余白は、秩序を保っています。また、いろいろなセクションが飛び出してくる仕様になっています。

Dribble’s Year in Review

さまざまなデザイン原理を最大限に利用して、すばらしいビジュアルを作る方法のいち例です。

Nasal Drops

点鼻薬のプロモーションサイトに面白さを期待することは普通ありません。しかしこのサイトは、スライドや余白、アニメーションを巧みに使うことでその常識を打ち破りました。

4. ナビゲーション

操作しやすく、スクロールを楽しくさせる

ナビゲーションとスクロールの問題ほど訪問者をイラつかせるものはほとんどありません。長いシングルページの扱いには注意すべきです。訪問者がもっと何かを発見したくなるようなナビゲーションをデザインする必要があります。

横に伸びるスティッキーヘッダーやサイドバーメニューを使うのはいいやり方です。ユーザーは1回のクリックだけで、興味のある場所へ簡単にジャンプできます。操作で疲れてしまうこともある、マウスでのスクロールのようなアナログな方法とは正反対です。

自動スクロールするナビゲーションリンクも効果的です。訪問者はセクション間を瞬間的にジャンプする代わりに、自分がリンクを謳歌したときにページ上を遷移する様を楽しむことができます。

ここからはユーザーを惹きつけ、扱いやすいナビゲーションの使い方をしているシングルページを紹介します。

Sergio Pedercini

このデザイナーのWebサイトには、3つの異なる自動スクロールのナビゲーションリンクが含まれています。

Be Game

Be Gameでは、あなたが面白さを見出すかもしれないナビゲーション体験を提供してくれます。

Be Landing 2

色彩設計、レイアウト構造、マウススクロール3回でページ全部を見ることができる、という3点で優れたサイトです。

Brainflop

最上部と左サイドの2つのメニューによって、ユーザーがWebサイトをすばやく操作できるようにしています。(編注:現在はアクセスできなくなっています)

5. コールトゥアクション

正しいCTAを見定め、ためらわずに使う

一般的に、CTAボタンはWebサイトのゴールとつながっているので、ユーザーに行動を起こさせるために、ためらわずに使ってください。それがむしろシングルページWebサイトの最もいいところです。大抵の場合、ユーザーを1つのゴールに向かわせることができます。

たとえばポートフォリオを載せているなら、CTAボタンはファーストビュー内に載せるのが一般的でしょう。しかしサービスやプロダクトを扱う場合には、複数のボタンが必要になるかもしれません。

Be Hairdresser

このあらかじめ作られたWebサイトでは、CTAボタンはファーストビューとメニューの2か所にあります。

The Art of Texture

ファーストビューに2個のCTAボタンが設置してあり、ユーザーは見たいものを選ぶことができます。

Pyrismic

このサイトでは、目立つCTAボタンを使いシンプルな登録フォームを設置しています。(編注:現在は仕様が変更になっています)

Reneza

RenezaはCTAボタンに対して特に工夫などはしていません。適切な色とテキストサイズを用いて、賢明に扱っています。

まとめ

ここまでシングルページWebサイトの5つの重要な要素と、その使い方を見てきました。ここからは、あなたがこの技術を習熟するまで練習あるのみです。

とはいえ、気をつけてください。これらの原理は合理的でシンプルなわかりやすいものです。しかし、長いシングルページのWebサイトをデザインするときには、必ずしも簡単にこれらの原理を取り入れることができるわけではありません。もし手っ取り早い方法がよければ、Webサイトのテンプレートを使いましょう。それらはここで述べた5つの原理が組み込んで仕上げられています。


Welcome to UX MILK

UX MILKはより良いサービスやプロダクトを作りたい人のためのメディアです。

このサイトについて

UX MILKのディレクター募集