Webならではの効果的なレイアウト方法5パターン

今回はWebならではの効果的なレイアウトについてご紹介します。

レイアウトというと「どこに何を並べるか」ということですが、Webは紙媒体と違い、いろいろな表現手法があります。クリックやタップ、マウスオーバーした時に様々なアクションを仕込むことが出来ますので、いろいろな表現が可能になっています。

ここでは、典型的なページ

• トップページ
• 一覧ページ
• 詳細ページ
• フォームページ
• オンボーディング（説明）

を取り上げて、そのレイアウト手法を学べるように構成しました。

• トップページのレイアウト
• コンテンツ一覧ページのレイアウト
• コンテンツの詳細ページのレイアウト
• フォームページのレイアウト
• ウォークスルー・コーチマークのレイアウト

 

トップページのレイアウト

レイアウトを行う際に重要なのは「一目でどんなサイトなのかが分かりやすくする」いう点です。特にサイトにアクセスした際の画面表示は非常に大切です。ユーザーは意味が伝わらない場合すぐにそのサイトから去っていってしまいます。

せっかく来てもらったユーザーがすぐに帰ってしまったら悲しいですよね。そういう感情的なことではなく、ビジネスにおいて大問題です。

ですので、サイトの概要がすぐに伝えるためのキャッチコピーで気を引けるかがポイントになります。このサイトにアクセスした際に最初に画面に表示される部分のことを「ファーストビュー」や「ヒーローエリア」といいます。様々な表現タイプがありますので、サンプルをいくつか見ていきましょう。

1. ファーストビューで背景に画像を使う

サービスやサイトの内容にあった画像を大きく背景として配置するパターンです。インパクトがありますね。下記イメージは「apple ipad」のファーストビューです。キャッチコピーの位置やフォントなども重要になります。

https://www.apple.com/jp/ipad/

 

これは我々Skillhubのファーストビューです。大きな写真と文言を配置しています。典型的なトップページのパターンと言って良いでしょう。訪れたユーザーは何ができるサイトなのかがすぐにわかりますね。

https://skillhub.jp

2. コンテンツを表示するタイプのファーストビュー

記事の一覧や商品一覧をファーストビュー内に持ってくるパターンです。以下は「ヤプログ」のファーストビューです。

http://www.yaplog.jp/

会員登録ボタンやサイトの特徴、ヤプログを利用している芸能人一覧などユーザーの興味を引くようなコンテンツがファーストビュー内に置かれています。

3. 広告のためのファーストビュー

やや、タイプとは外れてしまいますが、ヒーローエリアは非常に重要な箇所なので、そこに「広告を載せる」ということはよくあります。以下の「パズドラ　運営サイト」のようにキャンペーンについてのバナー等をファーストビュー内に置くという方法もあります。こうすることでユーザーに購買を促すこともできます。

http://pad.gungho.jp/member/

いかがだったでしょうか？ご紹介したサイトはぱっと見るだけ（5秒間以内）ですぐに内容がわかりますよね。きっとユーザーは直帰すること無く、何かコンテンツを見て回ることでしょう。そうすることができれば、このトップページの役割は果たしていると言えます。

みなさんもトップページを作成、レイアウトする場合には「5秒間で内容を伝える」ということを意識して行ってください。

まずは無料の7講座から受講してみましょう。わかりやすくて目からウロコですよ。
» 今すぐ無料講座をチェックする

コンテンツ一覧ページレイアウトのポイント

ブログやニュースの記事一覧や、サイト内検索結果一覧などコンテンツの一覧ページの設計のポイントをおさえていきましょう。

1. ページ遷移をさせず、一覧ページで伝える

一覧ページから詳細ページへという画面遷移が普通です。例えば店舗情報を見たくて訪れたページで、一覧から店舗詳細をクリック「ああ、これじゃなかった」と一覧ページに戻る。で、また他の店舗をクリックしたりして行ったり来たり。。

こんなめんどうな体験をしたことは、一度はありますよね。

ここで気をつけたいのは、一覧ページでなるべく完結させられないかと考えることです。ケース・バイ・ケースではありますが、例えばスターバックスのようなクリックするとその店舗の地図が動くようなものはユーザーにとって便利ですね。

ポイントはなるべく一覧ページの中から直接、詳細ページ（目的ページ）にたどり着けるようにすることです。そうすることでユーザーの利便性は増し、サイト内での情報収集がしやすくなり、活発な活動をしてくれるようになります。

ECサイトの商品一覧であれば商品の写真・金額・アイテム種などが、商品に関する重要な情報となるでしょう。しかしスマホ対応などを考えると情報が多過ぎても分かりづらくなってしまう事もあります。必要な情報の選別をユーザー目線で行なっていくよう気をつけましょう。

https://www.amazon.co.jp

上記は「Amazon」の商品一覧ページの一部分です。詳細ページに遷移しなくてもある程度の商品情報を知ることが出来ますね。

整理すると、一覧ページを作る上でのポイントは
１．目的のページに行きやすいようにリンクを配置する
２．不必要なリンクは外し、一覧ページで見せる
ということになります。

2. 欲しい情報を検索しやすくする（並び替えと絞り込み）

前項を踏まえた上で、更に一覧ページ内コンテンツを並び替えたり絞り込みを行うことが出来ると容易に目的のコンテンツを見つけることができますね。ECサイトなどで価格が安い順やレビュー件数で並び替えたり、送料無料の商品のみ表示すると絞り込むなど、見たことがあるのではないでしょうか。

こちらも「Amazon」の商品一覧ページ内の一部分です。カテゴリや価格、レビューの星の数で絞り込みを行う事が出来ます。

他にも賃貸のサイトなどもよく絞り込みが使われていますね。場所や家賃、間取り、マンションか戸建てかなどを条件として絞り込みすることができます。ブログ一覧ページなどもタグやカテゴリーで絞り込めたりします。

https://www.homes.co.jp

コンテンツ詳細ページのレイアウト

詳細ページの多くは「目的達成」のためのページになります。ここの良し悪しで「商品購入」「お問い合わせ」やSNSへの拡散などは、この詳細ページが行われます。そう考えると非常に重要なページになりますね。このページが十分に役割を果たすためにコンテンツイズキングの精神で作りたいところですね。

https://modshair.co.jp/salon/ginza/

上記は「モッズヘア　銀座店」の詳細ページです。ずっとページをスクロールしていくと住所や定休日、使用可能なクレジットカード情報などが記載されています。また、スタッフ一覧やメニューなどがありますね。

しかし、このページの目的は「Web予約」です。ボタンが赤であることからも、これを押させたいということがわかりますね。必要情報を網羅して、納得してもらった上で「Web予約」ボタンを押してもらいたいわけです。このように詳細ページが「目的達成」のためのページというのがわかりますね。

詳細ページ確認後を意識したレイアウト

ユーザーは詳細ページの確認後、どのような操作を行いたいかを考えていきましょう。求人サイトであれば求人内容詳細を確認した後、そのまま応募する事もあれば候補の１つとして取っておきたい場合もありますよね。その求人はとりあえず取っておいて、それ他の求人を見に行く場合もよくあるかと思います。

Findjobではいくら下にスクロールしても「気になる☆」「応募フォームへ」の2つのボタンは上に表示されたままになります。このようなWebならでもレイアウトも知っておく必要があるでしょう。

ユーザーにとっての利便性を考慮しながら応募や購入ボタンの他に、お気に入り追加やクリップというボタンも設置するなど工夫することは重要です。そうすることでコンバージョン率（目標達成率）がぐっと上がります。

フォームページのレイアウト基本

お問い合わせや会員登録などを行う際には入力フォームが用いられます。このフォームが入力しづらい不便なフォームではユーザーが途中で離脱してしまう可能性があります。そうならないために重要な点を確認していきましょう。

フォーム入力の手間を省く

まず項目数についてです。項目数が多くなってしまうと入力するのに手間がかかりますよね。そうなるとユーザーは途中で離脱してしまうかもしれません。ですので必要な情報・項目を選別し設定していきましょう。

また、以下のようにスムーズな入力ができるようにする工夫も必要でしょう。このように入力フォームを使いやすく最適化する事をEFO（Entry Form Optimization）と言います。

• 商品の到着日の指定等であれば1番直近の日にちを予め選択している状態にする
• 未入力の項目にはカラーを付け未入力であることを示す
• 入力するとカラーが消える

このような入力フォームがあるとしますね。そのときにすべて入力するのは面倒です。それを軽減してくれるのがEFOという訳です。例えば漢字で名前を打ち込むと自動でカタカナを入力してくれる。入力ミスを教えてくれる。郵便番号から住所を自動入力してくれる。など便利機能を盛り込めばフォームが嫌になってやめちゃうってことを防げそうですよね。

このようにフォームはただきれいなレイアウトだけではなく、機能面でも美しさを持たせると良いでしょう。

Webアプリ/サービスで使えるレイアウト方法

今までは主に通常のWebサイトでの使用するレイアウトを見てきましたが、ここではWebアプリ/サービスなどで使用される手法について見ていきます。これらの手法はアプリケーションの使用方法をアシストするようなヒントがあります。

1. ウォークスルーを使用する

ウォークスルーページというのは、スマートフォンアプリなどをダウンロードし初めて使う際などに表示されるものです。アプリの使い方や特徴などをスライド形式で説明します。しかしユーザーの中には読み飛ばしアプリを早く操作したいと感じる人もいるでしょう。ですので簡潔におさめるようにした方がよいかもしれませんね。

例えば以下のようにアプリを使い始める前にスライドが表示されて、使い方を学ぶことができます。

2. コーチマークを使用する

コーチマークとはwebサービスやアプリなどで使い方などを吹き出しなどで説明するものです。以下は「cacoo」というサービスです。使い方を教えるためにコーチマークを使用していますね。

コーチマークも多く使いすぎると非表示にする手間が増えてしまいます。本当に必要な情報であるか注意しながら作成していきましょう。

最後に

今回のご紹介した手法は基本というか、現在当たり前のものとして使用されているものを取り上げています。これらはWebレイアウト/表現手法のほんと一部です。それ以外にも便利で効果が高いレイアウトがあると思いますので、みなさんも探してみてください。