スマホ対応に関するお話

村瀬です。
今日はスマホ対応に関するお話をしたいと思います。
今更スマホ対応って思いますよね。
しかし、意外と見えてなかったこともあるかもしれませんので
どうぞお付き合いください。


今回のお話は、
今はなき楽天のABテストツールを使いながら改善できた、
効果が目に見えてよかったお話になります。


どのくらい効果があったかというと、
商品によっては改善率＋200〜700%という
驚異的な数字をだしたLPもありました。
テストにかけた全ての商品でプラスの改善が見られました。


改善前のLPですが、当然、
弊社でもスマホを意識してLPを作っていました。
文章も丁寧で雰囲気もでていました。


ただ、なんとなくPCよりは
文字が少し大きいものもなんか小さくて読みにくい、、、


はたまた、こちらのLPは文字は
大きいけどなんかギュウギュウに詰まってて読みにくい、、


これは僕のミスではあるんですが、
スマホはPCより文字を大きくしたいっ
ていう指示しか出してなかったのが原因でした。


弊社にはアルバイト含め3名のwebデザイナーがいますが、
それぞれの主観でなんとなく決めてしまっていたのです。

そこでルールを決めました。

楽天のサイトで文字の見やすいLPをいくつかモデリングし
本文で使う最小のフォントサイズばもちろん、
見出しのフォントサイズ、文字間、行間、余白、
フォントの種類などフォントに関するルールを決めました。


スマホの縦LPはもちろん、
フリック画像の文字やPCのLPに対しても同様にルールを決めました。


見やすいLPはデザイナーさんにも納得いただきたかったので、
こちらでいくつか抜粋したものから
見やすいLPを話し合いながら決めていきました。
弊社のジャンルはアパレルですが、
主に美容系のLPが見やすいものが多く弊社では参考なりました。


もちろん、商品の価格帯や見せたい強みによって、
文字のジャンプ率など自由度はほしいは思うので
あくまでベースを決めました。
ただし最小のフォントサイズは統一しました。


最小のフォントサイズはiPhone SEでも認識できることを意識しました。


楽天アプリの特性なんですが、
なんとピンチアウト(指でアップする動作)ができません。
ですので、SEでも楽に認識できるくらいに
最小のフォントサイズはほしいところです。


こうして細かく文字のルールを決めたことで見やすくなりました。
見やすいというのは伝わりやすいということなので、
購入率があがりABテストでも効果がわかりやすく
目に見えるような改善が見られました。


PS:新型コロナウイルスに感染してしまいました。
感染→ホテル療養→病院に入院→抗体カクテル療法→回復（今ここ）
という流れで1週間以上39〜40.5度の高熱が続くとても辛い状態でした。
完全にコロナをなめていました。
無事回復できそうなのでやっとひと安心です。
感染して家族や従業員など様々な方にご迷惑をおかけしたので、
精進して生活していきたいと思います。