1. スマートフォン向けウェブサイト制作の
最新事情とMovable Typeによる
マルチデバイス対応
アイデアマンズ株式会社
宮永邦彦
12年4月13日金曜日 1

2. アイデアマンズ株式会社
• 2005年11月設立
• 高専時代の友人3人で脱サラ
• @ideamans
• Six Apart Solution Partner
12年4月13日金曜日 2

3. MT携帯対応プラグイン
12年4月13日金曜日 3

4. ケータイキット
• Movable Type携帯対応プラグインのデファ
クトスタンダード
• 1,500ライセンス以上のライセンス販売実績
• 1,000機種以上のフィーチャーフォンと、ス
マートフォン(iPhone/Android)に対応
12年4月13日金曜日 4

5. さっそくですが
12年4月13日金曜日 5

6. jQuery Mobile
vs.
レスポンシブWebデザイン
12年4月13日金曜日 6

7. スマートフォンサイト制作
話題の技術対決
12年4月13日金曜日 7

8. jQuery Mobile
12年4月13日金曜日 8

9. jQuery Mobile
• モバイルデバイス向けフレームワーク
• HTMLだけでスマートフォンサイト制作
• 見た目が実にスマホらしい
• 動きがダイナミックでウケがいい
12年4月13日金曜日 9

10. 事例
DODA
12年4月13日金曜日 10

11. 事例
じゃらん
12年4月13日金曜日 11

12. jQuery Mobileを使った国内スマホサイトまとめ
http://ascii.jp/elem/000/000/674/674677/
12年4月13日金曜日 12

13. Dreamweaver CS5.5
作成支援機能
12年4月13日金曜日 13

14. Movable Typeスマートフォンオプション
jQuery Mobileによるテーマが同梱
12年4月13日金曜日 14

15. レスポンシブWebデザイン
12年4月13日金曜日 15

16. レスポンシブWebデザイン
• 標準的なCSS3だけでマルチデバイス対応
• Media Queries
• 全体の共通するCSSと画面サイズごとのCSS
• PC・タブレット・スマートフォンに効率良く
対応
12年4月13日金曜日 16

17. Media Queriesの例
body {
/* 背景色は共通で指定 */
background-color: #FFFFFF;
}
@media screen and ( min-width: 481px ) {
/* 横480pxより大きい画面(タブレット以上)の場合は */
#banner {
/* バナーは回りこませて段組する */
float: left;
}
}
12年4月13日金曜日 17

18. あのオバマ大統領も愛用
12年4月13日金曜日 18

19. 首相官邸御用達
12年4月13日金曜日 19

20. Media
Queries
http://mediaqueri.es/
12年4月13日金曜日 20

21. メリット・デメリット
12年4月13日金曜日 21

22. jQuery MobileのGOOD
• HTMLベースだからはじめやすい
• 高機能
• オープンソース(MIT/GPL)
• デバイス・OSの細かな差異も吸収
12年4月13日金曜日 22

23. レスポンシブのGOOD
• 標準技術(W3C勧告候補)
• 自由度が高い
• 従来のWebコーディング技術が活かせる
• オバマ大統領も愛用(野田首相も愛用)
12年4月13日金曜日 23

24. jQuery MobileのBAD
• 縛りが強くロックインされやすい
• 一定のラインを超えるとカスタマイズが難しい
• 見た目や動作の面において
• バージョンアップによる互換性リスク
• 良くも悪くもMobile First(いかにもなサイト)
12年4月13日金曜日 24

25. レスポンシブのBAD
• 事前のルール作りが重要
• 情報設計・UI・コーディング規約などの標準化
• JavaScriptは自前で用意(jQueryなどを活用)
• デバイス・OSの差異は自分で確認
• 違うデバイス向けの不用なCSSも読み込ませる
12年4月13日金曜日 25

26. プロジェクトへの
適応度をどう評価するか
12年4月13日金曜日 26

27. 技術的な難易度 jQuery Mobile レスポンシブ
学習曲線のイメージ
要件の細かさ・カスタマイズ度合い
12年4月13日金曜日 27

28. 技術的な難易度 jQuery Mobile レスポンシブ
JavaScriptの知識
フレームワーク内部の理解
要件の細かさ・カスタマイズ度合い
12年4月13日金曜日 28

29. 技術的な難易度 jQuery Mobile レスポンシブ
このラインの共通認識を
受発注両サイドで
どう揃えるかが重要
要件の細かさ・カスタマイズ度合い
12年4月13日金曜日 29

30. 余談ですが:
CMSも似ている
12年4月13日金曜日 30

31. MT vs. WP and etc.
• Movable Type Professional/Advanced
• 有償
• 静的ファイル書き出し
• HTMLライクなテンプレートタグ
• WordPress(Drupal, Joomla!, etc.)
• オープンソース、フリーのテーマやプラグインが多い
• 都度ページを動的生成
• PHPによるカスタマイズ
12年4月13日金曜日 31

32. 技術的な難易度 WordPress Movable Type
PHPの知識
フレームワークの理解
サーバーチューニング
要件の細かさ・カスタマイズ度合い
12年4月13日金曜日 32

33. サイトの性格による
向き・不向き
12年4月13日金曜日 33

34. jQuery Mobile
• アプリケーション的なサイト
• サイト自体のメッセージ性よりもコンテンツや
機能が大事なサイト
• ポータルサイト
• 情報検索などのサービスサイト
12年4月13日金曜日 34

35. レスポンシブ
• サイト自体がメッセージ性を持つ
• デザインが重視されるサイト
• ブランド/コーポレートサイト
• メディアサイト
• キャンペーンサイト
12年4月13日金曜日 35

36. 例えばECサイトで
• トップページ∼商品詳細ページまではレスポ
ンシブ
• ショッピングカート∼購入フローはjQuery
Mobile
12年4月13日金曜日 36

37. やっぱり日本人は
細かな見た目に
こだわりたい
12年4月13日金曜日 37

38. 汎用的に適用でき
デザイナーの裁量が
大きいのはレスポンシブ
「レスポンシブいいよ！」
※個人の感想です
12年4月13日金曜日 38

39. Movable Typeによる
マルチデバイス対応戦略
これからのWebサイトに必要なこと
12年4月13日金曜日 39

40. インターネットデバイスは
増える一方
12年4月13日金曜日 40

41. いままでのモバイル対応は
やるか
見送るか
12年4月13日金曜日 41

42. スマートフォン対応の
本質はマルチデバイス対応
12年4月13日金曜日 42

43. CMS導入は大前提
• コンテンツ(伝えたいこと)は一元管理
• 多重管理の発生を避ける
• ワンソース・マルチユースの実現を目指す
12年4月13日金曜日 43

44. コストを抑えるには
• サイト数×デバイス数となる予算構造を避ける
• 構築の費用
• デバイス間で共通化できるものは共通化
• できるだけテンプレートではなくCSS/JavaScriptで対応
• 運用の費用
• 更新頻度の高い領域から共通化・フレームワーク活用
12年4月13日金曜日 44

45. 更新頻度が高い
コンテンツ
CMSで管理
デザイン jQuery
Mobile
システム レスポンシブ
インフラ
12年4月13日金曜日 45

46. ガラケーはもういい？
12年4月13日金曜日 46

47. 2014年までは
フィーチャーフォンが
過半数を占めると予想
現在約25%
スマートフォン市場規模の推移・予測(12年3月)
※MM総研調べ
http://www.m2ri.jp/newsreleases/main.php?
id=010120120313500
12年4月13日金曜日 47

48. アイデアマンズの
新規・リニューアル
提案スタイル
12年4月13日金曜日 48

49. レスポンシブWebデザイン
Movable Type
フィーチャーフォンテンプレート
12年4月13日金曜日 49

50. 既存のPCサイトを
まず
モバイル対応させる場合
12年4月13日金曜日 50

51. PC・タブレット
Movable Type
モバイルテンプレート
12年4月13日金曜日 51

52. M9テーマ
てっとり早くマルチデバイス対応可能なテーマ
12年4月13日金曜日 52

53. 管理画面から選択するだけで
12年4月13日金曜日 53

54. レスポンシブなWebサイト・ブログを作成
12年4月13日金曜日 54

55. PC
タブレット
タッチデバイスではボタンやリンクを押しやすく
12年4月13日金曜日 55

56. スケルトンモード
レスポンシブなレイアウトだけ利用して
見た目をフルカスタマイズ可能
12年4月13日金曜日 56

57. スケルトンモード
背景・ヘッダー・メニュー・見出しを
オリジナルにデザイン
12年4月13日金曜日 57

58. M9テーマ
• 1ライセンス 10,500円
• 安心サポート 21,000円
• Movable Typeライセンス単位
• 4月13日発売開始予定
12年4月13日金曜日 58

59. jQuery Mobile
Alternative
Ghost Track #1
12年4月13日金曜日 59

60. Sencha Touch 2
http://www.sencha.com/products/touch
12年4月13日金曜日 60

61. Dojo Mobile
http://dojotoolkit.org/features/mobile
12年4月13日金曜日 61

62. Wink Toolkit
http://www.winktoolkit.org/
12年4月13日金曜日 62

63. Responsive Web
Design Framework
Ghost Track #2
12年4月13日金曜日 63

64. Twitter
Bootstrap
Ver.2
http://twitter.github.com/
bootstrap/
12年4月13日金曜日 64

65. Foundation
http://foundation.zurb.com/
12年4月13日金曜日 65

66. スマートフォンサイトの
本当に正しい作り方は
業界全体が模索の最中
12年4月13日金曜日 66

67. その答えが早く得られるよう
皆様のモバイルサイトへの
挑戦をアイデアマンズは
全力で応援します!
12年4月13日金曜日 67

68. ご清聴
ありがとうございました
12年4月13日金曜日 68