Submit Search
Upload
レスポンシブWeb「デザイン」
•
1 like
•
716 views
U
uenoyuuki
Follow
htmlday2014 マークアップ部 LT http://atnd.org/events/51165
Read less
Read more
Technology
Report
Share
Report
Share
1 of 10
Download now
Download to read offline
Recommended
デ部会女子部 20170329
デ部会女子部 20170329
恵子 牧
レスポンシブデザインってなに?
レスポンシブデザインってなに?
Yoshinori Kamaishi
フラットデザインってなに?
フラットデザインってなに?
Yoshinori Kamaishi
CSS3 / JavaScriptで作るスマートフォンUIと落とし穴
CSS3 / JavaScriptで作るスマートフォンUIと落とし穴
西畑 一馬
AWS基礎
AWS基礎
Keisuke Higo
マークアップとUX
マークアップとUX
uenoyuuki
UI設計におけるスマートフォン対応のまとめ
UI設計におけるスマートフォン対応のまとめ
Tomoki Imatomi
jQuery Mobile 最新情報 & Tips
jQuery Mobile 最新情報 & Tips
yoshikawa_t
Recommended
デ部会女子部 20170329
デ部会女子部 20170329
恵子 牧
レスポンシブデザインってなに?
レスポンシブデザインってなに?
Yoshinori Kamaishi
フラットデザインってなに?
フラットデザインってなに?
Yoshinori Kamaishi
CSS3 / JavaScriptで作るスマートフォンUIと落とし穴
CSS3 / JavaScriptで作るスマートフォンUIと落とし穴
西畑 一馬
AWS基礎
AWS基礎
Keisuke Higo
マークアップとUX
マークアップとUX
uenoyuuki
UI設計におけるスマートフォン対応のまとめ
UI設計におけるスマートフォン対応のまとめ
Tomoki Imatomi
jQuery Mobile 最新情報 & Tips
jQuery Mobile 最新情報 & Tips
yoshikawa_t
WordPress基礎講座1 CMSの概要
WordPress基礎講座1 CMSの概要
Akinori Kawamitsu
CSSコーディングを効率よくするおすすめプラグイン
CSSコーディングを効率よくするおすすめプラグイン
Shogo Tamura
スマートフォン対応、気をつけたいトラブル JavaScript編
スマートフォン対応、気をつけたいトラブル JavaScript編
Hiroaki Wakamatsu
Awsをちゃんと使ってみた
Awsをちゃんと使ってみた
Yoichi Toyota
Pythonを取り巻く開発環境 #pyconjp
Pythonを取り巻く開発環境 #pyconjp
Yoshifumi Yamaguchi
WordPress テーマ Habakiri と公式ディレクトリへのテーマ登録
WordPress テーマ Habakiri と公式ディレクトリへのテーマ登録
タカシ キタジマ
スマートフォン対応、気をつけたいトラブル
スマートフォン対応、気をつけたいトラブル
Hiroaki Wakamatsu
マルチデバイス時代におけるWebサイトのUIについて
マルチデバイス時代におけるWebサイトのUIについて
rie nabesaka
Javascriptを書きたくないヒ トのためのPythonScript
Javascriptを書きたくないヒ トのためのPythonScript
Kazufumi Ohkawa
レスポンシブ基礎 ~Webサイトをレスポンシブに する方法とそのメリット~
レスポンシブ基礎 ~Webサイトをレスポンシブに する方法とそのメリット~
Horiguchi Seito
使いやすいWordPressのためのCSSのつくりかた
使いやすいWordPressのためのCSSのつくりかた
Hiroshi Urabe
CSS の歩き方
CSS の歩き方
Seiichiro Mishiba
なぜ科学計算にはPythonか?
なぜ科学計算にはPythonか?
Aki Ariga
Pythonの開発環境を調べてみた
Pythonの開発環境を調べてみた
Kenji NAKAGAKI
スマートフォンブラウザ不具合特集
スマートフォンブラウザ不具合特集
Hiroaki Wakamatsu
スマートフォンサイト制作 よくあるトラブルと 解決方法・回避方法
スマートフォンサイト制作 よくあるトラブルと 解決方法・回避方法
Maboroshi.inc
NumPyが物足りない人へのCython入門
NumPyが物足りない人へのCython入門
Shiqiao Du
ソフトシンセを作りながら学ぶPythonプログラミング
ソフトシンセを作りながら学ぶPythonプログラミング
Ransui Iso
WordPressと離島での図書館作り〜コントリビュートすることで働き方を選択する未来へ
WordPressと離島での図書館作り〜コントリビュートすることで働き方を選択する未来へ
Junko Nukaga
モテる JavaScript
モテる JavaScript
Osamu Monoe
レスポンシブサイト制作に効く デザインTipsあれこれ
レスポンシブサイト制作に効く デザインTipsあれこれ
Akiko Kurono
60分でわかるレスポンシブWebデザイン[セミナー資料]
60分でわかるレスポンシブWebデザイン[セミナー資料]
Daisuke Yamazaki
More Related Content
Viewers also liked
WordPress基礎講座1 CMSの概要
WordPress基礎講座1 CMSの概要
Akinori Kawamitsu
CSSコーディングを効率よくするおすすめプラグイン
CSSコーディングを効率よくするおすすめプラグイン
Shogo Tamura
スマートフォン対応、気をつけたいトラブル JavaScript編
スマートフォン対応、気をつけたいトラブル JavaScript編
Hiroaki Wakamatsu
Awsをちゃんと使ってみた
Awsをちゃんと使ってみた
Yoichi Toyota
Pythonを取り巻く開発環境 #pyconjp
Pythonを取り巻く開発環境 #pyconjp
Yoshifumi Yamaguchi
WordPress テーマ Habakiri と公式ディレクトリへのテーマ登録
WordPress テーマ Habakiri と公式ディレクトリへのテーマ登録
タカシ キタジマ
スマートフォン対応、気をつけたいトラブル
スマートフォン対応、気をつけたいトラブル
Hiroaki Wakamatsu
マルチデバイス時代におけるWebサイトのUIについて
マルチデバイス時代におけるWebサイトのUIについて
rie nabesaka
Javascriptを書きたくないヒ トのためのPythonScript
Javascriptを書きたくないヒ トのためのPythonScript
Kazufumi Ohkawa
レスポンシブ基礎 ~Webサイトをレスポンシブに する方法とそのメリット~
レスポンシブ基礎 ~Webサイトをレスポンシブに する方法とそのメリット~
Horiguchi Seito
使いやすいWordPressのためのCSSのつくりかた
使いやすいWordPressのためのCSSのつくりかた
Hiroshi Urabe
CSS の歩き方
CSS の歩き方
Seiichiro Mishiba
なぜ科学計算にはPythonか?
なぜ科学計算にはPythonか?
Aki Ariga
Pythonの開発環境を調べてみた
Pythonの開発環境を調べてみた
Kenji NAKAGAKI
スマートフォンブラウザ不具合特集
スマートフォンブラウザ不具合特集
Hiroaki Wakamatsu
スマートフォンサイト制作 よくあるトラブルと 解決方法・回避方法
スマートフォンサイト制作 よくあるトラブルと 解決方法・回避方法
Maboroshi.inc
NumPyが物足りない人へのCython入門
NumPyが物足りない人へのCython入門
Shiqiao Du
ソフトシンセを作りながら学ぶPythonプログラミング
ソフトシンセを作りながら学ぶPythonプログラミング
Ransui Iso
WordPressと離島での図書館作り〜コントリビュートすることで働き方を選択する未来へ
WordPressと離島での図書館作り〜コントリビュートすることで働き方を選択する未来へ
Junko Nukaga
モテる JavaScript
モテる JavaScript
Osamu Monoe
Viewers also liked
(20)
WordPress基礎講座1 CMSの概要
WordPress基礎講座1 CMSの概要
CSSコーディングを効率よくするおすすめプラグイン
CSSコーディングを効率よくするおすすめプラグイン
スマートフォン対応、気をつけたいトラブル JavaScript編
スマートフォン対応、気をつけたいトラブル JavaScript編
Awsをちゃんと使ってみた
Awsをちゃんと使ってみた
Pythonを取り巻く開発環境 #pyconjp
Pythonを取り巻く開発環境 #pyconjp
WordPress テーマ Habakiri と公式ディレクトリへのテーマ登録
WordPress テーマ Habakiri と公式ディレクトリへのテーマ登録
スマートフォン対応、気をつけたいトラブル
スマートフォン対応、気をつけたいトラブル
マルチデバイス時代におけるWebサイトのUIについて
マルチデバイス時代におけるWebサイトのUIについて
Javascriptを書きたくないヒ トのためのPythonScript
Javascriptを書きたくないヒ トのためのPythonScript
レスポンシブ基礎 ~Webサイトをレスポンシブに する方法とそのメリット~
レスポンシブ基礎 ~Webサイトをレスポンシブに する方法とそのメリット~
使いやすいWordPressのためのCSSのつくりかた
使いやすいWordPressのためのCSSのつくりかた
CSS の歩き方
CSS の歩き方
なぜ科学計算にはPythonか?
なぜ科学計算にはPythonか?
Pythonの開発環境を調べてみた
Pythonの開発環境を調べてみた
スマートフォンブラウザ不具合特集
スマートフォンブラウザ不具合特集
スマートフォンサイト制作 よくあるトラブルと 解決方法・回避方法
スマートフォンサイト制作 よくあるトラブルと 解決方法・回避方法
NumPyが物足りない人へのCython入門
NumPyが物足りない人へのCython入門
ソフトシンセを作りながら学ぶPythonプログラミング
ソフトシンセを作りながら学ぶPythonプログラミング
WordPressと離島での図書館作り〜コントリビュートすることで働き方を選択する未来へ
WordPressと離島での図書館作り〜コントリビュートすることで働き方を選択する未来へ
モテる JavaScript
モテる JavaScript
Similar to レスポンシブWeb「デザイン」
レスポンシブサイト制作に効く デザインTipsあれこれ
レスポンシブサイト制作に効く デザインTipsあれこれ
Akiko Kurono
60分でわかるレスポンシブWebデザイン[セミナー資料]
60分でわかるレスポンシブWebデザイン[セミナー資料]
Daisuke Yamazaki
ON HTML5 FIELD で書き尽くせなかったこと
ON HTML5 FIELD で書き尽くせなかったこと
Masakazu Muraoka
HTML5時代のモバイルWEBアプリケーションデザイン 先生:白石 俊平・秋葉 秀樹
HTML5時代のモバイルWEBアプリケーションデザイン 先生:白石 俊平・秋葉 秀樹
schoowebcampus
20180119 インクルーシブデザインワークショップスライド
20180119 インクルーシブデザインワークショップスライド
友貴 黒澤
福井で「しあわせデザイナー」になるために
福井で「しあわせデザイナー」になるために
Miho Yamamori
Webサイトのようには作れない!Webアプリ設計の考え方
Webサイトのようには作れない!Webアプリ設計の考え方
girigiribauer
Web design
Web design
kazuko kaneuchi
Ecサイトの構造設計 5月21日 東京セミナー 抜粋
Ecサイトの構造設計 5月21日 東京セミナー 抜粋
Narutoshi Gon
第6回.NET中心会議パネルディスカッション 0923
第6回.NET中心会議パネルディスカッション 0923
Hub DotnetDeveloper
簡単!低コスト!楽しい!レスポンシブ デザイン ディレクション
簡単!低コスト!楽しい!レスポンシブ デザイン ディレクション
Yuji Nojima
ウェブディレクションの基礎(第2回:制作・開発編) 先生:小嶋裕亮
ウェブディレクションの基礎(第2回:制作・開発編) 先生:小嶋裕亮
schoowebcampus
20130629 KA法ワークショップ@DevLOVE仙台
20130629 KA法ワークショップ@DevLOVE仙台
chachaki chachaki
東京では語れないHTML5[仮題]
東京では語れないHTML5[仮題]
Yu Morita
Itプロジェクトにおけるuxデザインの実践的適用方法
Itプロジェクトにおけるuxデザインの実践的適用方法
Roy Kim
HTML5時代のWebデザイン
HTML5時代のWebデザイン
masaaki komori
Adobe experience designのプロトタイプをbehanceへ
Adobe experience designのプロトタイプをbehanceへ
Kazuma Sekiguchi
Web担当者Forumミーティング2013 Autumn 「マルチデバイス、HTML5がとりまくWebサイト制作とCMSの現在」
Web担当者Forumミーティング2013 Autumn 「マルチデバイス、HTML5がとりまくWebサイト制作とCMSの現在」
xyz corporation
HTML5+wordpressで電子書籍
HTML5+wordpressで電子書籍
Wataru Asai
デザイン・エンジニアがWeb開発で考えること
デザイン・エンジニアがWeb開発で考えること
Kohei Kakudo
Similar to レスポンシブWeb「デザイン」
(20)
レスポンシブサイト制作に効く デザインTipsあれこれ
レスポンシブサイト制作に効く デザインTipsあれこれ
60分でわかるレスポンシブWebデザイン[セミナー資料]
60分でわかるレスポンシブWebデザイン[セミナー資料]
ON HTML5 FIELD で書き尽くせなかったこと
ON HTML5 FIELD で書き尽くせなかったこと
HTML5時代のモバイルWEBアプリケーションデザイン 先生:白石 俊平・秋葉 秀樹
HTML5時代のモバイルWEBアプリケーションデザイン 先生:白石 俊平・秋葉 秀樹
20180119 インクルーシブデザインワークショップスライド
20180119 インクルーシブデザインワークショップスライド
福井で「しあわせデザイナー」になるために
福井で「しあわせデザイナー」になるために
Webサイトのようには作れない!Webアプリ設計の考え方
Webサイトのようには作れない!Webアプリ設計の考え方
Web design
Web design
Ecサイトの構造設計 5月21日 東京セミナー 抜粋
Ecサイトの構造設計 5月21日 東京セミナー 抜粋
第6回.NET中心会議パネルディスカッション 0923
第6回.NET中心会議パネルディスカッション 0923
簡単!低コスト!楽しい!レスポンシブ デザイン ディレクション
簡単!低コスト!楽しい!レスポンシブ デザイン ディレクション
ウェブディレクションの基礎(第2回:制作・開発編) 先生:小嶋裕亮
ウェブディレクションの基礎(第2回:制作・開発編) 先生:小嶋裕亮
20130629 KA法ワークショップ@DevLOVE仙台
20130629 KA法ワークショップ@DevLOVE仙台
東京では語れないHTML5[仮題]
東京では語れないHTML5[仮題]
Itプロジェクトにおけるuxデザインの実践的適用方法
Itプロジェクトにおけるuxデザインの実践的適用方法
HTML5時代のWebデザイン
HTML5時代のWebデザイン
Adobe experience designのプロトタイプをbehanceへ
Adobe experience designのプロトタイプをbehanceへ
Web担当者Forumミーティング2013 Autumn 「マルチデバイス、HTML5がとりまくWebサイト制作とCMSの現在」
Web担当者Forumミーティング2013 Autumn 「マルチデバイス、HTML5がとりまくWebサイト制作とCMSの現在」
HTML5+wordpressで電子書籍
HTML5+wordpressで電子書籍
デザイン・エンジニアがWeb開発で考えること
デザイン・エンジニアがWeb開発で考えること
Recently uploaded
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
atsushi061452
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
Toru Tamaki
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
CRI Japan, Inc.
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
新人研修 後半 2024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
Toru Tamaki
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
CRI Japan, Inc.
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
Hiroshi Tomioka
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NTT DATA Technology & Innovation
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
Hiroshi Tomioka
Recently uploaded
(11)
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
レスポンシブWeb「デザイン」
1.
レスポンシブWeb「デザイン」
2.
2014/06/14 html5j マークアップ部 htmlday勉強会
LT レスポンシブWeb「デザイン」 それって、 いつどうやって使うんでしたっけ? の心構え。
3.
レスポンシブWeb「デザイン」 ○設計方針としてのレスポンシブWebデザイン そもそもレスポンシブWebデザインは 固定のプラットフォームに対応するための設計手法ではない。 ○憎き図と表 横幅どうするんでしたっけ? 個別の対応?
4.
レスポンシブWeb「デザイン」 ○ユニバーサルデザイン アクセシビリティへの配慮 ×障害者=障害を持っている人 ○障害状況にある人 http://waic.jp/docs/jis2010-understanding/#h2_WebAllyIntroc ★バリアフリーコンフリクト 達成されるアウトプットはビジネス上、ユーザ上同じなのに、 そのプロセスになぜか衝突がおこる。
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 上野宛まで
Download now