先日のブログでも書きましたが、最近ブログのアクセス数は7:3に近い割合でスマートフォンユーザーが多いです。
つまりPCよりスマートフォンに適合させた方がユーザーに喜ばれるということで、本来であればスマホ優先でサイトデザインを考えても良いかもしれません。
ということで、今日はスマートフォンにユーザーに少しでも喜んでもらえるための対策を考えてみます！
スマホ向けの対策
レスポンシブデザイン
まず、レスポンシブデザインは必須ですね。
レスポンシブデザインとは、同じサイトを見てもPCとスマホでデザインが変わり、それぞれに最適化して表示される仕組みです。
これについてはWordPressの場合は対応したテーマに変更するのが一番手っ取り早いでしょう。例えば僕はcocoonという無料のテーマを使っています。
cocoonでは記事執筆のプレビュー画面でレスポンシブテストを行うことができるので、「この記事はスマホで読みにくくないかな」なんて確認しながら執筆することができます。
もちろんモバイルで読みやすい文字サイズやレイアウトなども、レスポンシブ対応のテーマにすれば全て良い具合にやってくれるので、そういう意味でもテーマ選びは重要です。ぜひレスポンシブ対応したテーマを選んでみて下さい。（とはいえ最近のテーマはだいたいレスポンシブ対応していると思いますが。）
AMP対応
続いてAMP対応。Googleの検索から訪問してくれた場合に、ページを超高速表示できる仕組みですね。
ページを開いてから表示されるまでに数秒掛かるだけで見る気が失せる人も多いはず。ましてやそんな重いサイトで「他のページも見てみよう」なんて思うはずもありません。
AMP対応すると、デザインによっては若干レイアウトが崩れたりjavaScriptが使えなくなったりという欠点もありますが、もしもそのスクリプトがPCユーザー目線のものだったりブログ管理者の自己満足的な要素があるなら、排除してしまった方が良いでしょう。
重ね重ねになりますが、7割の人がスマホで見ているので、やはりPCでの見栄えよりスマホの快適さを優先すべきです。
データの軽量化
そしてデータの軽量化。
まず、AMPは検索から入った最初のページで使われるだけなので2ページ目以降では効果がありませんし、モバイルは重いページだとデート通信量が増えてしまいます。
まず、ブログやサイトでデータ量が増えるのは、やはり画像だと思います。
本文中に掲載する写真はサムネイルなどで軽量化し、クリックすると綺麗な写真が表示されるようにするのも手だと思います。
あと、表示されていないけど裏で読み込まれている画像にも注意が必要です。
僕の場合、cocoonで設定していた「ホームイメージ」の画像の容量が大きく、これが毎回読み込みのデータ量を膨らませていました。
この辺りはGoogleスピードテストを実行して確認すると良いでしょう。
この結果で画像に関する物が出た場合、対策の余地ありです。
高速化
そして高速化です。こちらもGoogleスピードテストで確認できます。
特に、余計なプラグインは、ページ表示時に色々読み込みが行われるので速度低下の原因になります。
例えばPC版の表示をリッチにするためのプラグインなどは、結局3割の人にしか届かないので停止してしまうのも手ですね。
他、WordPressのテーマ側にある機能と過去に入れたプラグインが重複するような場合も整理することが可能です。
画像の表示方法
最後に画像などの表示について。
スマホユーザーはほとんど縦でスマホを使います。ということは、画像や説明イラストも横長では見づらい可能性が高いです。
まぁこの辺りは状況によるし好みの問題もありますが、1:1のスクエアや3:4の縦画像の方がスマホからは見やすいと思います。
ついPCで編集すると横長の図や写真を載せがちですが、今の時代はそれにこだわる必要は無いんです。
例えば以前の記事で書いたカーペットクリーナーの写真で比較してみましょう。
まずこちらは僕が撮ったもので、3:2の横長。
一方、Amazonの販売サイトから引用すると、こちらは1:1のスクエアです。
PCで見ると不自然ですが、スマホだと見やすくて良いんじゃないかなと思います。
PCでのレイアウトを気にする場合は、1:1でも画像を小さめに表示すれば、あまり違和感なく配置できるかなと思います。
まとめ
ということで、スマホ向けに何が出来るか、簡単にですがまとめてみました。
僕はカメラが趣味なので、つい綺麗で大きな写真を載せたくなるし、3:2の横長にこだわってしまいます。
しかしそれでユーザーが見づらさを感じてしまっては元も子もないので、常にモバイルフレンドリーを意識してブログを書いていけたらなぁと思っています。
この記事が誰かの参考になれば幸いです。
コメント