iPhoneSEなど低解像度のスマホ端末でレイアウトがはみ出てしまったときの改善例

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

最近はパソコンよりもスマートフォンを使用している方が多いです。しかし、運営するサイトによってはパソコン経由でのアクセスが多い場合も当然あります。実は当研究所も「7割以上のアクセスがパソコン」からとなっています。ちなみに端末別のアクセス割合は以下グラフの通りなのでぜひご確認くださいませ。

低解像度のスマホ端末でレイアウトがはみ出したときの改善例

当研究所の端末別アクセス比

異なるオウンドメディアの比率

割合はターゲット層によっても左右してきます。以下は別のサイトです。モバイル(スマートフォン)からのアクセスが6割以上ですよね。つまり運営サイトの掲載コンテンツによって比率はまったく違います。

特にモバイルのアクセスが多いサイトは「スマホ端末での視認性を確保する」ことが重要です。ただ、パソコンのアクセスが8割以上だとしてもスマホ対応をしなくても良いかと言われるとそうではありません。

スマホ経由でのアクセスは出先から緊急性の高いパターンが多いので、サイトに初めて訪れたのが「スマホ」だったというユーザーも一定数います。今では「スマホもパソコンも共通のブックマークを使用している人」がいるので『スマホ経由でサイトを知って、自宅から再度ページに訪れる』という状況も想像できますよね。

となればスマートフォン閲覧用にサイトを最適化しておく必要があります。また、最新のスマホ(iPhoneX等)は解像度が高いので問題ありませんが「解像度が低い(横幅が狭い)機種」もあるので両方でレイアウトが崩れないように配慮しなければなりません。たとえば、以下のような状態だと少しだけはみ出ています。

iPhoneSE/5(はみ出した表示例)

カテゴリーの「カスタマイズ」という文言と「コンテンツのつづきを読む」というリンクボタンもはみ出ています。当初はiPhoneSEなどの低解像度端末でタイトル周りが詰まる状況を想定していなかったので少しあふれています。ちなみに以下が「iPhoneX」で開いた画面です。タイトルの上下周辺も綺麗に収まっています。

iPhoneXでの表示例

iPhoneSEでタイトルの文字を小さくして調整した後の画面が以下となります。無事上下のはみ出しが改善していますね。さきほどの画面と見比べて見ましょう。下側がタイトルの上下がはみ出している方です。

iPhoneSE/5での表示(改善後)

iPhoneSE/5での表示(改善前)

以下はタイトルがはみ出ている分です。

iPhoneSE同等の解像度を使っているAndroidユーザーもまだまだ一定数いるので、レイアウトが崩れてしまわないようにCSSでサイズの調整を加えました。特別急いで対応する必要はありませんができれば対応させておいた方がユーザーにとっては優しいサイトに出来上がります。あなたのサイトもぜひチェックしてくださいね。

最新式の無料プラグインを事前公開

WordPressは公式サイトに登録されているプラグインだけでは機能を補足しきれません。当サイトでは使いやすさを追求した魅惑的なプラグイン無料でダウンロードいただけます。運営ホームページのマーケティング力をさらに高めるチャンスです。まずは無料でDLしてお試しくださいませ。
改良されたプラグインを確認する