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

2014/06/14 html5j マークアップ部

htmlday勉強会 LT

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

それって、

いつどうやって使うんでしたっけ？

の心構え。

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

○設計方針としてのレスポンシブWebデザイン

そもそもレスポンシブWebデザインは

固定のプラットフォームに対応するための設計手法ではない。

○憎き図と表

横幅どうするんでしたっけ？

個別の対応？

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

○ユニバーサルデザイン

アクセシビリティへの配慮

×障害者＝障害を持っている人

○障害状況にある人

http://waic.jp/docs/jis2010-understanding/#h2_WebAllyIntroｃ

★バリアフリーコンフリクト

達成されるアウトプットはビジネス上、ユーザ上同じなのに、

そのプロセスになぜか衝突がおこる。

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

○表と図の問題

はみ出ますよね。

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

○表と図・・・・情報って？・・・

- 即時的（ジェスチャーとか光とか。）

- 記述的伝達（文章、数式）

1次元 – 文字、文章、数式 何かが連続していて、どんどん組み合わせていける。

2次元 – 実用的な表示（図）、美的な表示（絵）

[IMGタグ]

ピクチャ、イメージ、アートワーク、ビジュアル、図版、

サムネイル、UIアイコン、補足アイコン、バナー、ボタン、マーク、要素。

[表とは]

二次元の情報体であり、内容が少なくてもそれぞれ関連性がわかる状態。

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

○表です。

×表じゃないです。

① ②

③ ④

1次元情報であれば、レイアウトを変えられる。

2次元の関係性をもった情報体なので、 これ以上崩せない。

○<table>

×<table>

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

○IMGの対応

[IMGタグ]

ピクチャ、イメージ、アートワーク、ビジュアル、図版、

サムネイル、UIアイコン、補足アイコン、バナー、ボタン、マーク、要素。

それぞれの画像の分類（役割）によって、 対応がかわってくる。 ・そのまま使う ・縮小 ・拡大 ・拡大ボタン ・消す ・・・・などなど。

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

レスポンシブWebデザインは、

ユニバーサルデザインを参考にするとうまくいく。

そのときは、

情報体が何であるか定義できるのは、

マークアップです！

マークアップは、

ストラクチャやワイヤーフェーズで、

必ず必要なスキルです。

大塚ビジネスサービスで、「突き詰め」ませんか？

◎インフォメーションアーキテクト

○マークアップエンジニア

○Webディレクター

○Webデザイナー

TEL:03-5211-8035

上野宛まで