Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

548 views

Published on

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

Published in: Technology
  • Be the first to comment

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

  1. 1. レスポンシブWeb「デザイン」
  2. 2. 2014/06/14 html5j マークアップ部 htmlday勉強会 LT レスポンシブWeb「デザイン」 それって、 いつどうやって使うんでしたっけ? の心構え。
  3. 3. レスポンシブWeb「デザイン」 ○設計方針としてのレスポンシブWebデザイン そもそもレスポンシブWebデザインは 固定のプラットフォームに対応するための設計手法ではない。 ○憎き図と表 横幅どうするんでしたっけ? 個別の対応?
  4. 4. レスポンシブWeb「デザイン」 ○ユニバーサルデザイン アクセシビリティへの配慮 ×障害者=障害を持っている人 ○障害状況にある人 http://waic.jp/docs/jis2010-understanding/#h2_WebAllyIntroc ★バリアフリーコンフリクト 達成されるアウトプットはビジネス上、ユーザ上同じなのに、 そのプロセスになぜか衝突がおこる。
  5. 5. レスポンシブWeb「デザイン」 ○表と図の問題 はみ出ますよね。
  6. 6. レスポンシブWeb「デザイン」 ○表と図・・・・情報って?・・・ - 即時的(ジェスチャーとか光とか。) - 記述的伝達(文章、数式) 1次元 – 文字、文章、数式 何かが連続していて、どんどん組み合わせていける。 2次元 – 実用的な表示(図)、美的な表示(絵) [IMGタグ] ピクチャ、イメージ、アートワーク、ビジュアル、図版、 サムネイル、UIアイコン、補足アイコン、バナー、ボタン、マーク、要素。 [表とは] 二次元の情報体であり、内容が少なくてもそれぞれ関連性がわかる状態。
  7. 7. レスポンシブWeb「デザイン」 ○表です。 ×表じゃないです。 ① ② ③ ④ 1次元情報であれば、レイアウトを変えられる。 2次元の関係性をもった情報体なので、 これ以上崩せない。 ○<table> ×<table>
  8. 8. レスポンシブWeb「デザイン」 ○IMGの対応 [IMGタグ] ピクチャ、イメージ、アートワーク、ビジュアル、図版、 サムネイル、UIアイコン、補足アイコン、バナー、ボタン、マーク、要素。 それぞれの画像の分類(役割)によって、 対応がかわってくる。 ・そのまま使う ・縮小 ・拡大 ・拡大ボタン ・消す ・・・・などなど。
  9. 9. レスポンシブWeb「デザイン」 レスポンシブWebデザインは、 ユニバーサルデザインを参考にするとうまくいく。 そのときは、 情報体が何であるか定義できるのは、 マークアップです! マークアップは、 ストラクチャやワイヤーフェーズで、 必ず必要なスキルです。
  10. 10. 大塚ビジネスサービスで、「突き詰め」ませんか? ◎インフォメーションアーキテクト ○マークアップエンジニア ○Webディレクター ○Webデザイナー TEL:03-5211-8035 上野宛まで

×