Movable type-seminar-20120411-ideamans

2,056 views
2,012 views

Published on

Published in: Technology
2 Comments
1 Like
Statistics
Notes
No Downloads
Views
Total views
2,056
On SlideShare
0
From Embeds
0
Number of Embeds
661
Actions
Shares
0
Downloads
17
Comments
2
Likes
1
Embeds 0
No embeds

No notes for slide

Movable type-seminar-20120411-ideamans

  1. 1. スマートフォン向けウェブサイト制作の 最新事情とMovable Typeによる マルチデバイス対応 アイデアマンズ株式会社 宮永邦彦12年4月13日金曜日 1
  2. 2. アイデアマンズ株式会社 • 2005年11月設立 • 高専時代の友人3人で脱サラ • @ideamans • Six Apart Solution Partner12年4月13日金曜日 2
  3. 3. MT携帯対応プラグイン12年4月13日金曜日 3
  4. 4. ケータイキット • Movable Type携帯対応プラグインのデファ クトスタンダード • 1,500ライセンス以上のライセンス販売実績 • 1,000機種以上のフィーチャーフォンと、ス マートフォン(iPhone/Android)に対応12年4月13日金曜日 4
  5. 5. さっそくですが12年4月13日金曜日 5
  6. 6. jQuery Mobile vs. レスポンシブWebデザイン12年4月13日金曜日 6
  7. 7. スマートフォンサイト制作 話題の技術対決12年4月13日金曜日 7
  8. 8. jQuery Mobile12年4月13日金曜日 8
  9. 9. jQuery Mobile • モバイルデバイス向けフレームワーク • HTMLだけでスマートフォンサイト制作 • 見た目が実にスマホらしい • 動きがダイナミックでウケがいい12年4月13日金曜日 9
  10. 10. 事例 DODA12年4月13日金曜日 10
  11. 11. 事例 じゃらん12年4月13日金曜日 11
  12. 12. jQuery Mobileを使った国内スマホサイトまとめ http://ascii.jp/elem/000/000/674/674677/12年4月13日金曜日 12
  13. 13. Dreamweaver CS5.5 作成支援機能12年4月13日金曜日 13
  14. 14. Movable Typeスマートフォンオプション jQuery Mobileによるテーマが同梱12年4月13日金曜日 14
  15. 15. レスポンシブWebデザイン12年4月13日金曜日 15
  16. 16. レスポンシブWebデザイン • 標準的なCSS3だけでマルチデバイス対応 • Media Queries • 全体の共通するCSSと画面サイズごとのCSS • PC・タブレット・スマートフォンに効率良く 対応12年4月13日金曜日 16
  17. 17. Media Queriesの例 body { /* 背景色は共通で指定 */ background-color: #FFFFFF; } @media screen and ( min-width: 481px ) { /* 横480pxより大きい画面(タブレット以上)の場合は */ #banner { /* バナーは回りこませて段組する */ float: left; } }12年4月13日金曜日 17
  18. 18. あのオバマ大統領も愛用12年4月13日金曜日 18
  19. 19. 首相官邸御用達12年4月13日金曜日 19
  20. 20. Media Queries http://mediaqueri.es/12年4月13日金曜日 20
  21. 21. メリット・デメリット12年4月13日金曜日 21
  22. 22. jQuery MobileのGOOD • HTMLベースだからはじめやすい • 高機能 • オープンソース(MIT/GPL) • デバイス・OSの細かな差異も吸収12年4月13日金曜日 22
  23. 23. レスポンシブのGOOD • 標準技術(W3C勧告候補) • 自由度が高い • 従来のWebコーディング技術が活かせる • オバマ大統領も愛用(野田首相も愛用)12年4月13日金曜日 23
  24. 24. jQuery MobileのBAD • 縛りが強くロックインされやすい • 一定のラインを超えるとカスタマイズが難しい • 見た目や動作の面において • バージョンアップによる互換性リスク • 良くも悪くもMobile First(いかにもなサイト)12年4月13日金曜日 24
  25. 25. レスポンシブのBAD • 事前のルール作りが重要 • 情報設計・UI・コーディング規約などの標準化 • JavaScriptは自前で用意(jQueryなどを活用) • デバイス・OSの差異は自分で確認 • 違うデバイス向けの不用なCSSも読み込ませる12年4月13日金曜日 25
  26. 26. プロジェクトへの 適応度をどう評価するか12年4月13日金曜日 26
  27. 27. 技術的な難易度 jQuery Mobile レスポンシブ 学習曲線のイメージ 要件の細かさ・カスタマイズ度合い12年4月13日金曜日 27
  28. 28. 技術的な難易度 jQuery Mobile レスポンシブ JavaScriptの知識 フレームワーク内部の理解 要件の細かさ・カスタマイズ度合い12年4月13日金曜日 28
  29. 29. 技術的な難易度 jQuery Mobile レスポンシブ このラインの共通認識を 受発注両サイドで どう揃えるかが重要 要件の細かさ・カスタマイズ度合い12年4月13日金曜日 29
  30. 30. 余談ですが: CMSも似ている12年4月13日金曜日 30
  31. 31. MT vs. WP and etc. • Movable Type Professional/Advanced • 有償 • 静的ファイル書き出し • HTMLライクなテンプレートタグ • WordPress(Drupal, Joomla!, etc.) • オープンソース、フリーのテーマやプラグインが多い • 都度ページを動的生成 • PHPによるカスタマイズ12年4月13日金曜日 31
  32. 32. 技術的な難易度 WordPress Movable Type PHPの知識 フレームワークの理解 サーバーチューニング 要件の細かさ・カスタマイズ度合い12年4月13日金曜日 32
  33. 33. サイトの性格による 向き・不向き12年4月13日金曜日 33
  34. 34. jQuery Mobile • アプリケーション的なサイト • サイト自体のメッセージ性よりもコンテンツや 機能が大事なサイト • ポータルサイト • 情報検索などのサービスサイト12年4月13日金曜日 34
  35. 35. レスポンシブ • サイト自体がメッセージ性を持つ • デザインが重視されるサイト • ブランド/コーポレートサイト • メディアサイト • キャンペーンサイト12年4月13日金曜日 35
  36. 36. 例えばECサイトで • トップページ∼商品詳細ページまではレスポ ンシブ • ショッピングカート∼購入フローはjQuery Mobile12年4月13日金曜日 36
  37. 37. やっぱり日本人は 細かな見た目に こだわりたい12年4月13日金曜日 37
  38. 38. 汎用的に適用でき デザイナーの裁量が 大きいのはレスポンシブ 「レスポンシブいいよ!」 ※個人の感想です12年4月13日金曜日 38
  39. 39. Movable Typeによる マルチデバイス対応戦略 これからのWebサイトに必要なこと12年4月13日金曜日 39
  40. 40. インターネットデバイスは 増える一方12年4月13日金曜日 40
  41. 41. いままでのモバイル対応は やるか 見送るか12年4月13日金曜日 41
  42. 42. スマートフォン対応の 本質はマルチデバイス対応12年4月13日金曜日 42
  43. 43. CMS導入は大前提 • コンテンツ(伝えたいこと)は一元管理 • 多重管理の発生を避ける • ワンソース・マルチユースの実現を目指す12年4月13日金曜日 43
  44. 44. コストを抑えるには • サイト数×デバイス数となる予算構造を避ける • 構築の費用 • デバイス間で共通化できるものは共通化 • できるだけテンプレートではなくCSS/JavaScriptで対応 • 運用の費用 • 更新頻度の高い領域から共通化・フレームワーク活用12年4月13日金曜日 44
  45. 45. 更新頻度が高い コンテンツ CMSで管理 デザイン jQuery Mobile システム レスポンシブ インフラ12年4月13日金曜日 45
  46. 46. ガラケーはもういい?12年4月13日金曜日 46
  47. 47. 2014年までは フィーチャーフォンが 過半数を占めると予想 現在約25% スマートフォン市場規模の推移・予測(12年3月) ※MM総研調べ http://www.m2ri.jp/newsreleases/main.php? id=01012012031350012年4月13日金曜日 47
  48. 48. アイデアマンズの 新規・リニューアル 提案スタイル12年4月13日金曜日 48
  49. 49. レスポンシブWebデザイン Movable Type フィーチャーフォンテンプレート12年4月13日金曜日 49
  50. 50. 既存のPCサイトを まず モバイル対応させる場合12年4月13日金曜日 50
  51. 51. PC・タブレット Movable Type モバイルテンプレート12年4月13日金曜日 51
  52. 52. M9テーマ てっとり早くマルチデバイス対応可能なテーマ12年4月13日金曜日 52
  53. 53. 管理画面から選択するだけで12年4月13日金曜日 53
  54. 54. レスポンシブなWebサイト・ブログを作成12年4月13日金曜日 54
  55. 55. PC タブレット タッチデバイスではボタンやリンクを押しやすく12年4月13日金曜日 55
  56. 56. スケルトンモード レスポンシブなレイアウトだけ利用して 見た目をフルカスタマイズ可能12年4月13日金曜日 56
  57. 57. スケルトンモード 背景・ヘッダー・メニュー・見出しを オリジナルにデザイン12年4月13日金曜日 57
  58. 58. M9テーマ • 1ライセンス 10,500円 • 安心サポート 21,000円 • Movable Typeライセンス単位 • 4月13日発売開始予定12年4月13日金曜日 58
  59. 59. jQuery Mobile Alternative Ghost Track #112年4月13日金曜日 59
  60. 60. Sencha Touch 2 http://www.sencha.com/products/touch12年4月13日金曜日 60
  61. 61. Dojo Mobile http://dojotoolkit.org/features/mobile12年4月13日金曜日 61
  62. 62. Wink Toolkit http://www.winktoolkit.org/12年4月13日金曜日 62
  63. 63. Responsive Web Design Framework Ghost Track #212年4月13日金曜日 63
  64. 64. Twitter Bootstrap Ver.2 http://twitter.github.com/ bootstrap/12年4月13日金曜日 64
  65. 65. Foundation http://foundation.zurb.com/12年4月13日金曜日 65
  66. 66. スマートフォンサイトの 本当に正しい作り方は 業界全体が模索の最中12年4月13日金曜日 66
  67. 67. その答えが早く得られるよう 皆様のモバイルサイトへの 挑戦をアイデアマンズは 全力で応援します!12年4月13日金曜日 67
  68. 68. ご清聴 ありがとうございました12年4月13日金曜日 68

×