htmlday2014 マークアップ部　LT http://atnd.org/events/51165

1. レスポンシブWeb「デザイン」

2. 2014/06/14 html5j マークアップ部
htmlday勉強会 LT
レスポンシブWeb「デザイン」
それって、
いつどうやって使うんでしたっけ？
の心構え。

3. レスポンシブWeb「デザイン」
○設計方針としてのレスポンシブWebデザイン
そもそもレスポンシブWebデザインは
固定のプラットフォームに対応するための設計手法ではない。
○憎き図と表
横幅どうするんでしたっけ？
個別の対応？

4. レスポンシブWeb「デザイン」
○ユニバーサルデザイン
アクセシビリティへの配慮
×障害者＝障害を持っている人
○障害状況にある人
http://waic.jp/docs/jis2010-understanding/#h2_WebAllyIntroｃ
★バリアフリーコンフリクト
達成されるアウトプットはビジネス上、ユーザ上同じなのに、
そのプロセスになぜか衝突がおこる。

5. レスポンシブWeb「デザイン」
○表と図の問題
はみ出ますよね。

6. レスポンシブWeb「デザイン」
○表と図・・・・情報って？・・・
- 即時的（ジェスチャーとか光とか。）
- 記述的伝達（文章、数式）
1次元 – 文字、文章、数式 何かが連続していて、どんどん組み合わせていける。
2次元 – 実用的な表示（図）、美的な表示（絵）
[IMGタグ]
ピクチャ、イメージ、アートワーク、ビジュアル、図版、
サムネイル、UIアイコン、補足アイコン、バナー、ボタン、マーク、要素。
[表とは]
二次元の情報体であり、内容が少なくてもそれぞれ関連性がわかる状態。

7. レスポンシブWeb「デザイン」
○表です。
×表じゃないです。
① ②
③ ④
1次元情報であれば、レイアウトを変えられる。
2次元の関係性をもった情報体なので、
これ以上崩せない。
○<table>
×<table>

8. レスポンシブWeb「デザイン」
○IMGの対応
[IMGタグ]
ピクチャ、イメージ、アートワーク、ビジュアル、図版、
サムネイル、UIアイコン、補足アイコン、バナー、ボタン、マーク、要素。
それぞれの画像の分類（役割）によって、
対応がかわってくる。
・そのまま使う
・縮小
・拡大
・拡大ボタン
・消す ・・・・などなど。

9. レスポンシブWeb「デザイン」
レスポンシブWebデザインは、
ユニバーサルデザインを参考にするとうまくいく。
そのときは、
情報体が何であるか定義できるのは、
マークアップです！
マークアップは、
ストラクチャやワイヤーフェーズで、
必ず必要なスキルです。

10. 大塚ビジネスサービスで、「突き詰め」ませんか？
◎インフォメーションアーキテクト
○マークアップエンジニア
○Webディレクター
○Webデザイナー
TEL:03-5211-8035
上野宛まで