スマートフォン対応サイトの作り方と6つの注意点

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

スマートフォンやタブレットなどのモバイル端末は、PCを追い越す勢いでどんどん普及しています。そろそろ本格的にスマートフォン対策をしなければ……と考えている方々も多いのではないでしょうか。

以下の3点に示すここ数年の流れから、もはやモバイル端末からの閲覧を考慮しないわけにはいかなくなっています。

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

※Building for the next moment(英語／Google AdWordsオフィシャルブログ)：米国・日本など10カ国では、PC上よりもモバイル上で多く検索されていると書かれています。

■2. モバイル端末からの検索時には、モバイル対策が施されたページが優先される
GoogleやBingなどの検索サイトでは、モバイル端末を使って検索された際には「モバイル端末に対応しているウェブページ」が優先的に表示される仕様になっています(※)。

当初は右図のように「スマホ対応」ラベルが検索結果に付加されていました。現在では「対応サイトが多くなったためにラベルの意味が薄れた」との理由で、Googleはこの表記を止めました(Bingでは今も表示されます)。どちらにしても、モバイル端末で検索された際にはモバイル対応ページが優先して検索結果に表示される点は変わりありません。

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

■3. モバイル版の内容を基準にして評価する、モバイルファースト・インデックス
検索サイトは、「検索語」と「ウェブページの内容」との関連度を評価して検索結果を表示します。この評価値の計算には、「PCで閲覧された場合の内容」が使われています。しかしGoogleは、この評価対象を「モバイル端末で閲覧された場合の内容」に切り替える方針(モバイルファースト・インデックス)を公表しました(※)。

もしモバイル版サイトのことを単なる「簡易版サイト」だと考えて構築しているなら、PC版と同等のコンテンツになるよう再構築する必要があるでしょう。本稿執筆時点ではまだモバイルファースト・インデックスは採用されていません。今のうちに準備しておきましょう。

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

以上の3点から、検索サイト経由での訪問者を獲得するためには特に、モバイル対策が必要だと言えます。

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

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

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

■A. レスポンシブ・ウェブデザインを採用するモバイル対応方法
近年は、単一のページで「画面の広いPC」にも「画面の狭いスマートフォン」にも同時に対応させるレスポンシブ・ウェブデザインが広く使われつつあります。

この方法なら、同じコンテンツを複数のページに掲載せずに済むため、ウェブサイトの管理が楽でしょう。URLを案内する際も、端末別に分ける必要はなく単一のURLを知らせるだけで済みます。

これから新しくウェブサイトを作る場合はもちろん、既存サイトを修正する場合でも、レスポンシブ・ウェブデザインが採用できそうなら、ぜひ検討してみて下さい。方法は過去の記事でも紹介しています。記事まとめ「ブラウザの幅に合わせて表示を自動変更するレスポンシブ技12選」などをご参照下さい。

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

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

※本稿執筆時点では、All Aboutもそのようなサイト構成(＝PC版とモバイル版が別サイトに分かれている仕様)になっています。

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

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

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

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

■スマートフォン端末やブラウザの仕様による6つの注意点 (p.3)
・狭い横幅320pxでも表示可能に／横幅を固定しない／スクロールバーの表示を前提にしない／Flashは使えない／載せただけで装飾を変更するデザインに注意／自動縮小機能の制御

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

■PCとスマートフォンの表示の振り分け方法 (p.5)
・PC版サイトとモバイル版サイトを自動振り分けする方法／link要素を使ったアノテーションで、PC版サイトとモバイル版サイトの関連を示す方法

本記事は、2011年6月21日に初版を公開し、2013年9月に第二版、2015年6月に第三版、2017年6月に第四版を公開しました。記事中の一部の画像や画面イメージは2011年6月～2015年6月時点のものです。

それでは、まずはスマートフォン用ウェブサイトを作るときのポイント(概要)から見ていきましょう。