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

画面の幅が狭くても閲覧でき、リンクをタップしやすいスマホ用サイトの例
※1:数字で見たスマホの爆発的普及(平成29年版情報通信白書)

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

PCで検索した結果と、スマホで検索した結果とでは、表示される内容が異なる
※3:検索結果をもっとモバイル フレンドリーに(Googleウェブマスター向け公式ブログ/2015年2月)

ウェブページの評価には、モバイル版の内容が使われるようになる
※4:モバイル ファースト インデックスに向けて(Googleウェブマスター向け公式ブログ/2016年11月)

Google Search Consoleに登録していれば、モバイルファーストインデックスが開始された時点で連絡が届く
※5:モバイル ファースト インデックスを開始します(Googleウェブマスター向け公式ブログ/2018年3月)
スマートフォン向け(モバイル端末用)ウェブサイトを作る方法は?

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

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

スマートフォンで操作しやすいUIを採用して、モバイル端末専用サイトを用意した例
そのような場合には、いっそのことスマートフォン専用のウェブサイトを新規に作成するのも手です。作成の手間はかかりますが、その方が指で操作しやすいインターフェイスを提供しやすいメリットもあるでしょう。
端末別にウェブサイトを分離した場合は、「検索結果にうまく表示されるのか?」・「重複コンテンツだと判断されて検索で不利にならないのか?」といった点が心配になるかも知れません。それらの点に対処するため、PC用サイトとスマホ用サイトとの関連を示す記述方法(=link要素を使ったアノテーションの記述方法)が用意されています。その記述があれば検索上の問題は回避できるため、安心してスマホ用サイトを作成できます(記述方法は後述)。
スマートフォン対応サイトを作る際の注意点を解説
本記事では、スマートフォンに対応したウェブサイトを(PC用サイトとは別に)作成する際に知っておきたいポイントや、スマートフォン上で動作するブラウザの仕様などについてを簡単にご紹介いたします。スマートフォンやタブレットを対象にしたモバイル版のウェブサイトを作成する前に、ぜひ参考にして下さい。【本記事の目次】
■スマホ用サイトを作る際のポイント(概要) (p.2)
→ 段組を使わないシンプルなレイアウト/指で操作しやすいインターフェイス/スマートフォン用アプリに似たデザイン/高精細(Retina)ディスプレイへの対応
■スマートフォン端末やブラウザの仕様による6つの注意点 (p.3)
→ 狭い横幅320pxでも表示できるように作る/横幅を固定しない/スクロールバーは見えなくても構わないように作る/ポップアップする小窓は使えない/載せただけで装飾を変更するデザインに注意/自動縮小機能の制御が必要
■スマホ用サイトの作り方(概要) (p.4)
→ HTML5+CSS3で作成可能/特殊な環境や特殊なツールは不要/モバイル実機を使わずにPC上で表示確認する方法/手っ取り早くモバイル用UIを作れるフレームワーク/モバイルフレンドリーテストで確認
■PC用-スマホ用サイトの自動振り分けや、両者の関連を示す方法 (p.5)
→ PC用サイトとスマホ用サイトを自動振り分けする方法/link要素を使ったアノテーションで、PC用サイトとスマホ用サイト間の関連を示す方法
それでは、まずはスマホ用サイトを作る際のポイント(概要)から見ていきましょう。