Your SlideShare is downloading. ×
0
MTセミナー2011/2/21 アイデアマンズ株式会社
MTセミナー2011/2/21 アイデアマンズ株式会社
MTセミナー2011/2/21 アイデアマンズ株式会社
MTセミナー2011/2/21 アイデアマンズ株式会社
MTセミナー2011/2/21 アイデアマンズ株式会社
MTセミナー2011/2/21 アイデアマンズ株式会社
MTセミナー2011/2/21 アイデアマンズ株式会社
MTセミナー2011/2/21 アイデアマンズ株式会社
MTセミナー2011/2/21 アイデアマンズ株式会社
MTセミナー2011/2/21 アイデアマンズ株式会社
MTセミナー2011/2/21 アイデアマンズ株式会社
MTセミナー2011/2/21 アイデアマンズ株式会社
MTセミナー2011/2/21 アイデアマンズ株式会社
MTセミナー2011/2/21 アイデアマンズ株式会社
MTセミナー2011/2/21 アイデアマンズ株式会社
MTセミナー2011/2/21 アイデアマンズ株式会社
MTセミナー2011/2/21 アイデアマンズ株式会社
MTセミナー2011/2/21 アイデアマンズ株式会社
MTセミナー2011/2/21 アイデアマンズ株式会社
MTセミナー2011/2/21 アイデアマンズ株式会社
MTセミナー2011/2/21 アイデアマンズ株式会社
MTセミナー2011/2/21 アイデアマンズ株式会社
MTセミナー2011/2/21 アイデアマンズ株式会社
MTセミナー2011/2/21 アイデアマンズ株式会社
MTセミナー2011/2/21 アイデアマンズ株式会社
MTセミナー2011/2/21 アイデアマンズ株式会社
MTセミナー2011/2/21 アイデアマンズ株式会社
MTセミナー2011/2/21 アイデアマンズ株式会社
MTセミナー2011/2/21 アイデアマンズ株式会社
MTセミナー2011/2/21 アイデアマンズ株式会社
MTセミナー2011/2/21 アイデアマンズ株式会社
MTセミナー2011/2/21 アイデアマンズ株式会社
MTセミナー2011/2/21 アイデアマンズ株式会社
MTセミナー2011/2/21 アイデアマンズ株式会社
MTセミナー2011/2/21 アイデアマンズ株式会社
MTセミナー2011/2/21 アイデアマンズ株式会社
MTセミナー2011/2/21 アイデアマンズ株式会社
MTセミナー2011/2/21 アイデアマンズ株式会社
MTセミナー2011/2/21 アイデアマンズ株式会社
MTセミナー2011/2/21 アイデアマンズ株式会社
MTセミナー2011/2/21 アイデアマンズ株式会社
MTセミナー2011/2/21 アイデアマンズ株式会社
MTセミナー2011/2/21 アイデアマンズ株式会社
MTセミナー2011/2/21 アイデアマンズ株式会社
MTセミナー2011/2/21 アイデアマンズ株式会社
MTセミナー2011/2/21 アイデアマンズ株式会社
MTセミナー2011/2/21 アイデアマンズ株式会社
MTセミナー2011/2/21 アイデアマンズ株式会社
MTセミナー2011/2/21 アイデアマンズ株式会社
MTセミナー2011/2/21 アイデアマンズ株式会社
MTセミナー2011/2/21 アイデアマンズ株式会社
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

1,952

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
1,952
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
29
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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のスマートフォン 800800
  • 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 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. 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. 変換サービスもいろいろMOBIFYhttp://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 Track47
  • 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

×