Android Bazaar and Conference 2012 Spring

1,725 views

Published on

2012年 3月 24日に東京大学にて開催された「Android Bazaar and Conference 2012 Spring」において、H2O Space. たにぐちまことが講演した「スマートフォンサイト制作、Androidのはまりどころ」のスライドです。

0 Comments
8 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,725
On SlideShare
0
From Embeds
0
Number of Embeds
44
Actions
Shares
0
Downloads
6
Comments
0
Likes
8
Embeds 0
No embeds

No notes for slide

Android Bazaar and Conference 2012 Spring

  1. 1. スマートフォンサイト制作Androidのはまりどころ たにぐち まこと
  2. 2. 本日発売
  3. 3. 本日の内容✓ 2009年 スマートフォン誕生✓ Androidの現実✓ 対処法✓ イバラの道のスマホサイト✓ あなたの答え✓ レスポンシブ・Webデザイン✓ ハイブリッド・レスポンシブ✓ モバイルファースト✓ わたしの答え
  4. 4. 2009年 スマートフォン誕生
  5. 5. 夢のスマホサイト
  6. 6. 夢のスマホサイト WebKitだけ確認すればOK フォントがキレイ HTML5、CSS3が使える! タッチイベントが使える! JavaScriptも動作する 夢のような世界です!
  7. 7. 見えてくる現実
  8. 8. Androidの現実 powered by
  9. 9. 作ってみた http://www.x-fit.jp/demo1/
  10. 10. 国内で販売されている全端末でテストした
  11. 11. トラブル1:重ねた下のボタンが反応する 原因:レイヤーを重ねたため
  12. 12. トラブル1:カルーセルが動かない 原因:Android 1.6だから
  13. 13. トラブル1:こんな端末も 飛んでっちゃう
  14. 14. トラブル2:謎のマージン 原因:CSSの解釈が異なる?
  15. 15. トラブル2:不可解な発生機種パターン
  16. 16. トラブル3:タップした場所が変 原因:Android 3.xだから?
  17. 17. トラブル4:スクロールバーが出てしまう Xperiaと、HT-03Aのみ。謎。
  18. 18. なぜ?
  19. 19. Androidの複雑な事情✓ ハードが、Android側の意図にしたがっていない✓ 他のインストールソフトなどによる干渉?✓ Androidのソースをハードメーカーが改造している? 最終的には謎
  20. 20. 対処法
  21. 21. 対処の手順✓ 実機で確認する✓ アタリをつけて、実験を繰り返す✓ 対処する つまりは、決め手の方法がない
  22. 22. 実機確認の方法✓ 全部買う✓ ヤマダ電機メソッド✓ 検証センターを利用する
  23. 23. 特にクセの強い端末 国産端末など、 コア部分をいじっている端末がクセ者 XPeria REGZA Phone Aquos Phone
  24. 24. イバラの道のスマホサイト
  25. 25. 多様化するデバイス
  26. 26. 多様化するプラットフォーム、ブラウザ
  27. 27. 多様化するプラットフォーム、ブラウザ
  28. 28. Yahoo! JAPANの答え
  29. 29. Yahoo! JAPANの答え 時代に逆行!?
  30. 30. リニューアルのポイント 体験から、実用へ
  31. 31. Appleの答え
  32. 32. Appleの答え 作らない
  33. 33. あなたの答え
  34. 34. 1:がんばる
  35. 35. 2:CMSサービスなどを使う http://smart4me.net
  36. 36. 3:ライブラリ、ツールを使う http://x-fit.jp ※音が出ます
  37. 37. 3:ライブラリ、ツールを使う
  38. 38. 3:ライブラリ、ツールを使う
  39. 39. 4:作らない
  40. 40. ここまでのまとめ✓ Androidはクセがありすぎる✓ 今後も増え続けるAndroid、 出てきた Windows Phone✓ PCサイトに加えて、スマホサイトもメンテ? 地獄のような世界です! ほんとすいません!
  41. 41. レスポンシブ・Webデザイン
  42. 42. レスポンシブ・Webデザイン Team PAWS Chicago | Brian Drum http://briandrum.net/team-paws/
  43. 43. レスポンシブ・Webデザイン Hello Fisher http://hellofisher.com/
  44. 44. レスポンシブ・Webデザインの利点 ✓ 複数のレイアウトを作らなくて良い ✓ ワンソースでPC、スマホを管理できる ✓ 利用者も レイアウトが大きく変わらず使える
  45. 45. レスポンシブ・Webデザインの問題点 ✓ PC・スマホのどちらに対しても 中途半端なレイアウトになる ✓ デザインに制限が出る ✓ 設計・構築が非常に煩雑
  46. 46. 勝手に言葉 作りましたハイブリッド・レスポンシブ
  47. 47. ハイブリッド・レスポンシブ PC+スマホは別サイト スマホは、レスポンシブWeb
  48. 48. ハイブリッド・レスポンシブ 4月上旬公開予定 http://cocoa-music.com
  49. 49. ハイブリッド・レスポンシブ✓ PCサイトに制限がない✓ スマホでさまざまな画面サイズに対応✓ 設計は多少煩雑✓ スマホサイト制作の面倒さは変わらず
  50. 50. モバイルファースト
  51. 51. もちろん勝手に作りましたモバイルパーツ・ファースト
  52. 52. モバイルパーツ・ファースト
  53. 53. モバイルパーツ・ファースト スマホのパーツを、 PCサイトに流用
  54. 54. モバイルパーツ・ファースト
  55. 55. モバイルパーツ・ファースト PCサイトのパーツが大きい タブレットも視野に入れている?
  56. 56. モバイルパーツ・ファースト✓ ボタンなどの制作の手間が減る✓ タブレット端末でも見やすくなる✓ PCサイトが大味なサイトになる✓ 1画面の情報量が減る
  57. 57. わたしの答え
  58. 58. 変化が求められるスマホサイト エクスペリエンス チ スマ ッ ート リ 重い 飽きた 見られない
  59. 59. new iPadの登場 Retinaディスプレイの採用 画面表示能力は、現状のPCよりも上
  60. 60. Appleの iPadへの対応 iPad、iPhone 4(S)用 ipad_hero.jpg ipad_hero_2x.jpg
  61. 61. Retina Display搭載 Androidの登場?
  62. 62. サイトの主役はタブレットへ?
  63. 63. サイトの主役はタブレットへ?
  64. 64. タブレット、スマホを意識したサイト制作✓ テキストリンク→ボタン✓ ボタン・ナビの大型化✓ バナーでの表現の増加
  65. 65. PCサイト、スマホサイトではなく、「Webサイト」がデバイスを問わない時代 5月頃公開 http://h2o-space.com
  66. 66. まとめ
  67. 67. まとめ✓ Androidのすべての端末に、 クリエイタのがんばりで対応するのは、ほぼ不可能✓ 今後も増え続けるプラットフォーム✓ スマホサイト制作の考え方自体を変える必要がある サイトの特性やトレンドを見極めて
  68. 68. h2o space 検索

×