i メディア をもっと面白く！ モバイルファースト時代のマルチスクリーン 対応を考える！ 間違いだらけの Web最適化のアプローチ 株式会社ドーモ 株式会社ドーモ 占部雅一 1 i メディア をもっと面白く！ 占部雅一（うらべまさかず） 株式会社ドーモ ・代表取締役 メディアプランナー/ジャーナリスト デジタルハリウッド大学教授 青山学院大学社会情報学部非常勤講師 出版社を経て独立。 1997年OL向け女性コミュニティの企画・運営 2004年yahoo! WEBタイアップ企画 2008年米国Glam メディアの日本へのローンチ支援。 2012年1月 モバイル最適化サービスをスタート 2 i メディア をもっと面白く！ モバイル最適化とは？ 2012年以前 ＝ スマートフォン対応 2013年 ＝ スマートフォン対応 ＝ 10インチタブレット ＝ 7インチタブレット マルチスクリーンへの対応が課題 3 i メディア をもっと面白く！ モバイル最適化とは？ 2012年以前 ＝ デスクトップファースト 2013年 ＝ モバイルファースト ＝ コンテンツファースト PCサイトとは違うコンテンツ、UIが必要。 4 i メディア をもっと面白く！ 5 i メディア をもっと面白く！ マルチスクリーン対応の条件 １）更新作業がラクであること – 制作費、更新費用、確認チェックがラク ２）コストパフォーマンスが高いこと – 初期導入費、運用費がリーズナブル ３）One Web – 同一URLで、表示できる 6 i メディア をもっと面白く！ 文字校正をできますか？ 7 i メディア をもっと面白く！ 拡張のたびに追加予算が必要？ スクラッチやCMS、プロキシーソリューションでは、今後 のリニューアル・拡張は図のように。 毎回、リニューアルや拡張変更を繰り返す無駄をセーブしなけれ 予算大・修正大 ばならない。 8 i メディア をもっと面白く！ 結論として、 ＞ワンソース・マルチデバイス マルチスクリーンへの条件。 ＞フレキシブルな拡張性 9 ワンソース・マルチデバイスの発想 i メディア をもっと面白く！ ひとつのWebで マルチデバイスに対応！ 9.7inch ×1.3（コスト） ６～7inch PCサイトコンテンツをベース として、さまざまなデバイス にコンバートを行います。 ４～５inch 10 どういうアプローチ方法があるか？ i メディア をもっと面白く！ 11 Domobiの高速化の秘密 i メディア をもっと面白く！ PCサイト サイトの に軽量化 サイトの約1/10に 表示に必要の ないものを一切 読み込まない ■そのほか ・スクラッチ対応 ・プラグイン対応 ・レスポンシブデザイン ・CMSでの対応 ・HTML５ ・そのまま表示 PC側のCDNの負荷の低減 画像キャッ シュ化 セッション回 数の削減 デバイス側 の処理能力 を利用する。 ほかの方法では、レンダリング機能や キャッシュ機能、さらにCDN機能を新た に持たせる必要があり、費用面で別途、 工数面で期間が必要になります。 12 i メディア をもっと面白く！ スクラッチ工法の場合 ・別ドメインになる ・コンテンツ制作費、更新・運用費がかかる。 ・タブレット対応が別途費用 ４～５インチ PCサイト ７インチ 10インチ 13 i メディア をもっと面白く！ CMSで構築 ・別ドメイン。同一ドメインはオプション ・マルチスクリーン対応が別途費用 ・コスト高（初期導入費、運用費、メンテナンス） × 最適化サービスの３～5倍 ４～５インチ PCサイト ７インチ 10インチ 14 i メディア をもっと面白く！ 自動変換：プロキシー・ソリューション ・サブドメインとなってしまう。 ・マルチスクリーン対応が不可能 ・セキュアが確保されない m.yourdomain.com PCサイト yourdomain.com ４～５インチ ７インチ 10インチ t.yourdomain.com 15 i メディア をもっと面白く！ レスポンシブデザイン 16 i メディア をもっと面白く！ トラディショナル・レスポンシブデザイン •構造設計に手間がかかる。 •画像の二重に用意するなど •ロードに時間がかかる。 •高速化のためにキャッシュやレンダリング機能の 新たなインフラ費が必要 •スマホデザインが縦長になる。 •Javascript実装でバグが出やすい •コストがかかりすぎる ×2倍 •まだ経験ある人材が少ない 17 i メディア をもっと面白く！ レスポンシブデザイン ＋最適化ツール =アダプティブデザイン アダプティブ レスポン シブ 18 i メディア をもっと面白く！ ３）OneWEB デジタルメディアは計測できる からこそ、価値がある。 マルチスクリーン対応は、 OneWeb が条件だ。 19 同一URL・同一ページのメリット One Webソリューショ ソリューショ ン（domain.com） ） i メディア をもっと面白く！ Proxy Solutions 専用サイト 専用サイト( サイト(別ドメイン） ドメイン） (m.domain.com) NO。PCサイトからスクレ 二度手間 イプしてクローン作成 リアルタイムコンテンツの 更新 メールマーケティングの統 合 ○ ○ × × リスティング広告との統合 ○ オーガニック検索の最適化 ○ キャンペーンが二度手 間になります。 複製コンテンツがランキ ングをダメする可能性 キャンペーンが二度手 間になります。 新たなSEO対策 新た な集客策 ソーシャルメディアの共有 ○ × × 携帯メールの共有 ○ Analyticsの統合 ○ × × A / Bの最適化試験 ○ × × アフィリエイトコード＆トラッ キング クーポンコード＆モバイル 専用クーポン ○ × × ○ モバイル止まりに × 開発、カスタマイズが必 開発、カスタマイズが 要。 必要。 20 i メディア をもっと面白く！ もうひとつの問題 デスクトップファースト VS モバイルファースト 21 i メディア をもっと面白く！ モバイルUXの追求 • PCサイトではない新しいUIが必要 • PCサイトではない専用のコンテンツが必要 – 画面が小さい – コンテンツに違いができる • アプリ＝位置情報、音声情報、QRコードなど • 結論 新しいコンテンツ、UI/UXが必要。 22 i メディア をもっと面白く！ 現在 PCからモバイルへ ４～５インチ PCサイト 過去の資産を使う 一次的な対応策 ７インチ 10インチ 23 i メディア をもっと面白く！ 新しいソースWebが必要 ４～５インチ ７インチ モバイル Web 10インチ ・モバイルファーストにふさわし いソースWeb。 ・あと２～3年は、PC/Webの資 産を上手に活かすことが可能。 PCサイト 24 i メディア をもっと面白く！ 今後のWebリニューアル 2013年～ ４～５インチ モバイル Web ７インチ？ インチ？ ・軽量化・高速化 ・セキュア対応 ・デザイン自由自在 ・One Web 最 適 化 ク ラ ウ ド ７インチ 10インチ PCサイト 25 サイト構築のためのチェック項目 i メディア をもっと面白く！ □ ローディング時間は速いか？ □ デザインの再現性は十分か？ □ 同一URLか？それともサブドメインか？ □ SEO対策、ソーシャル対応は可能か？ □ タブレット対応は可能か？ □ 構築コストはリーズナブルか？ □ 将来の拡張性はあるか？タブレット対応など 26
© Copyright 2024 Paperzz
