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

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

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

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

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

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

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

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

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

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

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

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

iPhoneXでの表示例

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

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

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

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

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

【今すぐ無料プラグインを手に入れる】
無料ダウンロードはこちら

ワードプレス専門家に丸投げする

WPホームページ研究所はワードプレスを中心としたブログ作成・ホームページ制作・オウンドメディア構築・プラグイン設定・調整など幅広いカスタマイズに対応しております。 記事の掲載情報はもちろんお好みの機能をいただければ専属スタッフが心を込めて対応させていただきます。まずはお気軽にお問い合わせくださいませ。

お問い合わせの種類をお選びください(もっとも近い項目)

法人の場合は法人名とご担当者のお名前をご入力ください

返信時のご連絡に利用するメールアドレスをご入力ください

運営中のウェブサイトURLがあればご入力ください

お困りの内容があれば詳しい内容をお聞かせください

💻手に職をつけて安定的に働きたい人

⇒ 完全無料のプログラミングスクール - 受講料無料でプログラミング習得 -