無邪気に"カッコイイ""最新鋭"ではいけない（レスポンシブWebデザイン編）
デザイナーズコラム第五弾
WEBSASを支えるデザイン担当者がお届けするデザインコラム。 第五弾は、第四弾の続編「無邪気に"カッコイイ""最新鋭"ではいけない（レスポンシブWebデザイン編）」。
WEBSAS デザイナー
レスポンシブWebデザイン≠流行 レスポンシブWebデザインは端末の発展によるレイアウトのひとつの方法
私たちデザイナー(コーダー)は、過去には、PCサイトと、小さな画面サイズの書き方も表現能力も全く違う携帯端末で表示するためのモバイルサイトの構築に、あくせくしていたものでした。それは殆ど別の技術(仕事)と言ってよいほど、別物で、PCサイト＋モバイルサイトでは、同じような作業時間(しばしばモバイルの方が大変)を費やしていました。
しかし近年、PCと同じような解釈の出来るブラウザを兼ね備えたモバイル端末が登場しはじめ、今ではまるでひと昔のPCをそのまま持ち歩いているかのようです。
多様化してきた端末・利用シーン、そして画面サイズ
それはすなわち、端末の利用シーンが多様化してきたということです。
スマートフォン・タブレット端末が登場する前は、PCサイトは家やオフィス、またはビジネスシーンで。 そしてモバイルサイトは主に外出時。
PCサイトの役割・モバイルサイトの役割がはっきりとしていて結構上手に棲み分けできていたのですから、 今思い返せば、コンテンツとしてはとても作りやすかったのです。
画面サイズもPCなら大体横幅760pxくらい、モバイルなら横幅240pxくらい、とパターンはそう多くはないものでした。
そして近年。素晴らしいスマートフォンやタブレット端末が登場し、利用シーンの垣根はなくなり、 様々なWebサービスやサイトが、本当に様々なシーンで利用されるようになってきました。 …それも、本当に様々な画面サイズで…！
PCは家・オフィス、またはビジネスシーンで。携帯は外出時。
ほぼ決まった利用シーンと端末の組み合わせがありました。
シーンとシーンの間に垣根が無くなり、様々なシーンで 様々なサービスを利用したり、情報を閲覧したりできるようになりました。
各種ブラウザのCSS3対応で、可能になってきたレスポンシブレイアウト
さあ、開発者たちは大変です！
仕方がないので、PCサイト・スマホサイト(またはアプリ)・モバイルサイトの三つ巴で展開するサイトが増えていきます。
最近ではCSS3に対応したブラウザも増え、CSS3で使用できるMedia Queriesを利用して ブラウザの幅でレイアウトを変化させ、ワンソースで何パターンものレイアウトに対応できるようになってきました。
※IE(～IE8)はまだCSS3対応が不十分です(2013年10月現在)
つまり、レスポンシブデザインは"流行"というわけではなく、ブラウザの発展により 実現できるようになってきた、レイアウトのひとつの方法なのです。
"便利！！早くレスポンシブにしよう♪"…ちょっと待ってください。無計画なレスポンシブの怖～い落とし穴
では、どんなサイトでも、レスポンシブにするために、画面サイズごとに単純にコンテンツを流動させれば良いでしょうか？
答えはNOです。
ユーザ目線で使われる状況をよく考えて、"ユーザにとって意味のあるレスポンシブ"に
レスポンシブデザインとは、あくまで"レイアウトをいろんなデバイスで変化させてワンソースで表示させる"目的のものであって、 そのデバイスにとって最適な情報構造か、最適なユーザビリティかは、全く別の話になります。
つまり、ユーザ目線ではなく、どちらかというと"こちらが便利だから"という理由になるでしょう。
ユーザがレスポンシブを望んでいるか？
--いいえ、ユーザは使いたいときに使えるデバイスで目的を果たせればそれでよいのです。
それでも、レスポンシブにしたい？さてどうするか。
先に利用シーンとデバイスが多様化してきた、と述べましたが、あなたのサイトにとっての 利用シーン×デバイスの組み合わせ、そして目的があるはずです。 それをもとに情報構造・ユーザビリティを熟考しレイアウトを細かく設計して、 表示を切り分けるなどの処理をさせつつレスポンシブを実現させてゆくしかありません。
そう考えてゆくと(そんなに必要なことがあるのなら)レスポンシブは便利！とも簡単には言えないですし、 そもそも、レスポンシブに適するコンテンツと適さないコンテンツがあると考えることができます。
【レスポンシブが意味を成すサイト】
目的の情報が、利用するシーンやデバイスがどんな場合でも同じ役割をする(例)ブログやニュースなどの読み物サイト・製品紹介などの情報サイト・ショッピングサイトなど
一方、PCでの接続時とモバイル(持ち歩き用)端末では目的が大きく違うサイトなど、 レスポンシブではなく、従来通りデバイスによって別々のサイトを持っていたほうがよいのでは？というサイトもありますね。
【レスポンシブが効果的でないと思われるサイト】
デバイスや利用シーンによって目的が大きく異なるサイト(例)位置情報を使用して情報を得るサイト、チェックイン機能などがあるサイトなど
ワンソースであるがための落とし穴
ただレイアウトだけブラウザサイズによって流すだけではまずい理由がもうひとつあります。
モバイル端末にもPCで表示するためのサイズの大きなデータを読み込まることになるからです。
あなたはiPhoneなどの3GS回線を利用した端末でなかなか表示できないサイトに出くわしたことはありませんか？
もしかしたら、そのような落とし穴にハマってしまっているサイトかもしれません。
サイトの表示の遅さは直帰率につながりますので、絶対に避けたいところです。
写真や動画が多いサイトはもちろん、背景画像が重いサイトも気を付けなければなりません。
JavaScriptを使って画像自体のパスを変えて切り分けるなど回避方法はありますが、 やはりワンソースですとどうしても重くなりがちなので、細心の配慮が必要です。
どんなデザインでも熟考して。サイトのアイデンティティ・ユーザへのおもてなしを忘れるなかれ
前回の"フラットデザイン編"でも述べたように、 どんなデザインでもそのサイトに適しているかどうかということをよくよく考えることが肝要です。 "便利だから""カッコイイから""流行っているから"と無邪気に取り入れることはおすすめできません。
何が大事か。それはズバリ、そのサイトの果たすべき使命・アイデンティティ、そして、 ユーザを困惑させない…は基本ですね、もっとプラスに言うとユーザをもてなす心を忘れないことなのです。