60分でわかるレスポンシブWebデザイン［セミナー資料］
•Download as PPT, PDF•
0 likes•2,011 views
2014/03/19にデジタルハリウッド［ オンラインセミナー］としておこなわれた資料です。
Recommended
More Related Content
Viewers also liked
Viewers also liked (20)
Similar to 60分でわかるレスポンシブWebデザイン［セミナー資料］
Similar to 60分でわかるレスポンシブWebデザイン［セミナー資料］ (20)
More from Daisuke Yamazaki
Recently uploaded
Recently uploaded (10)
60分でわかるレスポンシブWebデザイン［セミナー資料］
- 1. 6060 分でわかる分でわかるレスポンシブ レスポンシブ WebWeb デザインデザイン 〜 セミナー資料〜
- 2. 自己紹介 ・デジタルハリウッド大学院 非常勤講師 ・デジタルハリウッド 講師： PHP 講座 、スマートフォン＆レスポンシブ Web 講座など多数 ・ Venezia-Works （ 代表 ） ・ INOP ・ U-SYS ・ html5j HTML5ビギナーズ 自己紹介
- 3. 自己紹介 マイクロソフト MVP （ BingMapsDevelopment ） MicrosoftMVP って？ マイクロソフトが個人の活動を評価する、特別な賞。 MVP (Most Valuable Professional) アワード プログラムは、マイクロソフ トの製品やテクノロジーに関する豊富な知識と経験を持ち、オンライン またはオフラインのコミュニティや、メディアなどを通して、その優れ た能力を幅広いユーザーと共有している個人を表彰するものです。 MVP アワードの表彰は全世界で行われており、現在は、世界 90 か国以 上、 4,000 名を超える方々が MVP として精力的な活動を続けています 。
- 4. 4 ＠ IT 「 HTML5 アプリ作ろうぜ！」記 事連載、日経ソフトウエア、日経 BP 、 SoftwareDesign 、 ITPro… など Web 業界誌での情報発信から Web 技術者 の人材育成 など多方面で活動。 自己紹介 代表的な著書： レスポンシブ Web デザイン 「超」実践デザイン集中講義
- 5. 5 韓国で も
- 7. 従来求められてる Web サイト 0 情報を正しく表示するサイト 0 目的の情報を探しやすいサイト 0 集客を上げられるサイト SEO 、広告、ソーシャルメディアとの連携 0 バリアフリーなサイト 視覚障害者（画面を見れない）、身体障害者（マウス使えない）、 高齢者
- 8. 今これから求められる Web サイト 「マルチデバイス対応」 0「さまざまなデバイスで正しく表示・ 利用できるサイトを制作 」 先ほどのスライドをに追加して ．．． PC タブレット スマートフォン そうな の？
- 9. 今これから求められる Web サイト 0 情報を正しく表示するサイト 0 目的の情報を探しやすいサイト 0 集客を上げられるサイト 0 バリアフリーなサイト 0 マルチデバイス対応 PC 、携帯電話＋スマートフォン、タブレットなど やること増えたね
- 11. 現在の Web では不十分なのか？ モバイル向けサイトの必要性 今はパソコンは持っていなくても・・・ スマートフォン （携帯電話フィーチャーフォンも） タブレット （ iPad, Nexus, Kindle… ） を持ってる人の比率は日々増加してます。 オレも持ってるよ！
- 12. 現在の Web では不十分である理由 モバイル向けサイトの必要性 パソコンではなく、 スマートフォン・タブレット を Web 閲覧のメインデバイスとして使う時代に来て います。 スマートデバイスを優先でサイトを構築する時代なのかも知れません 。
- 15. トヨタ http://www.toyota.co.jp/ 確認方法： Chrome Developer ツール <head> <link rel="stylesheet" href="/jpn/components/styles/common.css"> http://www.toyota.co.jp/jpn/components/styles/navigation_main.css http://www.toyota.co.jp/jpn/components/styles/top.css
- 19. 従来のマルチデバイス対応方法 サイト A （ PC 向け） www.domainname.com/A/ www.domainname.com/B/ www.domainname.com/C/ サイト C （スマートフォン） サイト B （タブレット向け） URL ： デバイス毎にディレクトリを分ける http://www. /…●●● http://www. /…●●● http://www. /…●●● 広告例）
- 20. 従来のマルチデバイス対応方法 サーバサイド、クライアントスクリプトにて切り分け <?php /* UserAgent Switch */ $ua=$_SERVER['HTTP_USER_AGENT']; if((strpos($ua,’iPhone’)!==false)||(strpos($ua,’iPod’)!==false)|| (strpos($ua,’Android’)!==false)) { header(“Location:/sp/index.php”); exit(); } ?> <?php /* UserAgent Switch */ $ua=$_SERVER['HTTP_USER_AGENT']; if((strpos($ua,’iPhone’)!==false)||(strpos($ua,’iPod’)!==false)|| (strpos($ua,’Android’)!==false)) { header(“Location:/sp/index.php”); exit(); } ?>
- 21. ユーザーエージェント ( 自動振り分けの注意点 ) ・新たなデバイスが発売された場合 ( デバイスのユーザーエージェントを調査し振り分け処理を確認・追加する作業が必要 ) ・必要なスクリプトなどの技術を習得している人材が必要
- 22. ワンソースでマルチデバイス対応 （レスポンシブ Web デザイン） ・ Javascript のようなプログラミング （スクリプト）知識は必要ない ・ CSS の知識で作成できる ・ ワンソース （ HTML と CSS ）で作成可 能 デザイナーの方には是非覚えてほしい手法です ブラウザのスクリーンサイズ（解像度） を基準にレイアウトを調整することがで きるのでマルチスクリーンに対応した Web サイトを制作できるのが特徴です。
- 23. こっから DEMO 見し て！
- 24. DEMODEMO サンプル
- 25. DEMODEMO フォーム
- 27. 今日はここまで で・・・
- 28. レスポンシブ Web デザイン 誰が？いつ頃から？ レスポンシブ Web デザイン提唱者： ETHAN MARCOTTE 氏（イーサン・マルコット氏） 2010 年 5 月 25 日 に ブログで紹介したマルチデバイス対応の Web サイト制作 の手法 「 RWD 」です。
- 29. レスポンシブ Web デザイン どんなことができるの？ レスポンシブ Web デザイン提唱者： ETHAN MARCOTTE 氏（イーサン・マルコット氏） 記事内容： Media Query を使ってレイアウトし、例えば１カラムを２カラム に流動的に変形させる事を指し、閲覧されたそのデバイスの解像度によって 柔軟に、シンプルに最適化（フルードグリッド、フルードイメージ）させる 。
- 30. • 画面を各デバイスに合わせてソースを複数作る必要がない、作業工数の軽減に繋がる • ワンソースで管理するのでメンテナンスがしやすくなる • １つの URL のみにアクセスを集中できる （各デバイスごとに TOP ページを分けた場合、ページヘのアクセスが分散化される） • １つの URL だけなので、告知・宣伝等がやりやすくなる • HTML/CSS などのクライアント技術のみで実装できるため Web デザイナーが実装できる レスポンシブ Web デザイン メリット・デメリット メリット
- 31. • 芸術的な見せ方、拘りのあるビジュアルなサイトにはデメリットの可能性あり • ワンソースで各デバイスに対応するため、設計 / デザインの調整に時間がかかる • ワンソースで対応するため、より高度で複雑な設計となる可能性がある • 全デバイスに必要なソースコードも読み込みます、必要のない要素も一緒に読み込 まれてしまい、ページの読み込み時間やレンダリング速度に影響する可能性も考慮 する必要があります。 レスポンシブ Web デザイン メリット・デメリット デメリット
- 33. Media Query とは？ スクリーンサイズ（デバイスサイズ）により CSS スタイルを複数指定するこ とを可能にします。この CSS を複数指定することを可能したのが CSS3 の 「 MediaQueries 」です。 特徴： デバイスごとの細かい配慮／工夫は向いていません。 特定のデバイスにだけ特別な工夫をしようと思った場合に、 他のデバイス（ CSS スタイル）への影響も出る可能性が考えられます。
- 34. 何を基準にして設計・構築する？ まずスマートフォンを基準に考えることの方が、作る上で簡単なはずです。 各デバイスの画面表示をスマートフォン用のスタイルを最初に定義し、タブ レット、パソコン用の順番でスタイルを決めた方が設計・構築はスムーズか と思います。 （例：スマートフォン 480px → タブレット 768px → パソコン 980px ） スマートフォンサイトから考える
- 35. ブレイクポイントとは メディアクエリを使用した方法で画面サイズ別に CSS スタイリングする場合 （例：スマートフォン 320px → タブレット 788px → パソコン 880px ） と画面サイズの境目を先に決め手しまします。この決めた画面サイズに合わせ て CSS スタイルを切り替える事ができ、この決めた画面サイズによる切り替え のポイントを、「ブレークポイント」と呼びます。 ブレークポイントを決めておく
- 36. Media Query 書き方１ @media ひとつの CSS ファイル内で振り分け @media screen and (min-width: 481px) { body {...} } @media screen and (min-width: 768px) { body {...} } Link 複数 CSS ファイルを link 要素で読み込む <link href=”sp.css"> <link media="screen and (min-width: 481px)" href="tablet.css"> <link media="screen and (min-width: 768px)" href="desktop.css"> @import 複数 CSS ファイルを import 要素で読み込む @import url(”sp.css"); @import url("tablet.css") only screen and (min-width: 481px); @import url("desktop.css") only screen and (min-width: 768px);
- 37. @media が使いやすい Media Query 書き方２ <link… @import… 複数 CSS ファイルに分けてブレイクポイント（スマホ、タブレット、パソコ ン）を管理するとスタイル管理しやすくなりそうですが、 @media の方法で単一 CSS ファイルにした方が、 「 HTTP リクエスト数を節約できる 」 特典があります。 スマートデバイスの３ G 回線にもよい。
- 39. 注意ポイント デスクトップ上でのブラウザ実行は ☓ です。 http://…. https://…. のように実際に Web サーバ上に上げて確認する必要が有り ます。 ※XMAPP など PC に Web サーバを作るのは OK ！
- 45. 参考サイト ■Nathan Sawaya （ http://brickartist.com/ ） キービジュアルの画像がスライド（フェードイン・フェードアウトで切り替わ
- 46. 参考サイト ■COOP （ http://coworkchicago.com/ ） 右側からパソコン、タブレット、スマートフォンサイズの表示なりますが、スマー トフォンのサイズ（左側）が大きくデザインが変わります。
- 47. Adobe 社 「 Dreamweaver CS6 と HTML5 で始めようスマートフォン＆タブレット対応」 http://adobe-html5.jp/ アドビシステムの HTML5 特設サイトもレスポンシブ Web デザインで作成され てます。ブレイクポイントは 0 〜 520px の場合は 1 カラムレイアウ ト、 520px 〜 920px の間は 2 カラムレイアウト、 920px 〜より大きい場合は 3 カラムレイアウトの表示となります。 ブレイクポイント： 520px, 920px 参考サイト