離脱するユーザーを少なくする為に知っておきたいサイトデザイン

「なんか...しっかりしてない人だな」

 

残酷ですが、人は一瞬で"イメージ"を決めます。

 

あなたはこの写真の女性がどんな感情を抱いていると思いますか?

 

f:id:xxxxkun:20180712194332p:plain

 

この画像を見て「うわ、なんか怒ってそうだな」と、一瞬で感情を読み取れたと思います。

特に頭で考えることはせずに、直感の部分が働いたのではないでしょうか。

 

128×420=? 答えを求めなさい。

 

このような複雑な計算を問われたときに一瞬で53760という数字は出てきませんよね。

女性が怒っている写真では頭を働かせることなく答えが出たのに直感では答えられない問題に直面すると人は深く考えることをします。こうやって人は直感と長考を使い分けているのです。

そして、人は長考よりも直感の方が行動スピードが早いです。物を売る仕事をしている僕はターゲットユーザーに直感で「書いたい!」という判断を下すような仕掛けをライティングを通して行っています。

 

 

今回、あなたに伝えたいのは「サイト・ブログから離脱するユーザーを少なくする」ことです。

"離脱するユーザー"とは字の如く、ブログやサイトを見ている人が「もういいや」と思って、離れてしまうことです。

離脱率というと、数字だけを追い求めているように聞こえますが、ユーザーが自サイトからすぐに離れることによって、ゴールである「商品購入ページ」や「サービス予約」まで辿り着かないことになります。

サイトに訪れたユーザーが「商品購入」や「サービス予約」をしなければ、サイトやブログをやってる意味がありません。

サイトやブログを魅力的にする為にライティングやHTML&CSSを学ぶ必要があります。

 

サイトデザインはココに気をつけよう!

冒頭でも述べたように人は印象を一瞬で決めます。

ブログやサイトをユーザーに見てもらった時に「一瞬で判断される場所」はサイトデザインでしょう。

もう少し詳しく書くなら下記の3つが挙げられます。

 

①ページ読み込み速度

 

②テキストの大きさ(バランスが悪い)

 

③写真サイズがバラバラ

 

記事を読む前に、あなたのサイトにアクセスをした瞬間にこの3つの情報が視覚的に入ってきます。

アクセスしたのに一向にページが読み込まれなかったり、アイコンが対応していなかったり、強調する文字サイズが多すぎて見づらかったり、スマホで見てるのに写真が小さすぎるブログやサイトは一瞬で「あぁ、適当だなこの会社(人)」だと判断されてしまうものです。同業者から見ても「この人たちは本気じゃないんだな」と感じます。

 

ライティングは第二段階です。まずはサイトの見映えを徹底して改善する必要があります。

 

①ページの読み込み速度

無駄なプラグインを多用している事が原因で、読み込み速度を遅くしていることがあります。初めの頃はたくさんのプラグインをインストールしがちですが、使っていないものをハッキリとさせましょう。(削除します)

画像のファイルが大きすぎてもサイトが重くなる原因にもなるので、画像のサイズを変えるか、枚数を減らすなどの対策をしましょう。

 

 

②テキストの大きさ(バランスが悪い)

 TOPページには、キャンペーンなどのお得情報を掲載する事が多いが、伝わって欲しいと思うばかりに文字を強調しすぎる傾向がある。

"強調しすぎる"とは、文字サイズを大きくしすぎるあまり、読みづらくなってしまう。

f:id:xxxxkun:20180713091350p:plain

 

記事を編集するときはPCだが、ユーザーはスマホでネットサーフィンをする事が多いので、スマホで見たときの文字サイズを考えて編集するべき。

"スマホユーザーがどれぐらいいるのか?"が気になるなら自サイトにグーグルアナリティクスを導入すると、スマホ、パソコン、タブレットにおける割合を知ることができる。ブログ、サイトを開設したらグーグルアナリティクスを導入しよう。

 

 

③写真サイズがバラバラ(バランスが悪い)

写真をブログやサイトに掲載するときに考えるべきことは「全体像を見せること」です。

不動産のホームページの見せ方が分かりやすいと思います。

これはPCで見たときのページですが、1部屋の様子がページ全体に表示されているので、自分が住んでいるところを想像させることできますよね。

f:id:xxxxkun:20180713093018p:plain

 

これはスマホでも同じデザインを採用するべきです。

悪い例を1つ紹介します。

 

f:id:xxxxkun:20180713094832p:plain

 

「活動の様子」を伝えたいのであれば、おそらく写真は複数枚ある。

だが、スマホ画面に1枚しか見えていなくて、2枚目は見切れてしまっている。

確かにスクロールをすれば全ての写真を見ることができるが、全体の様子を見ることができない。

このように改善できるのではないか?

f:id:xxxxkun:20180713095251p:plain

 

画像を大きくして見やすくするのはとても良い心遣いだが、クリックすることで拡大されるデザインを採用すれば、全体像も見せれるし写真を見やすくする事ができる。

 

せっかく集客をしてブログやサイトに流入させても、上記のような問題点があるとサービスを受けていないのに「なんか、しっかりしてないな...」と判断をされてしまう。

「自分たちはこう思う!」じゃなくて「客が求めていること」を考えると、ちょっとしたところに違いが出てくる。

ライティングもそうだが、サイトの利便性もユーザビリティを高める手段の1つ。