スマートフォン対応について

作成日: 2015/01/27

更新日: 2016年8月16日

iPhoneやアンドロイドなどのスマートフォンが流行り始めてから数年もしない内に、すぐにweb制作においてスマートフォン対応が注目されてきました。ここでいうスマートフォン、いわゆるスマホはiPhoneやアンドロイドなどここ数年で出てきた携帯電話としておきます。フィーチャーフォンと呼ばれるガラケーの対応でも、ウェブ制作者の方々は時と場合によって表示の切り替え方を変えてきたと思います。.htaccessを変更してディレクトリで振り分けるのか、サブドメインなどを取得して個別のサイトを構築するのか。個人的には制作費が許される限り１つのデータベースでそれぞれのサイトを構築し、デバイスによって切り替えるのが理想的だと考えています。しかし、最近のGoogleではどうも1つのHTMLにCSSでの対応させる方法を勧めているようです。そのことをGoogleは色々と理由は述べていますが、私はGoogleが絶対正しいかというとそうではなく、あくまでGoogle検索にとっては都合がいい程度に考えています。はっきり言って日々変わっているGoogleが今後より高性能のアルゴリズムを作ってしまえばそれで終わりだと思うからです。
スマホ対応もフィーチャーフォン対応と同じように、色々な対応の仕方があります。製作費や時間、サーバ環境などはあると思いますが、維持管理や今後のウェブ展開も考え、正統な対応をしていればしばらくは衰えないと思います。
このようなスマホ対応についてのページは沢山あるため、このページでは個人的に思うことを多く書いていこうと思います。主流に乗っかるのではなく新しいデザインや方法を見つけるヒントになれば一番嬉しいですが、どちらかというと意見が欲しかったりします。そのためこうすればいいという記事というより、こう考えているんだけど、程度に見てください。

各デバイスの特徴から対応を考える

まずなぜスマホ対応が必要なのかを考えるところから始めた方がいいかもしれません。この項目はネットの情報に感化された個人的なところもありますが、それぞれのデバイスの特徴から何が親切で使いやすいかというのを考えてみました。

PCの場合

HTML/CSS：ブラウザのバージョンや種類も多様なため、古いバージョンにも配慮したコーディングが必要。
表示サイズ：ウィンドウサイズは人によって異なるため、固定にしてしまうか変動させることでレイアウトを崩れないよう構築する。
画像：ネットの高速化により大きめの画像でダイナミックに見せることができる。
リンク：マウスを利用していると考えると、カーソルの乗せた時にリンクだと分かるように変化させると親切。
レイアウト：表示サイズに合わせた構築は親切だが、横幅が広いデザインが多くなってきている。
文字サイズ：文字サイズの変更をブラウザで行う人がいるか分からないので変更ボタンを付けてあげると親切。
Flash：使える場合が多い。
場所：屋内で座ってみてる場合が多い。

スマホの場合

HTML/CSS：スマホ自体が新しいのでCSS3やHTML5に対応しているため、便利な機能も使える。
表示サイズ：画面サイズは機種によって違い、今後も新しいサイズが出てくるため、サイズ変化に対応した構築が親切。
画像：ネット環境はPCよりも遅く個々の差も大きいため、コンテンツ内容によっては出来るだけ軽くした方が親切。
リンク：指でタップするため、リンクが大きいと親切。
レイアウト：上下左右のスクロールは見づらい。スクロールせずに見れる範囲が小さいため、メニューなどはまとめるのが主流になってきている。
文字サイズ：980pxの構築では、16px以上はないと見づらい。見る人の拡大率によって異なるため、固定した状態で見やすい文字サイズにする。
Flash：デフォルトでは使えない場合が多い。
場所：外出中、自宅で寝っ転がりながら、何かの合間に、など様々。

どこまで対応させるか

このように見る人がPCなのかスマホなのかで、内部的なところからどんな表示が使いやすいかまで異なります。PCならPCに親切な構築、スマホならスマホに親切な構築をするということですが、気を付けていきたいのはただボタンを大きくするだけではなく、何を求めてページにたどり着いたのかや、そのページで何をさせたいかなど、ユーザーとwebページ、そして運営者のシチュエーションを想像することが大事だと思います。店舗サイトを例にすると、スマホなら電話をかけれるリンクや地図アプリに飛ぶリンクが目立つところに合った方がいいかもしれませんし、PCなら足を運んでもらえるように雰囲気を押し出しブランド構築を優先させてもいいかもしれません。
もちろん理想は全ての人に使いやすく魅力的なデザインですが、実際のところ、最近ではスマホしか持っていない人や未だにケータイを持っていない人もいるなど、時代と共に情報格差は広がっていくと考えています。進歩と共に機能も増え、それに対応させる要素がどんどん増えていきます。そうなってくると、変動や切り替えを行わずして全てに対応した表示と言うのは難しいでしょう。
ではその中でどこまで対応するのか、そして何のために対応するのか。今のサイトではスマホで見ると使いづらいからなのか、スマホの人にはPCと違う情報を載せたいからなのか、PC版のままだと表示が遅いからなのか。そこを明確にしてからスマホ対応をした方が、切り替えの方法、コンテンツ、デザインなどが洗練されていくと思います。

何かを優先させて切り捨てる選択肢だってあります。今までを例にとっても、例えば現在まだ横幅を980pxや960pxで固定しているサイトが多いですが、それはスマホのみならずPCのウィンドウサイズを960px以下にしていた人たちの手間を切り捨てていると言い換えることもできます、極論ですが。しかしそれらは恐らく、ウィンドウサイズの平均や、ディスプレイ解像度、レイアウトのしやすさなど、色んなところから主流となったのでしょう。実際レイアウトを組む時に分割しやすいですし、4:3の比率で横960pxにすると縦720pxになるし16：9の比率では縦が540pxとなって切りが良く、レイアウトのしやすさを感じました(以前は640pxが主流だったのも同じ理由かもしれません)。
スマホ対応が主流だからという理由だけで話を進めると、スマホ対応が意味を持たなくなる可能性があると私は思います。

スマホとPCでの切り替え方

既存のウェブサイトをスマホ対応させる人もいるとは思いますが、新規にスマホ対応するウェブサイトを立ち上げる人はPC版を構築する前に切り替え方を考慮しないと二度手間になる可能性があります。既にウェブサイトを持っている場合はPC版の作り直しなどを含めた、作業費との兼ね合いも関係してくるでしょう。
大きく分けると、PC版とは全く別にスマホ版を構築して切り替える方法と、コンテンツをPCとスマホでレイアウトを変えて表示する方法、データベースなどを利用しシステムで切り分ける方法があります。

１）スマホ版を独立して構築する

PC版はPCサイトを作り、スマホ版は別にスマホサイトを作る方法です。
既存のサイトをスマホに対応するのが難しい場合や、スマホ版はスマホに特化したウェブサイトを作りたい場合にいいかもしれません。メリットとしては、それぞれに合ったコンテンツを提供でき、画像なども最適化することができます。デメリットとしては、2つのサイトを作ることになるので、制作時に時間がかかる点や、修正があった場合に作業が2倍になることです。
運営方法は何種類か考えられます。

１-１）ディレクトリで分ける: スマホ版を「sm」などのディレクトリ内に構築しおき、.htaccessによってURLを叩いた人のデバイスを認識させ、スマホなら「http://domain.com/sm/」へ転送、PCが「sm」にアクセスしたら通常の「htttp://domain.com」へ転送する方法になります。.htaccessが使えるサーバ環境なら、サイトをHTMLのみで構築している場合に便利かもしれません。また、既存のウェブサイトに影響を与えずに独立したスマホサイトを構築することができるので、PC版に特化し過ぎたサイトや変更を加えたくないときに便利だと思います。
１-２）サブドメインで分ける: スマホ版を「mobile.domain.com」のサブドメインに構築し、.htaccessによって切り替えます。この場合はサーバも別に構築することができるため、ディレクトリで分けるより、サーバの負担を分担できるのではないかと思います。しかし、ドメイン管理会社やサーバ会社によっては利用できない可能性もあるかもしれません。

２）１つのコンテンツをスマホとPCで表示を変える

１つのコンテンツを見る人によって表示が異なるようにする方法です。最大のメリットは、修正が楽な点だと思います。デメリットは、方法によってはランニングコストがかかったり、デザイン段階にPCとスマホの両方を考慮しなくてはならない点が挙げられます。

２-１）レスポンシブウェブデザインで構築する: viewportの指定やcssの「media screen」によって、ウィンドウサイズによってレイアウトなどを変動させる方法です。この対応はPCでもウィンドウサイズを変更することで確認することができます。メリットとしては独立した場合に比べ簡単な修正が楽な点があげられ、Googleの勧める1つのHTMLで見る人に分けるといった方法になります。また、HTMLとCSSだけの構築なのでサーバ環境はあまり関係なさそうです。ただ、デザインの段階からスマホを考慮しなければならなく、構造が難しくなっている場合が多いため構築の際にちゃんと更新の場合を考えておかないと1手間も2手間もかかってしまう可能性があります。PC版サイズの画像をスマホでも読み込まなくてはいけない点もデメリットと言えるでしょう。そのため、シンプルなデザインやCSS3を使ったデザインに多い気がします。
２-２）ASPを利用する: 自動でスマホ対応させるASPを利用する方法です。現在、「スマホ対応 ASP」で検索したら数多くのサービスを見ることができます。HTMLを変換してくれる仕組みであれば、既存のウェブサイトにシステムを組んでいたとしても、影響はないと思われます。また今まで通り更新していくだけでいいのであれば、スマホ対応の作業だけをみるなら一番楽なのかもしれません。デメリットとしてはランニングコストでしょう。

３）システムを利用する(WordPress)

既に利用しているシステムにスマホ対応を付け加える、または、対応しているCMSに組み込む方法です。独自システムの場合は開発費が必要になりそうですが、WordPressなどのオープンソースのCMSでは、プラグインでスマホ対応することもできそうです。ここでは、一番利用されているCMS、WordPressの場合について考えたいと思います。

３-１）テーマを切り替えるプラグインを利用する: スマホを判別し、機種によってテーマを切り替える方法です。「Any Mobile Theme Switcher」がその中の一つです。事前にスマホ用のテーマを作成しておく必要があります。データベースに挿入されたコンテンツは同じHTMLとなるため、崩れない程度の修正でスマホ対応として良しとするか、スマホも意識してコンテンツを作成するか、これらを考えると完ぺきとは言えないかもしれませんが、個人的には理想に近い形でスマホ対応できると思います。また、データベースの部分は1回の修正で大丈夫ですが、テーマが絡むと2度修正しなくてはなりません。特にfunctions.phpは重要なのですが、私は忘れがちです。
３-２）自動で切り替えるプラグインを利用する: 設定をすれば自動でスマホ対応させるものです。有名なプラグインではスマホ用テーマも豊富にありそうです。

まとめ

システムを利用すれば他にももっと切り替え方はあると思いますが、切り替え方から考えると初期作業も大事ですが、後々のことも考えたいところです。更新が大変だったら維持管理費がかかります。
すでにデフォルトでスマホ対応の機能がついているCMSもありますが、コンテンツの入力画面にももっと目を向けて欲しいと思います。ホームページを持つのが当たり前となり、HTMLからCMSになり、今度はCMSが当たり前になってきたので、デバイスによる切り替えに特化したCMSの開発もぐーんと進んでいくと思います。

スマートフォン対応について