• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Movable type-seminar-20120411-ideamans
 

Movable type-seminar-20120411-ideamans

on

  • 1,813 views

 

Statistics

Views

Total Views
1,813
Views on SlideShare
1,295
Embed Views
518

Actions

Likes
1
Downloads
16
Comments
2

2 Embeds 518

http://www.sixapart.jp 517
http://translate.googleusercontent.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

12 of 2 previous next

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Movable type-seminar-20120411-ideamans Movable type-seminar-20120411-ideamans Presentation Transcript

    • スマートフォン向けウェブサイト制作の 最新事情とMovable Typeによる マルチデバイス対応 アイデアマンズ株式会社 宮永邦彦12年4月13日金曜日 1
    • アイデアマンズ株式会社 • 2005年11月設立 • 高専時代の友人3人で脱サラ • @ideamans • Six Apart Solution Partner12年4月13日金曜日 2
    • MT携帯対応プラグイン12年4月13日金曜日 3
    • ケータイキット • Movable Type携帯対応プラグインのデファ クトスタンダード • 1,500ライセンス以上のライセンス販売実績 • 1,000機種以上のフィーチャーフォンと、ス マートフォン(iPhone/Android)に対応12年4月13日金曜日 4
    • さっそくですが12年4月13日金曜日 5
    • jQuery Mobile vs. レスポンシブWebデザイン12年4月13日金曜日 6
    • スマートフォンサイト制作 話題の技術対決12年4月13日金曜日 7
    • jQuery Mobile12年4月13日金曜日 8
    • jQuery Mobile • モバイルデバイス向けフレームワーク • HTMLだけでスマートフォンサイト制作 • 見た目が実にスマホらしい • 動きがダイナミックでウケがいい12年4月13日金曜日 9
    • 事例 DODA12年4月13日金曜日 10
    • 事例 じゃらん12年4月13日金曜日 11
    • jQuery Mobileを使った国内スマホサイトまとめ http://ascii.jp/elem/000/000/674/674677/12年4月13日金曜日 12
    • Dreamweaver CS5.5 作成支援機能12年4月13日金曜日 13
    • Movable Typeスマートフォンオプション jQuery Mobileによるテーマが同梱12年4月13日金曜日 14
    • レスポンシブWebデザイン12年4月13日金曜日 15
    • レスポンシブWebデザイン • 標準的なCSS3だけでマルチデバイス対応 • Media Queries • 全体の共通するCSSと画面サイズごとのCSS • PC・タブレット・スマートフォンに効率良く 対応12年4月13日金曜日 16
    • Media Queriesの例 body { /* 背景色は共通で指定 */ background-color: #FFFFFF; } @media screen and ( min-width: 481px ) { /* 横480pxより大きい画面(タブレット以上)の場合は */ #banner { /* バナーは回りこませて段組する */ float: left; } }12年4月13日金曜日 17
    • あのオバマ大統領も愛用12年4月13日金曜日 18
    • 首相官邸御用達12年4月13日金曜日 19
    • Media Queries http://mediaqueri.es/12年4月13日金曜日 20
    • メリット・デメリット12年4月13日金曜日 21
    • jQuery MobileのGOOD • HTMLベースだからはじめやすい • 高機能 • オープンソース(MIT/GPL) • デバイス・OSの細かな差異も吸収12年4月13日金曜日 22
    • レスポンシブのGOOD • 標準技術(W3C勧告候補) • 自由度が高い • 従来のWebコーディング技術が活かせる • オバマ大統領も愛用(野田首相も愛用)12年4月13日金曜日 23
    • jQuery MobileのBAD • 縛りが強くロックインされやすい • 一定のラインを超えるとカスタマイズが難しい • 見た目や動作の面において • バージョンアップによる互換性リスク • 良くも悪くもMobile First(いかにもなサイト)12年4月13日金曜日 24
    • レスポンシブのBAD • 事前のルール作りが重要 • 情報設計・UI・コーディング規約などの標準化 • JavaScriptは自前で用意(jQueryなどを活用) • デバイス・OSの差異は自分で確認 • 違うデバイス向けの不用なCSSも読み込ませる12年4月13日金曜日 25
    • プロジェクトへの 適応度をどう評価するか12年4月13日金曜日 26
    • 技術的な難易度 jQuery Mobile レスポンシブ 学習曲線のイメージ 要件の細かさ・カスタマイズ度合い12年4月13日金曜日 27
    • 技術的な難易度 jQuery Mobile レスポンシブ JavaScriptの知識 フレームワーク内部の理解 要件の細かさ・カスタマイズ度合い12年4月13日金曜日 28
    • 技術的な難易度 jQuery Mobile レスポンシブ このラインの共通認識を 受発注両サイドで どう揃えるかが重要 要件の細かさ・カスタマイズ度合い12年4月13日金曜日 29
    • 余談ですが: CMSも似ている12年4月13日金曜日 30
    • MT vs. WP and etc. • Movable Type Professional/Advanced • 有償 • 静的ファイル書き出し • HTMLライクなテンプレートタグ • WordPress(Drupal, Joomla!, etc.) • オープンソース、フリーのテーマやプラグインが多い • 都度ページを動的生成 • PHPによるカスタマイズ12年4月13日金曜日 31
    • 技術的な難易度 WordPress Movable Type PHPの知識 フレームワークの理解 サーバーチューニング 要件の細かさ・カスタマイズ度合い12年4月13日金曜日 32
    • サイトの性格による 向き・不向き12年4月13日金曜日 33
    • jQuery Mobile • アプリケーション的なサイト • サイト自体のメッセージ性よりもコンテンツや 機能が大事なサイト • ポータルサイト • 情報検索などのサービスサイト12年4月13日金曜日 34
    • レスポンシブ • サイト自体がメッセージ性を持つ • デザインが重視されるサイト • ブランド/コーポレートサイト • メディアサイト • キャンペーンサイト12年4月13日金曜日 35
    • 例えばECサイトで • トップページ∼商品詳細ページまではレスポ ンシブ • ショッピングカート∼購入フローはjQuery Mobile12年4月13日金曜日 36
    • やっぱり日本人は 細かな見た目に こだわりたい12年4月13日金曜日 37
    • 汎用的に適用でき デザイナーの裁量が 大きいのはレスポンシブ 「レスポンシブいいよ!」 ※個人の感想です12年4月13日金曜日 38
    • Movable Typeによる マルチデバイス対応戦略 これからのWebサイトに必要なこと12年4月13日金曜日 39
    • インターネットデバイスは 増える一方12年4月13日金曜日 40
    • いままでのモバイル対応は やるか 見送るか12年4月13日金曜日 41
    • スマートフォン対応の 本質はマルチデバイス対応12年4月13日金曜日 42
    • CMS導入は大前提 • コンテンツ(伝えたいこと)は一元管理 • 多重管理の発生を避ける • ワンソース・マルチユースの実現を目指す12年4月13日金曜日 43
    • コストを抑えるには • サイト数×デバイス数となる予算構造を避ける • 構築の費用 • デバイス間で共通化できるものは共通化 • できるだけテンプレートではなくCSS/JavaScriptで対応 • 運用の費用 • 更新頻度の高い領域から共通化・フレームワーク活用12年4月13日金曜日 44
    • 更新頻度が高い コンテンツ CMSで管理 デザイン jQuery Mobile システム レスポンシブ インフラ12年4月13日金曜日 45
    • ガラケーはもういい?12年4月13日金曜日 46
    • 2014年までは フィーチャーフォンが 過半数を占めると予想 現在約25% スマートフォン市場規模の推移・予測(12年3月) ※MM総研調べ http://www.m2ri.jp/newsreleases/main.php? id=01012012031350012年4月13日金曜日 47
    • アイデアマンズの 新規・リニューアル 提案スタイル12年4月13日金曜日 48
    • レスポンシブWebデザイン Movable Type フィーチャーフォンテンプレート12年4月13日金曜日 49
    • 既存のPCサイトを まず モバイル対応させる場合12年4月13日金曜日 50
    • PC・タブレット Movable Type モバイルテンプレート12年4月13日金曜日 51
    • M9テーマ てっとり早くマルチデバイス対応可能なテーマ12年4月13日金曜日 52
    • 管理画面から選択するだけで12年4月13日金曜日 53
    • レスポンシブなWebサイト・ブログを作成12年4月13日金曜日 54
    • PC タブレット タッチデバイスではボタンやリンクを押しやすく12年4月13日金曜日 55
    • スケルトンモード レスポンシブなレイアウトだけ利用して 見た目をフルカスタマイズ可能12年4月13日金曜日 56
    • スケルトンモード 背景・ヘッダー・メニュー・見出しを オリジナルにデザイン12年4月13日金曜日 57
    • M9テーマ • 1ライセンス 10,500円 • 安心サポート 21,000円 • Movable Typeライセンス単位 • 4月13日発売開始予定12年4月13日金曜日 58
    • jQuery Mobile Alternative Ghost Track #112年4月13日金曜日 59
    • Sencha Touch 2 http://www.sencha.com/products/touch12年4月13日金曜日 60
    • Dojo Mobile http://dojotoolkit.org/features/mobile12年4月13日金曜日 61
    • Wink Toolkit http://www.winktoolkit.org/12年4月13日金曜日 62
    • Responsive Web Design Framework Ghost Track #212年4月13日金曜日 63
    • Twitter Bootstrap Ver.2 http://twitter.github.com/ bootstrap/12年4月13日金曜日 64
    • Foundation http://foundation.zurb.com/12年4月13日金曜日 65
    • スマートフォンサイトの 本当に正しい作り方は 業界全体が模索の最中12年4月13日金曜日 66
    • その答えが早く得られるよう 皆様のモバイルサイトへの 挑戦をアイデアマンズは 全力で応援します!12年4月13日金曜日 67
    • ご清聴 ありがとうございました12年4月13日金曜日 68