レスポンシブwebデザイン

UI/UX

これまでUI/UXというのは単純にレイアウト(配色、魅力的な写真やボタン、アイコンの配置)の話しだと思ってた。
でもふと思い立ち調べてみると奥が深いということがわかった。
きっかけはひとつのサイトをどうやってスマホやタブレットに対応させるか、
ってことを考えてたらUI/UXに辿りつかざるを得なかったという当然の理由なんだけどね。

これまでの認識

PC閲覧が中心だった時代からユーザーのウインドウサイズを考えましょう！というのは言われてたけど、
そこまで意識したことはなかったし、解像度だって1280x800くらいが標準かなー、くらいにしか考えてなかった。
なのでデザインやコーディングも横幅が700〜900pxで制作すれば大丈夫！くらいのもの。
やってたことと言えば文字サイズは相対値で指定してユーザー側で変えれるようにしたり、
alt属性をちゃんと付けたり出力用のスタイルシートを用意したりとか。
アクセシビリティといわれてた頃。
http://www.startup-dating.com/2012/05/interview_ikumikatayama/
は完全にUIに特化した話し。

マルチデバイス対応

これはほんと時代の流れという感じ。
スマホ・タブレットに対応してなきゃクライアントから
「スマホで見れないんですか？」とか言われるようになってきた。
そこでマルチデバイス・ワンソースみたいなことを考えるようになって、
最適な制作手法を学ぶ必要を感じた。

ワイヤーフレームが大事

どのような情報をどの配置で閲覧できるのがベストか。
ウインドウサイズが違うので、
ユーザーが見たいと思うものを閲覧しやすくするための情報設計が大事。
情報の取捨選択をすることで情報の最適化が進んで、
ユーザーが閲覧しやすくなる。
なので、デバイスごとに異なるワイヤーフレームを作り、
どうすれば一番見やすいかを考えること。

レスポンシブwebデザイン

今後主流になりそうな制作方法。
Media Queriesを指定して、
ディスプレイの幅に合わせてCSSを切り替えるスタイル。
アクセスしてきたデバイスに最適なレイアウトで表示できる。

・MediaQueryでCSSを読み込む
こんな風にデバイスごとに読み込むCSSを指定する

<link rel="stylesheet" media="screen and (max-width:480px)" href="smartphone.css" />
<link rel="stylesheet" media="screen and (min-width:480px) and (max-width:768px)" href="tablet.css" />
<link rel="stylesheet" media="screen and (min-width:768px)" href="pc.css" />

それぞれ〜480pxならスマホ、480px〜768pxならタブレット、768px〜ならpcということ。
IEはMediaQueryに対応してないバージョンがあるので、
css3-mediaqueries-jsを使って対応する。

・viewport
スマホにはviewportというのがあってこれで幅、高さ、拡大・縮小を設定できる。
ブラウザのウインドウサイズのようなもの。

<meta name="viewport" content="width=device-width">

これでデバイスの幅が自動で設定される。
また、幅だけでなく拡大する倍率も指定できる。

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">

ちなみにこれはデバイスの横幅、ページが最初に読み込まれた時の拡大率、拡大率の上限をそれぞれ設定している。
この場合は初期拡大率からは拡大させないようにしてる。
viewportのwidthを自分で変えちゃうと先ほどのMediaQueryで分岐させてる値も変えなくちゃいけないので注意。

・CSSは相対値で指定する
スマホやタブレットは向きが変わると横幅が変わるので、
サイトはリキッドレイアウトにする。
そのために要素の横幅は相対値で指定する。

#content{
  width:80%;
}

・画像の幅を変える
ウインドウサイズの変更にあわせて画像の幅も変える。
max-widthプロパティで横幅を指定できるので、
これをimgタグで使う。

img{
  max-width:100%;
  height:auto;
}

また、要素の横幅が変わるのにあわせて、
背景画像の幅も指定する。

#content{
  background-size:cover;
}

これで要素にぴったりな横幅で背景画像が表示される。

IE対応

IEでHTML5の要素とCSS3のプロパティを使うために別途jsのライブラリを用意する。
html5shiv
CSS3 PIE

課題

レスポンシブwebデザインについて簡単にまとめたけど、
一番大変なのはデバイスごとの確認作業かな。
これまでのブラウザごとの表示確認に加えて、
スマホやタブレットでの確認もしなくちゃいけないから。
どうやってその作業を効率よく進められるかが課題！

参照：
レスポンシブwebデザインで制作する時のポイント
簡単なサンプルで学ぶ！ゼロからはじめるレスポンシブWebサイト初級編 〜メディアクエリを使ってCSSを分岐させる〜 | HTML5でサイトをつくろう