こんばんは！
伴走型デザイナー・ヒートマップ解析士のしるべデザイン・ひかるです。
突然ですが、皆さんがスマホでサイトを見ている時のことを思い出してみてください。
■リンクを押そうとしたら隣のボタンを誤爆した
■文字が小さすぎて、わざわざピンチアウト（拡大）しないと読めない
■ページを開いた瞬間、文字がぎっしりで「うわっ」と思って閉じた
こうした「ちょっとしたイライラ」、
実はビジネスにおいて致命的な損失を生んでいるんです。
イライラ解消のために大事なポイントは何か？順に説明します。
「モバイルファースト」と「レスポンシブ」の違い、知っていますか？
よく聞くこの言葉、実は意味が少し違います。
▼レスポンシブ
PC向けに作ったものを、スマホの画面サイズに合わせて「自動で整列し直す」仕組み。
▼モバイルファースト
そもそも「スマホで見る人」を主役として、
最初からスマホでの使いやすさを最優先に設計する考え方。
今の時代、サイト訪問者の8割以上がスマホユーザーです。
だからこそ、私は「スマホでどう見えるか」から逆算して
デザインを組み立てることを意識して制作しています。
0.1ミリの差が「信頼」を変える
「そんな細かいこと……」と思うかもしれませんが、
この差が成約率を大きく左右します。
イライラしてしまったら、皆さんページから離れてしまいますよね。
そうしない工夫の一部を紹介します。
▼文字の大きさ
スマホでの最低ラインは16px。
これより小さいと、無意識に読むのをやめてしまいます。
年齢などに合わせることを考えると、これでもまだ小さいという場合もあります。ターゲットに合わせて設計していく部分です。
▼ボタンの幅
人の指の腹のサイズを考え、最低でも高さ44px以上は確保します。
隣のボタンとの隙間も、誤クリックを防ぐためにミリ単位で調整します。
デザインの画面上だけでなく実際のスマホでも見え方など確認している部分です。
高速スクロール」という名の強敵
もう一つ、スマホユーザーには大きな特徴があります。
それは、驚くほどの速さで指を滑らせる「高速スクロール」です。
WEBの世界には「見ない・信じない・行動しない」という有名な3つの壁があります。
ユーザーは基本的にあなたのサイトをじっくり読みません。
（衝撃的…！でもそうなんです）
流し読み（高速スクロール）をされても、
パッと目に飛び込んでくる画像や、
一瞬で意味が伝わるキャッチコピーがなければ、
そのまま「離脱」という名のサヨナラを告げられてしまいます。
ユーザーの「壁」を突破するために
「見ない」なら、一瞬で伝わるビジュアルを。
「信じない」なら、誠実さが伝わる証拠や実績を。
「行動しない」なら、押しやすい場所に魅力的なボタンを。
私は解析士として、ユーザーがどこで指を止めたか、
どこでイラッとして離脱したかをデータで把握しています。
だからこそ、その「壁」を一つひとつ取り除き、
スムーズに最後まで読み進められるデザインをご提案しています。
「自分のサイト、スマホで使いにくくないかな？」と不安になったら、
まずはスマホを手に取って、ご自身でスクロールしてみてください。
もし少しでも「引っかかり」を感じたら、
それはむしろ改善のチャンスです。
いつでも相談に乗りますので、お気軽に声をかけてください。
