スマホ対応サイトの作り方と6つの注意点

もはやウェブサイトのスマートフォン(モバイル端末)対応は必須

スマートフォンやタブレットなどのモバイル端末は、PCを追い越す勢いでどんどん普及しています(※1)。そろそろ自身のウェブサイトでもスマートフォン対策をしなければ……と考えている方々も多いのではないでしょうか。もはやウェブ製作時にモバイル端末からの閲覧を考慮しないわけにはいかなくなっています。

※1:数字で見たスマホの爆発的普及(平成29年版情報通信白書)

■検索サイトでは、モバイル端末からの利用数の方が多い
Googleは2015年に「PCからの検索数」よりも「モバイル端末からの検索数」の方が多くなったと公表しました(※2)。検索サイト経由で閲覧されることが多いウェブサイトなら特に、訪問者がモバイル端末を使っているケースも増えるでしょう。

※2:Building for the next moment(Google Inside AdWordsブログ／2015年5月)：米国・日本など10カ国では、PC上よりもモバイル上で多く検索されていると報告されています。

■モバイル端末からの検索時には、モバイル対策が施されたページが優先される
GoogleやBingなどの検索サイトでは、モバイル端末を使って検索された際には「モバイル端末に対応しているウェブページ」が優先的に表示される仕様になっています(※3)。そのため、モバイル対策ができていないサイトは、モバイル端末から検索された際の検索結果には出てきにくくなる可能性があるでしょう。

※3:検索結果をもっとモバイル フレンドリーに(Googleウェブマスター向け公式ブログ／2015年2月)

■モバイル版の内容を基準にして判断するモバイルファーストインデックス
検索サイトは、ページの内容と検索語との関連度を判断して検索結果を表示します。従来はその判断に「PCで閲覧した場合の内容」が使われてきました。しかしGoogleは、それを「モバイル端末で閲覧した場合の内容」に変える方針を公表しました(※4)。これはモバイルファーストインデックスと呼ばれています。

※4:モバイル ファースト インデックスに向けて(Googleウェブマスター向け公式ブログ／2016年11月)

日本でも既にモバイルファーストインデックスの適用が始まりつつあります(※5)。モバイル対策ができているサイトから徐々に切り替わっていきますので、モバイル対策ができていないサイトに今すぐ何らかの悪影響があるわけではありません。しかし、競合するサイトがモバイル対策を済ませていれば、相対的に自サイトの順位が下がる可能性はあるでしょう。

※5:モバイル ファースト インデックスを開始します(Googleウェブマスター向け公式ブログ／2018年3月)

以上の点から、検索サイト経由でのアクセス者を多く獲得しようと思えば、スマートフォンやタブレットなどのモバイル機器への対応が必須だと言えるでしょう。もしスマホ用サイトのことを単なる簡易版サイトだと考えていたなら、PC用サイトと同等のサイトでなければならないのだと認識を改める必要があります。

スマートフォン向け(モバイル端末用)ウェブサイトを作る方法は？

スマートフォンやタブレットは、PCと同じウェブサイトを表示することもできます。しかし、小型モバイル端末で操作しやすいように作られたウェブサイトの方が閲覧しやすいでしょう。PCと比べると画面サイズが小さい上に、マウスではなく指で操作するという大きな差があるためです。

ウェブサイトをスマートフォンに対応させる方法としては、主に以下のAとBに示す2つの方法があります。

■A. レスポンシブWebデザインを採用するスマートフォン対応方法
単一のページで、画面の広いPCにも画面の狭いスマートフォンにも同時に対応できるレスポンシブWebデザインが広く使われています。この方法なら、同じコンテンツを複数のページに掲載せずに済むため、ウェブサイトの管理が容易です。URLを端末別に分ける必要がないので、案内も楽でしょう。

新規サイトを作る際はもちろん、既存サイトを修正する場合でも、レスポンシブWebデザインが使えないかを検討してみて下さい。方法は複数の記事で紹介しており「ブラウザの幅に合わせて表示を自動変更するレスポンシブ技12選」にまとめてありますので、ぜひご参照下さい。

■B. モバイル端末専用サイトを別途用意するスマートフォン対応方法
これから新しくウェブサイトを作る場合ならともかく、PC用に作られた既存のウェブサイトをレスポンシブWebデザインに変更するのは困難な場合もあります。

そのような場合には、いっそのことスマートフォン専用のウェブサイトを新規に作成するのも手です。作成の手間はかかりますが、その方が指で操作しやすいインターフェイスを提供しやすいメリットもあるでしょう。

■PC用サイトとスマホ用サイトの関連を示す方法も用意されている
端末別にウェブサイトを分離した場合は、「検索結果にうまく表示されるのか？」・「重複コンテンツだと判断されて検索で不利にならないのか？」といった点が心配になるかも知れません。それらの点に対処するため、PC用サイトとスマホ用サイトとの関連を示す記述方法(＝link要素を使ったアノテーションの記述方法)が用意されています。その記述があれば検索上の問題は回避できるため、安心してスマホ用サイトを作成できます(記述方法は後述)。

スマートフォン対応サイトを作る際の注意点を解説

本記事では、スマートフォンに対応したウェブサイトを(PC用サイトとは別に)作成する際に知っておきたいポイントや、スマートフォン上で動作するブラウザの仕様などについてを簡単にご紹介いたします。スマートフォンやタブレットを対象にしたモバイル版のウェブサイトを作成する前に、ぜひ参考にして下さい。

【本記事の目次】
■スマホ用サイトを作る際のポイント(概要) (p.2)
→ 段組を使わないシンプルなレイアウト／指で操作しやすいインターフェイス／スマートフォン用アプリに似たデザイン／高精細(Retina)ディスプレイへの対応

■スマートフォン端末やブラウザの仕様による6つの注意点 (p.3)
→ 狭い横幅320pxでも表示できるように作る／横幅を固定しない／スクロールバーは見えなくても構わないように作る／ポップアップする小窓は使えない／載せただけで装飾を変更するデザインに注意／自動縮小機能の制御が必要

■スマホ用サイトの作り方(概要) (p.4)
→ HTML5＋CSS3で作成可能／特殊な環境や特殊なツールは不要／モバイル実機を使わずにPC上で表示確認する方法／手っ取り早くモバイル用UIを作れるフレームワーク／モバイルフレンドリーテストで確認

■PC用－スマホ用サイトの自動振り分けや、両者の関連を示す方法 (p.5)
→ PC用サイトとスマホ用サイトを自動振り分けする方法／link要素を使ったアノテーションで、PC用サイトとスマホ用サイト間の関連を示す方法


それでは、まずはスマホ用サイトを作る際のポイント(概要)から見ていきましょう。