スマホ 変 換 ツール スマホ 変 換 ツールshuttoのご 紹 介 2015/11/5 株 式 会 社 イー エージェンシー 1
目 次 1.スマートフォン 最 適 化 について 2.shuttoについて 4.タブレットPC 対 応 について 5.よくあるご 質 問 2
1.スマートフォン 最 適 化 について 3
スマートフォン 最 適 化 の 手 法 1.スマートフォン 最 適 化 について 専 用 サイトを 新 規 で 制 作 レスポンシブWebデザイン スマートフォン 変 換 shutto 予 算 メリット 数 百 万 以 上 PCサイトに 縛 られず 独 自 展 開 スマホユーザーに 集 中 最 適 デメリット 同 一 コンテンツなのにURLが 別 になる メンテナンスが 二 重 化 するので 運 用 コストが 大 きくなる 予 算 100 メリット 100 万 以 上 URLが 同 じ デバイス 毎 に 最 適 化 クライアントの 認 知 率 高 く 制 作 単 価 高 い デメリット サイトリニューアルが 必 要 設 計 工 数 がかかる 制 作 予 算 20 万 メリット 20 万 100 URLが 同 じ PCサイトの 更 新 と 連 動 デメリット ASPのランニングコスト クライアントの 認 知 率 は 高 くない 4
スマートフォン 変 換 サービスの 主 な 種 類 1.スマートフォン 最 適 化 について 自 動 変 換 手 動 変 換 bmobilized duda mobile shutto 違 い ワンクリックで 変 換 プラグインが 豊 富 細 かいコンテンツの 選 択 不 可 URL ドメインが 変 わる 違 い ワンクリックで 変 換 ステップに 沿 って 作 成 するので 簡 単 細 かいデザイン 設 定 が 困 難 URL ドメインが 変 わる shutto huttoより 月 額 利 用 料 が 安 い 制 作 単 価 は5 万 10 万 が 相 場 違 い デザインの 柔 軟 性 が 高 い 設 定 は 手 動 同 一 URL html/ html/css cssの 知 識 があれば 細 かく 作 り 込 可 能 5
スマートフォン 手 動 変 換 の 種 類 サーバ 変 換 型 変 換 サーバ 変 換 1.スマートフォン 最 適 化 について ブラウザ 変 換 型 shutto 変 換 変 換 サービス 側 の 変 換 サーバで 変 換 します サービスにより 変 換 サーバに 独 自 ドメインを 使 用 する 事 が 可 能 shutto サーバ 変 換 サーバにはデザイン 要 素 のみ 保 存 されています 利 用 料 がshutto shuttoより より10 倍 程 度 高 い 10 15 15 万 / 月 制 作 は 提 供 会 社 が 行 うケースが 多 い PCとスマートフォンで 表 示 されるHTMLは 同 じです スマートフォンの 場 合 は 変 換 サーバで 読 み 込 むデ ザインが 適 用 され 見 た 目 だけが 変 更 されます shutto huttoを 使 って 制 作 する 専 門 の 会 社 がある 6
2.shuttoについて 7
shuttoについて 2.shuttoについて PCページを 見 ながら ドラッグ&ドロップでスマホサイトのデザインを 作 成 出 来 るツールです レイアウトをドラッグ&ドロップで 整 え 管 理 画 面 上 でCSSを 使 った 効 率 的 なデザインができます ドラッグ&ドロップするだけ! 2015 年 11 月 現 在 実 際 にshutto 変 換 サイト 数 は 約 12,500サイトとなっております 有 料 版 は 約 800サイトご 利 用 いただいております 主 な 導 入 サイトは コーポレートサイト 採 用 サイト ECサイト また 病 院 学 校 自 治 体 団 体 など 8
shutto 導 入 事 例 2.shuttoについて サービスサイト BESSスクエア 様 ECサイト 那 須 高 原 チーズガーデン 様 http://square.bess.jp/ http://cheesegarden.jp/shop/ 製 品 サイト アイ オー データ 様 検 索 サイト テンポバックス 様 http://www.iodata.jp/product/ http://www.tenpobacks.com/ サービスご 紹 介 サイトをはじめ ECサイト 等 さまざまなサイトでご 利 用 いただけます 9
shuttoをご 利 用 いただく7つのメリット(1/7) 2.shuttoについて (1)PCページと 同 じURLが 使 える! shuttoのjavascriptを 埋 め 込 んだサイト スマホからのアクセスを 自 動 選 別 してスマホサイトを 表 示 PCサイトにJavascriptの 共 通 タグを1 行 貼 り 付 けるだけ(アクセス 解 析 ツールのgoogle analyticsのように)で スマートフォンでアクセスしたときにスマホ 対 応 ページを 表 示 URLを 変 えずにご 利 用 いただけます 10
shuttoをご 利 用 いただく7つのメリット(2/7) (2)PCページの 更 新 が 自 動 反 映 される 変 換 元 PCページ 変 換 後 スマホページ 2.shuttoについて shuttoではpcページのhtmlをスマホのブラウザで 変 換 するた め もちろんPCページの 更 新 は 即 時 反 映 11
shuttoをご 利 用 いただく7つのメリット(3/7) 2.shuttoについて (3) 公 開 までが 早 い( 変 換 デモ) HD 簡 単 スマホ 変 換 サービス shutto(シュット) 変 換 動 画 http://youtu.be/ohmn2m0fm-0 倍 速 かんたんスマホ 変 換 サービス shutto(シュット) 変 換 デモ http://youtu.be/_f8k2_oqags 12
shuttoをご 利 用 いただく7つのメリット(3/7) 2.shuttoについて (3) 公 開 までが 早 い 新 規 でスマートフォンサイトを 制 作 した 場 合 1 2 3 4 5 ヒアリング ワイヤー 要 件 定 義 フレーム デザイン 案 コーディング 本 番 公 開 shuttoでpcサイトを 変 換 した 場 合 1 2 3 主 要 3ページ 全 ページ プレビュー 制 作 制 作 本 番 公 開 ルック&フィールがそのまま コンテンツがそのまま クライアントの 確 認 が 簡 単 shuttoを 利 用 した 制 作 では PCサイトを 元 にするため 画 面 設 計 +デザイン 作 成 工 程 を 大 幅 に 省 略 することができます スクラッチでの 制 作 に 比 べると 約 1/2 1/3の 期 間 で 公 開 できます 逆 に 言 うと ヒアリング 要 件 定 義 ワイヤーフレーム デザイン 案 などをしっかりと 行 いたい 案 件 ではshuttoの 良 さは 活 かせません 13
shuttoをご 利 用 いただく7つのメリット(4/7) 2.shuttoについて (4)クラウドなのでお 客 様 が 編 集 することも 可 能 シンボル CSS JavaScript 一 部 の 修 正 だけならshuttoにあまり 詳 しくない 方 でも 行 うことができます 14
shuttoをご 利 用 いただく7つのメリット(5/7) (5) 同 じ 構 成 のページは1つの 設 定 でできる Shutto 開 発 blogのケース トップ 詳 細 アーカイブ 2.shuttoについて 詳 細 ページは 同 じページ 構 成 なので 1つだけ 変 換 の 設 定 をしている(http://shutto.com/edit/rule/LSZwp8p) また アクセスが 少 ないアーカイブページは 工 数 を 減 らすためにわざわざ 変 換 していません 15
shuttoをご 利 用 いただく7つのメリット(6/7) 2.shuttoについて (6)PC 変 換 だけど スマホ 独 自 のコンテンツを 挿 入 できる ウェブサイトを PC PCで 見 る ユーザーとスマホで 見 るユ ーザーは 利 用 シーンが 異 なります Shuttoならスマートフォン ページだけに 出 すコンテン ツ(テキストや 画 像 HTML )を 即 座 に 変 更 追 加 する ことができます 16
shuttoをご 利 用 いただく7つのメリット(7/7) 2.shuttoについて (7)shuttoはモバイルフレンドリーです SEMリサーチ より http://www.sem-r.com/google-2010/20141119044652.html google oogleのmobile Mobile-Friendly Testで で shutto shuttoで 変 換 され たページをテストしました 17
18
変 換 を 始 めるその 前 に 知 っておきたいこと 19
対 象 PCサイトの 変 換 可 否 を 調 査 (1/3) shuttoは 様 々なサイトを 変 換 する 事 が 可 能 です 変 換 可 能 なサイト スクラッチで 制 作 した 静 的 なサイト スクラッチで 制 作 したphpやCGIなどの 動 的 なサイト ログイン 問 い 合 せフォームなど (jsが 動 かないケースも) JSによる 動 的 ページ (jsが 動 かないケースも) 力 技 で 動 かすケースはある WEBシェルパ 実 績 のある 主 なCMS 20
対 象 PCサイトの 変 換 可 否 を 調 査 (2/3) ただし 変 換 できない 要 素 がございますので 変 換 可 否 の 調 査 を 行 います 変 換 できない 要 素 PCサイトに 組 み 込 みのJavaScript frame Flash 他 に HTML3.0などTableを 多 用 したページや そもそもHTMLタグの 記 述 が 正 しくないサイ ト 21
対 象 PCサイトの 変 換 可 否 を 調 査 (3/3) shuttoと 相 性 が 悪 いJavaScriptの 有 無 を 確 認 するため トップページやフォームのページを shutto 編 集 ページに 表 示 して 調 査 します OK 例 コンテンツが 表 示 されている NG 例 表 示 されないコンテンツがある 22
変 換 を 始 めるその 前 に やっておきたいこと 23
対 象 ページ 一 覧 を 作 る 数 ページのサイトであれば 必 要 ありませんが 対 象 ページ 一 覧 を 作 成 することで 導 線 や 同 じ 構 成 のページを 洗 い 出 すことができます 工 数 の 削 減 につながります 記 事 詳 細 などの 同 じ 構 成 のページは shuttoでは1つのテンプレートで 対 応 できます 24
変 換 を 始 めるその 前 に 効 率 よく 変 換 設 定 を 作 るには? 25
同 じ 構 造 のページは1つの 設 定 で 対 応 する 同 じ 構 造 のページの 場 合 1つの 変 換 設 定 を 複 数 のURLに 対 して 適 用 させることができます 商 品 詳 細 ページは 全 部 同 じ 構 造 のページ 26
この 設 定 が 適 用 される 条 件 を 設 定 (1/3) 同 じ 構 造 のページの 場 合 1つの 変 換 設 定 を 複 数 のURLに 対 して 適 用 させることができます 商 品 詳 細 ページのそれぞれのURL http://cheesegarden.jp/shop/products/detail.php?product_id=197 http://cheesegarden.jp/shop/products/detail.php?product_id=117 http://cheesegarden.jp/shop/products/detail.php?product_id=2196 http://cheesegarden.jp/shop/products/detail.php?product_id=2193 http://cheesegarden.jp/shop/products/detail.php?product_id=2194 http://cheesegarden.jp/shop/products/detail.php?product_id=2195 http://cheesegarden.jp/shop/pr oducts/detail.php?product_id= までは 共 通 shuttoページ 一 覧 クリックでメニュー 開 く http://cheesegarden.jp/shop/produ cts/detail.php?product_id= の 後 ろの 文 字 列 は 削 除 し 前 方 一 致 を 選 択 する 27
この 設 定 が 適 用 される 条 件 を 設 定 (2/3) 完 全 一 致 前 方 一 致 完 全 一 致 はドメイン 以 下 が この 設 定 が 適 用 されるページの 条 件 の 場 合 に 適 用 されます 例 えばドメインが www.e-agency.co.jp の 場 合 下 記 ページが 対 象 になります http://www.e-agency.co.jp/showcase/ 前 方 一 致 はドメイン 以 下 が この 設 定 が 適 用 されるページの 条 件 の 前 方 に 合 致 する 場 合 に 適 用 されます 例 えばドメインが www.e-agency.co.jp の 場 合 下 記 ページが 対 象 になります http://www.e-agency.co.jp/showcase/ * http://www.e-agency.co.jp/showcase/000464.html http://www.e-agency.co.jp/showcase/000457.html 後 方 一 致 含 む 後 方 一 致 はドメイン 以 下 が この 設 定 が 適 用 されるページの 条 件 の 後 方 に 合 致 する 場 合 に 適 用 されます 例 えばドメインが www.e-agency.co.jp の 場 合 下 記 ページが 対 象 になります http://www.e-agency.co.jp * /showcase/ http://www.e-agency.co.jp/service/showcase/ http://www.e-agency.co.jp/company/showcase/ 含 む はドメイン 以 下 に この 設 定 が 適 用 されるページの 条 件 が 含 まれる 場 合 に 適 用 されます 例 えばドメインが www.e-agency.co.jp の 場 合 下 記 ページが 対 象 になります http://www.e-agency.co.jp * /showcase/ * http://www.e-agency.co.jp/showcase/000464.html http://www.e-agency.co.jp/service/showcase/ 28
この 設 定 が 適 用 される 条 件 を 設 定 (3/3) 正 規 表 現 正 規 表 現 一 致 はドメイン 以 下 の この 設 定 が 適 用 されるページの 条 件 に 正 規 表 現 を 記 述 し 条 件 を 適 用 させることが 可 能 です 記 述 できる 正 規 表 現 は javascriptの 正 規 表 現 になります 上 記 の 正 規 表 現 では 下 記 ページが 対 象 になります http://xxxxx.com/ http://xxxxx.com/.index.html http://xxxxx.com/?xxxxxxxxxxxxxxxx http://xxxxx.com/.index.html?xxxxxxxxxxxxxxxx indexの 後 ろが.htmlでなく.phpだった 場 合 なども 適 用 となります 29
変 換 の 準 備 が 出 来 たら では 変 換 を 始 めましょう! 30
shuttoユーザ 登 録 ユーザ 登 録 しなくても デモ 変 換 を 試 すことはできますが 保 存 することができません 無 料 で 登 録 できますので まずはユーザ 登 録 を 行 います 1shutto.comのサイトにアクセス 2 必 要 事 項 を 入 力 して 新 規 登 録 31
shutto 変 換 設 定 をつくる それではshuttoで 変 換 設 定 を 作 っていきます 多 くの 場 合 トップページからスタートします 挿 入 メニューと 編 集 メニュー PCサイトを 表 示 スマホの レイアウト 画 面 32
デザインのポイント1 ~ナビゲーション(1/2)~ (1)ナビゲーション スマートフォンサイトを 作 る 場 合 もPCページと 同 じようにナビゲーションの 設 計 が 非 常 に 重 要 です タイプ1 スタンダード タイプ2 メニュー 機 能 を 利 用 クリックで 展 開 33
デザインのポイント1 ~ナビゲーション(2/2) ~ (1)ナビゲーション タイプ3 ブロック 型 下 層 ページ 見 てほしいコンテンツが 絞 られている 場 合 ブロック 型 でページ 上 部 と 下 部 の2 箇 所 にメインナビ ゲーションを 設 置 すると 便 利 です トップページ 34
デザインのポイント2 ~パンくずリスト~ (2)パンくずリスト スマートフォンサイトではどの 階 層 にいるか 認 識 しずらいため パンくずリストが 効 果 的 です POINT パンくずリストがあると 画 面 面 積 をとってしまう ため 非 表 示 にしたいと 要 望 いただく 場 合 があり ますが 下 層 ページに 直 接 ランディングするなど した 場 合 ユーザはどこにいるのか 分 からなく なってしまうため なるべく 配 置 することをおす すめします 35
デザインのポイント3 ~リンクボタン~ (3)リンクボタン タッチパネルの 画 面 で 押 しやすいリンクボタンを 作 成 しましょう ボタン 化 されていないリンク ボタン 化 されたリンク リンク 範 囲 ブロック 全 体 がリンク 範 囲 となる 36
デザインのポイント4 ~ 地 図 ~ (4) 地 図 (Google Static Map) map リンクを 作 成 しておくと 端 末 に 内 蔵 された 地 図 アプリを 起 動 スマホならではの 機 能 です PCページの 地 図 は 画 像 だけですが スマホサイ トにはGoogleMapの 地 図 も 併 設 しています 37
デザインのポイント5 ~ 電 話 番 号 ~ (5) 電 話 番 号 リンク tel: リンクを 作 成 しておくと クリックで 直 接 電 話 をかけることができます iphoneの 場 合 リンク の 項 目 に tel: で 始 まる 電 話 番 号 リンクを 設 定 すると Android 端 末 でもクリックしたときに 電 話 発 信 ダイアログが 起 動 します 38
変 換 設 定 のポイント shuttoではpcページの 更 新 があった 場 合 自 動 で 更 新 されますが 要 素 が 追 加 されたり HTML 構 造 が 変 わってしまった 場 合 には 再 度 作 り 直 す 必 要 があります ここでは 多 少 の 変 更 では 修 正 に 必 要 がない 変 換 設 定 の 作 り 方 ポイントをお 伝 えします 左 図 のような 変 換 設 定 の 場 合 1.お 知 らせ 部 分 の 内 容 増 減 自 動 更 新 2.バナー 等 エリアの 追 加 自 動 で 追 加 されない バナー 追 加 39
変 換 設 定 のポイント1 ~ 繰 り 返 し(1/3)~ (1) 繰 り 返 し 繰 り 返 しはPCサイトで 表 示 される 要 素 数 の 増 減 に 対 応 できます 1 行 ずつドラッグ&ドロップすると 要 素 が 増 えても 設 定 した 数 だけしか 表 示 することができない ( 少 ない 場 合 は 影 響 はない) 40
変 換 設 定 のポイント1 ~ 繰 り 返 し(2/3)~ (1) 繰 り 返 し 1. 最 初 の1 行 目 だけドラッ グ&ドロップ 最 初 のブロック 選 択 時 に 右 クリック 繰 り 返 し 繰 り 返 したい 要 素 を 選 択 41
変 換 設 定 のポイント1 ~ 繰 り 返 し(3/3)~ (1) 繰 り 返 し 同 じ 要 素 が 続 くかぎり 繰 り 返 されます リピートを 使 用 すると 変 換 設 定 作 成 時 間 の 短 縮 だけでなく 更 新 性 の 高 い 変 換 を 作 ることができます 42
変 換 設 定 のポイント2 ~HTML 構 造 保 持 (1/2)~ (2)HTML 構 造 保 持 繰 り 返 しよりさらに 更 新 性 高 いのが HTML 構 造 を 保 持 する です PCサイトのテーブル 全 体 を 選 択 してドロップすると HTMLタグが 無 効 になったテキストデータとして ドロップされます 43
変 換 設 定 のポイント2 ~HTML 構 造 保 持 (2/2)~ (2)HTML 構 造 保 持 HTML 構 造 を 保 持 する にチェックをいれる PCページのHTMLタグが そのまま 有 効 になります HTML 構 造 を 保 持 する とPCサイトをより 大 きなエリアで 変 換 できるので 更 新 性 が 高 い 変 換 設 定 を 作 るこ とができます ただし CSSでデザインする 必 要 があり CSSの 知 識 が 必 要 になる 高 度 な 設 定 方 法 となります 44
変 換 設 定 のポイント3 ~シンボル(1/2)~ (3)シンボル Pro 版 シンボル 化 したい 要 素 を 選 択 複 数 選 択 する 場 合 は ctrl+ クリック 右 クリックメニューの シンボル 化 をクリック シンボル 化 する 事 により ヘッダーやフッターなどの 共 通 デザイン 要 素 を 一 括 管 理 できるようになります 45
変 換 設 定 のポイント3 ~シンボル(2/2)~ (3)シンボル Pro 版 シンボル 化 された 要 素 は ロックされます シンボルを 挿 入 するには 右 クリックメニューの シンボル 挿 入 から 選 択 します 46
公 開 前 の 最 終 表 示 チェック プレビューURLからリンクを 辿 って 全 ページの 変 換 を 確 認 します 複 数 ページ 対 応 している ページも 前 項 の 適 用 され るURLの 条 件 設 定 が 間 違 っていなければ 各 ペー ジの 表 示 確 認 を 行 うことが できます 注 意 POSTデータ(Form)の 遷 移 は プレビューページでは 確 認 する ことができません テスト 環 境 をご 用 意 いただいて ご 確 認 いただくことを 推 奨 して おります 47
PCサイトにshuttoタグを 挿 入 shutto 変 換 を 呼 び 出 すためのJavaScriptファイルを 管 理 画 面 からダウンロードします shuttoホーム 画 面 JavaScriptをダウンロード をクリック すると ローカルに smp.js という JavaScriptファイルが 保 存 されます 48
PCサイトにshuttoタグを 挿 入 先 ほどダウンロードした smp.js を 変 換 したいサイトがあるWebサーバに 配 置 します 例 )FTPソフト 画 面 ローカル 側 Webサーバ 側 Webサーバにアップする FTPソフトなどで smp.js ファイルを 任 意 の 場 所 にアップします shuttoでは js ディレクトリへの 配 置 を 推 奨 しておりますが サーバ 内 のどこでも 結 構 です 49
PCサイトにshuttoタグを 挿 入 Webサーバにアップロードした smp.js を 読 み 込 むタグを WebページHTMLファイルの <head>タグ 内 に 埋 め 込 みます 例 )Webページ 例 )トップページ htmlファイル <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1- transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" id="sixapart-standard"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <link href="/common/css/main.css" rel="stylesheet" type="text/css" media="all" /> <!--Shutto 変 換 タグ--> <script type="text/javascript javascript" src="/ ="/js js/smp.js"></script> <meta name="keywords" content="bess, 総 合 展 示 場 BESSスクエア,ログハウス, 木 の 家,ベス,モデルハウス" /> <meta name="description" content="ログハウス 木 の 家 のBESSの 総 合 展 示 場 BESSスクエア 展 示 場 は 暮 らしの 体 感 展 示 場 自 由 に 何 時 間 でも 過 ごしていただけます 楽 しいイベントも 開 催 していますので ぜひご 来 場 ください " /> <title> 東 京 代 官 山 総 合 展 示 場 BESSスクエア 株 式 会 社 アールシーコア</title> </head> 注 意 smp.js をトップディレクトリ js に 格 納 した 場 合 の 記 述 です 他 のディレクトリに 格 納 した 場 合 は 適 宜 記 述 を 修 正 してください スマートフォン 変 換 をしたい 全 てのページに 同 じようにタグを 埋 め 込 みます 50
PCサイトにshuttoタグを 挿 入 変 換 設 定 が 表 示 (shuttoページ 一 覧 の 一 番 右 にある 目 アイコン)になっているとき PC ページにshuttoタグを 設 置 した 瞬 間 スマートフォンページ 表 示 がスタートします ホーム 画 面 > ページ 設 定 一 覧 このようにグレーアウト 状 態 のときは 公 開 されま せん PCに 設 置 された shuttoタグ と 変 換 設 定 のセットでスマート フォン 変 換 がなされます 51
実 際 にどんな 風 に 設 定 しているかデモを 見 てましょう 倍 速 で1ページを 変 換 設 定 するデモ http://youtu.be/_f8k2_oqags shuttoを 使 ったパーツごとの 設 定 デモ メニュー 編 http://youtu.be/bubo0mquiyw テキスト 編 http://youtu.be/0p4k8ffs79y 画 像 編 http://youtu.be/_v5ivp5xz4q ボックス 編 http://youtu.be/q5mcqsg85kw アコーディオン 編 http://youtu.be/wlbpcdpaa2k ページ 内 リンク 編 http://youtu.be/e0cfsqkkuny HTMLとCSS 編 http://youtu.be/87jieatodne 繰 り 返 し 編 http://youtu.be/nrb0voeqzre PC 表 示 ボタン 編 http://youtu.be/4h1bplt-iug 52
4.タブレットPC 対 応 について 53
タブレット 用 機 能 の 使 い 方 マスター 版 4.タブレットPC 対 応 について スマホレイアウト 画 面 の 右 上 のプルダウンより タブ レットのサイズの 編 集 画 面 を 選 択 します 挿 入 パーツより タブレット 用 > 2カラム を 選 択 し 設 置 し カラム 内 に 右 側 のPCビュー 画 面 から 要 素 を 設 置 し ます 2カラムの 編 集 メニューで サイドバーの 位 置 と 幅 を 指 定 します 注 意 タブレットの 変 換 を 行 う 際 は ホーム 画 面 左 側 のサイト 設 定 にある 対 応 端 末 設 定 を 変 更 した 後 に 変 換 用 の JavaScriptファイルのダ ウンロードを 行 ってくださ い 54
5.よくあるご 質 問 55
shuttoご 利 用 料 金 2.shuttoについて フリー 版 プロ 版 マスター 版 ご 利 用 料 金 0 円 初 期 費 用 年 間 利 用 料 15,000 円 ( 税 抜 ) 60,000 円 ( 税 抜 ) 3 初 期 費 用 年 間 利 用 料 15,000 円 ( 税 抜 ) 120,000 円 ( 税 抜 ) 4 広 告 表 示 あり なし なし 1 サポート フォーラムにて 受 付 メールサポートのみ FAQ/フォーラム メールサポートまたは 電 話 FAQ/フォーラム タブレット 対 応 機 能 制 限 あり なし なし 2 有 料 版 のお 申 込 みは 1ドメインに 対 し 1つ 必 要 です サブドメインは 別 ドメイン としてカウントいたします 変 換 ページ 数 月 間 PV 数 の 制 限 はございません 1 フリー 版 の 広 告 表 示 開 始 は2012 年 6 月 11 日 からとなります 2 フリー 版 の 機 能 の 制 約 はこちらをご 確 認 ください 機 能 一 覧 3 プロ 版 のご 利 用 料 金 は1 年 契 約 となり 以 降 自 動 更 新 となります 4 プロ 版 からマスター 版 へのアップグレードは 現 在 の 契 約 の 満 了 月 までの 月 割 り 差 額 を 初 回 にご 請 求 させていただきます 56
shutto 推 奨 環 境 2.shuttoについて shutto スマートフォン/タブレット 対 応 OS スマートフォン / タブレットの 表 示 対 応 は 下 記 となります (2015 年 11 月 現 在 ) OS ios 6.0 以 上 / Android 4.0 以 上 ブラウザ iosの 場 合 はSafari / Google Chrome Androidの 場 合 は 標 準 ブラウザ / Google Chrome 1 1 対 象 OSでWebページを 閲 覧 した 場 合 対 象 ブラウザ 以 外 のブラウザで 変 換 は 行 われますが 対 象 ブラウザ 以 外 での 表 示 及 び 動 作 保 証 はいた しません スマートフォンと 判 定 される 条 件 ios 端 末 の 場 合 Useragentに iphone を 含 む アンドロイド 端 末 の 場 合 Useragentに Android と Mobile の 両 方 を 含 む タブレットと 判 定 される 条 件 ios 端 末 の 場 合 Useragentに ipad を 含 む アンドロイド 端 末 の 場 合 Useragentに Android を 含 み と Mobile は 含 まない shutto 管 理 画 面 対 応 ブラウザ 管 理 画 面 の 対 応 ブラウザは Chrome15 以 上 FireFox8 以 上 Safari5 以 上 になります MacOS10.4(Tiger)はSafariのみ 対 応 しております 57
導 入 費 用 例 2.shuttoについて shutto huttoを 利 用 して 自 社 で 変 換 設 定 をする 場 合 1 年 目 2 年 目 shutto 初 期 費 用 1 万 5 千 円 shutto 年 間 利 用 料 1 万 5 千 円 shutto 年 間 利 用 料 6 万 円 shutto huttoを 利 用 して 代 理 店 制 作 会 社 で 変 換 設 定 をする 場 合 1 年 目 2 年 目 shutto 初 期 費 用 1 万 5 千 円 shutto 年 間 利 用 料 6 万 円 shutto 年 間 利 用 料 6 万 円 変 換 設 定 代 行 20 万 ~100 万 円 継 続 運 用 変 換 設 定 代 行 数 万 ~( 都 度 ) 58
よくあるご 質 問 5.よくあるご 質 問 Q. shuttoを 使 った 変 換 設 定 の 代 行 は 可 能 ですか? shuttoを 販 売 している 弊 社 イー エージェンシーでは 変 換 設 定 の 代 行 はしてお りません 変 換 設 定 の 代 行 は 代 理 店 制 作 会 社 様 が 行 っておりますので 変 換 についての 見 積 もり 制 作 依 頼 がございました 下 記 URLにアクセスください http://shutto.com/case/list/ 59
よくあるご 質 問 5.よくあるご 質 問 Q. PC スマートフォン の 表 示 切 り 替 え 条 件 を 教 えてください サイトにアクセスをしている 端 末 のUserAgentをJavaScriptで 判 別 をしておりま す 尚 UserAgentの 判 別 条 件 は 下 記 の 通 りです iphoneの 条 件 はUAに iphone OS が 含 まれている Androidの 条 件 はUAに Android と mobile が 含 まれている 上 記 に 加 えて UserAgentのバージョンも 見 ておりまして iphoneでは6.0 以 上 Androidでは4.0 以 上 で 判 別 をしています (2015 年 11 月 現 在 ) 60
よくあるご 質 問 5.よくあるご 質 問 Q. Googleアナリティクスでアクセス 解 析 することはできますか? はい 可 能 です PCサイトにGoogleアナリティクスのタグを 設 置 している 場 合 Googleアナリティ クスで 解 析 を 行 うことが 出 来 ます Googleアナリティクスでどのキャリアからアクセスされたかを 確 認 して 頂 き ス マートフォンからのアクセスを 確 認 することが 出 来 ます また PCサイトとshuttoで 変 換 したページのURLが 同 一 のため 閲 覧 したページが PCサイトかshutto 変 換 ページかを 判 別 することはできません 61
よくあるご 質 問 5.よくあるご 質 問 Q. PCサイトが 更 新 された 場 合 shuttoで 変 換 したサイトはどうなりますか? 画 像 の 差 し 替 えやテキストの 修 正 などであれば PCが 更 新 された 場 合 shuttoで 変 換 したページも 自 動 で 更 新 されます これはドラッグ&ドロップした 要 素 のみです shutto 変 換 画 面 で 挿 入 した 要 素 については 自 動 更 新 されません HTMLの 構 造 が 大 きく 変 更 になった 場 合 は shuttoにて 再 設 定 をして 頂 く 必 要 があ ります 62
よくあるご 質 問 よくあるご 質 問 一 覧 http://faq.shutto.com/ その 他 よくあるご 質 問 を 掲 載 しております shuttoマニュアル http://shutto.com/support/manual/ shuttoの 使 い 方 についてのドキュメントとなります 63
ご 一 読 いただき 誠 に ありがとうございました! 株 式 会 社 イー エージェンシー お 問 い 合 わせ shuttoサポート shutto@dragon.jp 東 京 本 社 100-0006 東 京 都 千 代 田 区 有 楽 町 1-9-4 蚕 糸 会 館 4 階 TEL : 03-4334-9095 shuttoサポート 担 当 まで 64