家富正幸 前回に引き続き
レスポンシブデザインについて
語っていきたいと思います。
▼WordPress上でのレスポンシブデザイン
WordPress上でもデフォルトのテーマなどはレスポンシブデザインに対応し、積極的に利用しているサイトが増えています。
僕らがお客様からいただくご要望の中にも「レスポンシブデザインでお願いします」というのが非常に増えておりますが、デメリットの部分も含めると、安易にお勧めできません。
そこで僕らが提案しているのが、
「PC向けとスマフォ向けのテーマを用意する。」
という方法です。
WordPressでは
「アクセスする端末ごとにテーマを使い分ける。」
ということを簡単に実現することができます。
具体的にはAというPC向けのテーマと、
Bというスマフォ向けのテーマを用意しておいて、
アクセスしてきた端末がPCならばAのテーマをサイトに適用し、スマフォならばBのテーマをサイトに適用する。
という単純な方法です。
テーマファイルをPC向けとスマフォ向けに2つ作成しなくてはならないという
面倒な部分もありますが、レスポンシブデザインのデメリットに挙げた項目を、ほぼ全て払拭することができます。
PC向けとスマフォ向けで別々のHTML構造を用意することにより、
例えば高解像度で巨大な画像ファイルをPCで扱っていても、スマフォでは、プログラムで画像をリサイズすることで、ファイルサイズを圧縮して表示させることができます。
コンテンツの出し分けも同様で、PCでは200文字を表示させるが、スマフォでは
50文字しか表示しない、などとということが簡単に実現できます。
各デバイス向けのソースコードには、他のデバイス向けのソースコードは一切含まれないので、
スマフォ向けテーマなどモバイル環境からのアクセスを想定する場合は、非常にシンプルなコーディングにしておくことで、3G回線などの速度の遅い回線でもアクセスのしやすい環境を構築することができます。
またデザインのワークフローでも、レスポンシブデザインのように共通のデザインや、共通のコンテンツ部分をソースコードレベルで意識する必要がないので、自由にデザインができることもコストの削減につながります。
さらにこの手法では、スマートフォンユーザーが
「PC向けの画面を見たい」
といった場合にテーマを切り替える
インターフェースをつけることで、簡単に実現することが可能なため、ユーザービリティにも配慮したサイトにすることが可能です。
そうなってくるとワンソースマルチデバイスというメリットが全くないじゃないか！
と言われてしまいそうですが、ワンソースマルチデバイスのそもそものメリットは、
プログラムを使わない静的なサイトが、
「1つのHTMLソースで複数のデバイスに対応できる」という点であり、ユーザーの目線ではなく開発者目線でのメリットです。
これは、プログラムを利用できる環境ではメリットにはなりません。
なぜならば、プログラムを利用することで表示領域の制御や、画像サイズの制御などは、CSSなどでやるよりも簡単にできてしまうからです。
また「1つのソースを複数のデバイスに最適化する」という意味では、ソースの指す部分をHTML構造ではなくコンテンツの内容とするならば、こちらの方が利用するユーザーの目線に立った、本来の意味でのレスポンシブデザインではないかと思います。