Soumettre la recherche
Mettre en ligne
レスポンシブ・ウェブデザイン基礎
•
273 j'aime
•
62,105 vues
masaaki komori
Suivre
Yahoo! JAPAN 社内セミナー用資料
Lire moins
Lire la suite
Design
Signaler
Partager
Signaler
Partager
1 sur 60
Recommandé
HTML5とWeb開発に関する最新動向
HTML5とWeb開発に関する最新動向
Shumpei Shiraishi
Dreamweaver CS6で作るレスポンシブWebデザイン
Dreamweaver CS6で作るレスポンシブWebデザイン
yoshikawa_t
レスポンシブWebデザインの実践ワークフロー(WDS)
レスポンシブWebデザインの実践ワークフロー(WDS)
Hiroyuki Ogawa
CSSフレームワークとCMS+RWDテンプレでレスポンシブWebデザインサイトを構築しよう
CSSフレームワークとCMS+RWDテンプレでレスポンシブWebデザインサイトを構築しよう
Masayuki Abe
文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう
文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう
Junko Nukaga
レスポンシブWebデザインの基礎と,コーディング実習:先生小川 裕之
レスポンシブWebデザインの基礎と,コーディング実習:先生小川 裕之
schoowebcampus
WordPressで作るポートフォリオサイト
WordPressで作るポートフォリオサイト
Takuma Nishiyama
レスポンシブWebデザインのサイトを作る前に
レスポンシブWebデザインのサイトを作る前に
Yuki Nakane
Recommandé
HTML5とWeb開発に関する最新動向
HTML5とWeb開発に関する最新動向
Shumpei Shiraishi
Dreamweaver CS6で作るレスポンシブWebデザイン
Dreamweaver CS6で作るレスポンシブWebデザイン
yoshikawa_t
レスポンシブWebデザインの実践ワークフロー(WDS)
レスポンシブWebデザインの実践ワークフロー(WDS)
Hiroyuki Ogawa
CSSフレームワークとCMS+RWDテンプレでレスポンシブWebデザインサイトを構築しよう
CSSフレームワークとCMS+RWDテンプレでレスポンシブWebデザインサイトを構築しよう
Masayuki Abe
文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう
文系デザイナーでも大丈夫!レスポンシブWEBサイトをWordPressで作ってみよう
Junko Nukaga
レスポンシブWebデザインの基礎と,コーディング実習:先生小川 裕之
レスポンシブWebデザインの基礎と,コーディング実習:先生小川 裕之
schoowebcampus
WordPressで作るポートフォリオサイト
WordPressで作るポートフォリオサイト
Takuma Nishiyama
レスポンシブWebデザインのサイトを作る前に
レスポンシブWebデザインのサイトを作る前に
Yuki Nakane
今から始めよう!WordPressで作る女子ウケ★スマホサイト
今から始めよう!WordPressで作る女子ウケ★スマホサイト
rie05
レスポンシブ・ウェブデザイン -Responsive web design-
レスポンシブ・ウェブデザイン -Responsive web design-
CREATIVE SURVEY
レスポンシブ基礎 ~Webサイトをレスポンシブに する方法とそのメリット~
レスポンシブ基礎 ~Webサイトをレスポンシブに する方法とそのメリット~
Horiguchi Seito
マークアップエンジニアと情報アーキテクチャ
マークアップエンジニアと情報アーキテクチャ
力也 伊原
Word camposaka imaigo_slideshare
Word camposaka imaigo_slideshare
Go Imai
集客ばかりを考えるからブログは失敗する -長くブログを続けるために-
集客ばかりを考えるからブログは失敗する -長くブログを続けるために-
WCO_Blogger
レスポンシブWebデザインの基礎
レスポンシブWebデザインの基礎
Hiroyuki Ogawa
Web design
Web design
kazuko kaneuchi
レスポンシブWebデザイン ワークフロー
レスポンシブWebデザイン ワークフロー
Hiroyuki Ogawa
Webデザインのトーン&マナーを導き出す手法
Webデザインのトーン&マナーを導き出す手法
Katsumi Tazuke
WordPressってブログじゃないの?
WordPressってブログじゃないの?
tokumotonahoko
実録 WordPress Twenty Sixteen のカスタマイズ | WordBench東京 2月勉強会 「みんなのテーマ開発」〜自分の好きな作り方...
実録 WordPress Twenty Sixteen のカスタマイズ | WordBench東京 2月勉強会 「みんなのテーマ開発」〜自分の好きな作り方...
Akira Tachibana
テーマに機能を含めちゃダメなんて誰が決めた! テーマをモリモリにカスタマイズする
テーマに機能を含めちゃダメなんて誰が決めた! テーマをモリモリにカスタマイズする
文樹 高橋
WordPressでブログ以外のサイトを作る 〜カスタム投稿タイプやカスタムフィールドの使い方〜
WordPressでブログ以外のサイトを作る 〜カスタム投稿タイプやカスタムフィールドの使い方〜
Takuma Nishiyama
ADC OnAir 第5回 『レスポンシブ Web デザインを学ぼう!実装編』
ADC OnAir 第5回 『レスポンシブ Web デザインを学ぼう!実装編』
Naoki Matsuda
ノンデザイナーのためのWebデザイン講座
ノンデザイナーのためのWebデザイン講座
光利 吉田
Web勉強会(HTML+CSS+JS入門の入門)
Web勉強会(HTML+CSS+JS入門の入門)
Noriaki UCHIYAMA
Yat-wbnara201602
Yat-wbnara201602
YAT blog
PHPがわからないデザイナーでもできる、簡単カスタマイズ術
PHPがわからないデザイナーでもできる、簡単カスタマイズ術
Eri Sawada
メニューは管理画面で設定できるようにしよう
メニューは管理画面で設定できるようにしよう
Mayuko Moriyama
知っておきたい「Web制作イマドキの注目ポイント」
知っておきたい「Web制作イマドキの注目ポイント」
Mori Kazue
レスポンシブデザインってなに?
レスポンシブデザインってなに?
Yoshinori Kamaishi
Contenu connexe
Tendances
今から始めよう!WordPressで作る女子ウケ★スマホサイト
今から始めよう!WordPressで作る女子ウケ★スマホサイト
rie05
レスポンシブ・ウェブデザイン -Responsive web design-
レスポンシブ・ウェブデザイン -Responsive web design-
CREATIVE SURVEY
レスポンシブ基礎 ~Webサイトをレスポンシブに する方法とそのメリット~
レスポンシブ基礎 ~Webサイトをレスポンシブに する方法とそのメリット~
Horiguchi Seito
マークアップエンジニアと情報アーキテクチャ
マークアップエンジニアと情報アーキテクチャ
力也 伊原
Word camposaka imaigo_slideshare
Word camposaka imaigo_slideshare
Go Imai
集客ばかりを考えるからブログは失敗する -長くブログを続けるために-
集客ばかりを考えるからブログは失敗する -長くブログを続けるために-
WCO_Blogger
レスポンシブWebデザインの基礎
レスポンシブWebデザインの基礎
Hiroyuki Ogawa
Web design
Web design
kazuko kaneuchi
レスポンシブWebデザイン ワークフロー
レスポンシブWebデザイン ワークフロー
Hiroyuki Ogawa
Webデザインのトーン&マナーを導き出す手法
Webデザインのトーン&マナーを導き出す手法
Katsumi Tazuke
WordPressってブログじゃないの?
WordPressってブログじゃないの?
tokumotonahoko
実録 WordPress Twenty Sixteen のカスタマイズ | WordBench東京 2月勉強会 「みんなのテーマ開発」〜自分の好きな作り方...
実録 WordPress Twenty Sixteen のカスタマイズ | WordBench東京 2月勉強会 「みんなのテーマ開発」〜自分の好きな作り方...
Akira Tachibana
テーマに機能を含めちゃダメなんて誰が決めた! テーマをモリモリにカスタマイズする
テーマに機能を含めちゃダメなんて誰が決めた! テーマをモリモリにカスタマイズする
文樹 高橋
WordPressでブログ以外のサイトを作る 〜カスタム投稿タイプやカスタムフィールドの使い方〜
WordPressでブログ以外のサイトを作る 〜カスタム投稿タイプやカスタムフィールドの使い方〜
Takuma Nishiyama
ADC OnAir 第5回 『レスポンシブ Web デザインを学ぼう!実装編』
ADC OnAir 第5回 『レスポンシブ Web デザインを学ぼう!実装編』
Naoki Matsuda
ノンデザイナーのためのWebデザイン講座
ノンデザイナーのためのWebデザイン講座
光利 吉田
Web勉強会(HTML+CSS+JS入門の入門)
Web勉強会(HTML+CSS+JS入門の入門)
Noriaki UCHIYAMA
Yat-wbnara201602
Yat-wbnara201602
YAT blog
PHPがわからないデザイナーでもできる、簡単カスタマイズ術
PHPがわからないデザイナーでもできる、簡単カスタマイズ術
Eri Sawada
メニューは管理画面で設定できるようにしよう
メニューは管理画面で設定できるようにしよう
Mayuko Moriyama
Tendances
(20)
今から始めよう!WordPressで作る女子ウケ★スマホサイト
今から始めよう!WordPressで作る女子ウケ★スマホサイト
レスポンシブ・ウェブデザイン -Responsive web design-
レスポンシブ・ウェブデザイン -Responsive web design-
レスポンシブ基礎 ~Webサイトをレスポンシブに する方法とそのメリット~
レスポンシブ基礎 ~Webサイトをレスポンシブに する方法とそのメリット~
マークアップエンジニアと情報アーキテクチャ
マークアップエンジニアと情報アーキテクチャ
Word camposaka imaigo_slideshare
Word camposaka imaigo_slideshare
集客ばかりを考えるからブログは失敗する -長くブログを続けるために-
集客ばかりを考えるからブログは失敗する -長くブログを続けるために-
レスポンシブWebデザインの基礎
レスポンシブWebデザインの基礎
Web design
Web design
レスポンシブWebデザイン ワークフロー
レスポンシブWebデザイン ワークフロー
Webデザインのトーン&マナーを導き出す手法
Webデザインのトーン&マナーを導き出す手法
WordPressってブログじゃないの?
WordPressってブログじゃないの?
実録 WordPress Twenty Sixteen のカスタマイズ | WordBench東京 2月勉強会 「みんなのテーマ開発」〜自分の好きな作り方...
実録 WordPress Twenty Sixteen のカスタマイズ | WordBench東京 2月勉強会 「みんなのテーマ開発」〜自分の好きな作り方...
テーマに機能を含めちゃダメなんて誰が決めた! テーマをモリモリにカスタマイズする
テーマに機能を含めちゃダメなんて誰が決めた! テーマをモリモリにカスタマイズする
WordPressでブログ以外のサイトを作る 〜カスタム投稿タイプやカスタムフィールドの使い方〜
WordPressでブログ以外のサイトを作る 〜カスタム投稿タイプやカスタムフィールドの使い方〜
ADC OnAir 第5回 『レスポンシブ Web デザインを学ぼう!実装編』
ADC OnAir 第5回 『レスポンシブ Web デザインを学ぼう!実装編』
ノンデザイナーのためのWebデザイン講座
ノンデザイナーのためのWebデザイン講座
Web勉強会(HTML+CSS+JS入門の入門)
Web勉強会(HTML+CSS+JS入門の入門)
Yat-wbnara201602
Yat-wbnara201602
PHPがわからないデザイナーでもできる、簡単カスタマイズ術
PHPがわからないデザイナーでもできる、簡単カスタマイズ術
メニューは管理画面で設定できるようにしよう
メニューは管理画面で設定できるようにしよう
Similaire à レスポンシブ・ウェブデザイン基礎
知っておきたい「Web制作イマドキの注目ポイント」
知っておきたい「Web制作イマドキの注目ポイント」
Mori Kazue
レスポンシブデザインってなに?
レスポンシブデザインってなに?
Yoshinori Kamaishi
Sixapart day-2012-ideamans
Sixapart day-2012-ideamans
Kunihiko Miyanaga
レスポンシブWebデザインによる開発効率化
レスポンシブWebデザインによる開発効率化
亮 門屋
[WordBench東京7月] レスポンシブWebデザインの基礎とWordPressを使った最適化の手法
[WordBench東京7月] レスポンシブWebデザインの基礎とWordPressを使った最適化の手法
Hiroyuki Ogawa
レスポンシブサイト制作に効く デザインTipsあれこれ
レスポンシブサイト制作に効く デザインTipsあれこれ
Akiko Kurono
Static Web AppsとBlazor WebAssemblyのすすめ
Static Web AppsとBlazor WebAssemblyのすすめ
TomomitsuKusaba
Web担当者Forumミーティング2013 Autumn 「マルチデバイス、HTML5がとりまくWebサイト制作とCMSの現在」
Web担当者Forumミーティング2013 Autumn 「マルチデバイス、HTML5がとりまくWebサイト制作とCMSの現在」
xyz corporation
ブラウザだけで学ぶWebアプリ開発【デザイン編】
ブラウザだけで学ぶWebアプリ開発【デザイン編】
schoowebcampus
20141027 movable type seminar
20141027 movable type seminar
Six Apart
WordCamp Tokyo2012 handson Portfolio
WordCamp Tokyo2012 handson Portfolio
regret raym
菊池崇のレスポンシブWEBデザイン道場(2限目:RWDをクライアントにディレクションする方法)
菊池崇のレスポンシブWEBデザイン道場(2限目:RWDをクライアントにディレクションする方法)
schoowebcampus
20140731 Movable Type Seminar
20140731 Movable Type Seminar
Six Apart
_WEB の作業が楽になるテクニック総まとめ 第7回
_WEB の作業が楽になるテクニック総まとめ 第7回
Kelly Holonic
Browser oh browser browser
Browser oh browser browser
Teppei Sato
Webサイト構築 文書化されにくい設計フェーズの重要ポイント
Webサイト構築 文書化されにくい設計フェーズの重要ポイント
Katsumi Tazuke
魅せるスマホ対応!?レスポンシブWebデザインセミナー
魅せるスマホ対応!?レスポンシブWebデザインセミナー
ec-campus
これからのNotesモバイルアプリはこう作れ
これからのNotesモバイルアプリはこう作れ
Mitsuru Katoh
HTML5時代のWebデザイン
HTML5時代のWebデザイン
masaaki komori
SEO x UX ユーザー心理によるコンテンツプランニング
SEO x UX ユーザー心理によるコンテンツプランニング
Yoshiki Hayama
Similaire à レスポンシブ・ウェブデザイン基礎
(20)
知っておきたい「Web制作イマドキの注目ポイント」
知っておきたい「Web制作イマドキの注目ポイント」
レスポンシブデザインってなに?
レスポンシブデザインってなに?
Sixapart day-2012-ideamans
Sixapart day-2012-ideamans
レスポンシブWebデザインによる開発効率化
レスポンシブWebデザインによる開発効率化
[WordBench東京7月] レスポンシブWebデザインの基礎とWordPressを使った最適化の手法
[WordBench東京7月] レスポンシブWebデザインの基礎とWordPressを使った最適化の手法
レスポンシブサイト制作に効く デザインTipsあれこれ
レスポンシブサイト制作に効く デザインTipsあれこれ
Static Web AppsとBlazor WebAssemblyのすすめ
Static Web AppsとBlazor WebAssemblyのすすめ
Web担当者Forumミーティング2013 Autumn 「マルチデバイス、HTML5がとりまくWebサイト制作とCMSの現在」
Web担当者Forumミーティング2013 Autumn 「マルチデバイス、HTML5がとりまくWebサイト制作とCMSの現在」
ブラウザだけで学ぶWebアプリ開発【デザイン編】
ブラウザだけで学ぶWebアプリ開発【デザイン編】
20141027 movable type seminar
20141027 movable type seminar
WordCamp Tokyo2012 handson Portfolio
WordCamp Tokyo2012 handson Portfolio
菊池崇のレスポンシブWEBデザイン道場(2限目:RWDをクライアントにディレクションする方法)
菊池崇のレスポンシブWEBデザイン道場(2限目:RWDをクライアントにディレクションする方法)
20140731 Movable Type Seminar
20140731 Movable Type Seminar
_WEB の作業が楽になるテクニック総まとめ 第7回
_WEB の作業が楽になるテクニック総まとめ 第7回
Browser oh browser browser
Browser oh browser browser
Webサイト構築 文書化されにくい設計フェーズの重要ポイント
Webサイト構築 文書化されにくい設計フェーズの重要ポイント
魅せるスマホ対応!?レスポンシブWebデザインセミナー
魅せるスマホ対応!?レスポンシブWebデザインセミナー
これからのNotesモバイルアプリはこう作れ
これからのNotesモバイルアプリはこう作れ
HTML5時代のWebデザイン
HTML5時代のWebデザイン
SEO x UX ユーザー心理によるコンテンツプランニング
SEO x UX ユーザー心理によるコンテンツプランニング
Plus de masaaki komori
コアなエンジニアじゃなくてもできるよ #JP_Stripes Vol.3
コアなエンジニアじゃなくてもできるよ #JP_Stripes Vol.3
masaaki komori
InstaVR使ってみた
InstaVR使ってみた
masaaki komori
Framerで始めるプロトタイプコーディング
Framerで始めるプロトタイプコーディング
masaaki komori
Prototyping with Sketch
Prototyping with Sketch
masaaki komori
プロトタイピングツール戦国時代
プロトタイピングツール戦国時代
masaaki komori
Bootstrapではじめる、 Webサイト設計のモダンアプローチ
Bootstrapではじめる、 Webサイト設計のモダンアプローチ
masaaki komori
レスポンシブEメールを作ろう
レスポンシブEメールを作ろう
masaaki komori
Bootstrapはこう使う
Bootstrapはこう使う
masaaki komori
デバイス多様化の時代のWeb制作
デバイス多様化の時代のWeb制作
masaaki komori
2015年のWebサイトの作り方 at 67ws
2015年のWebサイトの作り方 at 67ws
masaaki komori
Webデザインと開発の未来
Webデザインと開発の未来
masaaki komori
Framerで動くモックアップを簡単作成
Framerで動くモックアップを簡単作成
masaaki komori
Sketch 3 Basics at kkmsz
Sketch 3 Basics at kkmsz
masaaki komori
Re:Cre Vol.14 | Web design process for the future
Re:Cre Vol.14 | Web design process for the future
masaaki komori
Web Design Process for The Future
Web Design Process for The Future
masaaki komori
Web Design Process for The Future
Web Design Process for The Future
masaaki komori
groundwork-pasona-tech
groundwork-pasona-tech
masaaki komori
インブラウザ勉強会 Vol.1
インブラウザ勉強会 Vol.1
masaaki komori
設計から実装まで、今すぐ始める高速化
設計から実装まで、今すぐ始める高速化
masaaki komori
Sublime Text 2 Basics
Sublime Text 2 Basics
masaaki komori
Plus de masaaki komori
(20)
コアなエンジニアじゃなくてもできるよ #JP_Stripes Vol.3
コアなエンジニアじゃなくてもできるよ #JP_Stripes Vol.3
InstaVR使ってみた
InstaVR使ってみた
Framerで始めるプロトタイプコーディング
Framerで始めるプロトタイプコーディング
Prototyping with Sketch
Prototyping with Sketch
プロトタイピングツール戦国時代
プロトタイピングツール戦国時代
Bootstrapではじめる、 Webサイト設計のモダンアプローチ
Bootstrapではじめる、 Webサイト設計のモダンアプローチ
レスポンシブEメールを作ろう
レスポンシブEメールを作ろう
Bootstrapはこう使う
Bootstrapはこう使う
デバイス多様化の時代のWeb制作
デバイス多様化の時代のWeb制作
2015年のWebサイトの作り方 at 67ws
2015年のWebサイトの作り方 at 67ws
Webデザインと開発の未来
Webデザインと開発の未来
Framerで動くモックアップを簡単作成
Framerで動くモックアップを簡単作成
Sketch 3 Basics at kkmsz
Sketch 3 Basics at kkmsz
Re:Cre Vol.14 | Web design process for the future
Re:Cre Vol.14 | Web design process for the future
Web Design Process for The Future
Web Design Process for The Future
Web Design Process for The Future
Web Design Process for The Future
groundwork-pasona-tech
groundwork-pasona-tech
インブラウザ勉強会 Vol.1
インブラウザ勉強会 Vol.1
設計から実装まで、今すぐ始める高速化
設計から実装まで、今すぐ始める高速化
Sublime Text 2 Basics
Sublime Text 2 Basics
レスポンシブ・ウェブデザイン基礎
1.
レスポンシブ ウェブデザイン基礎 Responsive Web
Design Basic ・ レスポンシブ・ウ ブデザイ ェ ン基礎 Responsive Web Design Basic こもりまさあき 2012. 06. 11 at Yahoo! JAPAN | Komori, Masaaki
2.
レスポンシブ ウェブデザイン基礎 Responsive Web
Design Basic ・ 自己紹介 こもりまさあき http://blog.gaspanik.com http://protean.im 1990年代前半に都内のDTP系デザイン会社にてアルバイトをはじめる。大学卒業後 そのまま正社員となり、入出力業務、デザイン業務、ネットワーク関連業務に並行し て従事。2001年、会社を退職しそのままフリーランスの道へ。案件ごとに業務内容 や立ち位置が異なるため、職域的な肩書きはなし 近著に『レスポンシブ・ウェブデザイン標準ガイド(MdN刊)』 『WordPress 高速化&スマート運用必携ガイド(共著・MdN刊)』、など Twitter: @cipher / @proteanbm Facebook: gaspanik Instagram: @cipher 2012. 06. 11 at Yahoo! JAPAN | Komori, Masaaki
3.
レスポンシブ ウェブデザイン基礎 Responsive Web
Design Basic ・ 本日のアジェンダ • レスポンシブ・ウェブデザインとは • レスポンシブ・ウェブデザインのワークフロー • コンテンツファースト & モバイルファースト • 複数の画面サイズを考慮したワイヤーフレーム • レスポンシブ・ウェブデザインの実装方法 2012. 06. 11 at Yahoo! JAPAN | Komori, Masaaki
4.
レスポンシブ ウェブデザイン基礎 Responsive Web
Design Basic ・ レ ポ シ ・ ェ デ イ と ス ン ブ ウ ブ ザ ン は 2012. 06. 11 at Yahoo! JAPAN | Komori, Masaaki
5.
レスポンシブ ウェブデザイン基礎 Responsive Web
Design Basic ・ レスポンシブ・ウェブデザインの概要 • 数年前から注目を集めるコンテンツ配信手法のひとつ • 1ソースを基本とし、多様なデバイスに対応する • 現在は、閲覧デバイスの画面サイズに応じて、 レイアウトを切り替えるような意味に捉えられているが、 もう少し広い意味で考える必要がある 2012. 06. 11 at Yahoo! JAPAN | Komori, Masaaki
6.
レスポンシブ ウェブデザイン基礎 Responsive Web
Design Basic ・ 実例紹介 ∼The Boston Globe http://www.bostonglobe.com/ 出典: Media Queries http://mediaqueri.es/ 2012. 06. 11 at Yahoo! JAPAN | Komori, Masaaki
7.
レスポンシブ ウェブデザイン基礎 Responsive Web
Design Basic ・ 実例紹介 ∼We Cant Stop Thinking http://wcst.com/ 出典: Media Queries http://mediaqueri.es/ 2012. 06. 11 at Yahoo! JAPAN | Komori, Masaaki
8.
レスポンシブ ウェブデザイン基礎 Responsive Web
Design Basic ・ 実例紹介 ∼Heathlife http://heathlife.co.uk/ 出典: Media Queries http://mediaqueri.es/ 2012. 06. 11 at Yahoo! JAPAN | Komori, Masaaki
9.
レスポンシブ ウェブデザイン基礎 Responsive Web
Design Basic ・ 実例紹介 ∼BreakingNews http://www.breakingnews.com/ 出典: Media Queries http://mediaqueri.es/ 2012. 06. 11 at Yahoo! JAPAN | Komori, Masaaki
10.
レスポンシブ ウェブデザイン基礎 Responsive Web
Design Basic ・ 実例紹介 ∼Pancho Pistolas http://panchopistolas.com/ 出典: Media Queries http://mediaqueri.es/ 2012. 06. 11 at Yahoo! JAPAN | Komori, Masaaki
11.
レスポンシブ ウェブデザイン基礎 Responsive Web
Design Basic ・ 実例紹介 ∼Google News https://news.google.com/ 出典: Media Queries http://mediaqueri.es/ 2012. 06. 11 at Yahoo! JAPAN | Komori, Masaaki
12.
レスポンシブ ウェブデザイン基礎 Responsive Web
Design Basic ・ 実例紹介 ∼Golden Isles, GA http://www.goldenisles.com/ 出典: Media Queries http://mediaqueri.es/ 2012. 06. 11 at Yahoo! JAPAN | Komori, Masaaki
13.
レスポンシブ ウェブデザイン基礎 Responsive Web
Design Basic ・ 実例紹介 ∼Momentum http://builtwithmomentum.com/ 出典: Media Queries http://mediaqueri.es/ 2012. 06. 11 at Yahoo! JAPAN | Komori, Masaaki
14.
レスポンシブ ウェブデザイン基礎 Responsive Web
Design Basic ・ レスポンシブ・ウェブデザインの向き、不向き • 既存のPCサイトのコンテンツが そのままレスポンシブな仕様に移行できるわけではない • 新規サイトの場合は、コンテンツ内容次第で対応可能 • 単機能のWebアプリ、 コンテンツ量の少ないキャンペーン系のサイトなど • サイト構造が複雑になればなるほど、設計に負担がかかる 2012. 06. 11 at Yahoo! JAPAN | Komori, Masaaki
15.
レスポンシブ ウェブデザイン基礎 Responsive Web
Design Basic ・ レスポンシブ・ウェブデザインは万能薬ではない 2012. 06. 11 at Yahoo! JAPAN | Komori, Masaaki
16.
レスポンシブ ウェブデザイン基礎 Responsive Web
Design Basic ・ ただ、多様化するWebの配信手法のひとつにはなりえる 2012. 06. 11 at Yahoo! JAPAN | Komori, Masaaki
17.
レスポンシブ ウェブデザイン基礎 Responsive Web
Design Basic ・ レスポンシブ・ウェブデザインのワークフロー 2012. 06. 11 at Yahoo! JAPAN | Komori, Masaaki
18.
レスポンシブ ウェブデザイン基礎 Responsive Web
Design Basic ・ 従来型のワークフローで制作可能? • 企画・設計からデザイン、モックアップ作成、 実装、確認、といったウォータフォール式では問題も • 対象となるデバイスが増えるだけに 実装後に問題が発生した場合は、最初からやりなおし • PC向け以上にパフォーマンスが鍵になる 2012. 06. 11 at Yahoo! JAPAN | Komori, Masaaki
19.
レスポンシブ ウェブデザイン基礎 Responsive Web
Design Basic ・ 最悪の場合は、一番最初に戻ってしまう 2012. 06. 11 at Yahoo! JAPAN | Komori, Masaaki
20.
レスポンシブ ウェブデザイン基礎 Responsive Web
Design Basic ・ レスポンシブ・ウェブデザインのワークフロー • 企画・設計、ビジュアルデザインの段階から、 デバイス特性やパフォーマンスへの配慮が必要になる • ワイヤーやラフは大まかにして、 早期段階からモックアップを作り修正する方がよい • ウォーターフォールよりも、 アジャイル、スパイラルに近いワークフローが理想 2012. 06. 11 at Yahoo! JAPAN | Komori, Masaaki
21.
レスポンシブ ウェブデザイン基礎 Responsive Web
Design Basic ・ 最初の設計、早めのモックアップ 2012. 06. 11 at Yahoo! JAPAN | Komori, Masaaki
22.
レスポンシブ ウェブデザイン基礎 Responsive Web
Design Basic ・ 開発初期段階から、デバイス特性やパフォーマンスを意識 2012. 06. 11 at Yahoo! JAPAN | Komori, Masaaki
23.
レスポンシブ ウェブデザイン基礎 Responsive Web
Design Basic ・ コンテンツファースト&モバイルファースト 2012. 06. 11 at Yahoo! JAPAN | Komori, Masaaki
24.
レスポンシブ ウェブデザイン基礎 Responsive Web
Design Basic ・ コンテンツ量、データ転送量がキー • レスポンシブ・ウェブデザインは、 既存のPC向けのコンテンツの内容を スマートデバイス向けに「非表示にする」ものではない • コンテンツ量やデータ転送量がキーになる • より多くのブラウザを一度にサポートすることになる 2012. 06. 11 at Yahoo! JAPAN | Komori, Masaaki
25.
レスポンシブ ウェブデザイン基礎 Responsive Web
Design Basic ・ モバイルや古いブラウザでも見えることを • どれでも見た目が同じになることはない • レイアウト切り替えに対応していない、 JavaScriptに非対応の環境でも、 使える、閲覧できることが大事 • 最低限の状態からコンテンツを設計し、 レイアウトやデザインを実装、拡充していく 2012. 06. 11 at Yahoo! JAPAN | Komori, Masaaki
26.
レスポンシブ ウェブデザイン基礎 Responsive Web
Design Basic ・ 非対応の環境は、ウィンドウ幅で可変でも スマートフォンサイズ それ以外のデバイスサイズや非対応環境 1 2 3 単にコンテンツの横幅が伸びるだけでもコンテンツの閲覧に問題はない 2012. 06. 11 at Yahoo! JAPAN | Komori, Masaaki
27.
レスポンシブ ウェブデザイン基礎 Responsive Web
Design Basic ・ PCサイトを先行して考えると失敗する可能性が高くなる 2012. 06. 11 at Yahoo! JAPAN | Komori, Masaaki
28.
レスポンシブ ウェブデザイン基礎 Responsive Web
Design Basic ・ どこかで何かをトレードオフする必要がある 2012. 06. 11 at Yahoo! JAPAN | Komori, Masaaki
29.
レスポンシブ ウェブデザイン基礎 Responsive Web
Design Basic ・ コンテンツファースト、モバイルファーストの方が考えやすい 2012. 06. 11 at Yahoo! JAPAN | Komori, Masaaki
30.
レスポンシブ ウェブデザイン基礎 Responsive Web
Design Basic ・ 複数の画面サイズを考慮したワイヤーフレーム ©asidemag.com 2012. 06. 11 at Yahoo! JAPAN | Komori, Masaaki
31.
レスポンシブ ウェブデザイン基礎 Responsive Web
Design Basic ・ 現在市場に出回るデバイスの画面幅の違い 2012. 06. 11 at Yahoo! JAPAN | Komori, Masaaki
32.
レスポンシブ ウェブデザイン基礎 Responsive Web
Design Basic ・ これらの複数のデバイスが対象 • 画面サイズの異なるデバイスを対象にするため、 PCサイズ以外では大まかなレイアウトを前提に • 特にスマートフォンはサイズだけでなく、 機種の特性やブラウザ実装差異が出てくる可能性 • トリッキーな実装で可能なデザインではなく、 最大公約数をとる形で確実に動作することを優先 2012. 06. 11 at Yahoo! JAPAN | Komori, Masaaki
33.
レスポンシブ ウェブデザイン基礎 Responsive Web
Design Basic ・ レイアウト切り替えの代表的なパターン • サイトの性質や内容、 コンテンツの情報構造によって レイアウトの切り替えパターンは変わってくる • コンテンツによって最適な形を考える 2012. 06. 11 at Yahoo! JAPAN | Komori, Masaaki
34.
レスポンシブ ウェブデザイン基礎 Responsive Web
Design Basic ・ 1. 可変することを前提にしたパターン 2012. 06. 11 at Yahoo! JAPAN | Komori, Masaaki
35.
レスポンシブ ウェブデザイン基礎 Responsive Web
Design Basic ・ 2. カラムを落としてしまうパターン 2012. 06. 11 at Yahoo! JAPAN | Komori, Masaaki
36.
レスポンシブ ウェブデザイン基礎 Responsive Web
Design Basic ・ 3. レイアウトそのものを変えてしまうパターン 2012. 06. 11 at Yahoo! JAPAN | Komori, Masaaki
37.
レスポンシブ ウェブデザイン基礎 Responsive Web
Design Basic ・ 4. 1カラムをベースとしたパターン 2012. 06. 11 at Yahoo! JAPAN | Komori, Masaaki
38.
レスポンシブ ウェブデザイン基礎 Responsive Web
Design Basic ・ 5. 見えない領域を使うパターン 2012. 06. 11 at Yahoo! JAPAN | Komori, Masaaki
39.
レスポンシブ ウェブデザイン基礎 Responsive Web
Design Basic ・ デスクトップのレイアウト 出典: Responsive Layouts, Responsively Wireframed http://www.thismanslife.co.uk/projects/lab/responsivewireframes/ 2012. 06. 11 at Yahoo! JAPAN | Komori, Masaaki
40.
レスポンシブ ウェブデザイン基礎 Responsive Web
Design Basic ・ モバイルのレイアウト 出典: Responsive Layouts, Responsively Wireframed http://www.thismanslife.co.uk/projects/lab/responsivewireframes/ 2012. 06. 11 at Yahoo! JAPAN | Komori, Masaaki
41.
レスポンシブ ウェブデザイン基礎 Responsive Web
Design Basic ・ PXベースのデザインは、PCサイト向けでしか考えにくい 2012. 06. 11 at Yahoo! JAPAN | Komori, Masaaki
42.
レスポンシブ ウェブデザイン基礎 Responsive Web
Design Basic ・ レスポンシブ・ウェブデザインの実装 ©asidemag.com 2012. 06. 11 at Yahoo! JAPAN | Komori, Masaaki
43.
レスポンシブ ウェブデザイン基礎 Responsive Web
Design Basic ・ レスポンシブ・ウェブデザインの確認ツール • 「Responsive.is」 http://responsive.is/ • 「The Responsinator」 http://www.responsinator.com/ • 「ScreenQueri.es」 http://screenqueri.es/ • 「Aptus」 http://itunes.apple.com/gb/app/aptus/id510487565?mt=12 2012. 06. 11 at Yahoo! JAPAN | Komori, Masaaki
44.
レスポンシブ ウェブデザイン基礎 Responsive Web
Design Basic ・ レスポンシブ・ウェブデザインの実装方法 • 現在の主流は、CSSのMedia Queriesを使った手法 • 従来のようなUAによる切り替えも可能 • Media Queriesとサーバサイドを組み合わせる 「RESS(REsponsive + Server Side )」もある • レイアウト幅は、可変をベースに「%」や「em」で 2012. 06. 11 at Yahoo! JAPAN | Komori, Masaaki
45.
レスポンシブ ウェブデザイン基礎 Responsive Web
Design Basic ・ Media Queries に非対応の環境をどうするか • Media Queriesを使う場合、 非対応のIE 8以前をどのように扱うか • 「Respond.js」や「css3mediaqueries.js」を用いる • IEのみにスタイルシートをわけて提供する • そもそも対応する必要があるか? 2012. 06. 11 at Yahoo! JAPAN | Komori, Masaaki
46.
レスポンシブ ウェブデザイン基礎 Responsive Web
Design Basic ・ ブレイクポイントの設定方法 • ブレイクポイントとは、 レイアウトの切り替え対象となる横幅のこと • たとえば、960px / 768px / 320px など • メジャーブレイクポイントと マイナーブレイクポイントを組み合わせながら、 より厳密にレイアウトをコントロールしていくことも 2012. 06. 11 at Yahoo! JAPAN | Komori, Masaaki
47.
レスポンシブ ウェブデザイン基礎 Responsive Web
Design Basic ・ ブレイクポイントの設定例 2012. 06. 11 at Yahoo! JAPAN | Komori, Masaaki
48.
レスポンシブ ウェブデザイン基礎 Responsive Web
Design Basic ・ さらに細かく設定すると… 2012. 06. 11 at Yahoo! JAPAN | Komori, Masaaki
49.
レスポンシブ ウェブデザイン基礎 Responsive Web
Design Basic ・ Media Queriesを使った設定例 <link rel="stylesheet" media="screen" href="css/base.css"> <link rel="stylesheet" media="only screen and (min-width:767px) " href="css/tablet.css"> <link rel="stylesheet" media="only screen and (min-width:768px)" href="css/desktop.css"> 2012. 06. 11 at Yahoo! JAPAN | Komori, Masaaki
50.
レスポンシブ ウェブデザイン基礎 Responsive Web
Design Basic ・ ブレイクポイントを複雑にすれば、詳細なデザインコントロールも 2012. 06. 11 at Yahoo! JAPAN | Komori, Masaaki
51.
レスポンシブ ウェブデザイン基礎 Responsive Web
Design Basic ・ 環境によってCSSのロードを切り替える最新手法 • Media Queriesでの切り替えではなく、 JavaScriptによってロードするCSSを切り替える • 「eCSSential」 https://github.com/scottjehl/eCSSential 2012. 06. 11 at Yahoo! JAPAN | Komori, Masaaki
52.
レスポンシブ ウェブデザイン基礎 Responsive Web
Design Basic ・ レスポンシブ・ウェブデザインのもうひとつの課題 2012. 06. 11 at Yahoo! JAPAN | Komori, Masaaki
53.
レスポンシブ ウェブデザイン基礎 Responsive Web
Design Basic ・ レスポンシブ・ウェブデザインでの画像の扱い • レスポンシブ・ウェブデザインで一番の問題 • 同一画像をすべてで使い回すことは現実的ではない • パフォーマンスを考慮すると、 画面サイズなどで配信画像を切り替える方が理想的 • Retina ディスプレイへの対応はどうする? 2012. 06. 11 at Yahoo! JAPAN | Komori, Masaaki
54.
レスポンシブ ウェブデザイン基礎 Responsive Web
Design Basic ・ 環境にあわせた画像配信、現時点での対処方法 • jQueryなどのJSライブラリを使って切り替える • サーバサイドでCookieや.htaccessを使って切り替える • サーバサイドで動的に画像を生成し、 それをブラウザ側に配信する形で実装する 2012. 06. 11 at Yahoo! JAPAN | Komori, Masaaki
55.
レスポンシブ ウェブデザイン基礎 Responsive Web
Design Basic ・ JavaScriptを使った画像の切り替え • 「Responsive-Images」 https://github.com/filamentgroup/Responsive-Images • 「responsive_image_tag」 https://github.com/futurechimp/responsive_image_tag • 「Retina.js」 http://retinajs.com/ • 「Retina Images」 http://retina-images.complexcompulsions.com/ 2012. 06. 11 at Yahoo! JAPAN | Komori, Masaaki
56.
レスポンシブ ウェブデザイン基礎 Responsive Web
Design Basic ・ PHP + mod_rewriteを使うAdaptive-Images 2012. 06. 11 at Yahoo! JAPAN | Komori, Masaaki
57.
レスポンシブ ウェブデザイン基礎 Responsive Web
Design Basic ・ <picture>要素があればいいのに…、という流れに 2012. 06. 11 at Yahoo! JAPAN | Komori, Masaaki
58.
レスポンシブ ウェブデザイン基礎 Responsive Web
Design Basic ・ レスポンシブ・ウェブデザインは、まだまだ解決する課題がある 2012. 06. 11 at Yahoo! JAPAN | Komori, Masaaki
59.
レスポンシブ ウェブデザイン基礎 Responsive Web
Design Basic ・ パフォーマンスの問題、 レイアウトや画像の問題。 実装前の段階からコンテンツ構造含め、 しっかり考えることが、 現時点での最良の手法 2012. 06. 11 at Yahoo! JAPAN | Komori, Masaaki
60.
レスポンシブ ウェブデザイン基礎 Responsive Web
Design Basic ・ では、簡単にデモを 2012. 06. 11 at Yahoo! JAPAN | Komori, Masaaki