レスポンシブ対応
スマートフォンやタブレットなど、さまざまなデバイス（情報端末機器）に対応するため
のWebデザインのことです。
メリット
（1）ウィンドウの幅が狭くなると、横並びのメニューがプルダウンメニューに変わる。
（2）イメージ画像が、縦横比を保ったまま縮小される。
（3）ウインドウを狭めると、ヘッダーがシンプルになり、商品が縦並びで表示される。
レスポンシブデザインによって、Webサイトのレイアウトやデザインをデバイス毎に最適化
できるので、PCサイトやスマートフォンサイトなど、専用サイトをそれぞれ用意する必要が
ないので、ユーザーにとっては見やすく、制作者にとっては管理しやすいというのが主なメ
リットです。
他にも・・
- 「デザイン効率が良い」 ⇒ ひとつのデザインで、いろんなデバイスに対応できる。
- 「管理が楽」 ⇒ デバイス毎にWebサイトを用意する必要がない。
- 「SEO対策に良い」 ⇒ 全て同じURLになるので検索エンジンからの評価が高くなる。
こうしたメリットとワードプレスのテンプレートの豊富さに、レスポンシブ対応のテーマを
選び、仕事を受けた後、思いのほか苦労したという事を以下に記載します。
レスポンシブは完璧ではない
どんな端末でもキレイに表示されると思われがちだけれど、実は違う。
タブレットやスマホ、その閲覧方法が縦型なのか横型なのか、システムのバージョンやら、
いろいろな環境があります。
結論から言うと、思い描くほど思った通りキレイに画面サイズにハマりません。
画像が大きすぎたり、文字が小さすぎたり、画像が見切れたり、変な所で文字の改行が入っ
たりという小さな問題が必ず出てきます。
細かなものに対応していくと、最終的にはそれぞれの端末機器を意識した専用のWEBページ
を作製した方が良いという結論がちらつきます。しかし、専用にWEBページを用意しても、
ユーザーの端末の使い方が原因で、完璧にはならないのです。
作り手としては、何とも歯がゆいのですが、今のところ全ての端末に意図するように表示さ
せるには、それぞれの端末とユーザーが使いうる手段を見越して開発するしかありません。
そうなると開発費用が莫大になります。そもそも開発費ありきの予算内で開発することがほ
とんどです。いかにリーズナブルで多くの方々にリーチするかを考えると、レスポンシブ対
応が良いわけです。値段に見合い、最大公約数を意識した作りとなるわけです。ここを先に
伝えないとクライアントとの間にトラブルが生まれます。
結局、PC表示という選択
スマホでもタブレットでも「PC表示」させれば、レイアウトの崩れや画像や文字の大きさと
いった調整をする必要がありません。PCで見たままのものがスマホやタブレットで再現され
ます。ただ、これって、レスポンシブの意味が無い。
それに、PC表示にする方法を知らないユーザーもいます・・・
それを、説明するとWEBページダサくなるし。
レスポンシブ対応がうまくハマっているユーザーにはそのまま表示させ、そうではない人に
は一発でPC表示にしてしまう方法はないものか？
採用したプラグイン
Viewport Exchanger
実はこれも、表示される端末とされない端末があり完璧ではない。
しかし、PCとモバイル表示の切り替えを、サイトの上部に表示されるボタンをタップするだ
けで切り替えが可能です。「PC表示」にする為に、設定画面の○〇のXXを・・・なんてや
らなくて、その時だけ「PC表示」を有効にできる。
サイトの上部に表示される文言は英語。
「Show PC View」と「Show Mobile View」がのどちらかが表示されていて、タップする
ごとにWEBデザインがPCとモバイルに切り替えられます。タブレットの同様です。
出来るだけサイトの邪魔にならないように配慮されたボタンです。
しかし・・・
- 英語が読めない人はどうするのか？
- ボタンを見つけられない人はどうするのか？
そんな意見も出ることは確かです。
最初にレスポンシブは完璧だという印象を与えてしまったので、ここの誤解を解くのは大変
ですが、根気強く説明するしかありません。
デザインを邪魔せず、レスポンシブ対応を行いつつ、レスポンシブが見にくい人にはタップ
一発でPC表示に切り替えるという方法・・・今のところ、これがベストです。