このブログはWordpressで作っているので、以前にプラグインでスマホ対応しました。
今回は事務所のサイトをスマホ対応してみようということで、その序章です。（具体的な手法はまた今度）
まず、そもそもスマホ対応する必要性があるのか？
Google Anallyticsのアクセス解析を見てみますと、サイト開設から約2年になりますがその全期間で、iPadなどのタブレットを含めたモバイル端末からのアクセスが全体の9％程度でした。ただし、直近の半年間では13.5％、その前の半年間では5.8％なので、最近になるほどその比率が上がってきており、時代の流れからも今後ますます増えることが予想されます。
事務所にとってサイトは営業マンと同じです。顧客に合わせた営業トークが必要なように、サイトもユーザーに合わせたユーザビリティが必要と思われます。
ちなみに、直近半年のモバイル端末からのアクセスの内、タブレットが8.7％、残り91.3％がスマートフォンでした。
サイトのスマホ対応とは？
スマートフォンは画面が小さいので、PCサイト（スマホ対応されていないサイト）を見ると文字が小さくて読みづらいです。当然リンク文字やボタンも小さいので指でタッチしにくく、間違えて隣のリンクをタッチしてしまうこともあり、イライラが積もって
「キィー!! もうこのサイト見ない!!!」ってなることもあります。
おおざっぱに言うとスマホ対応とは、小さい画面でも読みやすい文字の大きさにしたり、スマホ特有のタッチオペレーションでの操作もしやすいようにリンクなどのボタンを大きくわかりやすくレイアウトするということです。
スマホ対応とスマホ最適化
これらの見た目のインターフェイスとは別に、スマホ対応にあたって軽視されがちな重要な要素があります。
それはサイトのデータ容量です。
スマホなどのモバイル端末は、ほとんどの場合通信速度の遅い3G回線を利用してネットにアクセスします。データ容量の大きさが表示速度にモロ影響し、ユーザーは数秒待たされただけで
「キィー!! もうこのサイト見ない!!!」って（以下略）
また、モバイル端末で見る場合は主に外出中だったり、PCから見るときとはユーザーの状況や求める情報が違う場合があります。これらを総合的に判断して、不要な情報は消す、画像は解像度を小さくしたり容量を減す、HTMLやCSSをシンプルにするなど、スマホからの閲覧時に、インターフェイス、スピード、コンテンツなど全てにおいて「快適にする」ことを、ただの「対応」から一歩進んだ「最適化」といいます。たぶん。
スマホ対応の仕方
既存のサイトをスマホ対応させるには、主に3種類の方法があると思います。
１．PC用サイトとは別にスマホ専用サイトを新規作成する。
Yahoo! JAPAN（左がPC用サイト、右がスマホ用サイト）
スマホ専用に設計、デザインできるので「スマホ最適化」に最も適する方法。しかし、新規に作成するので手間も時間もかかることと、更新の際にPC用とスマホ用の2つのページを更新する必要がある。
２．メディアクエリを使ってレスポンシブウェブデザインにする。
NHKスタジオパーク（右から順に、おおよそ画面の横幅が1250px、850px、640px、400pxの表示）
CSS3で追加されたメディアクエリを使い、ユーザーの画面サイズ（解像度）に応じて、サイトのレイアウトを変えて表示する方法。例えば上のサイトで一番右にあたる400px前後(320〜540px)はスマホでよく採用される解像度で、逆にPCでこの解像度で見ることはあり得ない。つまり400px前後に設定されたレイアウトはスマホ専用となる寸法。（試しにPCのブラウザで上記サイトを開き、ブラウザのウインドウの横幅を縮めていくと疑似体験ができます。）
PCとスマホが１つのHTMLを共有するので、スマホ専用サイトと違い、１つのHTMLを更新すればOKと管理は楽。逆にスマホにとってはPC用と同じHTMLは重く、さらにCSSはメディアクエリに関する記述分増えるため、スピードにおける「最適化」は難しい。
３．PC用サイトをスマホ用サイトに変換するサービスを利用する。
スマートフォン サイト 自動変換サービスの比較・まとめ « スマートフォン ニュース
shutto や Mobify などのオンライン変換サービスも、今では検索すればたくさん見つかります。手間がなく簡単に素早くできるのが最大のメリット。実際利用したことがないので憶測ですが、はたしてどこまで好みのデザインにできるか、カスタマイズ性が不安。無料のもありますが有料だとちょっと手を出しにくいですよね。
その他、スマホ用ネイティブアプリを作るとか、jQuery Mobileとかのスクリプトを使う方法もあるみたいだけど、１から勉強しなきゃいけないものはパス。
どうするか。
どうしよう。 ウソです。決めてます。
私は、レスポンシブ･ウェブデザインで行くことにしました。スマホ専用サイトは時間がかかるし、更新時に2ヶ所に手を入れなきゃいけないなんて無理。ただでさえ更新はめんどく(略)。
サイト変換サービスは、試してもいないのにこんなこと言うのはなんだけど、いろいろ思い通りにいかなさそう。わたくし凝り性なもんで。
とりあえず、レスポンシブ･ウェブデザインとCSS3の勉強は必要なので、下記の本を買ってみました。
