売れるWEBサイトのデザインとレイアウトで大事な4つのポイント
WEBサイトのデザインで悩んでいる社長や担当者「デザインとかレイアウトとか、どういうところを意識したら成約率（CVR）の高いWEBサイトになるんだろう？大事なポイントとかあれば知りたい」
こんな疑問にお答えします。
成約率（CVR）の高いWEBサイトにするためには
いろんなポイントがありますが、
今回は比較的取り組みやすいものを
4つにしぼってお伝えします！
それではいきましょう！
意図的に違和感を生み出す
あなたのWEBサイトの
目的は何ですか？
商品を買ってもらうこと？ 資料請求をしてもらうこと？ メルマガに登録してもらうこと？
きっと何かしらの
目的があると思います。
それを達成するためには、
わかりやすく伝えることはもちろんのこと
目立たせることも大事です。
つまり、注目してもらうこと。
これはこちら側で意図的に
つくらなければいけません。
よくある方法でいえば、、、
- 文字サイズを意図的に大きくする
- 文字を赤色にしたり、黄色マーカーを入れる
- ボタンの色をサイト内で使っていないものに変える
これらも確かに良いんですけど、
違和感を生み出すともっと目立たせることができます。
言い換えると、
意図的にバランスを崩すということです。
例えば、僕がよく使う方法で
手書きの文字や記号を使います。
次のAとBを見比べてみてください。
これらは過去に僕が作ったサイトから抜粋してきたものです。
A）
B）
Aにはよくあるデジタルな矢印ですが、
Bには手書き風の矢印を入れています。
この箇所だけ見たら
少しわかりにくいかもですが、
デジタルな文字や記号で埋め尽くされた
WEBサイトの中に手書き風の文字や記号があると
人はどうしても違和感を感じ、注目してしまいます。
特に購入ボタンや登録ボタンなど
目的のために必要なところに置くと効果的ですね^^
【スポンサードサーチ】
目線の流れに合わせてレイアウトする
WEBサイトのレイアウトで
気をつける点のひとつとして、
ユーザー目線があります。
なぜユーザーの目線に合わせる必要があるのか？
ユーザーは
「なんか読みにくいなぁ…」
とストレスを感じで
続きを読むことをやめてしまうからです。
人がWEBサイトを見ていく流れというものは、
実は決まっていて、原則があります。
その原則は2つ。
①F型
ブログのように記事が縦にいくつも並んでいるような
サイトに対して人は、次の図のように
左から右に並行しながら上から下へと目線を動かしていきます。
このかたちがアルファベットの「F」に
似ているところから「F型」と呼ばれます。
②Z型
LP（ランディングページ）のように、
ひとつの商品やサービスについてだけ
書いているようなサイトに対しては、
F型の目線になりません。
次の図のように、
左上→右上→左下→右下
の流れで見ていきます。
つまり、Zのようなかちになり、
「Z型」と言われたりします。
まぁぶっちゃけF型とかZ型という言葉は
わざわざ覚える必要はありません。
ただここで知っておいてほしいのは、
どちらにしろ目線を外すのは
左から右にいってからということです。
つまり、
左側に何かしらの
ユーザーがアクションするものを
置くのは、ユーザーの目線の流れに
逆らうのでNGということです。
アクションするものとは、
例えば、お申込みボタンや購入ボタンです。
Amazonも、
「カートに入れる」ボタンや
「レジにすすむ」ボタンは右側に
配置していますよね。
オファーとデザインを合わせる
メッセージを伝えやすくするために
基本は白地に黒文字が理想なんですが、
オファーが高額商品やVIP用商品のときは別です。
オファーと合ったデザインにしたほうが
CVRが良くなることが多いです。
つまり、デザインにも高級感を出すということ。
例えば、メインカラーは
ゴールドや深いレッドなど
にしたほうが良いです。
キャバクラやホストクラブのWEBサイトは
まさに高級感を表現しているので
参考にするといいですね。
【スポンサードサーチ】
ひと目で理解できるようにする
しっかり読まないといけない、
考えないといけないのは
ユーザーにとってはストレスです。
なので、ひと目でわかりやすくする。
理解してもらうことは重要です。
そうするためにやるべき
一番カンタンな方法は、視覚化です。
わかりやすいように
事例をあげて、お話しますね。
以前、テキストの教材を
動画バージョンにした商品を
プロデュースすることがあったんです。
そのときの訴求のひとつとして、
テキストでは、読むことだけしかできないが、
動画を使えば、視覚と聴覚も使えるので
学習スピードが早くなることを伝えました。
実は人の五感の中で、
視覚と聴覚って以下の数字が示すように
割合が高いんです。
視覚：83％ 聴覚：11％ 嗅覚：3.5％ 触覚：1.5％ 味覚：1％
上記のように文字だけでは
どうしてもインパクトに欠けるので、
僕は次のような円グラフにしました。
赤く塗られているところが、
訴えたい割合です。
正確な数字を言えば、
94％ですが、数字を言わなくても
視覚でかなり割合が多いということが
一発で理解できますよね。
さらに言えば、
手書き風で丸で囲んでさらに強調させました。
これは、さきほどの
「意図的に違和感を生み出しているか？」
でお伝えした、テクニックも利用しています^^
以上、4つのポイントを解説しました。
ぜひWEBサイトのデザインやレイアウトを
考えるときに参考にしてみてください！