1

高まる携帯サイトの重要性とMovable Typeの携帯対応

2008年10月27日MT4で実現する「攻め」のWEBサイト！CMS導入セミナー

アイデアマンズ株式会社代表取締役 宮永邦彦

2

アイデアマンズ株式会社

• 2005年11月設立• パッケージソフトウェアの開発

‒ ケータイキット for Movable Type‒ WebScan‒ AreaEditor(フリーウェア)

• MTを使ったWebサイト制作• PHP・Perlなどによるシステム開発

書籍・雑誌記事

• 書籍‒ 携帯ブログサイト構築ガイドブック‒ MT4 新しいWebサイトの黄金則

• 雑誌記事‒ 月刊web creatorsにときどき寄稿

3

本日のアジェンダ

• 携帯インターネットの現状‒ 携帯サイトはビジネスチャンス！

• 携帯サイト制作の問題点‒ 「簡単なのに面倒」な携帯サイトづくり

• プラグインによるMTの携帯対応‒ ケータイキット for Movable Typeのご紹介‒ ワンソースマルチユース(PC/携帯)の実現‒ 導入事例

4

携帯インターネットの現状もはや無視できない携帯サイトへの対応

5

おさらい公式サイトと一般サイト

• 公式サイト‒ キャリアが承認した高品位な携帯サイト‒ 公式メニューに掲載‒ キャリアが決済代行

• 一般サイト(勝手サイト)‒ キャリアの承認を経ていないサイト‒ プロモーション、決済の面で不利‒ 低予算でスタート可能

本日は主に「企業の一般サイト利用」についてお話します

6

ユーザ数動向携帯ネットユーザはPCとほぼ同数

7

両方使う5,993万人

パソコン7,813万人

携帯電話・PHS7,287万人

平成19年「通信利用動向調査」／総務省

携帯サイトの躍進mixiのアクセス数は携帯がPCを逆転

2007年8月を境に携帯からのアクセス数がPCを逆転成果の高い携帯広告が収益に貢献

8

IT+PLUS『「モバゲー」「ミクシィ」「グリー」に続く成長株はどこか・携帯サイト勢力図（上）』

（http://it.nikkei.co.jp/mobile/news/index.aspx?n=MMIT1d000025082008）

参考PVの多い人気携帯サイト

9

媒体名 運営会社 サイトの種類 月間モバイルＰＶ数 会員数

モバゲータウン ディー・エヌ・エー SNS、ゲーム 14,917,000,000 10,780,000

ミクシィ ミクシィ SNS 8,850,000,000 14,900,000

MobileSpace エーウォーカー 無料ホームページ 8,000,000,000 3,000,000

グリー グリー SNS 6,000,000,000 6,000,000

ヤフー！モバイル ヤフー 検索、ポータル 3,863,000,000 22,100,000

＠ｐｅｐｓなど ピーネスト 無料ホームページ 3,790,000,000 8,970,000

魔法のiらんど 魔法のiらんど 小説 3,500,000,000 6,000,000

アメーバ サイバーエージェント ブログ 2,001,000,000 -

フォレストページ ビジュアルワークス 無料ホームページ 1,900,000,000 1,600,000

ポケットスペース サイバープラス 無料ホームページ 1,000,000,000 800,000

スター・ビーチ スター・ビーチ 掲示板 450,000,000 -

•コミュニティ、無料ホームページが強い！

IT+PLUS『「モバゲー」「ミクシィ」「グリー」に続く成長株はどこか・携帯サイト勢力図（上）』（http://it.nikkei.co.jp/mobile/news/index.aspx?n=MMIT1d000025082008）

考察携帯サイト向きのコンテンツの例

• 更新性・粘着性の強いコンテンツ‒ SNSなどのコミュニティ‒ 株式・外為など投資系

• 緊急性の高いコンテンツ‒ 乗り換え案内・地図・施設案内など

• クロスメディア‒ テレビ・雑誌・屋外広告などからの受け皿として

• 若年層・女性向けコンテンツ‒ 教育・ファッション・美容など

これらのコンテンツ展開に携帯対応は必須10

急進する携帯SEO/SEM

11

• 検索エンジンの充実• キャリアとの大型提携(Google/Yahoo!)• 独立系の増加(MSN、CROOZ!など)

• SEO/SEMに関するサービス・書籍が続々登場• 手法が確立しつつある• 以下は2007年以降の書籍・雑誌の一例

制作会社・デザイナーの実感携帯サイト制作の相談は増加傾向

12

11.4%

50.9%37.6%

Q.携帯サイトの相談は増えていますか？CSS Nite in Ginza, vol.21来場者アンケート(有効回答114件)

以前から多い

以前より増えている

ほとんどない

携帯サイトはビジネスチャンス！

• トレンド: 需要は上昇中‒ PCに迫るユーザー数‒ 接触頻度・リテラシーの向上‒ SEO/SEMの急進‒ 制作相談の増加‒ 広告予算の拡大

• ギャップ: 供給は不足気味‒ 顧客はPC/携帯をワンストップで依頼したい‒ 携帯サイトも得意とする制作・開発会社が少ない

• 「携帯サイトは大変そう」

PCサイト構築のスキルを携帯サイト構築に活かせないか？

13

携帯サイト制作の実情と問題点簡単なのに面倒な携帯サイトづくり

14

実は簡単携帯向けHTMLは10年前のPCと同程度

15

HTML HEAD TITLE BODY METABLOCKQUOTE BR BLINK CENTER FONT

DIV H1~6 P PRE HRMARQUEE A DL DT DD

OL UL LI FORM INPUTSELECT OPTION TEXT IMG

•文字コードはシフトJIS•段組、マルチカラムなどの複雑なレイアウトはなし•JavaScriptは利用できない

携帯HTMLで古くからサポートされているタグ

EZwebとYahoo!ケータイではCSSも使いやすい

16

margin padding display border background

color text-align vertical-align line-height text-indentwhite-space text-

decorationfont line-style

•EZwebは2001年から、Y!ケータイは2003年からCSSに対応(一部の機種を除く)

EZwebとYahoo!ケータイで再現性の高いCSSプロパティ

iモードのCSSはちょっと曲者

• 厳密なXHTMLで記述しないと適用されない‒ 拡張子.xhtml‒ HTMLと互換性が低い

• color、bgcolorなどの属性が無効• 外部CSSファイル・<style>タグ使用不可

‒ 構造とスタイルの分離ができない！• でも表現力は高い

‒ 背景色が使える

17

•iモードはFOMA対応機種からXHTML+CSSが利用可能(2003年以降)

アイデアマンズ社内の携帯サイトのデザイン水準

18

④+FlashLite③XHTML+CSS

②HTML+CSS①HTML

旧機種との互換性高実装が簡単

メンテしやすい

EZwebとSoftbankに対して、

表現力向上

iモードに対しても表現力向上ちょっと大変

対応機種は限定表現力は飛躍的に向上、互換性高

低予算 表現力

携帯サイト制作の問題点PCサイトのとの相違

PCサイトの場合 携帯サイトの場合画像サイズ OSやブラウザが違ってもサ

イトの幅は大体統一機種によって液晶サイズが違う

データサイズ HTMLや画像のデータ量は事実上無制限

機種によって1ページで使えるデータ量が厳密に決まっている

絵文字 絵文字は使わないか、使うとしても画像で表現

絵文字は軽量で強力な表現だが、キャリアごとに互換性が不十分

文字コード UTF-8が主流で、半角カタカナはタブー

シフトJISが主流で、半角カタカナを多用

HTMLソース OSやブラウザが違ってもHTMLソースは共通

キャリアや機種が違うと書き分けなければならない

19

ケータイキットのご紹介携帯サイトの問題点はプラグインで吸収！

20

ケータイキット for Movable Type「MT携帯対応プラグイン」

21

• Movable Typeのプラグイン‒ 簡単インストール‒ 他のプラグインとの組み合わせが可能

• 約700機種の仕様データを内蔵‒ 携帯サイト用テンプレートの作成を支援‒ 静的なHTMLではなくPHPを出力

• 400ライセンス以上を納入

MTをCMSとしたサイト制作技術を活かし携帯サイトの制作ができます

ケータイキット for Movable Type主な機能

22

• 画像の自動変換‒ 機種の液晶サイズを判別し、自動変換‒ 著作権保護や、待ち受け画像生成にも対応

• 絵文字の自動変換‒ iモード用の絵文字を基準に、キャリア間のコードを自動変換

• ページの自動分割‒ 機種ごとに1ページあたりのサイズを考慮し、コンテンツを自動分割

• 文字コードの自動変換‒ PC向けサイトの文字コードに関わらず、携帯サイトはシフトJISに変換

‒ カタカナも自動で半角に変換

ケータイキット for Movable Type製品概要

23

• 動作環境‒ Movable Type 3.2以上

• Enterprise 1.5以上‒ PHP 4.3以上‒ ImageMagickまたはGD(グラフィック機能)

• 価格‒ 初期ライセンス費用 52,500円(税込)‒ 年間データ保守料 10,500円(税込)‒ クレジットカード、請求書払いなど幅広く対応

• 試用版無料ダウンロード‒ 60日間全機能を試用できます

ケータイキット for Movable Typeよくいただくご質問

24

• モブログではありません‒ 携帯から投稿するツールではありません

• 無料・安価なツールとの違い‒ MT4i、モバイルサイトmakerとの違い

MT標準のテンプレート機能を使い他のプラグインと組み合わせながらCMSのカスタマイズが可能です

ケータイキットの仕組みとワンソースマルチユースの実現

25

MTブログ記事

HTMLファイル

テンプレート

PHPファイル

携帯用携帯用テンプレート

ケータイキットがPHPプログラムを生成

キャリアや機種を判別絵文字や画像を変換

導入事例のご紹介ケータイキット for Movable Type

26

ケータイキット導入の三大パターン

①既存のPC向けサイトを携帯でも閲覧可能にする

②MTを携帯専用サイトのCMSとして利用する

③ PCと携帯のハイブリッドなCMSとして利用する

27

①既存のPC向けブログを携帯でも閲覧可能にする(1)

28

植山周志のぶっ飛びブログ（http://www.shoe-g.com/）

①既存のPC向けブログを携帯でも閲覧可能にする(2)

29

J-CASTニュース（http://www.j-cast.com/）

②MTを携帯専用サイトのCMSとして利用する

30

武蔵大学公式携帯サイトhttp://musashi-univ.jp/

③PCと携帯のハイブリッドなCMSとして利用する

31

ロックバンド「plane」オフィシャルHP（http://www.plane-jp.com/）

③PCと携帯のハイブリッドなCMSとして利用する

32

CD/DVD情報、ニュースなど更新頻度の高い情報は一元管理

MTの新機能への対応Movable Type 4.xで強化された機能への対応は？

33

MT新機能への対応

34

• 対応済み‒ カスタムフィールド‒ ウェブページ‒ サーバサイドインクルード(PHPのみ)‒ MT4.2で強化された検索機能‒ グローバルテンプレート

• 非対応‒ コミュニティ機能‒ ダイナミックテンプレート‒ ウィジェット‒ タグ検索機能‒ ブログ記事やテンプレートのプレビュー

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

35