• Like
レスポンシブWebデザインの基礎
Upcoming SlideShare
Loading in...5
×

レスポンシブWebデザインの基礎

  • 79,012 views
Uploaded on

レスポンシブWebデザインの概要から実装の基本まで。

レスポンシブWebデザインの概要から実装の基本まで。

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
79,012
On Slideshare
0
From Embeds
0
Number of Embeds
42

Actions

Shares
Downloads
473
Comments
0
Likes
202

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. 小川 裕之 レスポンシブWebデザインの基礎 13年10月8日火曜日
  • 2. 印刷会社で DTP オペレーターとして 2 年間勤めたあと退職し、 Web デザイナーのアルバイトとして複数の制作会社を転々としたり 海外に行ったりしたあと横浜の制作会社に務める。 制作会社でデザイン、コーディング、ディレクション、 コンサル等を幅広く経験する。2012 年 4 月よりフリーランスとして独立。 「レスポンシブWebデザイン入門」執筆 小川 裕之 barchin  hiro.ogw 13年10月8日火曜日
  • 3. レスポンシブWebデザインとは 13年10月8日火曜日
  • 4. 13年10月8日火曜日
  • 5. Photo by Jeremy Keith スマートデバイスの増加 13年10月8日火曜日
  • 6. 1日の平均インターネット接続時間 博報堂DYメディアパートナーズ メディア環境研究所「メディア定点調査2013」より 72,8分 50.6分 13年10月8日火曜日
  • 7. マルチデバイス対応の手法 •レスポンシブWebデザイン •デバイス専用サイト •プログラム変換 13年10月8日火曜日
  • 8. RWDの特徴 •URLがひとつ •ワンソース •更新が比較的簡単 •新しいデバイスにも対応しやすい 13年10月8日火曜日
  • 9. ワンソースで各デバイスの画面サイズに 対応したレイアウトを実現 HTML CSSCSS CSS 幅768px 以下 幅480px 以下 幅769px 以上 13年10月8日火曜日
  • 10. URLがひとつ 13年10月8日火曜日
  • 11. ワンソース 13年10月8日火曜日
  • 12. HTML CSSCSS CSS 更新の手間が少ない 更新 ! ! ! 13年10月8日火曜日
  • 13. 新しいデバイスにも対応しやすい ? ? ? ? ? 13年10月8日火曜日
  • 14. それぞれのメリット・デメリット 手法 メリット デメリット レスポンシブWebデザイン 更新がラク URLがひとつ 無数のデバイスに適応できる 構成の制限 設計が難しい テストの工数が増える デバイス専用サイト デバイスの特性にあった最適化ができる デザインの自由度が高い 開発コストがかかる 更新の手間がかかる 新しいデバイスを判定する必要がある プログラム変換 更新が比較的ラク URLが共通 デザインの自由度が高い 開発コストがかかる 新しいデバイスを判定する必要がある 13年10月8日火曜日
  • 15. レスポンシブWebデザインの実装 13年10月8日火曜日
  • 16. A LIST APART 13年10月8日火曜日
  • 17. RWDを実現する要素 •Fluid Grid •Fluid Image •Media Queries 13年10月8日火曜日
  • 18. Fluid Grid 13年10月8日火曜日
  • 19. 規則性をもったライン(Grid)にそって コンテンツを配置 Grid Design 13年10月8日火曜日
  • 20. グリッドの幅を相対値で指定 Fluid Grid % 13年10月8日火曜日
  • 21. 求める要素の幅 親要素の幅 100% 相対値の求め方 620px 300px 960px 60px 20px 13年10月8日火曜日
  • 22. =64.58333% 300÷960×100 960px 相対値の求め方 620÷960×100 =31.25% 求める要素の幅 親要素の幅 100% 13年10月8日火曜日
  • 23. Fluid Grid Systemが便利 pxからいちいち計算するのは手間 13年10月8日火曜日
  • 24. 960px 60px 20px 1カラム=60px÷960px×100%=6.25% 13年10月8日火曜日
  • 25. 960px 60px 20px 1カラム=60px÷960px×100%=6.25% 2カラム=(60px×2+20)÷960px×100%=14.58333% 13年10月8日火曜日
  • 26. 960px 60px 20px 1カラム=60px÷960px×100%=6.25% 2カラム=(60px×2+20)÷960px×100%=14.58333% 3カラム= (60px×3+20×2) ÷960px×100%=22.91667% 4カラム= (60px×4+20×3) ÷960px×100%=31.25% 5カラム= (60px×5+20×4) ÷960px×100%=39.5833% 13年10月8日火曜日
  • 27. 8カラム 4カラム 100% =31.25%=64.58333% 13年10月8日火曜日
  • 28. px % 幅を相対値にする 13年10月8日火曜日
  • 29. Fluid Image 13年10月8日火曜日
  • 30. 画像が親要素より はみ出してしまう 画像を可変にする 13年10月8日火曜日
  • 31. <img src="photo.jpg" alt="photo"> img{ max-width: 100%; height: auto; } HTML CSS 画像を可変にする 親要素内に 収まる 13年10月8日火曜日
  • 32. Media Queries 13年10月8日火曜日
  • 33. メディアタイプと特性に関する条件を調べ その結果に応じて処理を行う 13年10月8日火曜日
  • 34. @media screen and (min-width: 640px){ body{ background-color: red; } } メディアがスクリーンで表示領域幅が 640px以上の場合背景色を赤にする メディアタイプ メディア特性 13年10月8日火曜日
  • 35. メディア特性 情報 max-/min- width 表示領域の幅 ○ height 表示領域の高さ ○ device-width デバイスの横方向の解像度 ○ device-height デバイスの縦方向の解像度 ○ orientation 表示領域の向き ☓ resolution 解像度 ○ 13年10月8日火曜日
  • 36. @import url ("pc.css") screen and (min- width:600px); <link rel="stylesheet" href="pc.css" media="screen and (min-width:600px)"> @media screen and (min-width:600px){ /*style*/ } CSS CSS HTML 13年10月8日火曜日
  • 37. body{ backgorund-color:red; } モバイルファースト 1025px768px 全サイズ に適用 13年10月8日火曜日
  • 38. body{ backgorund-color:red; } @media screen and (min-width:768px){ body{ backgorund-color:blue; } } モバイルファースト 1025px768px 幅768px 以上に適用 全サイズ に適用 13年10月8日火曜日
  • 39. 幅1025px 以上に適用 body{ backgorund-color:red; } @media screen and (min-width:768px){ body{ backgorund-color:blue; } } @media screen and (min-width:1025px){ body{ background-color:yellow; } } モバイルファースト 1025px768px 幅768px 以上に適用 全サイズ に適用 13年10月8日火曜日
  • 40. body{ backgorund-color:red; } 767px1024px デスクトップファースト 全サイズ に適用 13年10月8日火曜日
  • 41. body{ backgorund-color:red; } @media screen and (max-width:1024px){ body{ backgorund-color:blue; } } 767px1024px デスクトップファースト 幅1024px 以下に適用 全サイズ に適用 13年10月8日火曜日
  • 42. body{ backgorund-color:red; } @media screen and (max-width:1024px){ body{ backgorund-color:blue; } } @media screen and (max-width:767px){ body{ background-color:yellow; } } 767px1024px デスクトップファースト 幅767px 以下に適用 幅1024px 以下に適用 全サイズ に適用 13年10月8日火曜日
  • 43. モバイルファーストのメリット •スタイルが少なくなる #main{ float:left; width:80%; } @media screen and (max-width: 639px){ #main{ float: none; width: auto; } } デスクトップファースト @media screen and (min-width: 640px){ #main{ float: left; width: 80%; } } モバイルファースト 13年10月8日火曜日
  • 44. デスクトップファーストのメリット •Media Queriesに非対応のブラウザ対応が簡単 デスクトップファーストモバイルファースト 13年10月8日火曜日
  • 45. ブレイクポイント 13年10月8日火曜日
  • 46. @media screen and (min-width: 480px){ /*style*/ } @media screen and (min-width: 940px){ /*style*/ } 940px480px ブレイクポイント 13年10月8日火曜日
  • 47. Sorce:Design Spice サイトによって様々 13年10月8日火曜日
  • 48. ブレイクポイントを決めるヒント •主要となるデバイスの幅から •コンテンツの最適なレイアウトから 13年10月8日火曜日
  • 49. デバイスの幅から 主要となるデバイス、シェアの多いデバイスなど を元に決める 13年10月8日火曜日
  • 50. コンテンツから 動かしてみて調整が必要な部分に適時ブレイク ポイントを追加する 13年10月8日火曜日
  • 51. @media screen and (min-width: 768px){ body{ background-color: red; } } 幅をemで指定 768px=48em1em=16px 13年10月8日火曜日
  • 52. メディアがスクリーンで表示領域幅が 48文字以上の場合、背景色を赤にする 幅をemで指定 768px=48em1em=16px @media screen and (min-width: 48em){ body{ background-color: red; } } 13年10月8日火曜日
  • 53. Viewport 13年10月8日火曜日
  • 54. Viewportに指定されたサイズで ページを描画する 980pxのウインドウサイズで アクセスしたときと同じ表示 13年10月8日火曜日
  • 55. <meta name="viewport" content="width=device-width, initial-scale=1"> そのデバイスの幅で サイトが表示される 13年10月8日火曜日
  • 56. RWDでよくある問題点 13年10月8日火曜日
  • 57. RWDでよくある問題点 •古いブラウザ対応の考え方 •どのようなワークフローで進めるのか •カンプをどのようにつくるか 13年10月8日火曜日
  • 58. 古いブラウザ対応の考え方 Photo by rosefirerising 13年10月8日火曜日
  • 59. 最近のブラウザ 古いブラウザ 装飾は劣るが最低限の機能は提供 グレイスフルデグラデーション 基準 グレイスフル デグラデーション 13年10月8日火曜日
  • 60. どのようなワークフローで進めるのか Photo by the pale side of insomnia 13年10月8日火曜日
  • 61. •特定のデバイス対応 •コンテンツの幅は固定 •どの表示領域幅でもレイアウトは変わらない ワークフローを見直す 今までの サイト •マルチデバイス対応 •コンテンツの幅は可変 •表示領域幅でレイアウトが変わる RWD 13年10月8日火曜日
  • 62. 作ってみないとわからない 13年10月8日火曜日
  • 63. 情報 設計 画面 設計 プロト タイプ デザイン 実装 調整 テスト テスト ワークフロー例 13年10月8日火曜日
  • 64. 情報 設計 画面 設計 プロト タイプ デザイン 実装 調整 テスト テスト 早めにプロトタイプを作成して テストをしながら完成へと近づける 13年10月8日火曜日
  • 65. カンプをどのようにつくるか 13年10月8日火曜日
  • 66. = 従来のサイト制作におけるカンプ 13年10月8日火曜日
  • 67. =         RWDにおけるカンプ 13年10月8日火曜日
  • 68. 体制や案件に応じて作り方を変える •各ブレイクポイントで作成 •PCサイズのみ作成する •主要な部分のみ作りこんで 他はざっくりと •Designing in the browserで 13年10月8日火曜日
  • 69. その都度都度で体制を柔軟に 変えられることが大事 13年10月8日火曜日
  • 70. さらに最適化を 13年10月8日火曜日
  • 71. Responsive Web Design Performance Responsive Web Design Usability Content Strategy User Interface Readability SEO Accessibility Information Architecture User Experience Visual Design 13年10月8日火曜日
  • 72. Responsive Web Design Usability Performance Content Strategy User Interface Readability SEO Accessibility Information Architecture User Experience Visual Design 13年10月8日火曜日
  • 73. Good performance is good design Brad Frost 13年10月8日火曜日
  • 74. 表示に時間が かかる 光回線3G回線 13年10月8日火曜日
  • 75. 画像の最適化 •CSSを使う •画像を圧縮する •Webフォント •画像を差し替える 13年10月8日火曜日
  • 76. CSSを使う #btn{ padding: 0.5em; display: inline-block; font-size: 40px; color: #333; font-weight: bold; letter-spacing: 0.1em; background: #83a603; background: -webkit-linear-gradient(top, #83a603, #769300); background: -moz-linear-gradient(top, #83a603, #769300); background: -o-linear-gradient(top, #83a603, #769300); background: linear-gradient(to bottom, #83a603, #769300); border-radius: 10px; box-shadow: 0px 5px 2px #274000,0px 0px 3px #96b618 inset; text-shadow: -1px -1px 0px rgba(255,255,255,0.2); border: 4px solid #558b00; } 13年10月8日火曜日
  • 77. 画像を圧縮する JPEGmini 13年10月8日火曜日
  • 78. 画像を圧縮する •JPEGmini •ImageOptim •PunyPNG 13年10月8日火曜日
  • 79. 画像を圧縮する 915kb 1200px×800px 350kb 38%!! 13年10月8日火曜日
  • 80. Webフォントを使う Google Fonts 13年10月8日火曜日
  • 81. Webフォントを使う •Google Fonts •Adobe Edge Web Fonts •FONT PLUS •Type Square 13年10月8日火曜日
  • 82. Webアイコンフォントを使う Ico Moon 13年10月8日火曜日
  • 83. Webアイコンフォントを使う Font Awesome •Font Awesome •IcoMoon •Fontello 13年10月8日火曜日
  • 84. <script src="matchmedia.js"></script> <script src="picturefill.js"></script> <span data-picture data-alt="pic"> <span data-src="img/smallImage.jpg"></span> <span data-src="img/largeImage.jpg" media="(min-width: 600px)"></span> <noscript><img src="img/smallImage.jpg" alt="pic"></noscript> </span> 600px smallImage.jpg largeImage.jpg 画像を差し替える 13年10月8日火曜日
  • 85. 画像を差し替える Font Awesome •Picturefill •Responsive Images •Adaptive Images 13年10月8日火曜日
  • 86. Responsive Images Chart 13年10月8日火曜日
  • 87. RWDとこれからのWeb 13年10月8日火曜日
  • 88. Android Fragmentation Visualized 多様化するデバイス 13年10月8日火曜日
  • 89. Future of Screen Technology Productivity Future Vision 13年10月8日火曜日
  • 90. それぞれのデバイス専用にサイトを作るのは 現実的ではなくなってくる 少ない労力でより多くのデバイスに 対応できるのが理想 13年10月8日火曜日
  • 91. Best practice? Photo by Jeremy Keith 13年10月8日火曜日
  • 92. RWDは発展途上 •Media Queries Level4 •Responsive Images •flexbox ,Regions,Column,... •vw,vh 13年10月8日火曜日
  • 93. Photo by Barb Dybwad 考え方も変える 13年10月8日火曜日
  • 94. 完全を求めない Photo by Peter Miller 13年10月8日火曜日
  • 95. “The control which designers know in the print medium, and often desire in the web medium, is simply a function of the limitation of the printed page. We should embrace the fact that the web doesn’t have the same constraints, and design for this flexibility. But first, we must 'accept the ebb and flow of things.'” John Allsopp, “A Dao of Web Design” 13年10月8日火曜日
  • 96.         13年10月8日火曜日
  • 97.         13年10月8日火曜日
  • 98. What is king? Photo by Kyle Johnston 13年10月8日火曜日
  • 99. 未来を想像し、変化に順応する Photo by dalioPhoto 13年10月8日火曜日
  • 100. まとめ 13年10月8日火曜日
  • 101. 本日のまとめ •RWDはワンソースでマルチデバイスに対応する手法 •RWDを実装する要素 (Fluid Grid,Fluid Image,Media Queries) •グレイスフルデグラデーションで進められるとよい •早めにテストを行いリスクを減らし効率的に進める •カンプをつくるつくらないは案件に応じて •パフォーマンスを上げるため画像を最適化する •変化は必ず訪れるので少しずつ順応していく 13年10月8日火曜日