2011年10月30日日曜日

Media Queries(メディア クエリ)

「HPをスマートフォン対応にしてくれ」という声を聞いたことがある方も少なくないかもしれません。

まぁ、私は自分がかかわっているWebサイトのスマホ対応の作業を自らやると決めたのですが・・・
さてさて、一口にスマホ対応といってもいろいろあります。

まず、コアなところから・・・
(1)スマートフォンアプリ
これは最近、流行ってきている(?)みたいで、すでにamazonや楽天など大型のショッピングサイトなどではすでにアプリの導入をしているようです。
メリットとしては、スマートフォンユーザーの利便性向上になりますが、
デメリットは、アプリの製作の手間と時間と予算の問題が発生します。
特にiPhoneとAndroidではアプリのプログラミングの仕方が違うほか、共通のアプリを製作することも可能だそうですが、その分、負担と難易度がグッとアップします。
内容にもよりますが、少なくともテキストページで済むようなコンテンツであれば、アプリは逆に運営の負担になりえます。

(2)スマートフォン専用サイト
スマートフォンの画面はパソコンに比べ、小さいため、その分、Webサイトの表示も小さくなり、文字も小さく表示されてしまいます。
そのため、 PC用のサイトとは別にURLをスマホ用に割り当てます。
メリットは、PC用Webサイトの環境に左右されないため、スマホに適応した表示がされるほか、比較的自由に製作できるのですが、
デメリットは、「ユーザーエージェント」という各デバイス(接続機器)によって判別する方法で振り分けする必要があり、かつiPhoneとAndroidは画面サイズの違いもあり、正確に表示されない部分が発生します。
スマートフォンアプリほどではないものの、 スマホ用にサイトを立ち上げることは運営もその分手間が増えることは間違いないでしょう。

(3)メディアクエリを用いて各デバイスにあわせて表示させる
これが今回の本題ですが、次世代のスタイルシート「CSS3」では「メディアクエリ」といって、各デバイスにあわせて表示させる方法が可能となりました。
これは、CSSファイルを複数用いて行う方法で、「レスポンシブWebデザイン」 とも呼ばれます。
ただし、IE8以下のブラウザは対応していません。(まぁ、JavaScriptで回避する方法もありますが、ここでは割愛します)
とはいうものの、運営の手間の負担をかけないことや、今後iPhoneとAndroid以外のスマートフォンの出現、さらに多デバイス化する将来を考えると、この方法は有用ではないでしょうか。

(4)その他の方法
○WordPressの導入:オープンソースのCMSで、無料で使え、ブログのように更新でき、スマホにも対応でキルサイトも製作できます。ただし、PHPに対応したサーバとカスタマイズするにはそれなりの技術も求められます。(まぁ、WordPressオリジナルドメインを使用することもできるので問題はありませんが・・・)
○JIMDOを使う:これも選択肢の一つです。広告付きとなってしまいますが、無料で使うこともできます。ただし、ガラケー(従来からある携帯電話)では正常に表示されないようです。
○ (極論)スマホに対応させず、そのまま:ある意味、これも選択肢の一つだと思います。
ただし、今後、スマホ人口が増加することを考えると・・・です。

とりあえず、こんな感じでしょうか。
このブログにおける注意事項

当ブログは、個人が開設・運営をしているブログです。内容については個人的な解釈の範囲内で書いておりますので、あらかじめご了承ください。
また、ブログ内では固有名称等が出てくることがありますが、いずれも個人的な見解です。公式プレスリリースではありませんので、関係各所に問合せなさらぬよう、くれぐれもご注意ください!