スマートフォンでサイトを確認したとき、レイアウトが崩れていたり、文字が極端に小さく表示されたりすることがあります。パソコンのブラウザでは問題なく見えていても、スマホでは別の見え方になるケースは珍しくありません。原因が一つとは限らず、CSS・画像・フォントサイズ・JavaScriptなど複数の要素が絡み合うことも多いため、順序立てて切り分けることが重要です。
この記事では、スマホでの表示崩れが起きる主な原因と、それぞれに対応した修正の進め方を段階的に説明します。自分で対処できる範囲と、専門知識が必要になる範囲の判断基準も示しますので、どこから手をつければよいか迷っている場合の参考にしてください。
この記事の目的と対象となる読者
この記事は、自社または自分で管理しているウェブサイトがスマートフォンで正しく表示されないことに気づき、原因を調べて対処したいと考えている方を対象にしています。WordPressなどのCMSを使っている場合でも、HTMLやCSSを直接編集している場合でも、基本的な切り分けの手順は共通です。
修正作業はサイトのファイルを変更するため、誤操作によってさらに表示が崩れるリスクがあります。バックアップを取ってから作業を進めることを前提として説明します。専門的な対応が必要と判断した場合は、保守・運用サービスへの相談も選択肢に入れてください。
スマホ表示崩れの主な原因と判断基準
表示崩れの原因は大きく分類すると、いくつかのパターンに分けられます。どのパターンに当てはまるかを見極めることが、適切な対処への近道です。
よく見られる原因の一つは、ビューポート設定の欠落または誤りです。metaタグでビューポートが指定されていないと、スマホがサイトをPC幅で表示しようとして全体が縮小されます。次に多いのが、CSSでの固定幅指定です。絶対値のpxで幅を固定していると、スマホの画面幅を超えた要素が画面外にはみ出します。
画像の幅指定がない場合も表示が崩れやすいです。元のサイズのまま表示されてレイアウトが乱れます。また、スマホ向けのメディアクエリが設定されていない、あるいは条件が正しく機能していないケースもあります。CMSを使っている場合は、テーマやプラグインのCSSが互いに干渉することも原因になります。スライダーやメニューなど動的な要素では、JavaScriptのエラーが表示崩れを引き起こすこともあります。
原因が複数重なっている場合は、一つずつ確認して修正していく方針が安全です。先に原因を絞り込むことで、修正箇所を効率よく特定できます。
原因を絞り込む手順と進め方
表示崩れを修正するには、まず現状を正確に把握することが必要です。以下の手順で原因を段階的に絞り込んでください。
-
実機とブラウザの開発者ツールで確認する
手元のスマホで実際に確認します。あわせて、PCのブラウザに備わっている開発者ツールのデバイスエミュレーション機能も使いましょう。エミュレーションと実機で見え方が異なることもあるため、両方を確認することが大切です。開発者ツールはキーボードのF12キーなどから開けます。詳しい操作方法は、使用しているブラウザの公式ドキュメントで確認してください。
-
ビューポートのmetaタグを確認する
HTMLのheadタグ内にビューポートを指定するmetaタグがあるかを確認します。記述がない場合や内容が誤っている場合は、正しく追加・修正してください。このタグがないと、スマホがサイトをPC向けの幅で表示しようとしてレイアウトが崩れます。
-
開発者ツールで崩れている要素を特定する
デバイスエミュレーション表示のまま、崩れている要素を選択して要素検証を行います。適用されているCSSのwidthやmargin、paddingの値を確認します。固定幅の指定がないかを重点的にチェックしてください。
-
画像のCSSを確認する
imgタグに最大幅の指定があるかを確認します。指定がない場合は、CSSにmax-widthとheight: autoを追加することで、画像がコンテナ幅に収まるようになります。記述の詳細はCSSの仕様を管理している団体の公式情報で確認してください。
-
メディアクエリの内容を確認する
スマホ向けのブレークポイントが設定されているかを確認します。その範囲内のスタイルが正しく記述されているかも合わせてチェックしてください。メディアクエリの記法が誤っていると、スマホ向けスタイルが一切適用されません。
-
CMSの場合はテーマやプラグインを切り分ける
WordPressなどのCMSを使っている場合は、デフォルトテーマに切り替えて表示が改善するかを確認します。改善する場合は使用中のテーマが原因である可能性が高いです。プラグインは一つずつ無効化して原因を絞り込んでください。
-
コンソールのエラーを確認する
開発者ツールのコンソールタブでJavaScriptのエラーが出ていないかを確認します。エラーが表示されている場合は、そのメッセージをもとに原因となっているスクリプトを特定してください。
修正時の注意点とリスク
修正作業を進める前に、いくつかの点を確認しておくことで、作業後のトラブルを防ぎやすくなります。
最も重要なのは、作業前にバックアップを取ることです。CSSやテンプレートファイルを編集した結果、意図しない崩れが新たに発生することがあります。変更を元に戻せる状態を確保してから作業してください。
CSSの修正はスマホだけでなく、PCやタブレットの表示にも影響することがあります。修正後は複数のデバイスサイズで表示を確認することが必要です。開発者ツールのエミュレーション機能でさまざまな画面幅をテストしてください。
CMSのテーマファイルを直接編集した場合、テーマのアップデートによってその変更が上書きされることがあります。テーマを直接変更せず、カスタムCSSを別の場所に記述する方法が安全です。具体的な手順は、使用しているCMSやテーマの公式ドキュメントで確認してください。
原因が特定できない場合や、修正によってさらに状況が悪化した場合は、無理に作業を続けるよりも専門家に相談することを検討してください。早めに相談することで、結果的に解決が早まることがあります。お問い合わせから状況を共有していただくことも可能です。
自分で対処するか専門家に依頼するかの判断基準
表示崩れへの対応は、状況によって自分で解決できる場合と、専門知識が必要な場合に分かれます。以下の観点で判断してください。
ビューポートの追記や画像の最大幅指定など、単純なCSS変更で済む場合は、HTMLやCSSの基本的な読み書きができれば自分で対処できる可能性が高いです。テーマやプラグインの競合が原因の場合は、CMS管理画面から切り分けと無効化を試みられます。ただし、代替プラグインの選定や設定には一定の知識が必要になることがあります。
JavaScriptのエラーが原因の場合は、スクリプトの修正にプログラミングの知識が必要です。自分で修正が難しい場合は専門家への依頼を検討してください。また、サイト全体のレイアウト設計がそもそもスマホに対応していない場合は、部分的な修正では限界があります。設計の見直しを含む対応が必要になります。
問題の規模と自分のスキルを照らし合わせて、対処する範囲を決めることが大切です。無理に範囲を広げると、新たな問題を生じさせることがあります。問題解決の記事も参考にしながら、対応範囲を見極めてください。
修正前後に確認するチェックリスト
作業を始める前と終えた後に、以下の項目を確認してください。見落としを防ぐための確認事項をまとめています。
作業前の確認項目
- サイトファイルまたはデータベースのバックアップが取れているか
- 崩れている画面・デバイス・ブラウザの組み合わせを記録したか
- 開発者ツールで崩れている要素を特定したか
- ビューポートのmetaタグが正しく記述されているか
- CMSを使っている場合、テーマとプラグインのバージョンを記録したか
作業後の確認項目
- 修正後に実機のスマートフォンで表示を確認したか
- PCやタブレットなど他のデバイスサイズでも表示が崩れていないか
- 開発者ツールのコンソールに新しいエラーが出ていないか
- CMSのテーマを直接編集した場合、公式ドキュメントで推奨される方法に切り替えたか
- 複数のブラウザで表示を確認したか
スマホでの表示崩れは、原因を一つずつ絞り込んで対処することで解決できるケースが多くあります。ただし、サイトの構造や規模によっては専門的な対応が必要になることもあります。自分で対処できる範囲を見極めながら、必要であればWebマーケティング支援を含む専門家のサポートも検討してください。
