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

スマートフォン用(モバイル端末向け)ウェブサイトを作ろう

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

■検索サイトでは、モバイル端末からの検索数の方が多い
既に、Google検索では、PCから検索される数よりも、モバイル端末から検索される数の方が上回っていることが公表されています(※)。検索サイト経由で閲覧されることが多いウェブサイトの運営者にとって、この情報は無視できないでしょう。

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

■モバイル端末からの検索時には、モバイル対策が施されたページが優先される
右図は、モバイル端末のブラウザからGoogleを使って検索した際の画面イメージです。2015年4月半ば以降からは、モバイル端末を使って検索された場合の検索結果には、「モバイル端末での表示を考慮しているウェブページ」が優先的に表示されるようアルゴリズムが変更されました(※)。

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

このように、もはやモバイル端末からの閲覧を考慮しないわけにはいかなくなっています。

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

小型のモバイル端末であるスマートフォンでは、スマートフォンで操作しやすいように作られたウェブサイトの方が閲覧しやすいことは言うまでもありません。PCと比べると画面サイズが小さい上に、「マウス」ではなく「指」で操作するという大きな差もありますから。

ウェブサイトをスマートフォンに対応させる方法としては、主に以下の2つの方法があります。
(1) レスポンシブ・ウェブデザインを採用する方法
(2) スマートフォン専用サイトを別途用意する方法

■レスポンシブ・ウェブデザインという手もあり、推奨もされているが……
最近では、「画面の広いPC」にも「画面の狭いスマートフォン」にも同時に対応させる「レスポンシブ・ウェブデザイン」が広く使われつつあります。

このデザイン方法なら、単一のHTMLで様々な環境に対応させられます。同じコンテンツを複数のページに掲載せずに済むため、管理が楽だというメリットもあります。URLを案内する際も、端末別に分ける必要はなく、単一のURLを知らせるだけで済みます。

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

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

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

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

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

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

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

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

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

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

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

本記事でご紹介する内容は上記の通りです。本記事は、2011年6月21日に初版を公開し、2013年9月に第二版、2015年6月に第三版を改訂公開しました。記事中の一部の画像や画面イメージは、2011年6月・2013年9月時点のものです。

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