スポンサーサイト

  • --/--/--
  • このエントリーをはてなブックマークに追加

スポンサーリンク

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

レスポンシブWebデザインはブームではない

  • 2012/11/05
  • このエントリーをはてなブックマークに追加

スポンサーリンク

マルチデバイス
スマホ表示がFC2のデフォルトテンプレート使ってるような私にいわれたかないでしょうが、あくまでも使ってるユーザー側の視点として考えてもらえると嬉しいなと。
IT/Web業界に強い転職サイトGreen

決して軽くするのが目的ではない


基本的に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使うとか
Adaptive Images in HTML
サーバーサイドで画像を最適化して表示してくれる恐ろしい子。以下の環境で動作。
Apache 2
PHP 5.x
GD lib
ただこの子、HTML側に書き込むJavaScript様が、screen.width,screen.heightとなっていて、レスポンシブWebデザインのもっとーであるウィンドウサイズの変化に合わせて画像を選ぶのではなく、デバイスのディスプレイサイズに合わせて変更されるため、最初わからなくて鼻血そうになったので注意がいるかも。

Sencha.io Src使ってみるとか
APIを使うとか
これは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デザインの導入は、よく自分のサイトやブログを閲覧するユーザーの気持ちを考えて、複数ある選択肢のうちの一手として考慮してもらえればなと思います。そして変更後、ユーザーはどう思っているのかまで調査できれば一番いいですよね。

みんなやってるからこれ正解っていう最近の流れがまず、不正解だと思うんです。

皆さんはどう思いますかね?

それでは、また。

スポンサーリンク

トップへ戻る

Twitter版のネタ帳では毎週月曜~金曜までWeb屋さんに役立つ色んな情報や単なるネタまでをつぶやいています。

関連するエントリー

コメント

この記事にコメントする人はクリック

コメントポリシーをお読みください
管理者にだけ表示を許可する

名前を名乗れない人 No title

ヘッダーが、サイドバーがどこにあるかわかりづらいってより、字が小さすぎて読めないことの方が問題だから、pixel per inchがわからない状態ではリキッドレイアウトをひとつの対策法として使うしかないと思うよ

冒頭にあるように、Full HDのスマホやタブレットが出てきた今、これにどうやって対応するかが課題だろうね

2013/08/16 Fri 10:37| |

FC2Ad

広告


IT・Web業界の求人なら転職サイトgreen(グリーン) ホームページテンプレート、WordPressテーマ、Facebookページテンプレートならクラウドテンプレート ネットマーケティングとは│ネットマーケティング検定 SEOコンサルティング&SEO対策 無料レスポンシブWebデザインテンプレート 広告主募集

あわせて読みたい
フィードメーター - ホームページを作る人のネタ帳

人気の記事一覧

あなたのブログの再訪問者を増やす50の方法

私の経験から感じた事を書き記します。全てが全てその時々で、正しいとは限りませんが、一つの指針としてお使いください。因みに全部リスト化すると230くらいありましたが、それはきっとセミナーとかでやるかなぁと。

http://e0166.blog89.fc2.com/blog-entry-824.html

あなたの生活を確実に拘束し時間を浪費させる動画50

今回は生産性を向上させる事ばかり考えて記事を書いてきたので、逆に年末にかけて忙しい皆さんの時間を出来るだけ拘束し、忙しさを倍増させるものが無いかを考えました。その結果、動画で行こうと言う事になったのが1ヶ月以上前。動画閲覧本数はおそらく600本以上。その中から、おもしろそうなものを50個ベストチョイスいたしました。

http://e0166.blog89.fc2.com/blog-entry-820.html

webデザインのセンスを磨く○○系のwebデザインまとめ

webデザインを学ぶならwebデザインから。と言うわけで、今回は海外のエントリを中心に、○○系のまとめをまとめます。

http://e0166.blog89.fc2.com/blog-entry-817.html

jQueryプラグインのベストトレンド総まとめ2010

もはやこの業界ではかなり浸透しつつあるjQuery。今回はそんなjQueryにスポットを当て、本年度紹介された中でも、ホットなトレンドプラグインをご紹介します。

http://e0166.blog89.fc2.com/blog-entry-816.html

ツイッターの日常における35の行動パターン

私が良く見かける35の行動パターンに名前をつけてみようと思う。年末の誰も見てない時に公開しようと思っていた、ただのネタだったのですが、結構時間がかかりこの時期に・・・。

http://e0166.blog89.fc2.com/blog-entry-823.html

ウェブデザイナーのためのウェブアプリ15

OSがWindowsであろうと、ubuntuであろうと、共通のサービスを受けることができるのがウェブアプリケーションです。ウェブデザイナーの中には、自宅ですでにubuntuを利用している人も多い。また、Mac、Windowsと、各自それぞれの使いやすい物を利用していると思います。

http://e0166.blog89.fc2.com/blog-entry-784.html

愛用するGoogleChromeエクステンション12個

この2年でノートPC2台購入。自他のPCはクラッシュしてリカバリー。会社のPCは新しいのがあたり、再セットアップ。そんなこんなで、会社はまぁともかくとして、とりあえず全PCが比較的3ヶ月に一度リカバリーしてもいいように、自分用にメモとして残しておきます。

http://e0166.blog89.fc2.com/blog-entry-784.html

文章や会話のプレゼンテーションを向上させる方法

文章力がないためにプレゼンに失敗した、会話がうまくできずにプレゼンに失敗した。こういう経験はなかなか無い。なぜなら多くの場合、失敗したことに気がつかないからです。

http://e0166.blog89.fc2.com/blog-entry-802.html

サイトの裏側の意識を変え売り上げをアップする方法

ネットショップ運営者が、あることをちょっとだけ始めてみただけでわずか5ヶ月で売り上げが3倍になりました。はたして、webサイト運営がどのように変わったのでしょうか。。

http://e0166.blog89.fc2.com/blog-entry-749.html

webサイトのリピーターを増やすさりげない5つのコツ

多くのビジネスサイトのアクセス数を支えている大手検索サイト、Yahoo、Googleのアルゴリズムが変わる事で、突然商売がひっくり返る事態を回避する方法。

http://e0166.blog89.fc2.com/blog-entry-746.html
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。