目次 1. スマートフォン最適化について 2.shuttoについて 3.shuttoの導入手順 4. タブレットPC 対応について 5. よくあるご質問 2

Transcription

1 スマホ変換ツール スマホ変換ツール shutto のご紹介 2016/10/21 株式会社イー エージェンシー 1

2 目次 1. スマートフォン最適化について 2.shuttoについて 3.shuttoの導入手順 4. タブレットPC 対応について 5. よくあるご質問 2

3 1. スマートフォン最適化について 3

4 スマートフォン最適化の手法 1. スマートフォン最適化について 専用サイトを新規で制作 レスポンシブ Web デザイン スマートフォン変換 shutto 数百万以上 予算 メリット PCサイトに縛られず独自展開 スマホユーザーに集中最適 デメリット 同一コンテンツなのにURLが別になる メンテナンスが二重化するので 運用コストが大きくなる 100 万以上 予算 メリット URLが同じ デバイス毎に最適化 クライアントの認知率 く制作単価 い デメリット サイトリニューアルが必要 設計工数がかかる 20 万 100 万 制作予算 メリット URLが同じ PCサイトの更新と連動 デメリット ASPのランニングコスト クライアントの認知率は くない 4

5 スマートフォン変換サービスの主な種類 1. スマートフォン最適化について 自動変換 手動変換 bmobilized duda mobile shutto 違い ワンクリックで変換 プラグインが豊富 細かいコンテンツの選択不可 URL ドメインが変わる 違い ワンクリックで変換 ステップに沿って作成するので簡単 細かいデザイン設定が困難 URL ドメインが変わる shutto より 額利 料が安い制作単価は 5 万 10 万が相場 違い デザインの柔軟性が い 設定は手動 同一 URL html/css の知識があれば細かく作り込可能 5

6 スマートフォン 手動変換の種類 1. スマートフォン最適化について サーバ変換型 変換サーバ 変換 ブラウザ変換型 shutto 変換 変換サービス側の変換サーバで変換します サービスにより 変換サーバに独自ドメインを使用する事が可能 shutto サーバ 変換サーバにはデザイン要素のみ保存されています 利 料が shutto より 10 倍程度 い 万 / 制作は提供会社が うケースが多い PC とスマートフォンで表示される HTML は同じです スマートフォンの場合は 変換サーバで読み込むデザインが適用され た目だけが変更されます shutto を使って制作する専門の会社がある 6

7 2.shutto について 7

8 shutto について 2.shutto について PC ページを ながら ドラッグ & ドロップでスマホサイトのデザインを作成出来るツールです レイアウトをドラッグ & ドロップで整え 管理画面上で CSS を使った効率的なデザインができます ドラッグ & ドロップするだけ! 2015 年 11 月現在 実際に shutto 変換サイト数は 約 12,500 サイトとなっております 有料版は 約 1000 サイトご利用いただいております 主な導 サイトは コーポレートサイト 採用サ イト EC サイト また病院 学校 自治体 団体など 8

9 shutto 導 事例 2.shutto について サービスサイト BESS スクエア様 EC サイト 那須 原チーズガーデン様 製品サイト アイ オー データ様 検索サイト テンポバックス様 サービスご紹介サイトをはじめ EC サイト等さまざまなサイトでご利用いただけます 9

10 shutto をご利用いただく 7 つのメリット (1/7) 2.shutto について (1)PC ページと同じ URL が使える! shutto の javascript を埋め込んだサイト スマホからのアクセスを自動選別してスマホサイトを表示 PC サイトに Javascript の共通タグを 1 貼り付けるだけ ( アクセス解析ツールの google analytics のように ) で スマートフォンでアクセスしたときにスマホ対応ページを表示 URL を変えずにご利用いただけます 10

11 shutto をご利用いただく 7 つのメリット (2/7) 2.shutto について (2)PC ページの更新が自動反映される 変換元 PC ページ 変換後スマホページ shutto では PC ページの HTML をスマホのブラウザで変換するため もちろん PC ページの更新は即時反映 11

12 shutto をご利用いただく 7 つのメリット (3/7) 2.shutto について (3) 公開までが早い ( 変換デモ ) HD 簡単スマホ変換サービス shutto( シュット ) 変換動画 倍速 かんたんスマホ変換サービス shutto( シュット ) 変換デモ 12

13 shutto をご利用いただく 7 つのメリット (3/7) 2.shutto について (3) 公開までが早い 新規でスマートフォンサイトを制作した場合 ヒアリング ワイヤー 要件定義フレーム デザイン案コーディング本番公開 shutto で PC サイトを変換した場合 主要 3 ページ 全ページ プレビュー制作制作 本番公開 ルック & フィールがそのまま コンテンツがそのまま クライアントの確認が簡単 shutto を利用した制作では PC サイトを元にするため 画面設計 + デザイン作成工程を 大幅に省略することができます スクラッチでの制作に比べると約 1/2 1/3 の期間で公開できます 逆に うと ヒアリング 要件定義 ワイヤーフレーム デザイン案などをしっかりと いたい案件では shutto の良さは活かせません 13

14 shutto をご利用いただく 7 つのメリット (4/7) 2.shutto について (4) クラウドなのでお客様が編集することも可能 シンボル CSS JavaScript 一部の修正だけなら shutto にあまり詳しくない でも うことができます 14

15 shutto をご利用いただく 7 つのメリット (5/7) 2.shutto について (5) 同じ構成のページは 1 つの設定でできる Shutto 開発 blog のケース トップ詳細アーカイブ 詳細ページは同じページ構成なので 1 つだけ変換の設定をしている ( また アクセスが少ないアーカイブページは工数を減らすためにわざわざ変換していません 15

16 shutto をご利用いただく 7 つのメリット (6/7) 2.shutto について (6)PC 変換だけど スマホ独自のコンテンツを挿 できる ウェブサイトを PC で るユーザーとスマホで るユーザーは利 シーンが異なります Shutto ならスマートフォンページだけに出すコンテンツ ( テキストや画像 HTML) を即座に変更 追加することができます 16

17 shutto をご利用いただく 7 つのメリット (7/7) 2.shutto について (7)shutto はモバイルフレンドリーです SEM リサーチ より google の Mobile- Friendly Test で shutto で変換されたページをテストしました 17

18 3.shutto の導入手順 18

19 変換を始めるその前に 3.shutto の導 手順 知っておきたいこと 19

20 対象 PC サイトの変換可否を調査 (1/3) 3.shutto の導 手順 shutto は 様々なサイトを変換する事が可能です 変換可能なサイト スクラッチで制作した静的なサイト スクラッチで制作した php や CGI などの動的なサイト ログイン 問い合せフォームなど (js が動かないケースも ) JS による動的ページ (js が動かないケースも ) 技で動かすケースはある WEB シェルパ 実績のある主な CMS 20

21 対象 PC サイトの変換可否を調査 (2/3) 3.shutto の導 手順 ただし 変換できない要素がございますので 変換可否の調査を います 変換できない要素 PC サイトに組み込みの JavaScript frame Flash 他に HTML3.0 など Table を多用したページや そもそも HTML タグの記述が正しくないサイト 21

22 対象 PC サイトの変換可否を調査 (3/3) 3.shutto の導 手順 shutto と相性が悪い JavaScript の有無を確認するため トップページやフォームのページを shutto 編集ページに表示して調査します OK 例 コンテンツが表示されている NG 例 表示されないコンテンツがある 22

23 変換を始めるその前に 3.shutto の導 手順 やっておきたいこと 23

24 対象ページ一覧を作る 3.shutto の導 手順 数ページのサイトであれば必要ありませんが 対象ページ一覧を作成することで導線や同じ構成 のページを洗い出すことができます 工数の削減につながります 記事詳細などの同じ構成のページは shutto では 1 つのテンプレートで対 応できます 24

25 変換を始めるその前に 3.shutto の導 手順 効率よく変換設定を作るには? 25

26 同じ構造のページは 1 つの設定で対応する 3.shutto の導 手順 同じ構造のページの場合 1 つの変換設定を複数の URL に対して適用させることができます 商品詳細ページは全部同じ構造のページ 26

27 この設定が適用される条件 を設定 (1/3) 3.shutto の導 手順 同じ構造のページの場合 1 つの変換設定を複数の URL に対して適用させることができます 商品詳細ページのそれぞれの URL ucts/detail.php?product_id= までは 共通 shutto ページ一覧 クリックでメニュー開く detail.php?product_id= の後ろの 字列は削除し 前 一致 を選択する 27

28 この設定が適用される条件 を設定 (2/3) 完全一致 3.shutto の導 手順 前方一致 完全一致 はドメイン以下が この設定が適用されるページの条件 の場合に適用されます 例えばドメインが の場合 下記ページが対象になります 前方一致 はドメイン以下が この設定が適用されるページの条件 の前 に合致する場合に適用されます 例えばドメインが の場合 下記ページが対象になります * 後方一致 含む 後方一致 はドメイン以下が この設定が適用されるページの条件 の後 に合致する場合に適用されます 例えばドメインが の場合 下記ページが対象になります * /showcase/ 含む はドメイン以下に この設定が適用されるページの条件 が含まれる場合に適用されます 例えばドメインが の場合 下記ページが対象になります * /showcase/ *

29 この設定が適用される条件 を設定 (3/3) 3.shutto の導 手順 正規表現 正規表現一致 はドメイン以下の この設定が適用されるページの条件 に正規表現を記述し 条件を適用させることが可能です 記述できる正規表現は javascriptの正規表現になります 上記の正規表現では下記ページが対象になります indexの後ろが.htmlでなく.phpだった場合なども適用となります 29

30 変換の準備が出来たら 3.shutto の導 手順 では 変換を始めましょう! 30

31 shutto ユーザ登録 3.shutto の導 手順 ユーザ登録しなくても デモ変換を試すことはできますが 保存することができません 無料で登録できますので まずはユーザ登録を います 1shutto.com のサイトにアクセス 2 必要事項を して 新規登録 31

32 shutto 変換設定をつくる 3.shutto の導 手順 それでは shutto で変換設定を作っていきます 多くの場合 トップページからスタートします 挿 メニューと 編集メニュー PC サイトを表示 スマホのレイアウト画面 32

33 デザインのポイント 1 ナビゲーション (1/2) 3.shutto の導 手順 (1) ナビゲーション スマートフォンサイトを作る場合も PC ページと同じようにナビゲーションの設計が非常に重要です タイプ 1 スタンダード タイプ 2 メニュー機能を利用 クリックで展開 33

34 デザインのポイント 1 ナビゲーション (2/2) 3.shutto の導 手順 (1) ナビゲーション タイプ 3 ブロック型 下層ページ てほしいコンテンツが絞られている場合 ブロック型でページ上部と下部の2 箇所にメインナビゲーションを設置すると便利です トップページ 34

35 デザインのポイント 2 (2) パンくずリスト パンくずリスト 3.shutto の導 手順 スマートフォンサイトではどの階層にいるか認識しずらいため パンくずリストが効果的です POINT パンくずリストがあると画面面積をとってしまうため 非表示にしたいと要望いただく場合がありますが 下層ページに直接ランディングするなどした場合 ユーザはどこにいるのか分からなくなってしまうため なるべく配置することをおすすめします 35

36 デザインのポイント 3 (3) リンクボタン リンクボタン 3.shutto の導 手順 タッチパネルの画面で押しやすいリンクボタンを作成しましょう ボタン化されていないリンク ボタン化されたリンク リンク範囲 ブロック全体がリンク範囲となる 36

37 デザインのポイント 4 (4) 地図 (Google Static Map) 地図 3.shutto の導 手順 map リンクを作成しておくと 端末に内蔵された地図アプリを起動 スマホならではの機能です PC ページの地図は画像だけですが スマホサイトには GoogleMap の地図も併設しています 37

38 デザインのポイント 5 (5) 電話番号リンク 電話番号 3.shutto の導 手順 tel: リンクを作成しておくと クリックで直接電話をかけることができます iphone の場合 リンク の項目に tel: で始まる電話番号リンクを設定すると Android 端末でもクリックしたときに 電話発信ダイアログが起動します 38

39 変換設定のポイント 3.shutto の導 手順 shutto では PC ページの更新があった場合自動で更新されますが 要素が追加されたり HTML 構 造が変わってしまった場合には再度作り直す必要があります ここでは 多少の変更では修正に必要がない変換設定の作り ポイントをお伝えします 左図のような変換設定の場合 1. お知らせ部分の内容増減 自動更新 2. バナー等エリアの追加 自動で追加されない バナー追加 39

40 変換設定のポイント 1 繰り返し (1/3) 3.shutto の導 手順 (1) 繰り返し 繰り返しは PC サイトで表示される要素数の増減に対応できます 1 ずつドラッグ & ドロップすると 要素が増えても設定した数だけしか表示することができない ( 少ない場合は影響はない ) 40

41 変換設定のポイント 1 繰り返し (2/3) 3.shutto の導 手順 (1) 繰り返し 1. 最初の 1 目だけドラッ グ & ドロップ 最初のブロック選択時に右クリック 繰り返し 繰り返したい要素を選択 41

42 変換設定のポイント 1 繰り返し (3/3) 3.shutto の導 手順 (1) 繰り返し 同じ要素が続くかぎり 繰り返されます リピートを使用すると 変換設定作成時間の短縮だけでなく 更新性の い変換を作ることができます 42

43 変換設定のポイント 2 HTML 構造保持 (1/2) 3.shutto の導 手順 (2)HTML 構造保持 繰り返しよりさらに更新性 いのが HTML 構造を保持する です PC サイトのテーブル全体を選択してドロップすると HTML タグが無効になったテキストデータとして ドロップされます 43

44 変換設定のポイント 2 HTML 構造保持 (2/2) 3.shutto の導 手順 (2)HTML 構造保持 HTML 構造を保持する にチェックをいれる PC ページの HTML タグがそ のまま有効になります HTML 構造を保持する と PC サイトをより大きなエリアで変換できるので 更新性が い変換設定を作るこ とができます ただし CSS でデザインする必要があり CSS の知識が必要になる 度な設定 法となります 44

45 変換設定のポイント 3 シンボル (1/2) Pro 版 3.shutto の導 手順 (3) シンボル シンボル化したい要素を選択 複数選択する場合は ctrl+ クリック 右クリックメニューの シンボル化 をクリック シンボル化する事により ヘッダーやフッターなどの共通デザイン要素を一括管理できるようになります 45

46 変換設定のポイント 3 シンボル (2/2) Pro 版 3.shutto の導 手順 (3) シンボル シンボル化された要素は ロックされます シンボルを挿 するには 右クリックメニューの シンボル挿 から選択します 46

47 公開前の最終表示チェック 3.shutto の導 手順 プレビュー URL からリンクを辿って全ページの変換を確認します 複数ページ対応しているページも前項の 適用されるURLの条件 設定が間違っていなければ 各ページの表示確認を うことができます 注意 POSTデータ (Form) の遷移はプレビューページでは確認することができません テスト環境をご用意いただいて ご確認いただくことを推奨しております 47

48 PC サイトに shutto タグを挿 3.shutto の導 手順 shutto 変換を呼び出すための JavaScript ファイルを管理画面からダウンロードします shutto ホーム画面 JavaScript をダウンロード をクリック すると ローカルに smp.js という JavaScript ファイルが保存されます 48

49 PC サイトに shutto タグを挿 3.shutto の導 手順 先ほどダウンロードした smp.js を 変換したいサイトがある Web サーバに配置します 例 )FTP ソフト画面 ローカル側 Web サーバ側 Web サーバにアップする FTP ソフトなどで smp.js ファイルを任意の場所にアップします shutto では js ディレクトリへの配置を推奨しておりますが サーバ内のどこでも結構です 49

50 PC サイトに shutto タグを挿 3.shutto の導 手順 Web サーバにアップロードした smp.js を読み込むタグを Web ページ HTML ファイルの <head> タグ内に埋め込みます 例 )Web ページ 例 ) トップページ html ファイル <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" 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" src="/js/smp.js"></script> <meta name="keywords" content="bess, 総合展示場 BESSスクエア, ログハウス, 木の家, ベス, モデルハウス " /> <meta name="description" content=" ログハウス 木の家のBESSの総合展示場 BESSスクエア展示場は 暮らしの体感展示場 自由に何時間でも過ごしていただけます 楽しいイベントも開催していますので ぜひご来場ください " /> <title> 東京 代官山総合展示場 BESSスクエア株式会社アールシーコア </title> </head> 注意 smp.js をトップディレクトリ js に格納した場合の記述です 他のディレクトリに格納した場合は 適宜記述を修正してください スマートフォン変換をしたい全てのページに同じようにタグを埋め込みます 50

51 PC サイトに shutto タグを挿 3.shutto の導 手順 変換設定が 表示 (shutto ページ一覧の一番右にある目アイコン ) になっているとき PC ペー ジに shutto タグを設置した瞬間スマートフォンページ表示がスタートします ホーム画面 > ページ設定一覧 このようにグレーアウト 状態のときは公開されま せん PCに設置された shuttoタグ と変換設定のセットでスマートフォン変換がなされます 51

52 実際にどんな風に設定しているかデモを てましょう 3.shutto の導 手順 倍速で 1 ページを変換設定するデモ shutto を使ったパーツごとの設定デモ メニュー編 テキスト編 画像編 ボックス編 w アコーディオン編 k ページ内リンク編 HTML と CSS 編 繰り返し編 PC 表示ボタン編 52

53 4. タブレット PC 対応について 53

54 タブレット用機能の使い マスター版 4. タブレット PC 対応について スマホレイアウト画面の右上のプルダウンより タブ レットのサイズの編集画面を選択します 挿 パーツより タブレット用 > 2 カラム を選択し 設置し カラム内に右側の PC ビュー画面から要素を設置し ます 注意 タブレットの変換を う際は ホーム画面左側のサイト設定にある 対応端末設定 を変更した後に 変換用の JavaScriptファイルのダウンロードを ってください 2 カラムの編集メニューで サイドバーの位置と幅を指定 します 54

55 5. よくあるご質問 55

56 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

57 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

58 導入費用例 2.shutto について shutto を利用して自社で変換設定をする場合 1 年目 2 年目 shutto 初期費用 1 万 5 千円 shutto 年間利用料 1 万 5 千円 shutto 年間利用料 6 万円 shutto を利用して代理店 制作会社で変換設定をする場合 1 年目 2 年目 shutto 初期費用 1 万 5 千円 shutto 年間利用料 6 万円 shutto 年間利用料 6 万円 変換設定代行 20 万 ~100 万円 継続運用変換設定代行数万 ~( 都度 ) 58

59 よくあるご質問 5. よくあるご質問 Q. shutto を使った変換設定の代 は可能ですか? shutto を販売している弊社 イー エージェンシーでは 変換設定の代 はしており ません 変換設定の代 は 代理店 制作会社様が っておりますので 変換についての 積 もり 制作依頼がございました 下記 URL にアクセスください 59

60 よくあるご質問 5. よくあるご質問 Q. PC スマートフォン の表示切り替え条件を教えてください サイトにアクセスをしている端末の UserAgent を JavaScript で判別をしております 尚 UserAgent の判別条件は下記の通りです iphone の条件は UA に iphone OS が含まれている Android の条件は UA に Android と mobile が含まれている 上記に加えて UserAgent のバージョンも ておりまして iphone では 6.0 以上 Android では 4.0 以上で判別をしています (2015 年 11 月現在 ) 60

61 よくあるご質問 5. よくあるご質問 Q. Google アナリティクスでアクセス解析することはできますか? はい 可能です PC サイトに Google アナリティクスのタグを設置している場合 Google アナリティク スで解析を うことが出来ます Google アナリティクスでどのキャリアからアクセスされたかを確認して頂き ス マートフォンからのアクセスを確認することが出来ます また PC サイトと shutto で変換したページの URL が同一のため 閲覧したページが PC サイトか shutto 変換ページかを判別することはできません 61

62 よくあるご質問 5. よくあるご質問 Q. PC サイトが更新された場合 shutto で変換したサイトはどうなりますか? 画像の差し替えやテキストの修正などであれば PC が更新された場合 shutto で変 換したページも自動で更新されます これはドラッグ & ドロップした要素のみです shutto 変換画面で挿 した要素については 自動更新されません HTML の構造が大きく変更になった場合は shutto にて再設定をして頂く必要があり ます 62

63 よくあるご質問 よくあるご質問一覧 その他 よくあるご質問を掲載しております shutto マニュアル shutto の使い についてのドキュメントとなります 63

64 ご一読いただき誠に ありがとうございました! 株式会社イー エージェンシー お問い合わせ shutto サポート 東京本社 東京都千代田区有楽町 蚕糸会館 4 階 TEL : shutto サポート担当まで 64