たにぐち まことBuild Insider OFFLINEスマートフォンサイトのこれから∼ レスポンシブ・Webデザインは救世主となり得るか
本日の内容レスポンシブWebデザイン「1ソース」の幻想頑張らないRWDライブラリを使ったRWDスマホ対応しないこれからのサイト制作
レスポンシブWebデザイン
アプリから学ぶインターフェイスFacebookひきだす画面幅でレイアウトが変化
アプリから学ぶインターフェイスFacebook画面幅でレイアウトが変化@media screen and (max-width: 600px){...}メディアクエリ
アプリから学ぶインターフェイスFacebookひきだす柔軟性のある装飾文字
アプリから学ぶインターフェイスFacebook柔軟性のある装飾文字Webフォント
Facebook大きさの変化する画像
アプリから学ぶインターフェイスFacebookひきだす大きさの変化する画像img {max-width: 100%;}Fluid Image
demo
Googleも推奨
今後はRWD?
主要64サイト調査してみた
主要64サイト調査してみたわずかに 1サイト…
NTT東日本大和総研グループ帝人もちろん採用する大企業もありますが…
なぜ?
レイアウトに制限
日本語は大きくすると、美しくない
日本語Webフォントは負荷が高い
要素が変わると分かりにくい
powered by「1ソース」の幻想
例えば、こんなギミック
さまざまな Android端末でテストしてみた
トラブル1:重ねた下のボタンが反応する原因:レイヤーを重ねたため
トラブル1:カルーセルが動かない原因:Android 1.6だから
トラブル1:こんな端末も飛んでっちゃう
トラブル2:謎のマージン原因:CSSの解釈が異なる?
トラブル2:不可解な発生機種パターン
トラブル4:スクロールバーが出てしまうXperiaと、HT-03Aのみ。謎。
1ソースで複雑な動きは無理
ますます増えるプラットフォーム
いったい、どうしたら…
解決策がんばらないRWDライブラリを使うスマホ対応しない
がんばらないRWD1
1ソースであるべき
だめ?
Fluidであるべき
だめ?
操作を統一すべし
だめ?
「べき論」から入るより本質を
ライブラリを使う2
Bootstrap
Foundation
Kube
demo
グリッドを利用したRWD
タッチデバイスを意識したパーツ
JavaScriptを利用したインターフェイス
ここがイイ!簡単・スピーディー変更もラクデザインが こぎれい
しかし…デザインを変更しにくい準備されている機能に限りがあるブレイクポイントは1つ
サイト制作フローを変化させる設計デザインコーディングプログラミング
サイト制作フローを変化させる設計デザインコーディングプログラミング設計デザインコーディングプログラミングDesigning in the browser
スマホ対応しない3
Apple
キヤノン
GAP
スマホ対応しない?
Apple地味に対応
キヤノンPCだとすごく大味
GAPタブレットだとイイ感じ
スマホ対応しない
スマホ対応しない
PC対応しない
リサーチしてみました10代20代30代40代50代60代0 10 20 30 40男性 女性無職2%学生18%主婦(主夫)38%社会人42%
A. PC B. スマホWeb閲覧に、普段利用するのは?
Web閲覧に、普段利用するのは?同じくらい15%スマホ35%PC50%
スマホサイト(RWDを含む)をどう思う?A. 見やすくなるなら、よいと思うB. PCサイトがそのまま見えた方がよい
どちらでもよい16%PCサイトで良い26%スマホサイトが良い59%スマホサイト(RWDを含む)をどう思う?PCサイトが見にくいから?
これからのサイト制作
パーツは大きく44×44pt 以上iOS Human Interface Guidelines
パーツは大きく44×44pt 以上88×88ptiOS Human Interface Guidelines
Retina Display画素数4倍
高精細に対応させる2倍で作って 50%に
画像を極力使わないCSS3
SVGを活用する
文字は大きくhttp://www.imjp.co.jp/press/release/20130515_000959.html
文字は大きくhttp://www.imjp.co.jp/press/release/20130515_000959.html
文字は大きくhttp://www.imjp.co.jp/press/release/20130515_000959.html16px
リンクエリアは広く
ボタンを準備、テキストリンクはしない
コントラストを高く2011 2013
横に項目を並べない2011 2013
ユーザーに入力を求めない
「あとで」をサポートする
まとめ
かつて、こんなものが…
スプラッシュFlash
ダイナミックHTML
・・・
Flash ▶ デベロッパーツール
JavaScript ▶ Ajax
RWD ▶ ?
まとめRWDはPC→スマホの過渡期?なにが必要なのかを見極める「タッチファースト」でいこう
H2O SPACE 検索
Build Insider OFFLINE vol.01 スマートフォンサイトのこれから ~ レスポンシブ・Webデザインは救世主となり得るか
Build Insider OFFLINE vol.01 スマートフォンサイトのこれから ~ レスポンシブ・Webデザインは救世主となり得るか
Upcoming SlideShare
Loading in …5
×

Build Insider OFFLINE vol.01 スマートフォンサイトのこれから ~ レスポンシブ・Webデザインは救世主となり得るか

2,040 views

Published on

Published in: Technology

Build Insider OFFLINE vol.01 スマートフォンサイトのこれから ~ レスポンシブ・Webデザインは救世主となり得るか

  1. 1. たにぐち まことBuild Insider OFFLINEスマートフォンサイトのこれから∼ レスポンシブ・Webデザインは救世主となり得るか
  2. 2. 本日の内容レスポンシブWebデザイン「1ソース」の幻想頑張らないRWDライブラリを使ったRWDスマホ対応しないこれからのサイト制作
  3. 3. レスポンシブWebデザイン
  4. 4. アプリから学ぶインターフェイスFacebookひきだす画面幅でレイアウトが変化
  5. 5. アプリから学ぶインターフェイスFacebook画面幅でレイアウトが変化@media screen and (max-width: 600px){...}メディアクエリ
  6. 6. アプリから学ぶインターフェイスFacebookひきだす柔軟性のある装飾文字
  7. 7. アプリから学ぶインターフェイスFacebook柔軟性のある装飾文字Webフォント
  8. 8. Facebook大きさの変化する画像
  9. 9. アプリから学ぶインターフェイスFacebookひきだす大きさの変化する画像img {max-width: 100%;}Fluid Image
  10. 10. demo
  11. 11. Googleも推奨
  12. 12. 今後はRWD?
  13. 13. 主要64サイト調査してみた
  14. 14. 主要64サイト調査してみたわずかに 1サイト…
  15. 15. NTT東日本大和総研グループ帝人もちろん採用する大企業もありますが…
  16. 16. なぜ?
  17. 17. レイアウトに制限
  18. 18. 日本語は大きくすると、美しくない
  19. 19. 日本語Webフォントは負荷が高い
  20. 20. 要素が変わると分かりにくい
  21. 21. powered by「1ソース」の幻想
  22. 22. 例えば、こんなギミック
  23. 23. さまざまな Android端末でテストしてみた
  24. 24. トラブル1:重ねた下のボタンが反応する原因:レイヤーを重ねたため
  25. 25. トラブル1:カルーセルが動かない原因:Android 1.6だから
  26. 26. トラブル1:こんな端末も飛んでっちゃう
  27. 27. トラブル2:謎のマージン原因:CSSの解釈が異なる?
  28. 28. トラブル2:不可解な発生機種パターン
  29. 29. トラブル4:スクロールバーが出てしまうXperiaと、HT-03Aのみ。謎。
  30. 30. 1ソースで複雑な動きは無理
  31. 31. ますます増えるプラットフォーム
  32. 32. いったい、どうしたら…
  33. 33. 解決策がんばらないRWDライブラリを使うスマホ対応しない
  34. 34. がんばらないRWD1
  35. 35. 1ソースであるべき
  36. 36. だめ?
  37. 37. Fluidであるべき
  38. 38. だめ?
  39. 39. 操作を統一すべし
  40. 40. だめ?
  41. 41. 「べき論」から入るより本質を
  42. 42. ライブラリを使う2
  43. 43. Bootstrap
  44. 44. Foundation
  45. 45. Kube
  46. 46. demo
  47. 47. グリッドを利用したRWD
  48. 48. タッチデバイスを意識したパーツ
  49. 49. JavaScriptを利用したインターフェイス
  50. 50. ここがイイ!簡単・スピーディー変更もラクデザインが こぎれい
  51. 51. しかし…デザインを変更しにくい準備されている機能に限りがあるブレイクポイントは1つ
  52. 52. サイト制作フローを変化させる設計デザインコーディングプログラミング
  53. 53. サイト制作フローを変化させる設計デザインコーディングプログラミング設計デザインコーディングプログラミングDesigning in the browser
  54. 54. スマホ対応しない3
  55. 55. Apple
  56. 56. キヤノン
  57. 57. GAP
  58. 58. スマホ対応しない?
  59. 59. Apple地味に対応
  60. 60. キヤノンPCだとすごく大味
  61. 61. GAPタブレットだとイイ感じ
  62. 62. スマホ対応しない
  63. 63. スマホ対応しない
  64. 64. PC対応しない
  65. 65. リサーチしてみました10代20代30代40代50代60代0 10 20 30 40男性 女性無職2%学生18%主婦(主夫)38%社会人42%
  66. 66. A. PC B. スマホWeb閲覧に、普段利用するのは?
  67. 67. Web閲覧に、普段利用するのは?同じくらい15%スマホ35%PC50%
  68. 68. スマホサイト(RWDを含む)をどう思う?A. 見やすくなるなら、よいと思うB. PCサイトがそのまま見えた方がよい
  69. 69. どちらでもよい16%PCサイトで良い26%スマホサイトが良い59%スマホサイト(RWDを含む)をどう思う?PCサイトが見にくいから?
  70. 70. これからのサイト制作
  71. 71. パーツは大きく44×44pt 以上iOS Human Interface Guidelines
  72. 72. パーツは大きく44×44pt 以上88×88ptiOS Human Interface Guidelines
  73. 73. Retina Display画素数4倍
  74. 74. 高精細に対応させる2倍で作って 50%に
  75. 75. 画像を極力使わないCSS3
  76. 76. SVGを活用する
  77. 77. 文字は大きくhttp://www.imjp.co.jp/press/release/20130515_000959.html
  78. 78. 文字は大きくhttp://www.imjp.co.jp/press/release/20130515_000959.html
  79. 79. 文字は大きくhttp://www.imjp.co.jp/press/release/20130515_000959.html16px
  80. 80. リンクエリアは広く
  81. 81. ボタンを準備、テキストリンクはしない
  82. 82. コントラストを高く2011 2013
  83. 83. 横に項目を並べない2011 2013
  84. 84. ユーザーに入力を求めない
  85. 85. 「あとで」をサポートする
  86. 86. まとめ
  87. 87. かつて、こんなものが…
  88. 88. スプラッシュFlash
  89. 89. ダイナミックHTML
  90. 90. ・・・
  91. 91. Flash ▶ デベロッパーツール
  92. 92. JavaScript ▶ Ajax
  93. 93. RWD ▶ ?
  94. 94. まとめRWDはPC→スマホの過渡期?なにが必要なのかを見極める「タッチファースト」でいこう
  95. 95. H2O SPACE 検索

×