1. 2011年2月21日
アイデアマンズ株式会社
代表取締役 宮永邦彦

2. 「モバイルサイトは苦手」を
なくしたい！
» 高専時代の友人同士3人で脱サラ
» 2005年11月設立
» Six Apart Solution Partner
2

3. » 1977年北海道生まれ
» 苫小牧高専情報工学科卒
» miyanaga.tumblr.com
3

4. サイト運営の分業化・効率化
» 発信者自身が編集者となりタイムリーな情報提供
» デザイナーとプログラマーが円滑に作業
マルチデバイスへの対応
» テンプレートによるマルチデバイス対応
» ワンソースマルチユースの実現
4

5. デバイスごとのテンプレートで
ワンソースマルチユースを実現
コンテンツ
テンプレート
5

6. 1. スマートフォンサイトの作り方
» 制作テクニックと問題点
2. 携帯サイトの作り方
» 制作テクニックと問題点
3. ケータイキット for Movable Type
» 問題点をどう解決するか
» スマートフォンと携帯サイトへの同時対応
6

7. ⇨
» Apple単独生産
⇨
» 各社からコンスタントに登場
⇨
» Windows Mobile
» BrackBerry
ここではiPhone/Androidを対象にします
7

8. 人気No.1のスマートフォン
8
00800

9. 携帯電話としての側面 PCとしての側面
 画面サイズ  高性能ブラウザ
 携帯性 » HTML5
» CSS3
 通信速度
» JavaScript
» 携帯電話通信網
» WiFiも可  アプリ
PCとも携帯とも違う制作アプローチが必要
9

10. 10

11. 11

12. ⇨ ⇨
» グラデーション » 押しやすさが重要
» 角丸・陰影など ⇨
» CSS3で表現 » Ajaxの活用
⇨
» 携帯に似ている
携帯のようなレイアウト、PCのような表現
12

13. <div class="fnc-btn">
<label>一覧</label>
</div>
.fnc-btn > label {
background: -webkit-gradient /* グラデーション */
(linear, 0% 0%, 0% 100%, from(#6E799D), color-stop(0.05, #93A3D5),
color-stop(0.48, #5A77AF), color-stop(0.52, #3A57A0), to(#1E3A95));
border-radius: 3px; /* 角丸 */
text-shadow: rgba(0, 0, 0, 0.398438) 0px -1px 0px; /* 陰影 */
/* 省略 */
}
スマートフォンらしいサイト制作はCSS3にかかっている
13

14. http://css-eblog.com/eblog_sample/0912/css3-generator/
このようなオンラインツールが多数
14

15. ⇨
» 従来通り画像による表現も可能
» 携帯電話との共通化では妥当な場合も
⇨
» 画像を使わないから通信が軽い
15

16. スマートフォンの本命？

17. ⇨
» 共通レンダリングエンジンWebKitを利用
» 一部にわずかな違いはあり
⇨
» iPhoneは320×480px
» Androidには横長の機種も
• auのIS01・Galaxy Tab
17

18. 縦画面前提のページを横長画面で見ると
18

19. http://m.lexus.jp/
最大480px
19

20. http://ipn.yahoo.co.jp/
隙間を広げて対応
20

21. http://afrosamurai2.jp/iphone/
CSS3で複数の透過PNGを指定
21

22. ⇨画像の問題
» PC向けの記事写真は大きすぎる？
⇨まだまだ圧倒的に携帯が多い
» 携帯全体: 8010万人※1
» スマートフォン: おそらく500万人ほど※2
⇨テンプレート管理
» PC・携帯・スマートフォン？
» 3種類のテンプレート管理は大変
※1 平成21年通信利用動向調査/総務省
※2 MM総研の発表から独自に試算
22

23. まだまだ現役モバイルデバイス

24. 携帯HTMLで古くからサポートされているタグ
基本的にこれらの組み合わせで制作
HTML HEAD TITLE BODY META
BLOCKQUOTE BR BLINK CENTER FONT
DIV H1~6 P PRE HR
MARQUEE A DL DT DD
OL UL LI FORM INPUT
SELECT OPTION TEXT IMG
•文字コードは基本シフトJIS
•段組、マルチカラムなどの複雑なレイアウトはなし
•JavaScriptは利用できない(iモード2.0から一部可)
•空白の制御には透明GIF(スペーサーGIF)
24

25. EZwebとYahoo!ケータイで再現性の高いCSSプロパティ
PCにかなり近い仕様
margin padding display border background
color text-align vertical-align line-height text-indent
text-
white-space font line-style
decoration
25

26. ⇨CSSらしくないCSS
» 外部ファイルを利用できない
» style要素を利用できない(一部を除く)
» 各要素のstyle属性に直接CSSを書く
⇨HTMLと併用できない
» XHTML化必須
⇨iモードブラウザ2.0から大幅改善
» 2008年12月登場
» 浸透までにはあと2～3年か
26

27. ⇨3キャリア対応は必須
» ウィルコム対応は少数
⇨XHTML+CSSがトレンド
» ただしiモードブラウザ1.0に合わせる
» 慣れれば難しくはないが…
<div style=“font-size:small;”>
<span style=“color: red;”>■</span>このように逐一書きます
</div>
27

28. ⇨画像 ⇨キャッシュサイズ
» 機種によって画面の » 1ページ内で使える
解像度が違う データ容量が機種に
» 3キャリア900機種 よって違う
⇨絵文字 ⇨文字
» キャリア間の互換性 » シフトJISが標準
がない » カタカナは半角にす
» 表記が大変 る場合が多い
静的なHTMLファイルでは対応が困難
28

29. Movable Type携帯対応プラグイン

30. ⇨ 2006年
» Google/Yahoo!参入・パケット定額制普及
» 勝手サイトのビジネスニーズが高まる
⇨ Movable TypeのCMS利用が活発に
» 初の実用的低価格CMS
» でも携帯サイト制作を苦手とする制作会社が多い
⇨ 携帯サイトにもMovable Typeを！
» 3キャリアを意識せず、
携帯サイトにもMTを使えるようにしたい！
発売以後1300を超えるライセンスが導入済
30

31. 何ができる？①900以上の機種に対応
⇨
» 画面解像度・キャッシュサイズなど
» Flash Lite対応バージョンも
オンライン
アップデート
31

32. 何ができる？②画像の携帯向け変換
⇨
» 画面サイズ(QVGA/VGA/横画面)
» 待ち受け画像
» 著作権保護機能にも対応
32

33. 何ができる？③3キャリア絵文字対応
⇨
» 絵文字入りのコメント受け付けも可能
&1; &sun;
絵文字のための独自記法
33

34. 何ができる？④長いページの自動分割
⇨
» 縦に長いページはスクロールしにくい
……
1ページ 2ページ
34

35. ケータイキットの仕組み
ブログ記事 テンプレート 静的ファイル出力
データベース
ケータイキットが部分的に キャリア・機種を判別
PHPプログラムを埋め込み 画像や絵文字を変換
PCとほぼ同じ機能・プラグインが利用可能
35

36. デモ

37. ⇨プラグイン(試用版)のインストール
⇨携帯向けテンプレートの制作
» PCサイトの自動変換はしません
» 無料のサンプルテンプレートを配布しています
⇨ライセンスキーの登録
» オンライン販売
» 保守料なし
37

38. 携帯・スマートフォンの同時対応を実現
38

39. スマートフォンサイトの制作アプローチ
① 専用テンプレートを新設
» スマートフォン専用HTML
» 高コスト・管理が大変
② PCからのアプローチ
» PCと同じHTMLを利用
» スマートフォン用CSS
③ 携帯からのアプローチ
» 携帯と同じHTMLを利用
» スマートフォン用CSS
39

40. デモ

41. PCサイトからのアプローチ
Movable Type標準の
クラシックブログテンプレートに
スマートフォン用CSSを適用した例
同じXHTMLソースコード
=同じテンプレート
現実にはスマートフォンに
オーバースペックなことが
多い
41

42. 変換サービスもいろいろ
MOBIFY
http://mobify.me/
MobifyをつかってiPhoneに最適化 | linker journal
http://linker.in/journal/2010/01/mobifyiphone.php
42

43. デモ

44. 携帯サイトからのアプローチ
ケータイキットの
スマートフォン対応機能
Ver.1.60から対応
レイアウトは携帯に近い
44

45. スマートフォン対応の仕組み
<span class=“label” style=“color:red”>
ｶﾀｶﾅ</span>
ブログ記事
データベース
カタカナ全角変換
絵文字を画像変換
CSS属性リセット
スマートフォン用CSS
<span class=“label”>カタカナ
.label { </span>
/* スマートフォン用CSS */
}
45

46. @ideamans
@miyanaga
おまけ→
46

47. Bonus Track
47

48. スマートフォンサイト制作のTips
⇨ プレビューにはSafari
» 「開発者モード」でiPhone偽装が可能、CSS3などの再現性が高い
» 実機プレビューにはiPod touchも可
» Androidには無償のシミュレーターも http://developer.android.com
⇨ とにかくCSS3がキモ
» CSS3とWebKit独自機能をマスター
» 幅指定はmax-widthプロパティが便利
⇨ iPhone 4で画像をきれいに見せるには
» ちょっと大変そう http://design.kayac.com/topics/2010/08/iphone4-
retina-web.php
⇨ 有名サイトのHTML・CSSを参考に
» IP制限がないためアクセス自由
» iPhoneデザインアーカイブ http://iphonedesignarchive.jp/
48

49. iPhone - meta要素による制御
⇨ ズーム操作の抑制
» ピンチによる拡大縮小を抑制
<meta name="viewport" content="width=100%; initial-scale=1.0; maximum-
scale=1.0; user-scalable=0;" />
⇨ 電話番号の自動リンク化を抑制
» 192.168.1.1などが思わぬリンクになる
<meta name="format-detection" content="telephone=no" />
このようにmeta要素で指定する設定もいくつか
49

50. 携帯サイト制作のTips
⇨ プレビューにはFireMobileSimulator
» Firefoxの無料アドオン
» http://firemobilesimulator.org/
⇨ 横480pxで制作
» VGA携帯対応
» スマートフォンも同じ
⇨ 実制作には3キャリア実機が必要
» 最安プランでパケット定額→1台5000円前後
» SIMカードを入れ替えて使える「白ロム」を収集
» アイデアマンズでは5回線・15台ほどの白ロム
50

51. 参考書籍
⇨ 「携帯サイトコーディング&デザイン」
» 高木悠介氏による概論
⇨ 「携帯サイト年鑑2010」
» 津田武氏によるサイトデザインカタログ
⇨ 「携帯+iPhoneモバイルサイト制作術」
» 久保靖資氏ほか
⇨ 「iPhone+Androidスマートフォン制作入門」
» たにぐちまこと氏によるフルカラー入門書
⇨ 「ケータイHTMLポケットリファレンス」
» 佐野正弘氏による(X)HTML+CSSリファレンス
⇨ 「おしゃれなケータイサイトのデザインテンプレートコレクション」
» 株式会社テイ・デイ・エスによるテンプレート集
⇨ 「ケータイサイト解体新書」
» ホシナカズキ氏による実践テクニック
iモードブラウザ2.0に対応した本がオススメ
その他モバイルSEOに特化した本など多数
51