レスポンシブWebデザインはブームではない
2012年11月05日 公開
スマホ表示がFC2のデフォルトテンプレート使ってるような私にいわれたかないでしょうが、あくまでも使ってるユーザー側の視点として考えてもらえると嬉しいなと。
決して軽くするのが目的ではない
基本的にCSSでもじょもじょしているわけですから、例えばPC表示でサイドバーに画像があり、その領域をスマホに最適化する為に全て排除したとしても、見えないだけで読み込んでは居るわけですね。
Ethan Marcotte(イーサン・マルコッテ)氏が考案したレスポンシブWebデザインが生まれたのは2010年の5月。読み込みサイズに関してはやはり海外でも色々と議論されているわけでして、なかなかどうして大変ですねと。
そこから1年くらいたったあたりから日本にも広がりつつあります。
広がった理由はとてつもなく単純でして、PC表示、小型のスマホ、タブレットなど、様々なデバイスサイズに対応するために、全て1からCSSを書き起こすのはナンセンスすぎるからというもの。
つまりこれって、表示したい側の利便性によって広がったわけでして、見ているユーザーの要望から広まったわけではないんですよね。
さっきの画像についての議論も白熱はしているみたいですが具体的な解決方法があるわけではありません。
例えばpictureを使う方法とか
<picture alt="Apple">
<source src="./image_small.jpg">
<source src="./image_big.jpg" media="(min-width: 780px)">
<noscript><img src="./image_small.jpg" alt="Apple"></noscript>
</picture>
srcset属性あたりをつかうとか
<img alt="The Breakfast Combo"
src="banner.jpeg"
srcset="banner-HD.jpeg 2x, banner-phone.jpeg 100w,
banner-phone-HD.jpeg 100w 2x">
上の2つは画像を複数用意するというもの。
Adaptive Images in HTML使うとか
サーバーサイドで画像を最適化して表示してくれる恐ろしい子。以下の環境で動作。
Apache 2
PHP 5.x
GD lib
ただこの子、HTML側に書き込むJavaScript様が、screen.width,screen.heightとなっていて、レスポンシブWebデザインのもっとーであるウィンドウサイズの変化に合わせて画像を選ぶのではなく、デバイスのディスプレイサイズに合わせて変更されるため、最初わからなくて鼻血そうになったので注意がいるかも。
Sencha.io Src使ってみるとか
これはAPIを利用して画像サイズを最適化して表示するサービスですね。
あとはJavaScriptでなんとかするとかですかね。
要するに表示領域に合わせて複数の画像を用意するという方法で、合計読み込みサイズを減らしましょうかという話ですよね。実際に多くのブロガーさんがレスポンシブに移行していますが、記事で画像をよく使うブログという点だけで考えると現実的な回避方法ではないです。
ベターな方法ではありますが、アイコンフォントなんかも活用したりしてなるべく軽くしようという考えもありますよね。
Font Awesome, the iconic font designed for use with Twitter Bootstrap
これなんか商用利用もできてスンバラシイ性能だと思います。
これらは全て、レスポンシブWebデザインする時に考える「一番小さいデバイスへの配慮」であり、なんでそんな配慮が必要かというと、PC表示する為、タブレットに最適化する為、スマホに最適化する為に膨れ上がったCSSも、一番小さいデバイスで読み込むからですよね。
結果、スマホ専用表示より重いってことです。
UIが変わることを嫌うユーザーは多い
レスポンシブWebデザインの一番の考察ポイントはココですよね。
よくレスポンシブ化したので凄く使いやすくなったと思います!!!
とかいう言葉を耳にするのですが、それはCoderさんのエゴであって、ユーザーに取って本当に使いやすくなっているのかどうかとは別の話です。
2012年9月24日に書かれたユーザビリティの大先生ことヤコブニールセンの調査結果、Homepage Design Changesを読むと面白い傾向にあるのがわかる。(日本語訳あった:ホームページデザインの変化)
これは誰もが感じていることだと思いますのでわざわざいう事もないかもしれませんが、ユーザーインターフェイスがコロコロ変わるのは致命的な欠陥となります。ウェブデザインは安定している。平均的なホームページは1年前の状態から約40%しか変わっていない(完全なデザイン変更には2年半かかることになる)。
これは良い知らせだ。というのも、ユーザーは変化を嫌うからである。人というのは馴染んだやり方で物事を動かすのを好む。また、変化のペースがゆっくりであればあるほど、デザインチームが変更を行う前に、熟考し、調査する時間が長く取れるようになる。転ばぬ先の杖ということで、跳ぶ前にはよく見よう。繰り返すが、こうすることでデザイン変更の成功率と利益をもたらす可能性は高くなるのである。
特にリキッドデザインによるカラム調整も、本当にそれが必要なのかどうかで多くのデザイナーの頭を悩ませています。例えば単純なモニターサイズの違いによって、会社のPCで見ると3カラムだったのが、家のPCで見ると2カラムになっていたら、その場所に存在していた「インターフェイス」がどこか忘却の彼方へ飛んでいっている事を意味します。
ユーザーはその都度、それを探さなければいけません。
また、これもニールセンのユーザビリティに従いますが、ユーザーはそれを探してまでスクロールはしないという傾向があります。ちなみにリキッド仕様変更の依頼で手伝いをしたサイト、ページビューが激減して胃が痛くなったこともある。ようするにどこかへ飛ばしたことで内部リンクを一時的に踏まれなくなった。
もう一つ、iPadや、iPhoneのように、縦、横に向きを変えることで、即座に横幅を変更出来るデバイスもあります。縦で見ているとヘッダーメニューがあったのに、横で見ると、忘却の彼方へ押しやられたりするパターンもあれば、逆に縦で見るとそこにはなかったメニューが、横にすると突然現れると言った現象もよく見かけます。
結果的にこれは、サイトを最適化しているのではなくて、見ているユーザーに対して、脳内で最適化することを余儀なくしているということです。上手く最適化されていないサイトは、ユーザーに対して負荷をかけているということです。
これはブームではなく、いまだ可能性
わりと最近の傾向としては、流行りのデザインと間違わられる人も居ると思うのですが、あくまでもレスポンシブWebデザインは今後のマルチデバイスに対応するための可能性であって、それこそ扱っているコンテンツとターゲットによってトレードオフの関係なんですよね。
「このサイトではこのカタチが良かったけど、こっちでは同じカタチにするとダメだ。」と言ったように、まだ2年足らずしか立っていないこの技術に正解という正解はなく、みんな色々試している段階だと言えます。
ガラケーあがりの若い年齢層の中には、縦長に最適化されたコンテンツが好む人もいますし、中年層になるとUIが変わることを極端に嫌う人も多くなる為、例えスマートフォンでもPC表示に変更して見る人も多いです。私もその一人。
別に記事の部分はダブルタッチで自分で最適化出来るのだから、わざわざ使いにくくなるUIにしたいとは思えないわけです。
そこにもってきて、PC表示とスマホ最適化表示の切替が出来ないサイトが増え始めて、本来サイドバーにあるメニューをみたいだけなのに、リキッド様によって一番下まで追いやられたメニューを見つけるために、人差し指をごしごし擦らないといけないのも悲しいですよね。
でも時代は動いている
TwitterやFacebookからの流入の一番の傾向としては「記事しか見ない」というのが圧倒的ですよね。また、デバイスがスマホであればあるほど、この傾向が強く出ます。
要するに、記事さえあれば他はいらないという事です。
このSNS経由のアクセスもかなり増えてきているわけですから、そもそもサイドバーなんていらねっすというのも、ひとつの答えとも捉えることができます。また、スマホの通信速度も3Gから4G/LTEになって、そもそもそんな微妙な重さすらぶっ飛ばすくらいの速度になれば、重くもなんともないですよね。
また、ブログではなく、Webサイトにおきましては、画像サイズを複数用意して最適化するのも簡単ですし、そういう使い方も、コンテンツによっては正解かなと思うものもあります。
なので、レスポンシブWebデザインが悪とかそういうものでも無くて、今後どんどん取り入れていく形にはなると思うんですが、本当にそこにそれが必要なのかというのは十分に吟味する必要があると思いますし、PC表示と同じ状態で閲覧したいというユーザーの大きな希望も叶える必要はあると思うんですよね。
また、こんだけTwitter経由のアクセスが増えているのに、URLの違いでデバイスを識別しようとするサイトもまだまだ多いです。
例えばスマホで閲覧中、気に入ったサイトをツイートすると、そのURLがスマホ用。
そのツイートのリンクを誰かが踏むと、PCで見てるにもかかわらずスマホ用の表示がでるとか、もうそんな面倒な仕様にするならレスポンシブにいっちゃいなYOと言いたくなることも多々ありますよね。
そんなわけでして、レスポンシブWebデザインの導入は、よく自分のサイトやブログを閲覧するユーザーの気持ちを考えて、複数ある選択肢のうちの一手として考慮してもらえればなと思います。そして変更後、ユーザーはどう思っているのかまで調査できれば一番いいですよね。
みんなやってるからこれ正解っていう最近の流れがまず、不正解だと思うんです。
皆さんはどう思いますかね?
それでは、また。