movable type-seminar-20120411-ideamans
TRANSCRIPT
スマートフォン向けウェブサイト制作の最新事情とMovable Typeによる
マルチデバイス対応
アイデアマンズ株式会社宮永邦彦
112年4月13日金曜日
アイデアマンズ株式会社
• 2005年11月設立
•高専時代の友人3人で脱サラ
• @ideamans• Six Apart Solution Partner
212年4月13日金曜日
MT携帯対応プラグイン312年4月13日金曜日
ケータイキット
• Movable Type携帯対応プラグインのデファクトスタンダード
• 1,500ライセンス以上のライセンス販売実績
• 1,000機種以上のフィーチャーフォンと、スマートフォン(iPhone/Android)に対応
412年4月13日金曜日
さっそくですが
512年4月13日金曜日
jQuery Mobilevs.
レスポンシブWebデザイン
612年4月13日金曜日
スマートフォンサイト制作話題の技術対決
712年4月13日金曜日
jQuery Mobile812年4月13日金曜日
jQuery Mobile
•モバイルデバイス向けフレームワーク
• HTMLだけでスマートフォンサイト制作
•見た目が実にスマホらしい
•動きがダイナミックでウケがいい
912年4月13日金曜日
事例DODA
1012年4月13日金曜日
事例じゃらん
1112年4月13日金曜日
jQuery Mobileを使った国内スマホサイトまとめhttp://ascii.jp/elem/000/000/674/674677/
1212年4月13日金曜日
Dreamweaver CS5.5作成支援機能
1312年4月13日金曜日
Movable TypeスマートフォンオプションjQuery Mobileによるテーマが同梱
1412年4月13日金曜日
レスポンシブWebデザイン1512年4月13日金曜日
レスポンシブWebデザイン
•標準的なCSS3だけでマルチデバイス対応
• Media Queries•全体の共通するCSSと画面サイズごとのCSS
• PC・タブレット・スマートフォンに効率良く対応
1612年4月13日金曜日
Media Queriesの例body { /* 背景色は共通で指定 */
background-color: #FFFFFF;}
@media screen and ( min-width: 481px ) { /* 横480pxより大きい画面(タブレット以上)の場合は */
#banner { /* バナーは回りこませて段組する */
float: left; }}
1712年4月13日金曜日
あのオバマ大統領も愛用1812年4月13日金曜日
首相官邸御用達1912年4月13日金曜日
メリット・デメリット
2112年4月13日金曜日
jQuery MobileのGOOD
• HTMLベースだからはじめやすい
•高機能
•オープンソース(MIT/GPL)
•デバイス・OSの細かな差異も吸収
2212年4月13日金曜日
レスポンシブのGOOD
•標準技術(W3C勧告候補)
•自由度が高い
•従来のWebコーディング技術が活かせる
•オバマ大統領も愛用(野田首相も愛用)
2312年4月13日金曜日
jQuery MobileのBAD
• 縛りが強くロックインされやすい
• 一定のラインを超えるとカスタマイズが難しい
• 見た目や動作の面において
• バージョンアップによる互換性リスク
• 良くも悪くもMobile First(いかにもなサイト)
2412年4月13日金曜日
レスポンシブのBAD
• 事前のルール作りが重要
• 情報設計・UI・コーディング規約などの標準化
• JavaScriptは自前で用意(jQueryなどを活用)
• デバイス・OSの差異は自分で確認
• 違うデバイス向けの不用なCSSも読み込ませる
2512年4月13日金曜日
プロジェクトへの適応度をどう評価するか
2612年4月13日金曜日
技術的な難易度
要件の細かさ・カスタマイズ度合い
jQuery Mobile レスポンシブ
学習曲線のイメージ
2712年4月13日金曜日
技術的な難易度
要件の細かさ・カスタマイズ度合い
jQuery Mobile レスポンシブ
JavaScriptの知識フレームワーク内部の理解
2812年4月13日金曜日
技術的な難易度
要件の細かさ・カスタマイズ度合い
jQuery Mobile レスポンシブ
このラインの共通認識を受発注両サイドでどう揃えるかが重要
2912年4月13日金曜日
余談ですが:CMSも似ている
3012年4月13日金曜日
MT vs. WP and etc.
• Movable Type Professional/Advanced• 有償• 静的ファイル書き出し• HTMLライクなテンプレートタグ
• WordPress(Drupal, Joomla!, etc.)• オープンソース、フリーのテーマやプラグインが多い• 都度ページを動的生成• PHPによるカスタマイズ
3112年4月13日金曜日
技術的な難易度
要件の細かさ・カスタマイズ度合い
WordPress Movable Type
PHPの知識フレームワークの理解サーバーチューニング
3212年4月13日金曜日
サイトの性格による向き・不向き
3312年4月13日金曜日
jQuery Mobile
•アプリケーション的なサイト
•サイト自体のメッセージ性よりもコンテンツや機能が大事なサイト
•ポータルサイト
•情報検索などのサービスサイト
3412年4月13日金曜日
レスポンシブ
• サイト自体がメッセージ性を持つ
• デザインが重視されるサイト
• ブランド/コーポレートサイト
• メディアサイト
• キャンペーンサイト
3512年4月13日金曜日
例えばECサイトで
•トップページ~商品詳細ページまではレスポンシブ
•ショッピングカート~購入フローはjQuery
Mobile
3612年4月13日金曜日
やっぱり日本人は細かな見た目にこだわりたい
3712年4月13日金曜日
汎用的に適用できデザイナーの裁量が
大きいのはレスポンシブ
「レスポンシブいいよ!」※個人の感想です
3812年4月13日金曜日
Movable Typeによるマルチデバイス対応戦略
これからのWebサイトに必要なこと3912年4月13日金曜日
インターネットデバイスは増える一方
4012年4月13日金曜日
いままでのモバイル対応はやるか見送るか
4112年4月13日金曜日
スマートフォン対応の本質はマルチデバイス対応
4212年4月13日金曜日
CMS導入は大前提
•コンテンツ(伝えたいこと)は一元管理
•多重管理の発生を避ける
•ワンソース・マルチユースの実現を目指す
4312年4月13日金曜日
コストを抑えるには
• サイト数×デバイス数となる予算構造を避ける
• 構築の費用
• デバイス間で共通化できるものは共通化
• できるだけテンプレートではなくCSS/JavaScriptで対応
• 運用の費用
• 更新頻度の高い領域から共通化・フレームワーク活用
4412年4月13日金曜日
インフラ
システム
デザイン
コンテンツ
更新頻度が高い
CMSで管理
jQuery Mobileレスポンシブ
4512年4月13日金曜日
ガラケーはもういい?
4612年4月13日金曜日
現在約25%
2014年まではフィーチャーフォンが過半数を占めると予想
スマートフォン市場規模の推移・予測(12年3月)※MM総研調べ
http://www.m2ri.jp/newsreleases/main.php?id=010120120313500
4712年4月13日金曜日
アイデアマンズの新規・リニューアル
提案スタイル
4812年4月13日金曜日
Movable Type
レスポンシブWebデザイン
フィーチャーフォンテンプレート
4912年4月13日金曜日
既存のPCサイトをまず
モバイル対応させる場合
5012年4月13日金曜日
Movable Type
PC・タブレット
モバイルテンプレート
5112年4月13日金曜日
M9テーマてっとり早くマルチデバイス対応可能なテーマ
5212年4月13日金曜日
管理画面から選択するだけで5312年4月13日金曜日
レスポンシブなWebサイト・ブログを作成
5412年4月13日金曜日
タッチデバイスではボタンやリンクを押しやすく
PCタブレット
5512年4月13日金曜日
スケルトンモードレスポンシブなレイアウトだけ利用して
見た目をフルカスタマイズ可能5612年4月13日金曜日
スケルトンモード背景・ヘッダー・メニュー・見出しを
オリジナルにデザイン5712年4月13日金曜日
M9テーマ
• 1ライセンス 10,500円
•安心サポート 21,000円
• Movable Typeライセンス単位
• 4月13日発売開始予定
5812年4月13日金曜日
jQuery MobileAlternative
Ghost Track #1
5912年4月13日金曜日
Sencha Touch 2http://www.sencha.com/products/touch
6012年4月13日金曜日
Dojo Mobilehttp://dojotoolkit.org/features/mobile
6112年4月13日金曜日
Wink Toolkithttp://www.winktoolkit.org/
6212年4月13日金曜日
Responsive Web Design Framework
Ghost Track #2
6312年4月13日金曜日
Twitter Bootstrap
Ver.2http://twitter.github.com/
bootstrap/
6412年4月13日金曜日
Foundationhttp://foundation.zurb.com/
6512年4月13日金曜日
スマートフォンサイトの本当に正しい作り方は業界全体が模索の最中
6612年4月13日金曜日
その答えが早く得られるよう皆様のモバイルサイトへの挑戦をアイデアマンズは全力で応援します!
6712年4月13日金曜日
ご清聴ありがとうございました
6812年4月13日金曜日