ヨコハマとともに生きるクリエイティブ研究サイト
現在スマートフォンサイトを作る方法は、大きく分けて3つに分類することができます。弊社で取り扱っている「Mobify」というモバイル最適化ツールの説明をしている際によく質問をいただくのが、スクラッチやレスポンシブ、アダプティブとの違い。
意外とそれぞれの定義やメリットデメリットが混在している方が多い印象です。（そしてモバイルサイトはPCサイトより簡単に作れると思われている方も多い……）
今回は弊社のサービスを含めて、デバイスに合ったWebサイトの作り方、またそれぞれのメリットやデメリットを紹介したいと思います。
モバイルといっても、表示される画面サイズは様々。view portの設定をしていないと、ディスプレイのサイズに関わらず、Webページは全体が表示されてしまいます。そのため、どんな方法で作るにしてもまずはview portの設定を行います。
このview port設定、これまた色々あるわけで……。少し前までは、スマートフォンの横幅といえば320px。とりあえず320pxで作っておけばいい！説がありましたがiPhone6が発売されてからは定説が揺らいでいます。
そう、iPhone6の横幅は375pxなのです。なんでやねん。とはいえもちろん他にも色々なサイズがあります。
| iPhone初期～5 | 320px |
| iPhone6 | 375px |
| iPhone6 Plus | 414px |
| Nexus5 | 360px |
| Nexus6 | 412px |
| Nexus7 | 600px |
ちなみにモバイルサイトを作るときは、実際の解像度ではなく、densityに基づいた解像度（※）を基本として制作します。
※この説明で1記事書けるので、詳細は割愛
◆参考記事
viewport と density について｜一番かんたんなJava入門
https://nobuo-create.net/viewport/
ということで、view portのwidthにピクセル値を指定しまうと危険です。ここはviewportのwidthという値に、device-widthと指定することで、スマホの画面幅 = 表示するwindowサイズの設定をするのがいいと思われます。（古いAndroidでは、widthにピクセル値を指定しても効かない端末があるので注意）
ここで冒頭で出た3つの手法の登場です。
セパレートサイトとも呼ばれます。PCサイトとは全く別のモバイル用サイトを用意し、PCサイトにアクセスしてきたユーザーのデバイスに対してリダイレクトをかけ、モバイル用サイトへ飛ばす手法。
【メリット】
・モバイル用のページを用意するため、自由度が高い
【デメリット】
・PC用、モバイル用のふたつのサイトを運用するため手間がかかる
・URLの管理の手間もかかる
・リダイレクトをかけるため、トラブルが起きやすい
PC用のページとモバイル用のページの関係を正しく記載することが求められます。PCページにはlink rel=”alternate”の記述、モバイル用のページにはlink rel=”canonical”の設定をするのですが、これまた手間です。
PCとモバイル用のURLが同じもので、アクセスしてきたデバイスに応じて出力するソースを変えます。wordpressなどのCMSに多い手法。セパレートサイトと同じようにモバイル用のサイトを用意しておいて、デバイスごとに出しわけることも、ソース内に条件分岐を記述することも可能です。
【メリット】
・モバイル用のページを用意する場合は自由度が高い
・リダイレクト設定の必要がない
【デメリット】
・複数のソースを管理する手間がある
同じURL・同じソースでアクセスしてきたデバイスの画面のサイズに応じてデザインを変える手法です。1つのページをCSSメディアクエリを使ってデバイスの画面の横幅に合わせて変化させます。
【メリット】
・同じソースで運用するため1ページ=1枚で管理できる
・リダイレクト設定の必要がない
【デメリット】
・必要以上に大きなデータを配信してしまう（PC用、モバイル用のソースが1枚に記載されているため）
・昨今の機種増のお陰でブレークポイントが増え、メディアクエリの設定や修正に手間がかかる
大きく分けて上記の3つです。スクラッチで制作したとしても、横幅の可変は現状のモバイル機器の種類の多さを考えると必須ですので、どれか1つ、というよりはこれらを組み合わせていくという感じでしょうか。
仕組み的には限りなく動的配信に近いですが、この3つの手法のいいとこ取り的なツール！ といっても過言ではありません。「PCのソースの必要な部分だけを使い、アクセスしてきたデバイスに応じて、ディスプレイサイズピッタリの表示をお届け」できるサービスです。
リダイレクトをかけなくてもいいし、複数のページを管理する手間もありません。1ページで色々なデバイスに対応することは、W3Cで提唱されており、GoogleやBingなどの検索エンジンでも同一のコンテンツを1つのURLで管理することを推奨しています。
次回からMobifyについてさらに詳しく紹介していく予定ですので、気になる方はぜひ参考にしてください。
とはいえ、どんな手法でも向き不向きというのはあります。大切なのは予算や運用方法によって、自社のサイトにあった手法を選ぶこと。
モバイルラボで情報収集をして、自分にピッタリのモバイルサイトを作ってくださいね！
モバイルラボ 編集部
ヨコハマ・モバイルラボとは？
モバイルならではの表現ってなんだろう？
一瞬のひらめきや感動は手のひらから始まっています。
新しいクリエイティブのカタチをここから探してみましょう。 
Mobify（モビファイ）とは
Googleが認定しているマルチスクリーン対応のための最適化サービス。
デバイスに応じ、専用にデザインされたサイトを表示することができます。
ページの表示を高速化させる仕組みも持ち合せており、ユーザーの離脱を防ぐことが可能です。
