2011年2月21日アイデアマンズ株式会社 代表取締役 宮永邦彦
「モバイルサイトは苦手」を                   なくしたい!» 高専時代の友人同士3人で脱サラ» 2005年11月設立» Six Apart Solution Partner                     2
» 1977年北海道生まれ» 苫小牧高専情報工学科卒» miyanaga.tumblr.com 3
サイト運営の分業化・効率化 » 発信者自身が編集者となりタイムリーな情報提供 » デザイナーとプログラマーが円滑に作業マルチデバイスへの対応 » テンプレートによるマルチデバイス対応 » ワンソースマルチユースの実現           4
デバイスごとのテンプレートでワンソースマルチユースを実現                 コンテンツ        テンプレート                  5
1.   スマートフォンサイトの作り方     » 制作テクニックと問題点2.   携帯サイトの作り方     » 制作テクニックと問題点3.   ケータイキット for Movable Type     » 問題点をどう解決するか     »...
⇨    » Apple単独生産⇨    » 各社からコンスタントに登場⇨    » Windows Mobile    » BrackBerry       ここではiPhone/Androidを対象にします                 ...
人気No.1のスマートフォン        800800
携帯電話としての側面            PCとしての側面   画面サイズ                高性能ブラウザ   携帯性                   » HTML5                          ...
10
11
⇨                ⇨    » グラデーション        » 押しやすさが重要    » 角丸・陰影など    ⇨    » CSS3で表現        » Ajaxの活用⇨    » 携帯に似ている      携帯のよう...
<div class="fnc-btn">                                                   <label>一覧</label>                                 ...
http://css-eblog.com/eblog_sample/0912/css3-generator/          このようなオンラインツールが多数                         14
⇨    » 従来通り画像による表現も可能    » 携帯電話との共通化では妥当な場合も⇨    » 画像を使わないから通信が軽い              15
スマートフォンの本命?
⇨    » 共通レンダリングエンジンWebKitを利用    » 一部にわずかな違いはあり⇨    » iPhoneは320×480px    » Androidには横長の機種も     • auのIS01・Galaxy Tab       ...
縦画面前提のページを横長画面で見ると        18
http://m.lexus.jp/   最大480px        19
http://ipn.yahoo.co.jp/隙間を広げて対応           20
http://afrosamurai2.jp/iphone/CSS3で複数の透過PNGを指定               21
⇨画像の問題 » PC向けの記事写真は大きすぎる?⇨まだまだ圧倒的に携帯が多い » 携帯全体: 8010万人※1 » スマートフォン: おそらく500万人ほど※2⇨テンプレート管理 » PC・携帯・スマートフォン? » 3種類のテンプレート管理...
まだまだ現役モバイルデバイス
携帯HTMLで古くからサポートされているタグ基本的にこれらの組み合わせで制作   HTML      HEAD     TITLE   BODY     METABLOCKQUOTE    BR      BLINK   CENTER   FO...
EZwebとYahoo!ケータイで再現性の高いCSSプロパティPCにかなり近い仕様  margin       padding        display         border      background   color     ...
⇨CSSらしくないCSS » 外部ファイルを利用できない » style要素を利用できない(一部を除く) » 各要素のstyle属性に直接CSSを書く⇨HTMLと併用できない » XHTML化必須⇨iモードブラウザ2.0から大幅改善  » 20...
⇨3キャリア対応は必須   » ウィルコム対応は少数⇨XHTML+CSSがトレンド   » ただしiモードブラウザ1.0に合わせる   » 慣れれば難しくはないが…<div style=“font-size:small;”><span styl...
⇨画像           ⇨キャッシュサイズ » 機種によって画面の   » 1ページ内で使える   解像度が違う        データ容量が機種に » 3キャリア900機種    よって違う⇨絵文字          ⇨文字 » キャリア間...
Movable Type携帯対応プラグイン
⇨ 2006年  » Google/Yahoo!参入・パケット定額制普及  » 勝手サイトのビジネスニーズが高まる⇨ Movable   TypeのCMS利用が活発に  » 初の実用的低価格CMS  » でも携帯サイト制作を苦手とする制作会社が...
何ができる?①900以上の機種に対応⇨    » 画面解像度・キャッシュサイズなど    » Flash Lite対応バージョンも    オンライン    アップデート                 31
何ができる?②画像の携帯向け変換⇨    » 画面サイズ(QVGA/VGA/横画面)    » 待ち受け画像    » 著作権保護機能にも対応                32
何ができる?③3キャリア絵文字対応⇨    » 絵文字入りのコメント受け付けも可能      &1; &sun;    絵文字のための独自記法                  33
何ができる?④長いページの自動分割⇨    » 縦に長いページはスクロールしにくい                          ……           1ページ    2ページ              34
ケータイキットの仕組み ブログ記事     テンプレート   静的ファイル出力データベース     ケータイキットが部分的に         キャリア・機種を判別     PHPプログラムを埋め込み        画像や絵文字を変換      ...
デモ
⇨プラグイン(試用版)のインストール⇨携帯向けテンプレートの制作 » PCサイトの自動変換はしません » 無料のサンプルテンプレートを配布しています⇨ライセンスキーの登録 » オンライン販売 » 保守料なし             37
携帯・スマートフォンの同時対応を実現           38
スマートフォンサイトの制作アプローチ①   専用テンプレートを新設    »   スマートフォン専用HTML    »   高コスト・管理が大変②   PCからのアプローチ    »   PCと同じHTMLを利用    »   スマートフォン用...
デモ
PCサイトからのアプローチMovable Type標準のクラシックブログテンプレートにスマートフォン用CSSを適用した例               同じXHTMLソースコード                 =同じテンプレート        ...
変換サービスもいろいろMOBIFYhttp://mobify.me/  MobifyをつかってiPhoneに最適化 | linker journal  http://linker.in/journal/2010/01/mobifyiphone....
デモ
携帯サイトからのアプローチケータイキットのスマートフォン対応機能Ver.1.60から対応               レイアウトは携帯に近い               44
スマートフォン対応の仕組み                         <span class=“label” style=“color:red”>                         カタカナ</span> ブログ記事データベ...
@ideamans@miyanaga            おまけ→   46
Bonus Track47
スマートフォンサイト制作のTips⇨   プレビューにはSafari    »   「開発者モード」でiPhone偽装が可能、CSS3などの再現性が高い    »   実機プレビューにはiPod touchも可    »   Androidには...
iPhone - meta要素による制御⇨ ズーム操作の抑制  » ピンチによる拡大縮小を抑制<meta name="viewport" content="width=100%; initial-scale=1.0; maximum-scale...
携帯サイト制作のTips⇨ プレビューにはFireMobileSimulator » Firefoxの無料アドオン » http://firemobilesimulator.org/⇨ 横480pxで制作 » VGA携帯対応 » スマートフォン...
参考書籍⇨   「携帯サイトコーディング&デザイン」    »   高木悠介氏による概論⇨   「携帯サイト年鑑2010」    »   津田武氏によるサイトデザインカタログ⇨   「携帯+iPhoneモバイルサイト制作術」    »   久保...
Upcoming SlideShare
Loading in …5
×

MTセミナー2011/2/21 アイデアマンズ株式会社

2,152 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
2,152
On SlideShare
0
From Embeds
0
Number of Embeds
391
Actions
Shares
0
Downloads
30
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

MTセミナー2011/2/21 アイデアマンズ株式会社

  1. 1. 2011年2月21日アイデアマンズ株式会社 代表取締役 宮永邦彦
  2. 2. 「モバイルサイトは苦手」を なくしたい!» 高専時代の友人同士3人で脱サラ» 2005年11月設立» Six Apart Solution Partner 2
  3. 3. » 1977年北海道生まれ» 苫小牧高専情報工学科卒» miyanaga.tumblr.com 3
  4. 4. サイト運営の分業化・効率化 » 発信者自身が編集者となりタイムリーな情報提供 » デザイナーとプログラマーが円滑に作業マルチデバイスへの対応 » テンプレートによるマルチデバイス対応 » ワンソースマルチユースの実現 4
  5. 5. デバイスごとのテンプレートでワンソースマルチユースを実現 コンテンツ テンプレート 5
  6. 6. 1. スマートフォンサイトの作り方 » 制作テクニックと問題点2. 携帯サイトの作り方 » 制作テクニックと問題点3. ケータイキット for Movable Type » 問題点をどう解決するか » スマートフォンと携帯サイトへの同時対応 6
  7. 7. ⇨ » Apple単独生産⇨ » 各社からコンスタントに登場⇨ » Windows Mobile » BrackBerry ここではiPhone/Androidを対象にします 7
  8. 8. 人気No.1のスマートフォン 800800
  9. 9. 携帯電話としての側面 PCとしての側面 画面サイズ  高性能ブラウザ 携帯性 » HTML5 » CSS3 通信速度 » JavaScript » 携帯電話通信網 » WiFiも可  アプリ PCとも携帯とも違う制作アプローチが必要 9
  10. 10. 10
  11. 11. 11
  12. 12. ⇨ ⇨ » グラデーション » 押しやすさが重要 » 角丸・陰影など ⇨ » CSS3で表現 » Ajaxの活用⇨ » 携帯に似ている 携帯のようなレイアウト、PCのような表現 12
  13. 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. 14. http://css-eblog.com/eblog_sample/0912/css3-generator/ このようなオンラインツールが多数 14
  15. 15. ⇨ » 従来通り画像による表現も可能 » 携帯電話との共通化では妥当な場合も⇨ » 画像を使わないから通信が軽い 15
  16. 16. スマートフォンの本命?
  17. 17. ⇨ » 共通レンダリングエンジンWebKitを利用 » 一部にわずかな違いはあり⇨ » iPhoneは320×480px » Androidには横長の機種も • auのIS01・Galaxy Tab 17
  18. 18. 縦画面前提のページを横長画面で見ると 18
  19. 19. http://m.lexus.jp/ 最大480px 19
  20. 20. http://ipn.yahoo.co.jp/隙間を広げて対応 20
  21. 21. http://afrosamurai2.jp/iphone/CSS3で複数の透過PNGを指定 21
  22. 22. ⇨画像の問題 » PC向けの記事写真は大きすぎる?⇨まだまだ圧倒的に携帯が多い » 携帯全体: 8010万人※1 » スマートフォン: おそらく500万人ほど※2⇨テンプレート管理 » PC・携帯・スマートフォン? » 3種類のテンプレート管理は大変※1 平成21年通信利用動向調査/総務省※2 MM総研の発表から独自に試算 22
  23. 23. まだまだ現役モバイルデバイス
  24. 24. 携帯HTMLで古くからサポートされているタグ基本的にこれらの組み合わせで制作 HTML HEAD TITLE BODY METABLOCKQUOTE 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. 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. 26. ⇨CSSらしくないCSS » 外部ファイルを利用できない » style要素を利用できない(一部を除く) » 各要素のstyle属性に直接CSSを書く⇨HTMLと併用できない » XHTML化必須⇨iモードブラウザ2.0から大幅改善 » 2008年12月登場 » 浸透までにはあと2~3年か 26
  27. 27. ⇨3キャリア対応は必須 » ウィルコム対応は少数⇨XHTML+CSSがトレンド » ただしiモードブラウザ1.0に合わせる » 慣れれば難しくはないが…<div style=“font-size:small;”><span style=“color: red;”>■</span>このように逐一書きます</div> 27
  28. 28. ⇨画像 ⇨キャッシュサイズ » 機種によって画面の » 1ページ内で使える 解像度が違う データ容量が機種に » 3キャリア900機種 よって違う⇨絵文字 ⇨文字 » キャリア間の互換性 » シフトJISが標準 がない » カタカナは半角にす » 表記が大変 る場合が多い 静的なHTMLファイルでは対応が困難 28
  29. 29. Movable Type携帯対応プラグイン
  30. 30. ⇨ 2006年 » Google/Yahoo!参入・パケット定額制普及 » 勝手サイトのビジネスニーズが高まる⇨ Movable TypeのCMS利用が活発に » 初の実用的低価格CMS » でも携帯サイト制作を苦手とする制作会社が多い⇨ 携帯サイトにもMovable Typeを! » 3キャリアを意識せず、 携帯サイトにもMTを使えるようにしたい! 発売以後1300を超えるライセンスが導入済 30
  31. 31. 何ができる?①900以上の機種に対応⇨ » 画面解像度・キャッシュサイズなど » Flash Lite対応バージョンも オンライン アップデート 31
  32. 32. 何ができる?②画像の携帯向け変換⇨ » 画面サイズ(QVGA/VGA/横画面) » 待ち受け画像 » 著作権保護機能にも対応 32
  33. 33. 何ができる?③3キャリア絵文字対応⇨ » 絵文字入りのコメント受け付けも可能 &1; &sun; 絵文字のための独自記法 33
  34. 34. 何ができる?④長いページの自動分割⇨ » 縦に長いページはスクロールしにくい …… 1ページ 2ページ 34
  35. 35. ケータイキットの仕組み ブログ記事 テンプレート 静的ファイル出力データベース ケータイキットが部分的に キャリア・機種を判別 PHPプログラムを埋め込み 画像や絵文字を変換 PCとほぼ同じ機能・プラグインが利用可能 35
  36. 36. デモ
  37. 37. ⇨プラグイン(試用版)のインストール⇨携帯向けテンプレートの制作 » PCサイトの自動変換はしません » 無料のサンプルテンプレートを配布しています⇨ライセンスキーの登録 » オンライン販売 » 保守料なし 37
  38. 38. 携帯・スマートフォンの同時対応を実現 38
  39. 39. スマートフォンサイトの制作アプローチ① 専用テンプレートを新設 » スマートフォン専用HTML » 高コスト・管理が大変② PCからのアプローチ » PCと同じHTMLを利用 » スマートフォン用CSS③ 携帯からのアプローチ » 携帯と同じHTMLを利用 » スマートフォン用CSS 39
  40. 40. デモ
  41. 41. PCサイトからのアプローチMovable Type標準のクラシックブログテンプレートにスマートフォン用CSSを適用した例 同じXHTMLソースコード =同じテンプレート 現実にはスマートフォンに オーバースペックなことが 多い 41
  42. 42. 変換サービスもいろいろMOBIFYhttp://mobify.me/ MobifyをつかってiPhoneに最適化 | linker journal http://linker.in/journal/2010/01/mobifyiphone.php 42
  43. 43. デモ
  44. 44. 携帯サイトからのアプローチケータイキットのスマートフォン対応機能Ver.1.60から対応 レイアウトは携帯に近い 44
  45. 45. スマートフォン対応の仕組み <span class=“label” style=“color:red”> カタカナ</span> ブログ記事データベース カタカナ全角変換 絵文字を画像変換 CSS属性リセット スマートフォン用CSS <span class=“label”>カタカナ .label { </span> /* スマートフォン用CSS */ } 45
  46. 46. @ideamans@miyanaga おまけ→ 46
  47. 47. Bonus Track47
  48. 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. 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. 50. 携帯サイト制作のTips⇨ プレビューにはFireMobileSimulator » Firefoxの無料アドオン » http://firemobilesimulator.org/⇨ 横480pxで制作 » VGA携帯対応 » スマートフォンも同じ⇨ 実制作には3キャリア実機が必要 » 最安プランでパケット定額→1台5000円前後 » SIMカードを入れ替えて使える「白ロム」を収集 » アイデアマンズでは5回線・15台ほどの白ロム 50
  51. 51. 参考書籍⇨ 「携帯サイトコーディング&デザイン」 » 高木悠介氏による概論⇨ 「携帯サイト年鑑2010」 » 津田武氏によるサイトデザインカタログ⇨ 「携帯+iPhoneモバイルサイト制作術」 » 久保靖資氏ほか⇨ 「iPhone+Androidスマートフォン制作入門」 » たにぐちまこと氏によるフルカラー入門書⇨ 「ケータイHTMLポケットリファレンス」 » 佐野正弘氏による(X)HTML+CSSリファレンス⇨ 「おしゃれなケータイサイトのデザインテンプレートコレクション」 » 株式会社テイ・デイ・エスによるテンプレート集⇨ 「ケータイサイト解体新書」 » ホシナカズキ氏による実践テクニック iモードブラウザ2.0に対応した本がオススメ その他モバイルSEOに特化した本など多数 51

×