レスポンシブwebデザインについてまとめた資料です

1. 2017/2/11 Ver.1.0
Hirotaka Ichimura
1
レスポンシブwebデザイン

2.  レスポンシブweb
デザインとは
 制作の流れ
 デザインデータの作成
 マークアップ
2
アジェンダ
 メディアクエリー
 ブレイクポイント
 プログラム
 その他

3. レスポンシブ
webデザインとは
3
01

4. 4
レスポンシブwebデザイン
という言葉は
知っている人の方が
多いと思います

5. 5
一つのHTMLで各端末の
表示内容を変える方法

6. 6
http://www.excite.co.jp/News/product/20170123/Dime_336829.html
• スマホからのネット接続が
7割を超えた
• スマホは持つのは一般的
• スマホからサイトを見ることは当たり前

7. 7
スマホ用のサイト構築は
当たり前

8. 8
仕事で作れないといけない

9. 制作の流れ
9
02

10. 10
レスポンシブwebデザインは
制作の流れが大きく2種類
ウォーターフォール
モデル
プロトタイピング
モデル

11. 11
ウォーターフォールモデル
水が上から下へと流れるよう
に、順番に作業をこなす方法
1

12. 12
ワイヤーフレーム
クライアント検収
モックアップ
デザイン完成
コーディング
あ
る
作
業
工
程
が
こ
ん
な
形
で
あ
っ
た
と
き

13. 13
ワイヤーフレーム
クライアント検収
モックアップ
デザイン完成
コーディング
デ
ザ
イ
ナ
ー
が
画
像
ア
プ
リ
で
担
当

14. 14
ワイヤーフレーム
クライアント検収
モックアップ
デザイン完成
コーディング
デザインができたらマーク
アップエンジニアへ

15. 15
ワイヤーフレーム
クライアント検収
モックアップ
デザイン完成
コーディング
ページができたら
クライアントが確認

16. 16
このとき

17. 17
ワイヤーフレーム
クライアント検収
モックアップ
デザイン完成
コーディング
直し
て!!

18. 18
ワイヤーフレーム
クライアント検収
モックアップ
デザイン完成
コーディング
ここまで
戻る
直し
て!!

19. 19
これを「手戻り」
といいます

20. 20
「手戻り」
が複数回行われると

21. 21
ワイヤーフレーム
クライアント検収
モックアップ
デザイン完成
コーディング
ここまで
戻る
直し
て!!

22. 22
終わらない
デススパイラル

23. 23
修正があった場合、デザインまで
戻って作り直す
ウォーターフォールモデルの弱点
デザイン制作費の負担
開発期間の延長

24. 24
プロトタイピングモデル
簡単な試作を作り、クライア
ントに確認を得て進める方法
2

25. 25
ワイヤーフレーム
コーディング
クライアント検収
モックアップ
デザイン完成

26. 26
デザインを作る前に
レスポンシブに合わせた
画面設計をHTML等で行う

27. 27
ワイヤーフレーム
コーディング
クライアント検収
モックアップ
デザイン完成
ここはマークアップ
エンジニアの担当

28. 28
作成した試作画面を
クライアントに確認することで
手戻りを減らす

29. 29
ワイヤーフレーム
コーディング
クライアント検収
モックアップ
デザイン完成
先に確認!!

30. 30
ワイヤーフレームの時点で
デザインのレイアウトを
確定させることができる

31. 31
ワイヤーフレーム
コーディング
クライアント検収
モックアップ
デザイン完成
レスポンシブ
リッチコンテンツまで作る

32. 32
マークアップエンジニアの負担
プロトタイピングモデルの弱点
試作段階での手戻り増加
デザイナーとの連携

33. 33
両者とも一長一短があるため
ベストは方法は決められない

34. 34
どの手法を使って進めるかは
会社によって違う

35. 35
企画段階から
良い設計が出来るよう
考える

36. デザインデータの作成
36
03

37. 37
デザイン用アプリ
1. Photoshop
2. Illustrator
3. Sketch
4. Adobe XD
Retina
ディスプレイに
対応しているか

38. 38
端末別にデザインを作り
アートボードを分ける

39. 39
解像度は144dpi
倍角画像を書き出すとき
画像が劣化しない

40. 40
最近のスマホで使う
3倍、4倍の画像はどうするの？
Q
対応しない
A

41. 41
大きい画像は容量の関係上
難しい状況

42. 42
画像書き出し(スライス)
アセット機能 アートボード別

43. 43
アセット機能を使うと
一度に倍角画像が書き出せる
レスポンシブ用の画像によっては
不要になるリスク

44. 44
アートボード別だと
専用の画像を書き出せるが
手数がかかる

45. 45
画面幅
http://gs.statcounter.com/
 1920px
 1366px
 1024px
 768px
 640px
 480px
 320px

46. 46
レイヤーの構成
パーツは
グループフォルダー
に階層構造で
まとめる

47. 47
ロゴ、アイコン
ロゴ：SVGファイルで拡大縮小対策
データを軽く保つ
アイコン：アイコンフォントを使う
Font Awesomeなど
専用アイコンを追加インストール
http://fontawesome.io

48. 48
デザイン完成後
ディレクター検収
クライアント検収
スライス
マークアップ
エンジニアへ

49. 49
注意点
デザイナーが外注で
生データがもらえない場合
JPGなどのデータ
スライスデータをもらうように

50. マークアップ
50
04

51. 51
HTMLやCSSに追加された新機能は
ブラウザにより使えない可能性
Can I useで確認

52. 52
flexはIE９で動かない
responshive.jsを使う

53. 53
srcset属性がIE11などで動かない
使わない

54. 54
CSSの記述
フレームワークを使う
Bootstrapなど
CSS設計を行う
SMACSS、OOCSS、BEMなど

55. 55
下記端末の下位バージョンに
対応させるかどうかがポイント
Android IE

56. 56
作業効率化
 gulp
 Sass
 Git
 テンプレートエンジン
 IDE

57. メディアクエリー
57
05

58. 58
メディアクエリーを使うと
画面幅等に対して
レイアウトを
大きく変化させることが可能

59. 59
<meta name=viewport content="width=device-width, initial-scale=1">
HTML内に下記を記述
スマホのページが
意図したレイアウトで表示される

60. 60
@media screen and (プロパティ名: 値) { }
CSSに下記を記述

61. 61
PCベースか
スマホベースか
or ?

62. 62
PCベースの場合
max-widthを基準にして指定
画面幅の大きい方

63. 63
スマホベースの場合
min-widthを基準にして指定
画面幅の小さい方

64. 64
Retina対応
device-pixel-ratioで指定
現在は2まで

65. 65
srcset属性を使う事で
画像を切り替える事が可能

66. 66
srcset属性がIE11などで動かない
使わない

67. ブレイクポイント
67
06

68. 68
メディアクエリーで
表示方法を振り分ける線引きが
ブレイクポイント

69. 69
表示する端末の
画面幅できめる

70. 70
画面幅
 1920px
 1366px
 1024px
 768px
 640px
 480px
 320px

71. 71
画面幅
PC大、通常
 1920px
 1366px
 1024px
 768px
 640px
 480px
 320px

72. 72
画面幅
タブレット横、縦
 1920px
 1366px
 1024px
 768px
 640px
 480px
 320px

73. 73
画面幅
スマホ大、横、縦
 1920px
 1366px
 1024px
 768px
 640px
 480px
 320px

74. 74
タブレットへの対応や
最新のスマホ対応は？

75. 75
ターゲットユーザーが
使用する端末によって
決める

76. プログラム
76
07

77. 77
グローバルナビゲーションなど
動的なコンテンツは
jQueryのプラグインを使う

78. 78
Drawer
http://on-ze.com/demo/jquery-drawer/
Slidebars.js
http://demo.mismithportfolio.com/test21/

79. 79
リッチコンテンツ
CSSで出来るものはCSSで
基本はjQueryのプラグイン
要望に応じてフルスクラッチ

80. 80
 bxSlider
 lightbox
 Swiper
 Simple Multi-Item Slider
リッチコンテンツ

81. その他
81
Ex

82. 82
 http://www.excite.co.jp/News/product/20170123/Dime_336829.ht
ml
 http://gs.statcounter.com/
 http://fontawesome.io/
 http://on-ze.com/demo/jquery-drawer/
 http://demo.mismithportfolio.com/test21/
 プロが教えるレスポンシブWebデザイン 現場のメソッド レイアウト
 http://responsive-jp.com/
参考

83. 83
以上!!