「うちのホームページ、スマホで見るとちょっと見づらいんだよね…」
もしそう感じているなら、それはビジネスチャンスを逃しているかもしれません！
今や、多くのユーザーが、スマホから情報を検索し、商品やサービスの詳細をチェックする時代です。
ホームページをスマホ対応（モバイル対応）にすることは、ユーザーの利便性を高めるだけでなく、集客や信頼性の面でも大きなメリットをもたらします。
近年はスマホユーザーが断然多くなり、PCサイトをあまり見ないという方も増えてきましたが、やはり企業サイトはまだまだPC表示のホームページが必要ですよね。
スマホ対応（レスポンシブ対応）なら、PC表示とスマホ表示の両方を最適化することが可能です。
今回は、まずホームページのスマホ対応がなぜ重要なのかの理由と、実際にスマホ対応（レスポンシブ対応）を行う際の注意点などをご紹介します。
近年、Webサイトへのアクセスの約7〜8割がスマートフォンからというデータもあり、スマホファーストの時代が到来しています。
PC向けに作られたホームページをスマホで見ると、「文字が小さい、ボタンが押しづらい、表示が崩れて見える」ということが起こります。
このような不快感が結果として、ストレスを感じたユーザーはすぐにWebサイトを離れてしまい、せっかくの問い合わせや購入の機会を失ってしまいます。
そのため、スマートフォンでも見やすく操作しやすいデザインに最適化する必要があります。
最適化することで、スマホから訪れたユーザーも、ストレスなく情報を得すことが可能になります。
Googleは2021年に「モバイルファーストインデックス」へ完全移行しました。
つまり、スマホでの見え方や操作性が検索順位の評価対象になるということです。
スマホ対応していないホームページは、それだけでSEOに不利となり、検索上位に表示されにくくなる可能性があります。
サイト自体がPC向けのみのデザインではSEO的には評価が低く、検索順位を上げることが難しいとされています。
だからといって、PCからのアクセスは無視できませんよね。
Webサイトはどのデバイス（PCやスマホなどの端末）からアクセスしても良い使用感である必要があります。
PCもスマホもどちらのサイトも見やすく操作しやすいデザインであると、おのずとサイト自体のユーザー満足度も上がり、SEOにも良い評価が得られるでしょう。
スマホでも快適に閲覧できるホームページは、「きちんとした会社」という印象を与えます。
スマホ非対応で見づらいページが表示された瞬間に、ユーザーは離れてしまうかもしれません。
スマホでも快適に見られるホームページは、訪れた人に安心感を与えます。
スマホ対応を実現する手法として、今主流なのが「レスポンシブ」です。
レスポンシブとは、閲覧するデバイス（PC・スマホ・タブレット）や画面サイズに応じて、自動的にレイアウトを調整して表示する手法のことです。
つまり、レスポンシブを適用することで、スマホでアクセスした時には縦長のデザインで、PCでアクセスした時には横長のデザインで表示されるようになります。
レスポンシブは、1つのURLで複数のデバイスに対応できるのも大きな特徴です。
スマホ対応はメリットばかりに見えますが、画面サイズによって見え方が変わってしまうということは、レイアウトも整って見えるものから、崩れたように見えてしまう可能性もあるということです。
そのため、スマホ対応（レスポンシブ対応）を実施する際には知っておいてほしい注意点がいくつかあります。
次に、これまでの制作のなかでお客様にご指摘いただいたことなどを踏まえた、レスポンシブに関する注意点を4つご紹介します。
はじめにも記述しましたが、縦長、横長の違いにより、レイアウトが大きく変わります。
そのため、制作時は、すべてのデバイスでの表示確認が必須です。
ディスプレイサイズによってテキストの折返し位置が変わるため、文章の切れ目で改行するとレイアウトが崩れしまう場合があります。
PCで見た場合は丁度良いサイズのテキストが、スマホで見ると大きく見えてしまうことがあります。
そのため、PCとスマホでは意図的にテキストサイズを変えることが多いです。（同じ文章でもPCサイズでは文字サイズを大きくします）
画像をブラウザサイズに合わせたデザインの場合、アクセスするデバイスのディスプレイサイズでトリミングされる位置が変わってしまいます。
画像のトリミング位置を変えないようにするためには、比率を保って拡大縮小する必要がありますが、レイアウトが崩れる原因なりますので要注意です。
レスポンシブ対応で起こるデバイスごとの注意点だけでなく、スマホ、PC、タブレットそれぞれの機種によってディスプレイサイズの違いがあり、その事による注意点もあります。
こちらについても、3つご紹介します。
例えばデスクトップPCとノートPC（ラップトップ）の画面サイズでは大きさが違いますよね。その影響により、見え方も異なってきます。
そのため、基本のデザイン（一番整って見えるデザイン）はそれぞれ国内のシェア率の高いディスプレイサイズに合わせてサイトを制作することが多いです。
ちなみに現在（2025年7月）の各デバイスのディスプレイサイズのシェア率1位は以下のようです。
シェア率だけでなく、サイトの使い道や業種などによっても基本のデザインのサイズは異なるので、デザインを考える時はサイトのターゲットはどのような人なのか、ということも重要なポイントになってきます。
【関連記事】Webデザインの最適な画面サイズとは？
ディスプレイサイズが異なると、一画面の表示のされ方が変わる場合があります。
ある程度の調整は可能ですが、テキスト文章が多すぎたりすると一画面で収めることが難しいです。
コンテンツ幅（テキストや画像が収まる範囲の幅）を指定している場合は、大きな画面で閲覧した場合に左右に空白ができる場合があります。
空白ができないようにするためには、ブラウザサイズに準じてコンテンツ幅を広くすることは可能ですが、レイアウトが崩れてしまう可能性があるので要注意です。
最近ではこのようなレスポンシブに関する悩みを超えた「新しい考え方のWebデザイン」も多く見かけるようになりました。
当社でも制作実績のある、新しい考え方のデザインのホームページを2つご紹介します。
スマホでアクセスするとわかりませんが、PCでアクセスすると一目瞭然です。
PCで見てもスマホのデザインが表示されます。
PCで見た場合にできる空白にメニューやお問い合わせボタンを設置することで、空白を持て余すことないデザインになっています。
ターゲットユーザーのアクセスがスマホの方が多い場合は、このようなデザインで全く問題ないと思いますし、レスポンシブ対応がない分、制作のスピードもアップするサイトです。
https://www.miyata-unyu.co.jp/
次にご紹介するサイトは、レスポンシブ対応はされているものの、大きいディスプレイサイズで見ても同じレイアウトを保てるような作りになっています。
そのため、ディスプレイサイズによる空白問題や、画像のトリミング問題、レイアウト崩れ問題が解消されるデザインです。
また、こちらもディスプレイサイズによる細かな修正が少なくなることや、ブレイクポイント（デザインの切り替えポイント）を減少できるため、制作のスピードがアップするサイトです。
【関連記事】レスポンシブデザインにも種類がある！
自社のホームページを「スマホ対応しているかどうか」は、ユーザーが無意識に見ているポイントです。
せっかく商品やサービスに自信があっても、スマホで見づらく操作しづらいとそれだけでビジネスチャンスを逃してしまいます。
スマホ対応のホームページは、見込み客の取りこぼしを防ぎ、ビジネスの信頼性を高める上でも欠かせません。
今回はレスポンシブデザインや画面サイズの違いによる見え方の注意点をご紹介しましたが、ディスプレイサイズでの見え方の違いやGoogleの方針の変更など、今後もデバイスが進化する限り対応し続けなければいけない永遠の課題です。
そのたびに、どのような対応が一番良いかということを模索する必要があります。
当社では、スマホ対応を前提としたホームページ制作・リニューアルのご相談を承っております。
業種やターゲットユーザーに応じた最適な設計を行い、スマートフォンでもPCでも快適に閲覧できるデザインをご提案いたします。
ホームページやスマホ対応に関して不安や疑問があれば、どうぞお気軽にお問い合わせください！
