マルチデバイス時代の CMSテンプレート管理と Movable Typeのモバイル対応 2011年10月31日 アイデアマンズ株式会社 代表取締役 宮永邦彦
マルチデバイス時代の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日
ご清聴ありがとうございました