SlideShare a Scribd company logo
レスポンシブ
Web デザイン
による開発効率化
サイボウズ株式会社
門屋 亮 @r yokdy




                1
Agenda
• レスポンシブWebデザインとは
• レスポンシブWebデザインの利点
• レスポンシブWebデザインを使ったサイト
• レスポンシブWebデザインの要素
• レスポンシブWebデザインをやってみる
• レスポンシブWebデザインをdisる




                         2
レスポンシブWebデザインとは




モバイル用のサイト
どうしてますか?




                  3
こたえ1




男らしくアプリのみ




            4
こたえ2




モバイル用サイト
を別につくる



           5
User-agentで判定するのは
ちょっとしんどい
●iPhone
Mozilla/5.0 (iPhone; U; CPU iPhone OS 5_0 like Mac OS X) AppleWebKit/534.46
(KHTML, like Gecko) Mobile/9A334 Safari/7534.48.3
●iPod Touch
Mozilla/5.0 (iPod; CPU iPhone OS 5_0_1 like Mac OS X) AppleWebKit/534.46
(KHTML, like Gecko) Version/5.1 Mobile/9A405 Safari/7534.48.3
●iPad
Mozilla/5.0 (iPad; CPU OS 5_0_1 like Mac OS X) AppleWebKit/534.46
(KHTML, like Gecko) Version/5.1 Mobile/9A405 Safari/7534.48.3
●Android
Mozilla/5.0 (Linux; U; Android 4.0.1; ja-jp; Galaxy Nexus Build/ITL41D)
AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30
●Internet Explorer
Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.0; Trident/5.0)
●Google Chrome
Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/535.7 (KHTML, like Gecko)
Chrome/16.0.912.75 Safari/535.7




                                                                              6
こたえ3



今あるページをどんな
デバイスでも
見られるようにする




             7
どうやって?

スクリーンの
幅に応じて見せ方を
変える




            8
見たほうが早い


Useful CSS Tricks for Responsive Design
http://webdesignerwall.com/tutorials/5-useful-css-tricks-for-
responsive-design


デモ
http://webdesignerwall.com/demo/responsive-css-tricks/




                                                                9
利点
• デバイスごとに作る必要がない
• 少ない工数と費用で対応が可能
• 見え方をブラウザで確認できる




                   10
レスポンシブな
Webサイトの例



           11
Earth Hour
http://earthhour.fr/




                       12
テンプル大学
http://www.tuj.ac.jp/jp/index.html




                                     13
Simble Grid
http://thisisdallas.github.com/Simple-Grid/




                                              14
スタジオパーク(NHK)
http://www.nhk.or.jp/studiopark/
アニメーションがすごい




                                   15
レスポンシブ
Webデザイン
の要素


          16
Fluid Grid
スクリーンの幅によって
レイアウトを変える




              17
Media Query

幅によってスタイルを変える
<link rel="stylesheet" media="screen and (min-width:480px) and
(max-width: 768px)" href="tablet.css" />




@media screen and (min-width:480px) and (max-width: 768px){
    /* style */
}




                                                                 18
Relative Value

幅を相対指定する
div.wrapper {
    width: 940px;
}
    ↓
div.wrapper {
width: 90%;
}




                    19
Responsive Image

画像を幅によって縮小表示する
img {
    max-width: 100%;
    height: auto;
}




                       20
レスポンシブデザインを
やってみる




              21
まずはviewportの設定から
iPhoneではデフォルトで
width=980になるので本来の幅(320px)
にする。
<meta name = "viewport"
content = "width = device-width, initial-scale = 1>




                                                      22
どのサイズでレイアウトを
切り替えるか決める
レイアウト3つもしくは4つ
http://coliss.com/articles/digress/device-diagram-responsive-
design-planning-by-metaltoad.html




                                                                23
デバイスに応じた見え方を
確認できるサイト
http://www.responsinator.com/




                                24
レスポンシブWebデザインをdisる
• イメージをリサイズして小さくしてもダウンロードするサイ
  ズはPCと同じ。
• イメージをリサイズするのにCPU/メモリを使う。
• PC版とほぼ同じリソース(HTML, CSS, JSなど)をモバイル
  でもダウンロードさせている。
• すべてのデバイスのためのコードを処理する必要がある。
• PCと同様のDOMツリーをモバイルでも構築している。
• すべてのモバイルデバイスがMedia Queryをサポートしている
  わけではない。




                                       25
まとめ
• レスポンシブWebデザインを活用する
  と少ない工数でモバイル用のサイトを
  構築できる。
• モバイルに最適化されたサイトと比べ
  ると重いので用途を見極めたうえで利
  用するのがよい。




                       26

More Related Content

What's hot

Galage labsサーバー部6U自己紹介
Galage labsサーバー部6U自己紹介Galage labsサーバー部6U自己紹介
Galage labsサーバー部6U自己紹介Seiko Kuchida
 
CSS Nite LP26 CodeKitで始める次世代Web制作
CSS Nite LP26 CodeKitで始める次世代Web制作CSS Nite LP26 CodeKitで始める次世代Web制作
CSS Nite LP26 CodeKitで始める次世代Web制作Maboroshi.inc
 
a-blog cms Training Camp 2017 Spring「a-blog cms用テーマ echo_zeroについて」
a-blog cms Training Camp 2017 Spring「a-blog cms用テーマ echo_zeroについて」a-blog cms Training Camp 2017 Spring「a-blog cms用テーマ echo_zeroについて」
a-blog cms Training Camp 2017 Spring「a-blog cms用テーマ echo_zeroについて」
Seiko Kuchida
 
a-sap10「モジュールIDを理解する」
a-sap10「モジュールIDを理解する」a-sap10「モジュールIDを理解する」
a-sap10「モジュールIDを理解する」
Seiko Kuchida
 
レスポンシブWebデザインのサイトを作る前に
レスポンシブWebデザインのサイトを作る前にレスポンシブWebデザインのサイトを作る前に
レスポンシブWebデザインのサイトを作る前に
Yuki Nakane
 
WordCamp Yokohama 2010 Komori
WordCamp Yokohama 2010 KomoriWordCamp Yokohama 2010 Komori
WordCamp Yokohama 2010 Komori
masaaki komori
 
Webデザイナー視点で使ってみた Microsoft Azureの話
Webデザイナー視点で使ってみたMicrosoft Azureの話Webデザイナー視点で使ってみたMicrosoft Azureの話
Webデザイナー視点で使ってみた Microsoft Azureの話
典子 松本
 
Browser oh browser browser
Browser oh browser browserBrowser oh browser browser
Browser oh browser browser
Teppei Sato
 
サーバ・VM+コンテナ管理Tips@オンライン合宿2020
サーバ・VM+コンテナ管理Tips@オンライン合宿2020サーバ・VM+コンテナ管理Tips@オンライン合宿2020
サーバ・VM+コンテナ管理Tips@オンライン合宿2020
Yuki Nihei
 
日本のCMSの今。特徴とプロジェクトから考える、次のCMS選び:本編
日本のCMSの今。特徴とプロジェクトから考える、次のCMS選び:本編日本のCMSの今。特徴とプロジェクトから考える、次のCMS選び:本編
日本のCMSの今。特徴とプロジェクトから考える、次のCMS選び:本編
Seiko Kuchida
 
SaCSS vol.79「CMSがらみのサイトの受発注で確認すべきこと」
SaCSS vol.79「CMSがらみのサイトの受発注で確認すべきこと」SaCSS vol.79「CMSがらみのサイトの受発注で確認すべきこと」
SaCSS vol.79「CMSがらみのサイトの受発注で確認すべきこと」
Seiko Kuchida
 
ADC OnAir 第5回 『レスポンシブ Web デザインを学ぼう!実装編』
ADC OnAir 第5回 『レスポンシブ Web デザインを学ぼう!実装編』ADC OnAir 第5回 『レスポンシブ Web デザインを学ぼう!実装編』
ADC OnAir 第5回 『レスポンシブ Web デザインを学ぼう!実装編』Naoki Matsuda
 
オープンソースCMSにみる、現場で使えるjava scriptライブラリ
オープンソースCMSにみる、現場で使えるjava scriptライブラリオープンソースCMSにみる、現場で使えるjava scriptライブラリ
オープンソースCMSにみる、現場で使えるjava scriptライブラリ
Ryuji Egashira
 
20130202 ドメイン駆動設計読書会at名古屋のお誘い β
20130202 ドメイン駆動設計読書会at名古屋のお誘い β20130202 ドメイン駆動設計読書会at名古屋のお誘い β
20130202 ドメイン駆動設計読書会at名古屋のお誘い βRyo RKTM
 
goog.require()を手書きしていいのは小学生まで
goog.require()を手書きしていいのは小学生までgoog.require()を手書きしていいのは小学生まで
goog.require()を手書きしていいのは小学生まで
Teppei Sato
 
レスポンシブウェブデザインの今後を考える
レスポンシブウェブデザインの今後を考えるレスポンシブウェブデザインの今後を考える
レスポンシブウェブデザインの今後を考える
Akinori Kawamitsu
 
HTML5で作るスマホブラウザゲーム
HTML5で作るスマホブラウザゲームHTML5で作るスマホブラウザゲーム
HTML5で作るスマホブラウザゲーム
Takumi Ohashi
 
a-sap08「a-blog cmsとMovable Type」
a-sap08「a-blog cmsとMovable Type」a-sap08「a-blog cmsとMovable Type」
a-sap08「a-blog cmsとMovable Type」
Seiko Kuchida
 

What's hot (19)

Galage labsサーバー部6U自己紹介
Galage labsサーバー部6U自己紹介Galage labsサーバー部6U自己紹介
Galage labsサーバー部6U自己紹介
 
CSS Nite LP26 CodeKitで始める次世代Web制作
CSS Nite LP26 CodeKitで始める次世代Web制作CSS Nite LP26 CodeKitで始める次世代Web制作
CSS Nite LP26 CodeKitで始める次世代Web制作
 
Html5制作の現在
Html5制作の現在Html5制作の現在
Html5制作の現在
 
a-blog cms Training Camp 2017 Spring「a-blog cms用テーマ echo_zeroについて」
a-blog cms Training Camp 2017 Spring「a-blog cms用テーマ echo_zeroについて」a-blog cms Training Camp 2017 Spring「a-blog cms用テーマ echo_zeroについて」
a-blog cms Training Camp 2017 Spring「a-blog cms用テーマ echo_zeroについて」
 
a-sap10「モジュールIDを理解する」
a-sap10「モジュールIDを理解する」a-sap10「モジュールIDを理解する」
a-sap10「モジュールIDを理解する」
 
レスポンシブWebデザインのサイトを作る前に
レスポンシブWebデザインのサイトを作る前にレスポンシブWebデザインのサイトを作る前に
レスポンシブWebデザインのサイトを作る前に
 
WordCamp Yokohama 2010 Komori
WordCamp Yokohama 2010 KomoriWordCamp Yokohama 2010 Komori
WordCamp Yokohama 2010 Komori
 
Webデザイナー視点で使ってみた Microsoft Azureの話
Webデザイナー視点で使ってみたMicrosoft Azureの話Webデザイナー視点で使ってみたMicrosoft Azureの話
Webデザイナー視点で使ってみた Microsoft Azureの話
 
Browser oh browser browser
Browser oh browser browserBrowser oh browser browser
Browser oh browser browser
 
サーバ・VM+コンテナ管理Tips@オンライン合宿2020
サーバ・VM+コンテナ管理Tips@オンライン合宿2020サーバ・VM+コンテナ管理Tips@オンライン合宿2020
サーバ・VM+コンテナ管理Tips@オンライン合宿2020
 
日本のCMSの今。特徴とプロジェクトから考える、次のCMS選び:本編
日本のCMSの今。特徴とプロジェクトから考える、次のCMS選び:本編日本のCMSの今。特徴とプロジェクトから考える、次のCMS選び:本編
日本のCMSの今。特徴とプロジェクトから考える、次のCMS選び:本編
 
SaCSS vol.79「CMSがらみのサイトの受発注で確認すべきこと」
SaCSS vol.79「CMSがらみのサイトの受発注で確認すべきこと」SaCSS vol.79「CMSがらみのサイトの受発注で確認すべきこと」
SaCSS vol.79「CMSがらみのサイトの受発注で確認すべきこと」
 
ADC OnAir 第5回 『レスポンシブ Web デザインを学ぼう!実装編』
ADC OnAir 第5回 『レスポンシブ Web デザインを学ぼう!実装編』ADC OnAir 第5回 『レスポンシブ Web デザインを学ぼう!実装編』
ADC OnAir 第5回 『レスポンシブ Web デザインを学ぼう!実装編』
 
オープンソースCMSにみる、現場で使えるjava scriptライブラリ
オープンソースCMSにみる、現場で使えるjava scriptライブラリオープンソースCMSにみる、現場で使えるjava scriptライブラリ
オープンソースCMSにみる、現場で使えるjava scriptライブラリ
 
20130202 ドメイン駆動設計読書会at名古屋のお誘い β
20130202 ドメイン駆動設計読書会at名古屋のお誘い β20130202 ドメイン駆動設計読書会at名古屋のお誘い β
20130202 ドメイン駆動設計読書会at名古屋のお誘い β
 
goog.require()を手書きしていいのは小学生まで
goog.require()を手書きしていいのは小学生までgoog.require()を手書きしていいのは小学生まで
goog.require()を手書きしていいのは小学生まで
 
レスポンシブウェブデザインの今後を考える
レスポンシブウェブデザインの今後を考えるレスポンシブウェブデザインの今後を考える
レスポンシブウェブデザインの今後を考える
 
HTML5で作るスマホブラウザゲーム
HTML5で作るスマホブラウザゲームHTML5で作るスマホブラウザゲーム
HTML5で作るスマホブラウザゲーム
 
a-sap08「a-blog cmsとMovable Type」
a-sap08「a-blog cmsとMovable Type」a-sap08「a-blog cmsとMovable Type」
a-sap08「a-blog cmsとMovable Type」
 

Viewers also liked

Francia las ciencias_de_la_educacion_zambrano linea leer
Francia las ciencias_de_la_educacion_zambrano linea leerFrancia las ciencias_de_la_educacion_zambrano linea leer
Francia las ciencias_de_la_educacion_zambrano linea leer
Ana Raquel Gómez C.
 
Cuarto paso
Cuarto  pasoCuarto  paso
Cuarto paso
Andres aquino
 
Kondisi politik, sosial Indonesia kedatangan islam
Kondisi politik, sosial Indonesia kedatangan islamKondisi politik, sosial Indonesia kedatangan islam
Kondisi politik, sosial Indonesia kedatangan islam
Himpunan Mahasiswa Islam (HMI)
 
Who says 'everything's alright' (3)
Who says 'everything's alright'  (3)Who says 'everything's alright'  (3)
Who says 'everything's alright' (3)
GOKELP HR SERVICES PRIVATE LIMITED
 
Applic group michel tassen
Applic group michel tassenApplic group michel tassen
Applic group michel tassen
shoppinginnovationexpo
 
Comprension el rey
Comprension el  reyComprension el  rey
Comprension el rey
stephanie silva
 
youmanagement
youmanagementyoumanagement
youmanagement
Bryndís Einarsdóttir
 
МЕРТ ДБ-16
МЕРТ ДБ-16МЕРТ ДБ-16
МЕРТ ДБ-16
yuraroman77
 
Full stack prototyping
Full stack prototypingFull stack prototyping
Full stack prototyping
Mika Hämäläinen
 
34
3434
Leadership Development in Organizations
Leadership Development in OrganizationsLeadership Development in Organizations
Leadership Development in Organizations
Robert A. Sedlák
 
Recipe for success
Recipe for successRecipe for success
ELECTRICAL_KFUPM_OMAR
ELECTRICAL_KFUPM_OMARELECTRICAL_KFUPM_OMAR
ELECTRICAL_KFUPM_OMAR
Omar Alanazi
 
Gearbox Project Creativity Journey
Gearbox Project Creativity JourneyGearbox Project Creativity Journey
Gearbox Project Creativity Journey
Jason Aveling
 
DIMITRIJEVIC IV.
DIMITRIJEVIC IV.DIMITRIJEVIC IV.
DIMITRIJEVIC IV.
Dimitrijevic, Ivana
 

Viewers also liked (15)

Francia las ciencias_de_la_educacion_zambrano linea leer
Francia las ciencias_de_la_educacion_zambrano linea leerFrancia las ciencias_de_la_educacion_zambrano linea leer
Francia las ciencias_de_la_educacion_zambrano linea leer
 
Cuarto paso
Cuarto  pasoCuarto  paso
Cuarto paso
 
Kondisi politik, sosial Indonesia kedatangan islam
Kondisi politik, sosial Indonesia kedatangan islamKondisi politik, sosial Indonesia kedatangan islam
Kondisi politik, sosial Indonesia kedatangan islam
 
Who says 'everything's alright' (3)
Who says 'everything's alright'  (3)Who says 'everything's alright'  (3)
Who says 'everything's alright' (3)
 
Applic group michel tassen
Applic group michel tassenApplic group michel tassen
Applic group michel tassen
 
Comprension el rey
Comprension el  reyComprension el  rey
Comprension el rey
 
youmanagement
youmanagementyoumanagement
youmanagement
 
МЕРТ ДБ-16
МЕРТ ДБ-16МЕРТ ДБ-16
МЕРТ ДБ-16
 
Full stack prototyping
Full stack prototypingFull stack prototyping
Full stack prototyping
 
34
3434
34
 
Leadership Development in Organizations
Leadership Development in OrganizationsLeadership Development in Organizations
Leadership Development in Organizations
 
Recipe for success
Recipe for successRecipe for success
Recipe for success
 
ELECTRICAL_KFUPM_OMAR
ELECTRICAL_KFUPM_OMARELECTRICAL_KFUPM_OMAR
ELECTRICAL_KFUPM_OMAR
 
Gearbox Project Creativity Journey
Gearbox Project Creativity JourneyGearbox Project Creativity Journey
Gearbox Project Creativity Journey
 
DIMITRIJEVIC IV.
DIMITRIJEVIC IV.DIMITRIJEVIC IV.
DIMITRIJEVIC IV.
 

Similar to レスポンシブWebデザインによる開発効率化

About rails 3
About rails 3About rails 3
About rails 3
issei126
 
パララックスでレスポンシブでJ query mobileなサイトのつくりかた
パララックスでレスポンシブでJ query mobileなサイトのつくりかたパララックスでレスポンシブでJ query mobileなサイトのつくりかた
パララックスでレスポンシブでJ query mobileなサイトのつくりかた
Shumpei Shiraishi
 
Mobile SEO (Japanese Version)
Mobile SEO (Japanese Version)Mobile SEO (Japanese Version)
Mobile SEO (Japanese Version)
ssuserd60633
 
Web担当者Forumミーティング2013 Autumn 「マルチデバイス、HTML5がとりまくWebサイト制作とCMSの現在」
Web担当者Forumミーティング2013 Autumn 「マルチデバイス、HTML5がとりまくWebサイト制作とCMSの現在」Web担当者Forumミーティング2013 Autumn 「マルチデバイス、HTML5がとりまくWebサイト制作とCMSの現在」
Web担当者Forumミーティング2013 Autumn 「マルチデバイス、HTML5がとりまくWebサイト制作とCMSの現在」
xyz corporation
 
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフラインWebフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
Shumpei Shiraishi
 
MTセミナー2011/2/21 アイデアマンズ株式会社
MTセミナー2011/2/21 アイデアマンズ株式会社MTセミナー2011/2/21 アイデアマンズ株式会社
MTセミナー2011/2/21 アイデアマンズ株式会社Kunihiko Miyanaga
 
早稲田大学授業 - モバイルプログラミング
早稲田大学授業 - モバイルプログラミング早稲田大学授業 - モバイルプログラミング
早稲田大学授業 - モバイルプログラミングIppei Arita
 
WordPressのデフォルトテーマ Twenty Twelveから見る レスポンシブウェブデザインと モバイルファーストの考え方@Co-Edo
WordPressのデフォルトテーマ Twenty Twelveから見る レスポンシブウェブデザインと モバイルファーストの考え方@Co-EdoWordPressのデフォルトテーマ Twenty Twelveから見る レスポンシブウェブデザインと モバイルファーストの考え方@Co-Edo
WordPressのデフォルトテーマ Twenty Twelveから見る レスポンシブウェブデザインと モバイルファーストの考え方@Co-Edo
Chieko Aihara
 
60分でわかるレスポンシブWebデザイン[セミナー資料]
60分でわかるレスポンシブWebデザイン[セミナー資料]60分でわかるレスポンシブWebデザイン[セミナー資料]
60分でわかるレスポンシブWebデザイン[セミナー資料]
Daisuke Yamazaki
 
魅せるスマホ対応!?レスポンシブWebデザインセミナー
魅せるスマホ対応!?レスポンシブWebデザインセミナー魅せるスマホ対応!?レスポンシブWebデザインセミナー
魅せるスマホ対応!?レスポンシブWebデザインセミナー
ec-campus
 
今から始めよう!WordPressで作る女子ウケ★スマホサイト
今から始めよう!WordPressで作る女子ウケ★スマホサイト今から始めよう!WordPressで作る女子ウケ★スマホサイト
今から始めよう!WordPressで作る女子ウケ★スマホサイト
rie05
 
レスポンシブサイト制作に効く デザインTipsあれこれ
レスポンシブサイト制作に効く デザインTipsあれこれレスポンシブサイト制作に効く デザインTipsあれこれ
レスポンシブサイト制作に効く デザインTipsあれこれ
Akiko Kurono
 
無償でここまで使えるアドビのWeb制作ツール for デブサミ2013
無償でここまで使えるアドビのWeb制作ツール for デブサミ2013無償でここまで使えるアドビのWeb制作ツール for デブサミ2013
無償でここまで使えるアドビのWeb制作ツール for デブサミ2013
Keisuke Todoroki
 
これからのNOTESモバイルアプリはこう作れ
これからのNOTESモバイルアプリはこう作れこれからのNOTESモバイルアプリはこう作れ
これからのNOTESモバイルアプリはこう作れMitsuru Katoh
 
マイクロソフトの提供するMA6向けAPIのご紹介
マイクロソフトの提供するMA6向けAPIのご紹介マイクロソフトの提供するMA6向けAPIのご紹介
マイクロソフトの提供するMA6向けAPIのご紹介
Sunao Tomita
 
Internet Explorer 9 の新機能「固定サイト」 (Pinned sites)
Internet Explorer 9 の新機能「固定サイト」 (Pinned sites)Internet Explorer 9 の新機能「固定サイト」 (Pinned sites)
Internet Explorer 9 の新機能「固定サイト」 (Pinned sites)
shigeya
 
Webの勉強会#10
Webの勉強会#10Webの勉強会#10
Webの勉強会#10
MarlboroLand
 
いま、ケータイサイトのデザインに注目すべきワケ
いま、ケータイサイトのデザインに注目すべきワケいま、ケータイサイトのデザインに注目すべきワケ
いま、ケータイサイトのデザインに注目すべきワケCazuki HOSHINA
 
最低限のコードでWebサイトを作成しよう(ADC MEETUP 08)
最低限のコードでWebサイトを作成しよう(ADC MEETUP 08)最低限のコードでWebサイトを作成しよう(ADC MEETUP 08)
最低限のコードでWebサイトを作成しよう(ADC MEETUP 08)
壽子 大倉
 

Similar to レスポンシブWebデザインによる開発効率化 (20)

About rails 3
About rails 3About rails 3
About rails 3
 
パララックスでレスポンシブでJ query mobileなサイトのつくりかた
パララックスでレスポンシブでJ query mobileなサイトのつくりかたパララックスでレスポンシブでJ query mobileなサイトのつくりかた
パララックスでレスポンシブでJ query mobileなサイトのつくりかた
 
Mobile SEO (Japanese Version)
Mobile SEO (Japanese Version)Mobile SEO (Japanese Version)
Mobile SEO (Japanese Version)
 
Web担当者Forumミーティング2013 Autumn 「マルチデバイス、HTML5がとりまくWebサイト制作とCMSの現在」
Web担当者Forumミーティング2013 Autumn 「マルチデバイス、HTML5がとりまくWebサイト制作とCMSの現在」Web担当者Forumミーティング2013 Autumn 「マルチデバイス、HTML5がとりまくWebサイト制作とCMSの現在」
Web担当者Forumミーティング2013 Autumn 「マルチデバイス、HTML5がとりまくWebサイト制作とCMSの現在」
 
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフラインWebフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
 
MTセミナー2011/2/21 アイデアマンズ株式会社
MTセミナー2011/2/21 アイデアマンズ株式会社MTセミナー2011/2/21 アイデアマンズ株式会社
MTセミナー2011/2/21 アイデアマンズ株式会社
 
Sixapart day-2012-ideamans
Sixapart day-2012-ideamansSixapart day-2012-ideamans
Sixapart day-2012-ideamans
 
早稲田大学授業 - モバイルプログラミング
早稲田大学授業 - モバイルプログラミング早稲田大学授業 - モバイルプログラミング
早稲田大学授業 - モバイルプログラミング
 
WordPressのデフォルトテーマ Twenty Twelveから見る レスポンシブウェブデザインと モバイルファーストの考え方@Co-Edo
WordPressのデフォルトテーマ Twenty Twelveから見る レスポンシブウェブデザインと モバイルファーストの考え方@Co-EdoWordPressのデフォルトテーマ Twenty Twelveから見る レスポンシブウェブデザインと モバイルファーストの考え方@Co-Edo
WordPressのデフォルトテーマ Twenty Twelveから見る レスポンシブウェブデザインと モバイルファーストの考え方@Co-Edo
 
60分でわかるレスポンシブWebデザイン[セミナー資料]
60分でわかるレスポンシブWebデザイン[セミナー資料]60分でわかるレスポンシブWebデザイン[セミナー資料]
60分でわかるレスポンシブWebデザイン[セミナー資料]
 
魅せるスマホ対応!?レスポンシブWebデザインセミナー
魅せるスマホ対応!?レスポンシブWebデザインセミナー魅せるスマホ対応!?レスポンシブWebデザインセミナー
魅せるスマホ対応!?レスポンシブWebデザインセミナー
 
今から始めよう!WordPressで作る女子ウケ★スマホサイト
今から始めよう!WordPressで作る女子ウケ★スマホサイト今から始めよう!WordPressで作る女子ウケ★スマホサイト
今から始めよう!WordPressで作る女子ウケ★スマホサイト
 
レスポンシブサイト制作に効く デザインTipsあれこれ
レスポンシブサイト制作に効く デザインTipsあれこれレスポンシブサイト制作に効く デザインTipsあれこれ
レスポンシブサイト制作に効く デザインTipsあれこれ
 
無償でここまで使えるアドビのWeb制作ツール for デブサミ2013
無償でここまで使えるアドビのWeb制作ツール for デブサミ2013無償でここまで使えるアドビのWeb制作ツール for デブサミ2013
無償でここまで使えるアドビのWeb制作ツール for デブサミ2013
 
これからのNOTESモバイルアプリはこう作れ
これからのNOTESモバイルアプリはこう作れこれからのNOTESモバイルアプリはこう作れ
これからのNOTESモバイルアプリはこう作れ
 
マイクロソフトの提供するMA6向けAPIのご紹介
マイクロソフトの提供するMA6向けAPIのご紹介マイクロソフトの提供するMA6向けAPIのご紹介
マイクロソフトの提供するMA6向けAPIのご紹介
 
Internet Explorer 9 の新機能「固定サイト」 (Pinned sites)
Internet Explorer 9 の新機能「固定サイト」 (Pinned sites)Internet Explorer 9 の新機能「固定サイト」 (Pinned sites)
Internet Explorer 9 の新機能「固定サイト」 (Pinned sites)
 
Webの勉強会#10
Webの勉強会#10Webの勉強会#10
Webの勉強会#10
 
いま、ケータイサイトのデザインに注目すべきワケ
いま、ケータイサイトのデザインに注目すべきワケいま、ケータイサイトのデザインに注目すべきワケ
いま、ケータイサイトのデザインに注目すべきワケ
 
最低限のコードでWebサイトを作成しよう(ADC MEETUP 08)
最低限のコードでWebサイトを作成しよう(ADC MEETUP 08)最低限のコードでWebサイトを作成しよう(ADC MEETUP 08)
最低限のコードでWebサイトを作成しよう(ADC MEETUP 08)
 

More from 亮 門屋

NPOセミナー資料
NPOセミナー資料NPOセミナー資料
NPOセミナー資料
亮 門屋
 
Devsumi2015
Devsumi2015Devsumi2015
Devsumi2015
亮 門屋
 
kintone Cafe 松山
kintone Cafe 松山kintone Cafe 松山
kintone Cafe 松山
亮 門屋
 
Doctypeという黒魔術の話
Doctypeという黒魔術の話Doctypeという黒魔術の話
Doctypeという黒魔術の話亮 門屋
 
I18n for Your Web application
I18n for Your Web applicationI18n for Your Web application
I18n for Your Web application亮 門屋
 
Code HAIKU 2012 Introduction
Code HAIKU 2012 IntroductionCode HAIKU 2012 Introduction
Code HAIKU 2012 Introduction亮 門屋
 

More from 亮 門屋 (6)

NPOセミナー資料
NPOセミナー資料NPOセミナー資料
NPOセミナー資料
 
Devsumi2015
Devsumi2015Devsumi2015
Devsumi2015
 
kintone Cafe 松山
kintone Cafe 松山kintone Cafe 松山
kintone Cafe 松山
 
Doctypeという黒魔術の話
Doctypeという黒魔術の話Doctypeという黒魔術の話
Doctypeという黒魔術の話
 
I18n for Your Web application
I18n for Your Web applicationI18n for Your Web application
I18n for Your Web application
 
Code HAIKU 2012 Introduction
Code HAIKU 2012 IntroductionCode HAIKU 2012 Introduction
Code HAIKU 2012 Introduction
 

Recently uploaded

iMacwoSu_Gong_de_barabaranishitaHua_.pptx
iMacwoSu_Gong_de_barabaranishitaHua_.pptxiMacwoSu_Gong_de_barabaranishitaHua_.pptx
iMacwoSu_Gong_de_barabaranishitaHua_.pptx
kitamisetagayaxxx
 
「進化するアプリ イマ×ミライ ~生成AIアプリへ続く道と新時代のアプリとは~」Interop24Tokyo APPS JAPAN B1-01講演
「進化するアプリ イマ×ミライ ~生成AIアプリへ続く道と新時代のアプリとは~」Interop24Tokyo APPS JAPAN B1-01講演「進化するアプリ イマ×ミライ ~生成AIアプリへ続く道と新時代のアプリとは~」Interop24Tokyo APPS JAPAN B1-01講演
「進化するアプリ イマ×ミライ ~生成AIアプリへ続く道と新時代のアプリとは~」Interop24Tokyo APPS JAPAN B1-01講演
嶋 是一 (Yoshikazu SHIMA)
 
協働AIがもたらす業務効率革命 -日本企業が押さえるべきポイント-Collaborative AI Revolutionizing Busines...
協働AIがもたらす業務効率革命 -日本企業が押さえるべきポイント-Collaborative AI Revolutionizing Busines...協働AIがもたらす業務効率革命 -日本企業が押さえるべきポイント-Collaborative AI Revolutionizing Busines...
協働AIがもたらす業務効率革命 -日本企業が押さえるべきポイント-Collaborative AI Revolutionizing Busines...
Osaka University
 
無形価値を守り育てる社会における「デー タ」の責務について - Atlas, Inc.
無形価値を守り育てる社会における「デー タ」の責務について - Atlas, Inc.無形価値を守り育てる社会における「デー タ」の責務について - Atlas, Inc.
無形価値を守り育てる社会における「デー タ」の責務について - Atlas, Inc.
Yuki Miyazaki
 
ロジックから状態を分離する技術/設計ナイト2024 by わいとん @ytnobody
ロジックから状態を分離する技術/設計ナイト2024 by わいとん @ytnobodyロジックから状態を分離する技術/設計ナイト2024 by わいとん @ytnobody
ロジックから状態を分離する技術/設計ナイト2024 by わいとん @ytnobody
azuma satoshi
 
生成AIがもたらすコンテンツ経済圏の新時代  The New Era of Content Economy Brought by Generative AI
生成AIがもたらすコンテンツ経済圏の新時代  The New Era of Content Economy Brought by Generative AI生成AIがもたらすコンテンツ経済圏の新時代  The New Era of Content Economy Brought by Generative AI
生成AIがもたらすコンテンツ経済圏の新時代  The New Era of Content Economy Brought by Generative AI
Osaka University
 
ハイブリッドクラウド研究会_Hyper-VとSystem Center Virtual Machine Manager セッションMM
ハイブリッドクラウド研究会_Hyper-VとSystem Center Virtual Machine Manager セッションMMハイブリッドクラウド研究会_Hyper-VとSystem Center Virtual Machine Manager セッションMM
ハイブリッドクラウド研究会_Hyper-VとSystem Center Virtual Machine Manager セッションMM
osamut
 
ヒアラブルへの入力を想定したユーザ定義型ジェスチャ調査と IMUセンサによる耳タッチジェスチャの認識
ヒアラブルへの入力を想定したユーザ定義型ジェスチャ調査と IMUセンサによる耳タッチジェスチャの認識ヒアラブルへの入力を想定したユーザ定義型ジェスチャ調査と IMUセンサによる耳タッチジェスチャの認識
ヒアラブルへの入力を想定したユーザ定義型ジェスチャ調査と IMUセンサによる耳タッチジェスチャの認識
sugiuralab
 
Humanoid Virtual Athletics Challenge2024 技術講習会 スライド
Humanoid Virtual Athletics Challenge2024 技術講習会 スライドHumanoid Virtual Athletics Challenge2024 技術講習会 スライド
Humanoid Virtual Athletics Challenge2024 技術講習会 スライド
tazaki1
 
【JSAI2024】LLMエージェントの人間との対話における反芻的返答の親近感向上効果_v1.1.pdf
【JSAI2024】LLMエージェントの人間との対話における反芻的返答の親近感向上効果_v1.1.pdf【JSAI2024】LLMエージェントの人間との対話における反芻的返答の親近感向上効果_v1.1.pdf
【JSAI2024】LLMエージェントの人間との対話における反芻的返答の親近感向上効果_v1.1.pdf
ARISE analytics
 

Recently uploaded (10)

iMacwoSu_Gong_de_barabaranishitaHua_.pptx
iMacwoSu_Gong_de_barabaranishitaHua_.pptxiMacwoSu_Gong_de_barabaranishitaHua_.pptx
iMacwoSu_Gong_de_barabaranishitaHua_.pptx
 
「進化するアプリ イマ×ミライ ~生成AIアプリへ続く道と新時代のアプリとは~」Interop24Tokyo APPS JAPAN B1-01講演
「進化するアプリ イマ×ミライ ~生成AIアプリへ続く道と新時代のアプリとは~」Interop24Tokyo APPS JAPAN B1-01講演「進化するアプリ イマ×ミライ ~生成AIアプリへ続く道と新時代のアプリとは~」Interop24Tokyo APPS JAPAN B1-01講演
「進化するアプリ イマ×ミライ ~生成AIアプリへ続く道と新時代のアプリとは~」Interop24Tokyo APPS JAPAN B1-01講演
 
協働AIがもたらす業務効率革命 -日本企業が押さえるべきポイント-Collaborative AI Revolutionizing Busines...
協働AIがもたらす業務効率革命 -日本企業が押さえるべきポイント-Collaborative AI Revolutionizing Busines...協働AIがもたらす業務効率革命 -日本企業が押さえるべきポイント-Collaborative AI Revolutionizing Busines...
協働AIがもたらす業務効率革命 -日本企業が押さえるべきポイント-Collaborative AI Revolutionizing Busines...
 
無形価値を守り育てる社会における「デー タ」の責務について - Atlas, Inc.
無形価値を守り育てる社会における「デー タ」の責務について - Atlas, Inc.無形価値を守り育てる社会における「デー タ」の責務について - Atlas, Inc.
無形価値を守り育てる社会における「デー タ」の責務について - Atlas, Inc.
 
ロジックから状態を分離する技術/設計ナイト2024 by わいとん @ytnobody
ロジックから状態を分離する技術/設計ナイト2024 by わいとん @ytnobodyロジックから状態を分離する技術/設計ナイト2024 by わいとん @ytnobody
ロジックから状態を分離する技術/設計ナイト2024 by わいとん @ytnobody
 
生成AIがもたらすコンテンツ経済圏の新時代  The New Era of Content Economy Brought by Generative AI
生成AIがもたらすコンテンツ経済圏の新時代  The New Era of Content Economy Brought by Generative AI生成AIがもたらすコンテンツ経済圏の新時代  The New Era of Content Economy Brought by Generative AI
生成AIがもたらすコンテンツ経済圏の新時代  The New Era of Content Economy Brought by Generative AI
 
ハイブリッドクラウド研究会_Hyper-VとSystem Center Virtual Machine Manager セッションMM
ハイブリッドクラウド研究会_Hyper-VとSystem Center Virtual Machine Manager セッションMMハイブリッドクラウド研究会_Hyper-VとSystem Center Virtual Machine Manager セッションMM
ハイブリッドクラウド研究会_Hyper-VとSystem Center Virtual Machine Manager セッションMM
 
ヒアラブルへの入力を想定したユーザ定義型ジェスチャ調査と IMUセンサによる耳タッチジェスチャの認識
ヒアラブルへの入力を想定したユーザ定義型ジェスチャ調査と IMUセンサによる耳タッチジェスチャの認識ヒアラブルへの入力を想定したユーザ定義型ジェスチャ調査と IMUセンサによる耳タッチジェスチャの認識
ヒアラブルへの入力を想定したユーザ定義型ジェスチャ調査と IMUセンサによる耳タッチジェスチャの認識
 
Humanoid Virtual Athletics Challenge2024 技術講習会 スライド
Humanoid Virtual Athletics Challenge2024 技術講習会 スライドHumanoid Virtual Athletics Challenge2024 技術講習会 スライド
Humanoid Virtual Athletics Challenge2024 技術講習会 スライド
 
【JSAI2024】LLMエージェントの人間との対話における反芻的返答の親近感向上効果_v1.1.pdf
【JSAI2024】LLMエージェントの人間との対話における反芻的返答の親近感向上効果_v1.1.pdf【JSAI2024】LLMエージェントの人間との対話における反芻的返答の親近感向上効果_v1.1.pdf
【JSAI2024】LLMエージェントの人間との対話における反芻的返答の親近感向上効果_v1.1.pdf
 

レスポンシブWebデザインによる開発効率化