スマホ最適化をすることで何が起こる？

わざわざコストや労力をかけてスマホに対する最適化をすることで何が起こるのでしょうか？

意味もわからず最適化しろ！って言われても困りますよね。

スマホでの閲覧に対して最適化を行うことで考えられるメリットとは一体なんなんでしょうか。

１．スマホでの閲覧者が情報にアクセスしやすくなる。

そうですね、閲覧者側がスマホだった場合に、PCに最適化されたページだと横にスワイプが必要だったり、拡大・縮小しながら見なきゃいけないような事になってしまい、情報に辿りつくのが困難になってしまいます。

情報に辿り着くのが困難になると離脱に繋がり、見て欲しい情報を見てもらえない事になってしまいます。それはとても悲しい。

閲覧者が興味のある情報にアクセスしやすく最適化してあげる事で離脱を防ぎ、目的を達成してもらいやすくなるのです。

２．ECサイトの場合は購入に直結することも

ECサイトの場合は上記１で説明した通り、スマホユーザーが目的の情報にすぐアクセスが出来ることにより、サイトの売上アップにも繋がります。

何故売上アップにつながるのか？お店で買い物をする時でも、価格がどこに書いてるかわからない商品は購入しないですよね？

わかりやすい価格表示・スペック表示等があれば安心して購入できます。そういった意味でもスマホ最適化を行う事で売上アップも期待できるのです。

３．検索結果に影響が出る

最適化されたページが存在するかどうかがSEOにとっても意味を持ってきます。

googleさんは親切さがすごすぎて、例えばPCのみに最適化されたページとスマホにも最適化されたページがあったとして、両方同じレベルのコンテンツ内容だった場合には、スマホでアクセスしてきた人に対してスマホに最適化された方のページをお勧めしてくれるわけです。

こっちの方が見やすいよーって検索結果を上位に持ってきてくれるわけです。

具体的なスマホ最適化

スマホを最適化するにあたり、ざっくり言ってしまうと大きく３つ方法があるかと思います。

１．スマホ専用ページを作る

イメージ的にはPCでそのページを見ると、PCに最適化されたページが開くが、SPでアクセスした場合には別のスマホ専用ページに飛ぶようなケースです。

たまーに「このページはスマートフォン用ページが存在します、開きますか？」的な表示が出る事があると思うんですが、そういった類です。

２．レスポンシブ対応を行う

レスポンシブ対応っていうとなんか小難しく聞こえるのですが、簡単に言ってしまうとスマホ専用ページではなく同じページを使い、表示する為のスタイルを変更する　という感じになります。

PCでアクセスした時はPCに最適化されたスタイルで表示され、スマホの時はスマホに最適化されたスタイルで表示される。
内容は基本的に同じものが使われており、専用ページとは違い同じhtmlファイルを参照することになります。

３．そもそもスマホファーストで作ってしまう

PCでの最適化を捨て、スマホだけ見えやすかったらいいや、という思想の元、スマホファーストというかスマホしか相手にしませんぐらいの勢いでスマホでの見え方だけを気にして作られたページにするイメージです。

どういったサイトなのか、どういったターゲットを想定しているのか等にもよりますが、いまやアクセスの９割以上がスマホなんて事もよくあります。

そういった場合にPCでの閲覧がほぼないというのであれば、PC向けにわざわざ最適化を行わなくてもスマホでキレイに見えればいい、PCは最低限見えればいい、そういった判断により、スマホ特化なページを作るケースです。

PCとスマホでの最適化の違い

PCとスマホで具体的に何が最適で何が不適なのでしょうか？

１．フォントサイズ

PCで見る場合には画面自体が大きいのでフォントサイズが多少小さくても見やすいですが、スマホの場合は画面が非常に小さい為に、同じサイズ感だと非常に読みづらくなります。

googleさんが推奨してる最低サイズは16pxだったかと思います。
PCでは12px、スマホでは16pxというようにフォントのサイズ感を変えてあげる事で、読みやすくするのです。

その逆も然りで、スマホの小さい画面では大きすぎるフォントも改行されまくりで非常に可読性が下がります。

２．余白の大きさ

行間であったり、コンテンツ自体の距離感というのも非常に重要になります。可読性はもちろんですが、PCとスマホで大きく違うのが、「クリック」「タップ」の違いです。

これはポインター（マウスの現在地を示す矢印のアイツ）が存在するおかげでもありますが、マウスでのクリックは非常に高い精度で狙った所を押すことが可能です。

それに比べてスマホでのタップはどうでしょう？

PCでのクリック程の高い精度でのタップはできませんよね？

正直だいたいで押してますよね？

小さめの閉じるボタンとか押そうとして広告押してしまったりしますよね？

鷹Pは完全にだいたいで押してます。なので何回も広告押してしまってイラっとすることもあります。

なかにはスタイラスペン等を使って精密にタップする人もいるかとは思いますが、世間を見てる限りかなり少数派かと思います。

だいたいで押してもちゃんとタップ出来るように「オブジェクト自体を大きく、さらにオブジェクト同士の距離を取ることで誤タップを無くす」というような工夫が必要になってくるのです。

３．コンテンツ内容

例えばPCユーザーであれば超絶長い文章でも読んでもらえたりしますが、スマホを使用している時に極端に長い文章はあまり読む気がしなくなってしまいますよね？
そういった場合に、いっそスマホからのアクセスの場合はそのコンテンツを非表示にしてしまったり、逆にスマホの場合だけ見てもらえるように表示するなど、コンテンツ内容の切替や順番変更等も行います。

またPCではテキストで訴求しているが、スマホの場合は簡略化した画像での訴求を行う、等の工夫を行う事でデバイスに応じた最適化を行います。

ターゲット毎に検討したい、スマホ最適化

そのページを読んでもらいたいターゲットがあると思うのですが、例えば購入層が

６０代以上の商品

１０代～２０代の商品

の場合に最適化が全く違うものになったりします。

鷹Pもアラフォーなので最近老眼が出始めてるのですが、小さい文字がどんどん苦手になってきています。

もっと歳をとればさらに苦手になっていくことでしょう。

そんな６０代の鷹Pに読んでもらいたいページを作る時、文字の大きさって大きくしてあげると親切ですよね？

逆に２０代の人にはきっと読みづらい大きさになってしまいます。

また、年齢だけでなく色々な要素によって「最適」の答えは変わってくるので、ページを見てもらいたいターゲットに応じた最適化を行いましょう。

まとめ

今回はスマホ最適化という所にフォーカスをあてたお話でした。

１１年くらい前にはじめてスマホを持ち出した鷹Pですが、もうすぐガラケーを持ってた期間よりもスマホに変わってからの方が長くなるんだなぁと気づき謎の焦燥感に襲われています。

今のままだと世間的にもガラケーが覇権を握っていた期間よりスマホの方が長く王座に居座る事になると思います。

よほどのことがない限りあと１年２年でスマホが無くなる事はありません。形が変わったとしても当面は今のスマホがベースで進化していくことでしょう。
なのでスマホ対策をしっかり考えてみてはいかがでしょうか。