サイドバーは右か左か?

日、LINEのアプリのホームページを見てふと思いました。。。『石原さとみかわいい……』ではなく、このレイアウトはマネしたいな、ということです。もちろん、石原さとみはかわいいのですが、ぼくたちが注目すべきなのはこのページのレイアウトです。

サイトのレイアウトというのは、そんなにパターンがありません。ましてやビジネスで使うためのサイトの場合、そのパターンはさらに限られてきます。基本的に3パターンだけで大丈夫です。ひとつはワンカラムのページ。あとは2カラムのサイトでサイドバーが左のパターンと右のパターンの合計3つです。3カラムのサイトもありますが、セールスやお客さんを獲得することを目的とするなら、3カラムは必要ないというのが、現時点での判断です。あと、最近は横にスクロールするサイトもありますが、そういうまだ一般的に馴染みのない構成も避けた方がいいです。

つまり、サイトのレイアウトを決めるときは、この3つのパターンのうち、どれが適しているかを判断できればいいわけです。

ワンカラムサイトはセールスページに

ワンカラムレイアウト
ンカラムのサイトは主にセールスサイトで使われます。ランディングページやセールスレターと呼ばれるようなサイトは、基本的にワンカラムです。商品の購入やサービスへの申し込み、資料の請求など、明確な1つの目的のためだけにあるページです。

Googleアドワーズに広告を出稿している健康食品や美容関連商品などのセールスサイトを見てみると、ほぼワンカラムになっています。それは当然、その方が売れるからですよね。他のページに移動させずに、そのページのみで全てが完結するタイプです。一般的にクリックされるごとに離脱率が高まって行くため、購入するまでにいくつもページを移動させてはいけないわけです。クリックは購入決定の1回のみにするのが理想です。それ以外は次のページでクレジットカードの情報を入力したり、確認や決済をするといった行為のみ行えるようにします。

もし、ネット上で何かのアクション(購入や登録、請求など)を求めるなら、このワンカラムのレイアウトにするべきです。

2カラムサイトのレイアウト

2カラムレイアウト
カラムのサイトは、主にメインコンテンツの部分と、サイドバーの部分に分けられます。そしてそのサイドバーを右にするか左にするかで、だいぶユーザビリティが変わってきます。では何を基準にして、サイドバーの配置を決めたらいいのでしょうか?

まず、知っておかなくてはならない知識がいくつかあります。ひとつは人間の目の動きです。ページが開いた時、人の目線は「 Z 」のような軌跡をたどるか、「 F 」のような軌跡をたどるとされています。つまり、スタートはいずれも左上。最初にページを開いた時、人は左上を一番に見るのです。そのため、ヘッダー部分には訪問者の注意を引くためのキャッチコピーが必要です。左から右に読んでいくわけです。

次にどのように目線が動くかというと、左下に流れていきます。ぼくたちの頭の中には、文章の始まりは左からということがインプットされていますので、サイトの内容をざっと確認するためにも、左側に注目するようになっているんでしょう。つまり、左側には、見て欲しいものを配置するというのが定石です。

以上を考慮すると、ブログなどのコンテンツがメインのサイトの場合、サイドバーは右に配置して左側にコンテンツが来るようにする。コーポレートサイトのようにサイドバーのメニューに注目してもらい、目的のコンテンツにアクセスしやすくしたい場合は、左サイドバーにするということになります。

クリックしやすいレイアウト

うひとつ押さえておきたいのは、マウスポインタの位置です。多くの人は右利きなので、マウスを右で操作します。また、左利きの人でもマウスは右手でという人が結構います。そのため、マウスポインタ(カーソル)の位置は、だいたい画面の右側にある事が多いのです。この事実を踏まえると、クリックしてもらいたいものは、できるだけ右側に配置した方がいいということになります。

例えば、Amazonのサイトの購入ボタンは右側にあります。Appleのオンラインストアも購入ボタンが右側にありますよね。つまり、購入ボタンを始め、広告やメルマガ登録フォームなどは、右側のコンテンツ内、もしくは右サイドバーに設置した方がいいわけです。

LINEのページのレイアウトは?

LINEのサイト
LINEのページのレイアウトは、ワンカラムの考え方をベースに、2カラムの左サイドバーになっています。左サイドバーのメニューには、メインコンテンツの中に書かれている内容が、目次として表示されています。

クリックしても別のページにいくわけではなく、同一ページ内の該当箇所へ移動するだけです。さらにポジションが固定されていますので、下にスクロールしても常に表示されていて、ユーザビリティが高い構成になっています。

考え方はランディングページなどのワンカラム構成と同じで、アプリをダウンロードしてもらうというひとつの目的のためにつくられています。ですので、不要な情報は極力排除されていますよね。画面左に固定されたサイドバーは、知りたい内容にすぐにアクセスできるようになっています。ここのメニューも、キャッチコピーのように注意を引く文章にすると、より効果的かもしれませんね。

あと、ダウンロードのボタンも左サイドバーに常に表示されています。スクロールしてもいつでもダウンロードできるというわけです。ただ、右側にもダウンロードリンクを持って来た方がいいと思いますね。特にファーストインプレッションですぐにダウンロードできるように、ヘッダーの右側にもリンクがあった方がいいのではと思いました。

注意点としては、これが無料アプリだということです。つまり、深く考えなくても衝動的にダウンロードできるようなものだということです。これが有料商品の場合は、もしかしたら通用しないレイアウトかもしれません。結局は試してみないと分らないので、今度実際に試してみたいと思います。結果はいずれシェアできたらと思います。

お楽しみに。

 

【追記】

昔の日本は横書きの文字が右から左に流れていたので、時代が違えば、また目線の動きも違ったかもしれませんね。