マルチデバイス対応の基礎知識
02 モバイル対応Webサイト制作の基礎知識

■メリット

モバイル専用サイトを構築する最も大きなメリットは、モバイルユーザーならではの二ーズや行動特性に合わせた最適なコンテンツ構成を提供することが容易な点です。

• この後すぐ行ける近くのレストランを検索して、予約を入れる
• これから行く目的地の場所を地図で調べる
• 急ぎで交通機関の指定席を購入する

などのようにユーザーの要望がハッキリしている場合、それに最適化されたサイト設計デザインを自由に行うことができます。またランディングページ等ビジュアル的なインパク卜が重視されるようなサイトにおいても凝った画面デザインがしやすくなります。このように設計デザインの自由度が高いのも専用サイトのメリットとなります。

■デメリット

モバイル専用サイトのデメリッ卜は、制作運用メンテナンスが二度手間となり、コストも高くなりがちという点が挙げられます。特にCMSなどのコンテンツ管理システムを導入していない静的なサイトの場合、運用時の手間はミスにも繋がりやすいので注意が必要です。また、PCサイトもモバイルサイトもほとんど同じような内容だった場合は特に、「手間がかかる」というデメリットばかりが際立つことになります。

■メリット

レスポンシブ・ウェブデザインでサイトを構築する最も大きなメリットは、PC・モバイル問わず全てのユーザに対して同ーのコンテンツ情報を発信しやすいことです。情報発信が主目的のWebサイトの場合は、基本的にPCユーザーとモバイルユーザーのサイト閲覧目的に大きな違いはありません。であれば同じHTMLを使って同一内容を掲載しておき、cssで画面サイズに応じたレイアウトやUI設計のみを柔軟に調整するレスポンシブ・ウェブデザインは、情報発信系のWebサイトにとっても最も手早くスマー卜にマルチデバイス対応できる制作手法として推奨できる方法であると言えます。

■デメリット

レスポンシブウェブデザインの主なデメリッ卜は、PC・モバイルで同じHTMLを使用することによる技面的な制約がありうるという点です。モバイル専用サイトと違い、基本的に同じHTML構造を用いてcssでデザインレイアウト変更を行いますので、作りたいデザイン・レイアウトによっては実現が技術的に不可能ということもあり得ます。その場合は部分的にビジュアル面で妥協せざるを得ないということもあるかもしれません。サイト構築にかかわる全ての担当者（クライアン卜も含む）がそのことを理解した上で、プロジェクトに取り組む必要があります。

このように、専用サイトを構築することとレスポンシブ・ウェブデザインで構築することのメリット・デメリットは裏表の関係のような形となっています。まずは自らのWebサイトがどちらの手法に向いているか（どちらの手法がよりユーザーに高い価値を提供できるか）を判断し、その上で可能な限りデメリッ卜を軽減するための対策を講じるようにすると良いでしょう。

モバイルサイトのデザインカンプを作成する際には、Retinaディスプレイ用の素材を作る意味でも原寸の2倍サイズで力ンプを作ることになります。これまでは320csspx 基準× 2 倍＝ 640px で作るのが普通でしたが、iPhone6の登場で375csspx 基準× 2 倍＝ 750px で作る方が良いという流れも出てきています。どちらで力ンプを作っても良いですが、いずれの場合も「全てのサイズを2の倍数で作成すること」と、「320px～640px程度の幅で横幅可変になること」の2点に注意してデザインするようにしてください。

既に説明した通り、モバイル向けサイトの場合には必ずviewportの設定が必要となります。基本的には、

としておけば良いかと思います。
この状態にした場合、ユーザーのピンチイン・ピンチアウトによる拡大・縮小が許可されます。「initial-scale=1」は初期状態での拡縮比率を等倍とするための指定ですが、基本的には記述しなくても初期状態は等倍となるのが普通ですので、今は念のための記述という意味合いが強くなっています。
なお、何らかの事情でユーザーによるピンチイン・ピンチアウトを許可したくない場合には以下のようにviewportを記述することもあります。

古いiOSやAndroidのブラウザは、ピンチイン／アウトができる状態だとposition:fixed;が機能しないなど、レイアウト崩れの原因になることが多かったため、比較的古いスマホ専用サイトなどでこの記述が多く見られました。しかし制作の都合でユーザー操作の自由を制限することは好ましくないため、よほど致命的な問題が発生するのでもなければ拡大縮小の禁止はしないことをお勧めします。

※iOS 10より拡大縮小の禁止をする「user-scalable=no」が無効化されました。

iPhoneやAndroidのブラウザには縦向きと横向きで文字サイズを自動調整する機能があり、横向きにした際に文字が拡大されるようになっています。文字が大きくなることによって1行あたりの文字数が少なくなり読みやすくなるため、このような機能が搭載されているものと思われます。しかし1画面に入る情報量が減ってしまうことや、画像と文字の間でデザインバランスが崩れてしまうこと等から、一般的にこの機能はオフにするのが慣例です。
文字サイズ自動調節機能をオフにするには、cssで以下のように指定します。

iPhoneにはテキスト中に電話番号があると自動的にリンクを作成し、タップで電話できるようにする機能があります。しかし電話番号とFAX番号は区別できませんし、電話番号ではない数字であっても配列が似ていると誤認識してリンクを作ってしまうため、通常この機能はmetaタグでオフにしておきます。

PCサイトとは別にモバイル専用サイトを制作する場合には、URLの正規化を行う必要があります。URL正規化とは、異なるURLを持つWebページの内容が同じ、もしくはほぼ同じ内容だった場合に、検索エンジンから「重複コンテンツ」とみなされてSEO上不利な扱いを受けてしまうことが無いよう、オリジナルのURLを指定しておくことを指します。
PCサイトとモバイルサイトを別々に作っており、URLも異なるような場合には、次のような処理をしてPC用とモバイル用のページを1対1で参照できるようにしておく必要があります。例えば

• PC用URL………http://www.example.com/
• モバイル用URL………http://www.example.com/sp

だった場合には以下のようにそれぞれのページに対してURL正規化を記述を入れておくようにします。

① rel＝"alternate"でスマホ用ページの存在を明示する

まず、「PC用サイト」のHTMLにrel＝"alternate"という属性を使用してスマートフォン用のページが別に存在することを検索エンジンに対して伝えます。

※alternate（代わりの）

② rel＝"canonical"でPCサイトのURL紐付ける

次に「モバイル用サイト」のHTMLにrel＝"canonical"でそのページに対応するPC用URLを紐付けし、URLを正規化します。

※canonical（標準的な）

この正規化の処理は、PC用ページとモバイル用ページを1対1で紐付けし、正しくクロール、インデックスしてもらうためのものですので、1ページずつ全てのページを正確に紐付けする必要があります。ただし、PC／モバイルどちらか一方にしか存在しないページの場合は無理に正規化する必要はありません。また、これは「モバイル専用サイト」で「PCサイトと表示されるURLが異なる」場合に行うものになりますので、レスポンシブ・ウェブデザインで構築している場合や、.htaccessなどサーバ側の設定でURLを統一している場合には記述する必要はありません。

iOSデバイスは、「apple-touch-icon.png」という名前のpng画像を入れておけば自動認識してホームアイコンとして使用してくれます。しかしAndroidではHTMLに<link rel="apple-touch-icon"～>の記述をしないと読んでくれません。またAndroid Chrome はこの記述が将来的にサポー卜されなくなる可能性があるということですので、Google推奨の<link rel＝"icon"～>という記述をしておく方が無難です。

なお、PC用のfaviconとモバイル用のホームアイコンを1 つの元画像から一式作成し、更にHTMLへの設置記述まで一発で作成してくれる便利なWebサービスもありますので、こういったツールを活用するのも良いでしょう。

Favicon Maker

iOSやAndroidのブラウザはWebkitであり、中身はSafariやChromeに近いものになります。従って-webkit-プレフィクスの有無など、事前にある程度モバイルブラウザ側の癖に注意しながらコーディングしておけば、途中段階の表示確認についてはデスクトップ用のSafariやChomeのブラウザ幅を狭くしたりしながらの確認でもさほど問題ありません。
ただ、SafariやChromeは400pxより幅を狭くすることはできないため、より実機の表示領域に近い状態で確認ができるよう、Chromeデベロッパーツールのデバイスモード機能を活用することをお勧めします。
使い方は次の通りいたって簡単です。

1. 表示確認したいページをChromeで聞き、「デベロッパーツール」を起動
2. 「デバイスモード」アイコンをクリック
3. 表示確認したいデバイスを選択

1.タップ要素同士が近くなりすぎないようにする

Appleのガイドラインではタップ（リンク）領域は最低44×44pxを推奨していますが、Googleのガイドラインでは48×48px以上を推奨しています。またひとつひとつのタップ領域が48×48px以上あったとしても、それらがピッタリくっつくような状態で配置されている場合、誤って隣を触ってしまうことがあるので、十分な余白を取るように心がけてください。

2.拡大しなければ読めないような小さな文字にしない

使用するフォントサイズはユーザーが拡大しなくても読める十分なサイズを確保するようにしましょう。
12～16px程度あれば問題ありません。

3.モバイル用のviewportを設定する

様々な画面幅のデバイスで問題なくコンテンツが表示されるよう、HTMLにはviewportを設定してください。基本的にwidthは固定値より"device-width"の方が推奨されます（固定値が絶対にダメというわけではありませんが、固定値にしたことによってモバイル環境の表示に悪影響が出る場合には修正項目として指摘される可能性があります） 。

4.コンテンツがviewportからはみ出さないようにする

viewportの値が「width=device-width」となっていても、HTML要素や画像に固定値が設定されているとコンテンツがviewportからはみ出してしまう場合があります。HTML要素のwidthは基本的にautoか%指定、画像にはmax-width:100%;を設定するようにしておきましょう。
なお固定幅のネット広告は基本的にユーザー側で幅を可変にすることはできないため、可変幅の広告に切り替えるか、PCとモバイルでコンテンツの出し分けをする等の対策が必要となります。

5.Flashを使用しない

ほとんどのモバイルブラウザはFlashに対応していませんので、Flashコンテンツは使わず、HTML5+CSS3+JavaScriptで対応するようにしましょう。