Webサイトに欠かせないスマホ表示の方法をわかりやすく解説します。
また、レスポンシブデザインのコーディング方法や
スマホ表示の確認方法についても詳しく解説していきます。
googleがスマホ表示を推奨
早速、サイトのスマホ表示の重要性について、
googleでは、レスポンシブデザインを推奨しています。
※レスポンシブデザインとは、ブラウザの幅に合わせて表示を切り替える機能を言います。
レスポンシブデザインにする理由
レスポンシブ ウェブ デザインをおすすめする理由は以下のとおりです。
* URL が 1 つなので、ユーザーによるコンテンツの共有やリンクが簡単になります。
* 対応するパソコン用ページまたはモバイル用ページが存在することを Google のアルゴリズムに伝える必要がなく、インデックス登録プロパティが正確にページに割り当てられます。
* 同じコンテンツのページをいくつも維持管理する手間が省けます。
* モバイルサイトでよくある誤りに陥る可能性を抑えることができます。
* ユーザーをデバイスごとに最適化したページにリダイレクトする必要がないため、読み込み時間を短縮できます。また、ユーザー エージェントに基づくリダイレクトはエラーが発生しやすいため、サイトのユーザー エクスペリエンスを損なうおそれがあります（詳細については、ユーザー エージェントの正確な検出をご覧ください）。
* Googlebot がサイトをクロールするために必要なリソースを節約できます。レスポンシブ ウェブ デザインでは、1 つの Googlebot ユーザー エージェントがページを一度クロールするだけで済みます。異なる Googlebot ユーザー エージェントが何度もクロールしてコンテンツのすべてのバージョンを取得する必要はありません。Google によるクロールの効率が上がることは、間接的には、サイトのコンテンツがより多くインデックスに登録され、適切な間隔で更新されることにつながります。
レスポンシブ ウェブ デザインに興味を持たれた場合は、まず Google 検索セントラルのブログ投稿と、ウェブの基礎のサイトをご覧ください。
https://developers.google.com/search/mobile-sites/mobile-seo/responsive-design
今はサイトをスマホから閲覧するユーザーが圧倒的に多いので、
サイト制作では、レスポンシブデザインのコーディングをほぼ必ず行います。
スマホレイアウトの作成方法
スマホレイアウトの作成方法は、
・スマホ専用サイト
・レスポンシブデザイン
の２つの方法があります。
スマホ専用サイト
PCサイトとは別に、スマホ用のサイトを作成します。
URLは、サブディレクトリを活用して作成します。
例）https://sample.com/sp
メリット
・サイトを分けるため容量が重くならないので、情報量や画像が多いサイトに向いてる。
・PCとスマホで全く違うデザインにすることができる。
デメリット
・２つのサイトを作成するため、作成のコストがかかる。
・更新や修正時に両方のサイトを編集しなくてはいけないため、管理に手間がかかる。
レスポンシブデザイン
レスポンシブデザインは、
画面のサイズに合わせて表示を切り替えます。
メリット
・１つのサイトで管理できるため、更新や制作コストが抑えられる。
・googleが推奨している。
デメリット
・デザインに自由度がなくなる。
・サイトの表示速度に時間がかかる場合がある。
レスポンシブデザイン導入方法
ここでは、簡単にスマホ表示ができるレスポンシブデザインの導入方法を解説します。
レスポンシブデザインは、メディアクエリを使用します。
※メディアクエリ = ブラウザなどのユーザー環境に応じてCSSスタイルを切り替える機能
- HTMLにビューポートを設定
- CSSをデバイスサイズを指定して記述
1. HTMLにビューポートを設定
HTMLのhead内にビューポートのコードを記述します。
<meta name="viewport" content="width=device-width, initial-scale=1">2. CSSをデバイスサイズを指定して記述
CSSを書くときは、デバイスサイズを指定し、
その中にCSSを書きます。
@media (max-width: 767px) {
.pg-inner {
width: 100%;
margin: 0 auto;
}
}デバイスやブラウザによって見え方が違う
レスポンシブデザインに限らずですが、
webサイトは同じデザインでも、
見る人の環境（ブラウザやデバイス、機種）によって見え方が異なります。
それは、改行位置だったりフォントだったり、
画像の位置が若干ずれたりなど、さまざまです。
すべてのブラウザやデバイスで同じく表示することは不可能です。
ではどこまで調整していけばいいのでしょうか？
レスポンシブデザイン、最終的なブラウザチェックは、
ユーザーが多いブラウザやデバイスを中心に調整していきます。
主要ブラウザは、
Chrome、Safari、Firefox
主要デバイスは、
PC、タブレット、スマホ（iPhoneとAndroid）
をチェックしながらサイトを作成します。
レスポンシブデザインの表示確認方法
スマホの表示をパソコンから確認することができます。
この方法はChromeで行います。
Chromeを入れていない方は、
こちらのGoogle Chromwヘルプページからインストールできます。
スマホ表示確認をする方法
デベロッパーツールを開きます。
mac → option + command + I
windows → F12
左上にあるスマホのアイコンをクリックして、
再読み込みをするとスマホの表示を確認することができます。
各デバイスや機種の確認
上部に見える機種をクリックするとさまざまな機種が出てくるので、
確認したい機種を選択してそれぞれ確認します。
可能であれば、直接違うPCやスマホで確認するのがベストです。
同じChromeでも、macとwindowsでは若干見え方が違います。
最低限、自分のスマホでも表示確認をしましょう。
まとめ
スマホからサイトを見る人が圧倒的に多い時代、
スマホ表示のサイト作成は必須です。
スマホ用のサイトを別に作成するか、
サイトをレスポンシブデザインにするかは、
作成するサイトに合わせて選びます。
レスポンシブデザインは、
ビュポートの設定をして、
画面サイズ別にCSSを記述します。
表示チェックは、デベロッパーツールを活用し、
できる限り実機でもテストしましょう。