マルチデバイス時代のCMSテンプレート管理と

Movable Typeのモバイル対応

2011年10月31日アイデアマンズ株式会社代表取締役　宮永邦彦

宮永邦彦1977年北海道生まれ

苫小牧高専情報工学科卒

@miyanaga

アイデアマンズ株式会社

★@ideamans★高専時代の友人同士3人で脱サラ★2005年11月設立★Six Apart Solution Partner

3

「モバイルサイトは苦手」をなくしたい！

主力製品

ケータイキット★ Movable Type用携帯対応プラグイン๏ 2006年11月リリース

๏ 1400ライセンス以上の導入実績

๏ デファクトスタンダード

★スマートフォンにも対応！★ 1ライセンス105,000円๏ ProNet・制作会社様向け割引価格あります

5

Another Edition様

6

海猿サポーターズブログ様

7

JAM Kitchen様

8

この他、上場・大手企業の有名サイトでも

多数利用されています

1000機種以上の仕様DBを内蔵

10

1000+

オンラインアップデート

端末情報からコンテンツを最適化★画像を機種ごとに自動変換๏ 機種ごとに違う液晶サイズに最適変換

★絵文字をキャリアごとに自動変換★長いページを携帯向けに自動分割★文字コード変換・カタカナ半角変換

11

携帯サイトの3キャリア多機種の問題を意識せずに

PCと同じようにテンプレートを構築するためのプラグイン

こんなこともできます★カスタムフィールドの利用๏ MTのほとんどの機能・プラグインを利用可能

★ ECサイト連携๏ セッション機能

★待受画像の自動生成・著作権保護

13

スマートフォンオプションとの違いは？

スマートフォンオプションは★管理画面の閲覧ツール๏ MTのほとんどの機能・プラグインを利用可能

★スマートフォンテーマ๏ カスタマイズ不要な簡易テーマ

★一方、ケータイキットは๏ 携帯・スマートフォンサイトをガリガリカスタマイズするためのプラグイン

15

マルチデバイス時代のテンプレート管理術

CMS導入の目的★サイト運営の分業化・効率化๏ 発信者自身が編集者となりタイムリーな情報提供

๏ デザイナーとプログラマーが円滑に作業

★マルチデバイスへの対応๏ テンプレートによるマルチデバイス対応

๏ ワンソースマルチユースの実現

17

従来のWebサイト制作の限界

PC用サイト モバイル用サイト

多重管理が発生

CMSの導入が急務共通コンテンツ

PC用テンプレート モバイル用テンプレート

とはいえ、デバイスの種類だけテンプレートを作成・管理するのは

かなり大変！

デバイスごとのテンプレート

21

自由度: 高コスト: 高

ガラケーもまだまだ無視できない

スマートフォンの普及予測

23

スマートフォン市場規模の推移・予測（11年7月） - MM総研http://www.m2ri.jp/newsreleases/main.php?id=010120110707500

2011年8.8%

2015年50%突破

新機種の約半数そして出荷台数の49.5%※が

スマートフォン普及は加速するのでは

※2011年度上期スマートフォン出荷台数、約8割がAndroid端末http://journal.mycom.co.jp/news/2011/10/28/053/

それにしてもSEO・動画携帯・スマートフォン・タブレット

Twitter・Facebook…

新しいトレンド・デバイス・ソーシャルメディアの登場サイクルが

加速の一途に

そのスピードが自社メディアのリニューアルサイクルを超え自社メディアのあり方が

常に問われている

今日はモバイルデバイスを中心にマルチデバイス対応について技術的な背景から考えてみます

CSSで解決できるか？

30

★ CSS = Cascading Style Sheet๏ Webサイトの装飾技術

内容=HTML

デザイン=CSS

CSSでテンプレートもひとつに!?

31

共通テンプレート

ガラケーのCSS

32

★特殊な仕様๏ CSSであってCSSでない

★ 2～3年で改善されるだろう๏ docomoのiモードブラウザ1.0が問題だが主流でなくなりつつある

๏ docomoはiモードブラウザ2.0がまずまずOK

๏ EZWeb、SoftbankはまずまずOK

Responsive Web Design

CSSによるデバイスサイズに応じたウェブデザイン

共通のCSSでマルチデバイス対応

CSS3 Media Queries

ブラウザやデバイスの画面サイズでCSSを書き分ける技術

テンプレートが4→2セット

36

共通テンプレート ガラケーテンプレート

これでテンプレート管理が楽に！

参考: Apple社の場合

いわゆるスマホ最適化をしてない

39

pxt | 考察：Appleはスマホサイトを作らない。http://www.pxt.jp/ja/diary/article/257/index.html

ダブルタップ

ダブルタップ

もうひとつのアプローチ

ガラケーとスマートフォンのテンプレートを共通化

ガラケーとスマホを共通化

41

PC・タブレットテンプレート

モバイル向けテンプレート

小さな画面で見せたい情報は似ている

42

ケータイキットのスマートフォン対応機能を利用

同じテンプレート・URLで対応可能

44

ケータイキットの仕組み

45

PC用HTML 携帯用PHP画像変換など

PC向けテンプレート

携帯向けテンプレート

スマホ用CSS

iPhoneとAndroidの違い★共通点๏ 同じブラウザエンジンWebKitが使われている

๏ ほぼ同じページが再現可能

★相違点๏ 一部のCSSやJavaScriptに違いがあり

๏ フォントなど組み込みされた要素

๏ 画面サイズ(iPhoneは統一・Androidはバラバラ)

46

1. PCとテンプレートを共通化2. ガラケーとテンプレートを共通化

マルチデバイス対応のコストダウン

PCとのテンプレート共通化★メリット๏ スマートフォンでもJavaScriptなどの動的表現が使える

๏ Webの進化の流れを考えるとこうあるべき

★デメリット๏ PCサイトのデザイン自由度が下がる

๏ HTML設計・CSS実装に高度な技術が必要

48

ガラケーとのテンプレート共通化★メリット๏ ガラケーとスマホでレイアウトを似せやすい

๏ ガラケー向けの資産を活かしやすい

★デメリット๏ JavaScriptなどが使いにくい

๏ HTML設計・CSS実装に高度な技術が必要

49

コストとあるべきデザインからマルチデバイス対応のためのテンプレートを設計しましょう

アイデアマンズはこれからもMovable Typeによる

モバイルサイト構築への挑戦を応援します

ページ表示高速化ツールFastPageのご紹介

ページの表示が遅くなると★ 0.1秒遅くなると๏ 売上が1%ダウンする(Amazon)

★ 0.5秒遅くなると๏ アクセス数が20%ダウンする(Google)

★ 1秒遅くなると๏ PV -11% コンバージョン -7% 満足度 -16%

53

表示高速化の重要性★ PV・売上に影響★ SEO効果๏ レスポンスのよいページは高評価

★モバイルで特に重要๏ 速度の遅い3G通信網でも快適な表示を

54

表示の高速化は技術的に難しくHTMLやCSSの書き直しが必要

FastPageは既存のサイトにファイルをアップロードするだけ！

同じサイトで比較

57

HTMLやCSSは一切変更なし

FastPageなし FastPageあり

リクエスト時間

58

x2 Faster

リクエスト数

59

72 to 6

YSlow Performance Score

60

C to AYSlow: 米Yahoo!が提供するページ高速化支援ツール

静的なHTMLファイルに有効Movable Typeによる

サイトであればすぐ使えます

Comming Soon

オープンソース版 11月7日商用版 11月30日

ご清聴ありがとうございました