movable type-seminar-20120411-ideamans

スマートフォン向けウェブサイト制作の最新事情と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日金曜日

Media Queries

http://mediaqueri.es/

2012年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日金曜日