2月6日 HTML5+CSS3+jQueryによるスマホサイト制作のはじめの一歩(スマホサイトの情報設計編) に参加した

日時：2013年02月06日（水）19:00～21:00
会場：パソナグループ　本部
関連：＜SKILL BASECAMP 2013＞ HTML5+CSS3+jQueryによるスマホサイト制作のはじめの一歩 ― スマホサイトの情報設計編 ―

感想など

レスポンシブWebの制作をやったことがなかったので、実際に簡単なものでしたが、手を動かしてやれたのでよかったです。
スマホかタブレット、PCの判定をブラウザ画面の横幅でやっているという話は意外でした。もっと何か条件があるとばかり思ってました。

本編

- 前半（知識）
- 質疑
- 後半（ハンズオン）

前半（知識）

質問：業務で使っている環境は？
- Mac：1、2人
- Windows：ほぼ全員
　　Windowsでは、iOSシミュレータが使えないので不便です。

主要スマホの解像度。横幅はだいたい320px。

端末の向き
- 縦向き：portrait
- 横向き：landscape

質問：スマホサイトの制作経験は？
- あり：1/4くらい
- なし：3/4くらい

大事なキーワード
- meta viewport
- device-pixel-ratio

meta viewport
- できること
  - ブラウザの表示幅を指定できる
  - 拡大縮小の可否の指定
  - 拡大縮小の最大・最小倍率の指定

- 指定しない場合
  - PCサイトで見た場合とおなじ表示幅になる（小さい）

device-pixel-ratio
- ratio の読み【レイシオ】
- 640x1136（画面解像度）で 320x568（ブラウザのサイズ）
- 画面とWebサイトの1pxが違う
- Webサイトの1pxに画面の2pxを使って表現する
- これを意識して画像を用意する必要がある。出ないとロゴなどがぼける

タップのしやすいエリア
- 縦長になっている
- 上にとどかない
- アプリを参考にする

ボタンのサイズ
- ガイドラインを参考にする

質問：レスポンシブWebデザインサイトの制作経験は？
- ある：1、2人
- なし：ほぼ全員

例：NHKスタジオパーク
http://www.nhk.or.jp/studiopark/

レスポンシブWebデザインは設計手法
- モックなどできちんと設計しないと、いきなり実装は難しい

スマホ・タブレット・PCを切り替える
- Media Queriesを使って、ブラウザの横幅で振り分ける
- 振り分ける解像度を breakpoint という
- スマホの高解像度化につれて、設定値はかわる
- 最近は breakpoint 1つが主流(700pxくらい)

質疑

タブレットとPCの区別はどうすればよいのか？
- タブレットを意識したデザインにする
- 海外の新聞社のサイトなど
  - ボタンなどは大きく
  - クリック領域を大きく
- PC中心 -> タブレット中心


ピンチアウトへの対応はどうすればよいのか？
- アンドロイド端末
  - バグ、仕様で端末の対応状況がまちまち
  - 全端末への対応は無理なので、事前に打ち合わせる
  - JavaScriptで頑張って実装する？？

raito 3が主流になってくると、3倍の画像を用意するのか？
- 1000px近い画像を用意する必要がある
  - 回線によっては遅い
- できるだけ画像を使わないデザインにする
- 人間の目では違いがわからない。
  - raito 2 での対応で問題ない感じ。raito 3対応と比較したが違いがわからなかった。

breakpointの見極めはどうすればよいか？
- 700px の根拠は？
- 今後はスマホも高解像度化する。今後はどうやって見極める？
- iPad 768px とすると、750pxのタブレットが登場すると対応できない

後半（ハンズオン）

時間がなかったので、事前に用意された表示用のサンプルHTMLとCSSを使って、前半の知識を確認するという形式でした。
サンプルに、ハンズオン用のCSS設定をコピペして、ブラウザで実際に確認する。という内容でした。

- レスポンシブは、%単位で指定する
- 100%を超えると、折り返されて、下の段におちる
- 余裕を持って100%より少なめに設定する
- スマホ向けの場合は、重要度の低い情報は非表示にする