1. たにぐち まこと
Build Insider OFFLINE
スマートフォンサイトのこれから
∼ レスポンシブ・Webデザインは救世主となり得るか

4. 本日の内容
レスポンシブWebデザイン
「1ソース」の幻想
頑張らないRWD
ライブラリを使ったRWD
スマホ対応しない
これからのサイト制作

5. レスポンシブWebデザイン

6. アプリから学ぶインターフェイス
Facebook
ひきだす
画面幅でレイアウトが変化

7. アプリから学ぶインターフェイス
Facebook
画面幅でレイアウトが変化
@media screen and (max-width: 600px)
{
...
}
メディアクエリ

8. アプリから学ぶインターフェイス
Facebook
ひきだす
柔軟性のある装飾文字

9. アプリから学ぶインターフェイス
Facebook
柔軟性のある装飾文字
Webフォント

10. Facebook
大きさの変化する画像

11. アプリから学ぶインターフェイス
Facebook
ひきだす
大きさの変化する画像
img {
max-width: 100%;
}
Fluid Image

12. demo

13. Googleも推奨

14. 今後はRWD？

15. 主要64サイト調査してみた

16. 主要64サイト調査してみた
わずかに 1サイト…

17. NTT東日本
大和総研グループ
帝人
もちろん採用する大企業もありますが…

18. なぜ？

19. レイアウトに制限

20. 日本語は大きくすると、美しくない

21. 日本語Webフォントは負荷が高い

22. 要素が変わると分かりにくい

23. powered by「1ソース」の幻想

24. 例えば、こんなギミック

25. さまざまな Android端末でテストしてみた

26. トラブル１：重ねた下のボタンが反応する
原因：レイヤーを重ねたため

27. トラブル１：カルーセルが動かない
原因：Android 1.6だから

28. トラブル１：こんな端末も
飛んでっちゃう

29. トラブル2：謎のマージン
原因：CSSの解釈が異なる？

30. トラブル2：不可解な発生機種パターン

31. トラブル4：スクロールバーが出てしまう
Xperiaと、HT-03Aのみ。謎。

32. 1ソースで複雑な動きは無理

33. ますます増えるプラットフォーム

34. いったい、どうしたら…

35. 解決策
がんばらないRWD
ライブラリを使う
スマホ対応しない

36. がんばらないRWD
1

37. 1ソースであるべき

38. だめ？

39. Fluidであるべき

40. だめ？

41. 操作を統一すべし

42. だめ？

43. 「べき論」から入るより本質を

44. ライブラリを使う
2

45. Bootstrap

46. Foundation

47. Kube

48. demo

49. グリッドを利用したRWD

50. タッチデバイスを意識したパーツ

51. JavaScriptを利用したインターフェイス

52. ここがイイ！
簡単・スピーディー
変更もラク
デザインが こぎれい

53. しかし…
デザインを変更しにくい
準備されている機能に限りがある
ブレイクポイントは1つ

54. サイト制作フローを変化させる
設計
デザイン
コーディング
プログラミング

55. サイト制作フローを変化させる
設計
デザイン
コーディング
プログラミング
設計
デザイン
コーディング
プログラミング
Designing in the browser

56. スマホ対応しない
3

57. Apple

58. キヤノン

59. GAP

60. スマホ対応しない
?

61. Apple
地味に対応

62. キヤノン
PCだとすごく大味

63. GAP
タブレットだとイイ感じ

64. スマホ対応しない

65. スマホ対応しない

66. PC対応しない

67. リサーチしてみました
10代
20代
30代
40代
50代
60代
0 10 20 30 40
男性 女性
無職
2%学生
18%
主婦（主夫）
38%
社会人
42%

68. A. PC B. スマホ
Web閲覧に、普段利用するのは？

69. Web閲覧に、普段利用するのは？
同じくらい
15%
スマホ
35%
PC
50%

70. スマホサイト（RWDを含む）をどう思う？
A. 見やすくなるなら、よいと思う
B. PCサイトがそのまま見えた方がよい

71. どちらでもよい
16%
PCサイトで良い
26%
スマホサイトが良い
59%
スマホサイト（RWDを含む）をどう思う？
PCサイトが見にくいから？

72. これからのサイト制作

73. パーツは大きく
44×44pt 以上
iOS Human Interface Guidelines

74. パーツは大きく
44×44pt 以上
88×88pt
iOS Human Interface Guidelines

75. Retina Display
画素数4倍

76. 高精細に対応させる
2倍で作って 50%に

77. 画像を極力使わない
CSS3

78. SVGを活用する

79. 文字は大きく
http://www.imjp.co.jp/press/release/20130515_000959.html

80. 文字は大きく
http://www.imjp.co.jp/press/release/20130515_000959.html

81. 文字は大きく
http://www.imjp.co.jp/press/release/20130515_000959.html
16px

82. リンクエリアは広く

83. ボタンを準備、テキストリンクはしない

84. コントラストを高く
2011 2013

85. 横に項目を並べない
2011 2013

86. ユーザーに入力を求めない

87. 「あとで」をサポートする

88. まとめ

89. かつて、こんなものが…

90. スプラッシュFlash

91. ダイナミックHTML

92. ・・・

93. Flash ▶ デベロッパーツール

94. JavaScript ▶ Ajax

95. RWD ▶ ？

96. まとめ
RWDはPC→スマホの過渡期？
なにが必要なのかを見極める
「タッチファースト」でいこう

97. H2O SPACE 検索