31
shuttoによるスマートフォン最適化

2013/05/18 Web制作会社向け shuttoセミナー shuttoによるスマートフォン最適化

Embed Size (px)

Citation preview

Page 1: 2013/05/18 Web制作会社向け shuttoセミナー shuttoによるスマートフォン最適化

shuttoによるスマートフォン最適化

Page 2: 2013/05/18 Web制作会社向け shuttoセミナー shuttoによるスマートフォン最適化

HTMLの知識がなくても、ドラック&ドロップで簡単にスマートフォン画面のデザインができるセルフ変換ツールとして、2011年にスタート

Page 3: 2013/05/18 Web制作会社向け shuttoセミナー shuttoによるスマートフォン最適化

スマートフォン最適化ニーズの多様化、⾼度化ショッピングカート機能やログイン後のマイページ等にも対応するオーサリングツールとして進化約1,000サイトで導入される

Page 4: 2013/05/18 Web制作会社向け shuttoセミナー shuttoによるスマートフォン最適化

shuttoを使った事例を幾つか

Page 5: 2013/05/18 Web制作会社向け shuttoセミナー shuttoによるスマートフォン最適化

ムラタアクティブパートナー

PCサイトのデザインを踏襲しつつ、タップ、フリック等のスマートフォンの直感的な操作を意識した構成

Page 6: 2013/05/18 Web制作会社向け shuttoセミナー shuttoによるスマートフォン最適化

アイオーデータ(製品ページ)

同じレイアウトの製品ページを共通テンプレートによる⼀括変換で効率的に対応

Page 7: 2013/05/18 Web制作会社向け shuttoセミナー shuttoによるスマートフォン最適化

チーズガーデン(ECサイト)

ECCUBEで構築されたオンラインショップの商品ページからカートまで変換

Page 8: 2013/05/18 Web制作会社向け shuttoセミナー shuttoによるスマートフォン最適化

BESS(全国展示場40拠点)

同じ構成の展示場ブログ(PCはMT構築)を複製して効率的に対応

Page 9: 2013/05/18 Web制作会社向け shuttoセミナー shuttoによるスマートフォン最適化

eAのスマートフォン最適化案件の約3/4がPCサイト変換を選択

Page 10: 2013/05/18 Web制作会社向け shuttoセミナー shuttoによるスマートフォン最適化

なぜ、PCサイト変換を選択するか

Page 11: 2013/05/18 Web制作会社向け shuttoセミナー shuttoによるスマートフォン最適化

企業WEBサイトオーナーのスマートフォン最適化ニーズ・スピード(早く対応したい)・予算(PCの1/3ぐらいで…)・品質(クオリティは下げない)

Page 12: 2013/05/18 Web制作会社向け shuttoセミナー shuttoによるスマートフォン最適化

こういった要望の背景は…?

Page 13: 2013/05/18 Web制作会社向け shuttoセミナー shuttoによるスマートフォン最適化

MM総研 2013.3.28

2014年モバイル端末出荷に占めるスマートフォン⽐率が8割を超え、2018年スマートフォン⽐率は73.2%へ

Page 14: 2013/05/18 Web制作会社向け shuttoセミナー shuttoによるスマートフォン最適化

2012年 Google社 Our Mobile Planet スマートフォン調査

いつも手元にあるデバイスとして予想以上のスピードで生活に定着

Page 15: 2013/05/18 Web制作会社向け shuttoセミナー shuttoによるスマートフォン最適化

スマートフォン最適化の選択肢は?

Page 16: 2013/05/18 Web制作会社向け shuttoセミナー shuttoによるスマートフォン最適化

スマートフォン専用サイト

レスポンシブデザイン/

ワンソースのHTMLPCサイト変換

メリット PCサイトに縛られず独自展開

・URLが同じ・デバイス毎に最適化

・URLが同じ・PCサイトの更新と連動

デメリット・高コスト・同一コンテンツなのにURLが別になる・メンテナンスが二重化

・サイトリニューアルが必要・設計工数がかかる

・ASPのランニングコスト・外部アクセスが禁止されているイントラネット内等に対応できない

スマートフォン最適化の手法

Page 17: 2013/05/18 Web制作会社向け shuttoセミナー shuttoによるスマートフォン最適化

eAのスマートフォン最適化手法の約3/4がPCサイト変換によるもの

Page 18: 2013/05/18 Web制作会社向け shuttoセミナー shuttoによるスマートフォン最適化

shuttoを使った制作フローの効率化

Page 19: 2013/05/18 Web制作会社向け shuttoセミナー shuttoによるスマートフォン最適化

shuttoを利⽤した制作では、PCサイトを元にするため、画面設計+デザイン作成⼯程を⼤幅に省略

主要3Pプレビュー制作

残り全ページ制作

本番公開

Page 20: 2013/05/18 Web制作会社向け shuttoセミナー shuttoによるスマートフォン最適化

プレビューにより、クライアントは実機で操作感を確かめられるので、具体的なFBが得られる

Page 21: 2013/05/18 Web制作会社向け shuttoセミナー shuttoによるスマートフォン最適化

ナビゲーションヘッダー

シンボル化による共通パーツ活用

Page 22: 2013/05/18 Web制作会社向け shuttoセミナー shuttoによるスマートフォン最適化

大枠はドラッグ&ドロップを活用CSSやJavascriptで作りこむ

Page 23: 2013/05/18 Web制作会社向け shuttoセミナー shuttoによるスマートフォン最適化

同じレイアウトのページは正規表現で一括変換

Page 24: 2013/05/18 Web制作会社向け shuttoセミナー shuttoによるスマートフォン最適化

同じ構成のサイトは複製

Page 25: 2013/05/18 Web制作会社向け shuttoセミナー shuttoによるスマートフォン最適化

スクラッチ制作の期間と比べて、約1/3のスケジュールヒアリング要件定義

ワイヤーフレーム

デザイン案

コーディング テストアップ

本番公開

主要3Pプレビュー

全ページ制作

本番公開

Page 26: 2013/05/18 Web制作会社向け shuttoセミナー shuttoによるスマートフォン最適化

平均的な制作期間は1ヶ⽉程度※サイト規模や難易度にもよる

Page 27: 2013/05/18 Web制作会社向け shuttoセミナー shuttoによるスマートフォン最適化

shutto変換の様子を動画でhttps://www.youtube.com/watch?v=OhmN2m0fm-0

Page 28: 2013/05/18 Web制作会社向け shuttoセミナー shuttoによるスマートフォン最適化

プロ版 フリー版機能制限 なし 一部あり広告表示 なし あり

料 ⾦初期費用:15,000円年間費⽤:60,000円

なし

shuttoのプロ版とフリー版の違い

Page 29: 2013/05/18 Web制作会社向け shuttoセミナー shuttoによるスマートフォン最適化

営業、ディレクターがスマートフォンサイト構築イメージの提案資料としてやモックとしてもプレビューを活用

フリー版プレビューについて

Page 30: 2013/05/18 Web制作会社向け shuttoセミナー shuttoによるスマートフォン最適化

shuttoを活用して「PCサイトのスマホ化」を自社メニューとして展開することができるため、ビジネスの幅を広げることができます。変換に際しての設定料(制作費⽤)に規定はありませんので、任意の料⾦で販売ができます。

(shuttoのアカウント利⽤費はパートナー価格でご提供をさせていただきます。)

※販売代理店様の加⼊料、ノルマなどはありません。

shutto 販売代理店制度

Page 31: 2013/05/18 Web制作会社向け shuttoセミナー shuttoによるスマートフォン最適化

shuttoサポート[email protected]

http://shutto.com/http://www.facebook.com/shuttocomhttp://twitter.com/#!/shuttocom