事例でわかる！スマートフォン対応手法カタログ

お 役 立立ち 資 料料 事 例例 でわかる! スマートフォン 対 応 手 法 カタログ 本 資 料料 が 提 供 される 目 的 以 外 の ならびに 御 社 ( 御 社 関 連 会 社 を 含 む) 以 外 の 第 3 者 による 利利 用 複 製 はご 遠 慮 願 います IMAGICA Imageworks, Inc. All rights reserved. 2014. 07. 18

はじめに スマートフォンに 対 応 したWebサイトを 構 築 する 手 法 には 大きく 分 けて3つの 手 法 があります レスポンシブ ウェブデザイン 動 的 な 配 信 (ダイナミック サービング) スマートフォン 専 用URL これに 加 えて + 変 換 サービス そのまま 表 示 以 上 の5つの 例例 について 特 長とメリット デメリットを 解 説 します IMAGICA Imageworks, Inc. All rights reserved. 1

レスポンシブ ウェブデザイン ポイント 同 じURL 同 じHTML (Google 推 奨 ) ブラウザの 横 幅 サイズをwebサイト 表 示の 判 断 基 準 にし ページのレイアウトデザインを 柔 軟 に 調 整 できる 手 法 CSS3( 最 新 のスタイルシート 規 格 )で サポートされているメディアクエリという 記 述 方 法 を 使 用します 一つの HTML ファイル http://xxxxx.com PC 用 CSS スマホ 用 CSS メリット リダイレクト 等 の 設 定 が 不不 要 PCとスマホで 分 かれていないのでクロー リングリソースを 節 約 できる デメリット すでに 存 在 しているPCサイトにも 手を 入 れる 必 要 がある 要 素 が 多 かったり レイアウトが 複 雑 な サイトでは スマホでのユーザビリティ を 損 ないかねない サイトにアクセスしているブラウザの シェアを 確 認 した 上 での 導 入 検 討 が 必 要 IMAGICA Imageworks, Inc. All rights reserved. 2

レスポンシブ ウェブデザイン 事 例例 1 セントラルスポーツ 株 式 会 社 コーポレートサイト u クライアント セントラルスポーツ 株 式 会 社 様 u URL http://company.central.co.jp u 概 要 一 般 的 なフィットネスを 目 的 とする お 客 様 向 けとは 別 に IRやリクルート 向 けに 会 社 情 報 サイトを 独 立立して 構 築 PC 版 スマホ 版 IMAGICA Imageworks, Inc. All rights reserved. 3

レスポンシブ ウェブデザイン 事 例例 2 生 命 保 険 経 営 学 会 コーポレートサイト u クライアント 生 命 保 険 経 営 学 会 u URL https://www.seihokeiei.jp u 概 要 従 来 のPCからのユーザーに 加 え レスポンシブ ウェブデザインを 採 用する ことで スマートフォンユーザーにも 最 適 化 された 表 示で 閲 覧 できるように 設 計 PC 版 スマホ 版 IMAGICA Imageworks, Inc. All rights reserved. 4

動 的 な 配 信 (ダイナミックサービング) ポイント 同 じURL 異異 なるHTML アクセス 時 に ユーザーエージェント(ユーザーがアクセスして いる 端 末 )をチェックし, 動 的 にPCサイトとスマートフォンサ イトを 切切 り 替 える 手 法 PC 用 HTML PC 用 CSS メリット リダイレクト 等 の 設 定 が 不不 要 PCとスマートフォン 向 けのページを 完 全 に 独 立立させることもできる http://xxxxx.com スマホ 用 HTML スマホ 用 CSS デメリット Googlebotがクローリングする 際 にモバ イル 用HTMLがあることをきちんと 伝 え る 必 要 がある 表 示されるコンテンツが デバイスのタ イプによって 大きく 異異 なる 可 能 性 があ る 点 IMAGICA Imageworks, Inc. All rights reserved. 5

動 的 な 配 信 (ダイナミックサービング) 事 例例 1 セントラルスポーツ 株 式 会 社 クラブサイト u クライアント セントラルスポーツ 株 式 会 社 様 u URL http://www.central.co.jp u 概 要 一 般 的 なフィットネスを 目 的 とするお 客 様 向 けのBtoCのサイトとして Webサイトを 構 築 PC 版 スマホ 版 IMAGICA Imageworks, Inc. All rights reserved. 6

動 的 な 配 信 (ダイナミックサービング) 事 例例 2 株 式 会 社 マザー 牧 場 マザー 牧 場 u クライアント 株 式 会 社 マザー 牧 場 u URL http://www.motherfarm.co.jp u 概 要 フルリニューアルにあわせ CMSを 導 入 施 設 とイベントに 関 する 情 報 を 整 理理 し いつ どこで どんなイベントが 行行われ るか が 一 見見でわかるよう 設 計 PC 版 スマホ 版 IMAGICA Imageworks, Inc. All rights reserved. 7

スマートフォン 専 用URL ポイント 異異 なるURL 異異 なるHTML 総 合 的 にスマートフォン 向 けに 設 計 デザインを 行行う 手 法 ユーザーには 明 示 的 な 切切 り 替 えを 促 すことができる PC 用 HTML PC 用 CSS メリット 作 り 込 むほどにより 使 いやすいものにで きる http://xxxxx.com スマホ 用 HTML スマホ 用 CSS デメリット 作 り 込 むには 時 間 はかかる URLを 分 けることによって 同 一コンテ ンツが 複 数 URLで 存 在 することになり SEO 的 なデメリットを 解 消 するための 設 定 が 複 雑 http://xxxxx.com/m/ IMAGICA Imageworks, Inc. All rights reserved. 8

スマートフォンサイト 専 用URL 事 例例 1 株 式 会 社 IMAGICA コーポレートサイト u クライアント 株 式 会 社 IMAGICA u URL http://www.imagica.com/ u 概 要 リニューアルにあわせ CMSを 導 入 PC 版 スマホ 版 IMAGICA Imageworks, Inc. All rights reserved. 9

変 換 サービス ポイント 変 換 エンジンを 利利 用して 最 適 化 PC 向 けに 制 作 したコンテンツ(Webページ)を スマートフォンにサイト 向 けに 変 換 し 最 適 化 するサービス メリット 既 存 のWEBサイトに 手を 加 えることなく スマホ タブレットサイトに 対 応 するこ とが 可 能 HTML 変 換 エンジン スマートフォン 用に 最 適 化 し 表 示 デメリット 月 額 費 用が 発 生する レイアウトや 入 力力インターフェースの 細 かな 調 整 ができない (コンバージョン への 悪 影 響 ) デザインの 自 由 度度 が 無 い IMAGICA Imageworks, Inc. All rights reserved. 10

変 換 サービス 比 較 表 初 期 費 用 15 万 円 1 万 5,750 円 月 額 費 用 A 社 サービス B 社 サービス C 社 サービス 定 額 制 :8 万 円 従 量量 制 (10 万 円 ~)のEC 版 も リリース 予 定 5,250 円 セルフサービスツール 〇 スマホサイト 制 作 費 個 別 見見 積 50 万 円 ~ ( 自 社 制 作 も 可 能 ) ユーザーが 作 業 個 別 相 談 も 可 能 最 低 利利 用 期 間 6か 月 1 年年 1 年年 150 万 円 ~ ( 制 作 テンプレート 数 などによ る) 従 量量 課 金金:10 万 円 ~ ( 共 用 サーバーは5 万 円 ~) 初 期 費 用に 含 む ( 個 別 見見 積 ) 構 築 期 間 6 週 間 即 日 ~ 2 ~3か 月 SSL 対 応 標 準 でセキュアを 確 保 iphone 対 応 Android 対 応 変 換 サーバーに 設 定 ( 費 用は 制 作 規 模 による) タブレット 対 応 標 準 でテンプレート 設 定 可 能 初 期 制 作 時 にカスタム 設 定 IMAGICA Imageworks, Inc. All rights reserved. 11

そのまま 表 示 ポイント PCスマホで 表 示をかえない PCでも スマホでも 同 じ 内 容 で 表 示 カラムの 構 成 を 工 夫 し 横 幅 の 文 字 量量 を 少 なめに 設 計 すること で スマートフォンのブラウザの 補 助 機 能 により 閲 覧 できるよ うに 構 築 メリット 管 理理 がしやすい HTML ファイル CSS デメリット 文 字 や 画 像 の 表 示などが 小さいため 読 み にくかったり リンクが 押 しにくかった りする 情 報 量量 が 多 いため 表 示が 遅 くなること がある IMAGICA Imageworks, Inc. All rights reserved. 12

お 気 軽 にご 相 談 ください お 問 い 合 わせ ご 相 談 は プロデュースグループ Webソリューション チーム 小 野 寺 浩 二 iiw_wst@imagica-imageworks.co.jp 03-3280-7281 まで 本 資 料料 が 提 供 される 目 的 以 外 の ならびに 御 社 ( 御 社 関 連 会 社 を 含 む) 以 外 の 第 3 者 による 利利 用 複 製 はご 遠 慮 願 います IMAGICA Imageworks, Inc. All rights reserved. 13