オルター・トレード・ジャパンのWebサイトにWordPressを導入してはやりのレスポンシブWebデザインにしてみた。http://altertrade.jp/
レスポンシブWebデザインとは
↑通常のWeb用レイアウト
↑スマートフォン横用レイアウト
↑スマートフォン縦用レイアウト
正しい定義などは検索して調べてほしい。要は１つのスタイルシートで大画面のモニターからiPadやiPhoneなどのような小さな画面までWebサイトのデザインを規定すること（と理解している）。
上記サイトを開いてブラウザの横の幅を変化させてみてほしい。サイズに応じて子ども番組に出てくるロボットのようにレイアウトが変わっていく。一見すごい仕組みのようにも思えるかもしれないが、ブラウザの幅に合わせてスタイルの指示を変えるだけ。それを指示しているファイルはCSSのテキストファイル１つだけなので、実に単純な仕組みだ。
だから、サイトがどんなシステムを使っているかに関わらず、レスポンシブWebデザインは導入することが可能だ。WordPressだからとかDrupalだからとか、あるいは手書きのHTMLで作ったサイトであろうが関係ない。実にシンプル。
iPhoneやAndroidなどで見る場合は縦に見る場合と横に見る場合でまたレイアウトが少し異なる。このデザインでは４つのサイズを用意してあり、ブラウザ側が自分のサイズに合うレイアウトを使ってページを表示する。
今回の場合にはレスポンシブWebデザインで作られたテーマを導入した（Elegant WordPress ThemesによるAggregateというテーマ）ためレスポンシブWebデザインそのものを最初から組む必要はなかった。しかし、そのままだとさまざまな不都合なことが起きるため、かなり大きく手を入れた。その過程でレスポンシブWebデザインの作り方は把握できた。
スマートフォン対応の必要性
iPhoneやAndroidでWebを見に来る人の数は急激に増えている。スマートフォンに対応していないWebの場合、指で画面を拡大したり、なかなか読むのが大変。個人的にも、このサイトはスマートフォン対応しているとなると、読みやすいので見に行くけど、対応していないサイトはもうパスしてしまおうとか思ってしまったりすることがあるので、スマートフォン対応は今後さらに重要になると思う。
しかし、レスポンシブWebデザインはスマートフォン対応の唯一の方法ではない。メリットもデメリットもある。
メリット：
- １つのスタイルシートを定義するだけなので、管理が簡単
- 統一したデザインにすることが容易
- どの端末でも同じURI（ページのアドレス）を使うことができる
- 関係者が全員簡単にスマートフォンでの見え方をチェックできる
デメリット：
- 複数の異なる大きさのブラウザの定義をすべて１つに書くため、スマートフォンには不要な定義もすべて入ってしまい、データ量が増え、表示に時間がかかる
- スマートフォンではPCで表示されるレイアウトを見ることができなくなる
アクセスしてくる端末のブラウザ（Useragent）を調べ、その端末に必要なデータだけ出すようにすればデータ量を最小限にすることができる。レスポンシブというのはブラウザサイズを変更することがありうるPC用に使い、スマートフォンや日本のケータイ（ガラケー）にはそれ専用にレイアウトされた情報をサーバーから出力する方法がある。
たとえばケータイでサイトにアクセスする時に、サーバーにそのケータイのUserAgentという情報が伝えられる。DoCoMoのP903iなどのように。それを受け取ったサーバーはそのケータイ向きの出力をするようにする。当然、そうした仕組みをサーバー側に作らなければならないが、それが作れればひじょうに強力な仕組みになる。
この方法のメリットはなんと言ってもその端末に最適化した最小限の情報を出せるということだ。ケータイユーザーはパケット量を気にしながらアクセスしてくる人が多いだろう。そのパケット量を最小にできるので、ページの表示も高速化できる。
デメリットは端末ごとに別のレイアウトを維持しなければならなくなるということだろう。また、端末によってレイアウトを変えるにしてもその違いをチェックしてくれる関係者がなかなかいない。ブラウザの横幅を変えるだけでチェックできるレスポンシブWebデザインはその点、容易にチェックできる。端末ごと別のアプローチだと、その端末を持っていてよく使う人以外、関係者でも見てもらえないケースが多いだろう（FireMobileSimulatorを使うとFirefoxやChromeでケータイやiPhoneでの見え方をシミュレートできるのでお勧めだが）。
以前のサイトではZopeというWebアプリケーション環境を使っていたので、それを利用して自作していたが、WordPressの場合にはスマートフォンの場合にはWPtouchなど、日本のケータイ用にはKtai Styleというプラグインが作られているので、自力で開発しなくても、プラグインをインストールするだけで、それぞれに特化したレイアウトを実現できてしまう。
オルター・トレード・ジャパンの場合にも日本のケータイ用にはKtai Styleを使わせていただいた。日本のケータイの場合、古い機種では表示できる文字コードに限定があるので、そうした処理などを自動化してくれるこのプラグインは大いに助かる。日本のケータイ用にはレスポンシブWebデザインは適用外にしてある。
スマートフォン用にはWPTouchを導入した方が出力されるデータ量はぐっと減り、ページの表示もずっと高速化できる。それならばなぜ今回はWPTouchを導入しなかったか。
実は迷っているところでもある。表示の高速性を優先すればWPTouchの方がずっといい。WPTouchの優れたところはスマートフォン上でもPCのレイアウトを表示するようにユーザー側が選択することもできることだ（レスポンシブWebデザインの場合は切り替えするには別の仕組みを作らない限り無理。Javascriptを使って利用するCSSを変えれば不可能ではないだろうが）。しかし、デザインをPCと同等にする作業を別にしなければならないことと、PCで多用する予定のスライドをスマートフォン上でも使えるようにするためにはJavascriptのバッティングを解消しなければならない。以前、別サイトでWPTouchを導入した時にスライドが見えないと言われてWPTouchを使うことをあきらめざるをえなかった経緯があった。Javascrpitのバッティングさえ解決できれば使うことは可能だったのだけど。
レスポンシブWebデザインで注意すべきこと
PC用にデザインされたページの情報のすべてをスマートフォンやケータイ上で表示しようと考えるとどうしても無理がある。だから簡略化しなければならなくなるのだけど、そうするとスマートフォン上やケータイ上で、肝心の情報が見えなくなってしまうことにもなりかねない。
今回のAggregateのオリジナルだとiPhoneなど用の縦型のレイアウトになると最新記事のリストしか表示されず、ATJのミッションを説明した文章や最初のスライドも表示されない。ナビゲーション（メニュー）も限られてしまい、なかなかサイトを使いこなしてもらうのが困難。ATJのサイトでは、一番上、スライドの上、一番下にまず基本のナビゲーションメニューがあり、個別の固定ページには右側に詳細メニューが表示される。それをすべて最小レイアウトでも表示でき、しかもアクセスしやすさと読みやすさのバランスを取った形で構成し直すのに結構手間がかかった。
ただし、技術的にはそれほど高度な難しいものではなく、スタイルシートさえしっかり理解できていれば十分誰でもできるというものであり、それでいながらユーザーインターフェースの改良につながるのでいじっていておもしろいだろうと思う。