Más contenido relacionado
La actualidad más candente (8)
Similar a Movable type-seminar-20120411-ideamans (20)
Más de Kunihiko Miyanaga (8)
Movable type-seminar-20120411-ideamans
- 2. アイデアマンズ株式会社
• 2005年11月設立
• 高専時代の友人3人で脱サラ
• @ideamans
• Six Apart Solution Partner
12年4月13日金曜日 2
- 4. ケータイキット
• Movable Type携帯対応プラグインのデファ
クトスタンダード
• 1,500ライセンス以上のライセンス販売実績
• 1,000機種以上のフィーチャーフォンと、ス
マートフォン(iPhone/Android)に対応
12年4月13日金曜日 4
- 9. jQuery Mobile
• モバイルデバイス向けフレームワーク
• HTMLだけでスマートフォンサイト制作
• 見た目が実にスマホらしい
• 動きがダイナミックでウケがいい
12年4月13日金曜日 9
- 10. 事例
DODA
12年4月13日金曜日 10
- 11. 事例
じゃらん
12年4月13日金曜日 11
- 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
- 20. Media
Queries
http://mediaqueri.es/
12年4月13日金曜日 20
- 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
- 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
- 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
- 43. CMS導入は大前提
• コンテンツ(伝えたいこと)は一元管理
• 多重管理の発生を避ける
• ワンソース・マルチユースの実現を目指す
12年4月13日金曜日 43
- 44. コストを抑えるには
• サイト数×デバイス数となる予算構造を避ける
• 構築の費用
• デバイス間で共通化できるものは共通化
• できるだけテンプレートではなくCSS/JavaScriptで対応
• 運用の費用
• 更新頻度の高い領域から共通化・フレームワーク活用
12年4月13日金曜日 44
- 45. 更新頻度が高い
コンテンツ
CMSで管理
デザイン jQuery
Mobile
システム レスポンシブ
インフラ
12年4月13日金曜日 45
- 47. 2014年までは
フィーチャーフォンが
過半数を占めると予想
現在約25%
スマートフォン市場規模の推移・予測(12年3月)
※MM総研調べ
http://www.m2ri.jp/newsreleases/main.php?
id=010120120313500
12年4月13日金曜日 47
- 48. アイデアマンズの
新規・リニューアル
提案スタイル
12年4月13日金曜日 48
- 51. PC・タブレット
Movable Type
モバイルテンプレート
12年4月13日金曜日 51
- 52. M9テーマ
てっとり早くマルチデバイス対応可能なテーマ
12年4月13日金曜日 52
- 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
- 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
- 64. Twitter
Bootstrap
Ver.2
http://twitter.github.com/
bootstrap/
12年4月13日金曜日 64
- 65. Foundation
http://foundation.zurb.com/
12年4月13日金曜日 65
- 68. ご清聴
ありがとうございました
12年4月13日金曜日 68