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

2. スマートフォンサイト制作
Androidのはまりどころ
たにぐち まこと

5. 本日発売

6. 本日の内容
✓ 2009年 スマートフォン誕生
✓ Androidの現実
✓ 対処法
✓ イバラの道のスマホサイト
✓ あなたの答え
✓ レスポンシブ・Webデザイン
✓ ハイブリッド・レスポンシブ
✓ モバイルファースト
✓ わたしの答え

7. 2009年 スマートフォン誕生

8. 夢のスマホサイト

9. 夢のスマホサイト
WebKitだけ確認すればOK
フォントがキレイ
HTML5、CSS3が使える！
タッチイベントが使える！
JavaScriptも動作する
夢のような世界です！

10. 見えてくる現実

11. Androidの現実 powered by

12. 作ってみた
http://www.x-fit.jp/demo1/

13. 国内で販売されている全端末でテストした

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

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

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

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

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

19. トラブル3：タップした場所が変
原因：Android 3.xだから？

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

21. なぜ？

22. Androidの複雑な事情
✓ ハードが、Android側の意図にしたがっていない
✓ 他のインストールソフトなどによる干渉？
✓ Androidのソースをハードメーカーが改造している？
最終的には謎

23. 対処法

24. 対処の手順
✓ 実機で確認する
✓ アタリをつけて、実験を繰り返す
✓ 対処する
つまりは、決め手の方法がない

25. 実機確認の方法
✓ 全部買う
✓ ヤマダ電機メソッド
✓ 検証センターを利用する

26. 特にクセの強い端末
国産端末など、
コア部分をいじっている端末がクセ者
XPeria REGZA Phone Aquos Phone

27. イバラの道のスマホサイト

28. 多様化するデバイス

29. 多様化するプラットフォーム、ブラウザ

30. 多様化するプラットフォーム、ブラウザ

31. Yahoo! JAPANの答え

32. Yahoo! JAPANの答え
時代に逆行！？

33. リニューアルのポイント
体験から、実用へ

34. Appleの答え

35. Appleの答え
作らない

36. あなたの答え

37. １：がんばる

38. 2：CMSサービスなどを使う
http://smart4me.net

39. 3：ライブラリ、ツールを使う
http://x-fit.jp
※音が出ます

40. 3：ライブラリ、ツールを使う

41. 3：ライブラリ、ツールを使う

42. 4：作らない

43. ここまでのまとめ
✓ Androidはクセがありすぎる
✓ 今後も増え続けるAndroid、
出てきた Windows Phone
✓ PCサイトに加えて、スマホサイトもメンテ？
地獄のような世界です！
ほんとすいません！

44. レスポンシブ・Webデザイン

45. レスポンシブ・Webデザイン
Team PAWS Chicago | Brian Drum
http://briandrum.net/team-paws/

47. レスポンシブ・Webデザイン
Hello Fisher
http://hellofisher.com/

49. レスポンシブ・Webデザインの利点
✓ 複数のレイアウトを作らなくて良い
✓ ワンソースでPC、スマホを管理できる
✓ 利用者も
レイアウトが大きく変わらず使える

50. レスポンシブ・Webデザインの問題点
✓ PC・スマホのどちらに対しても
中途半端なレイアウトになる
✓ デザインに制限が出る
✓ 設計・構築が非常に煩雑

51. 勝手に言葉 作りました
ハイブリッド・レスポンシブ

52. ハイブリッド・レスポンシブ
PC+スマホは別サイト
スマホは、レスポンシブWeb

53. ハイブリッド・レスポンシブ
4月上旬公開予定
http://cocoa-music.com

54. ハイブリッド・レスポンシブ
✓ PCサイトに制限がない
✓ スマホでさまざまな画面サイズに対応
✓ 設計は多少煩雑
✓ スマホサイト制作の面倒さは変わらず

55. モバイルファースト

56. もちろん勝手に作りました
モバイルパーツ・ファースト

57. モバイルパーツ・ファースト

58. モバイルパーツ・ファースト
スマホのパーツを、
PCサイトに流用

59. モバイルパーツ・ファースト

60. モバイルパーツ・ファースト
PCサイトのパーツが大きい
タブレットも視野に入れている？

61. モバイルパーツ・ファースト
✓ ボタンなどの制作の手間が減る
✓ タブレット端末でも見やすくなる
✓ PCサイトが大味なサイトになる
✓ 1画面の情報量が減る

62. わたしの答え

63. 変化が求められるスマホサイト
エクスペリエンス
チ スマ
ッ ート
リ
重い
飽きた
見られない

64. new iPadの登場
Retinaディスプレイの採用
画面表示能力は、現状のPCよりも上

65. Appleの iPadへの対応
iPad、iPhone 4(S)用
ipad_hero.jpg ipad_hero_2x.jpg

66. Retina Display搭載 Androidの登場？

67. サイトの主役はタブレットへ？

68. サイトの主役はタブレットへ？

69. タブレット、スマホを意識したサイト制作
✓ テキストリンク→ボタン
✓ ボタン・ナビの大型化
✓ バナーでの表現の増加

70. PCサイト、スマホサイトではなく、
「Webサイト」がデバイスを問わない時代
5月頃公開
http://h2o-space.com

71. まとめ

72. まとめ
✓ Androidのすべての端末に、
クリエイタのがんばりで対応するのは、ほぼ不可能
✓ 今後も増え続けるプラットフォーム
✓ スマホサイト制作の考え方自体を変える必要がある
サイトの特性やトレンドを見極めて

73. h2o space 検索