「スマートフォンサイトを作らなければ！」と思った時に ...3 スマートフォン（以下、スマホ）普及の勢いが止まりません。今や、多くの人がスマホ

「スマートフォンサイトを

作らなければ！」と思った時に、

必ず読みたい資料

～自社構築／アウトソース、それぞれのポイント～

目次

本資料の目的

1章スマホ普及で企業WEBサイトのスマホ対応は必須！

●なぜスマホサイトが必要か

●スマホサイトを作る上で考えるべきこと

2章【自社内で作るなら】スマホサイト構築の基礎知識

●スマホサイト作成の主な流れ

●最新技術への対応・HTML5、CSS3などの活用・レスポンシブデザインのメリット・デメリット

●デザイン・レイアウト面で配慮すべき点

●スマホ上での表示確認…エミュレータの活用

●その他注意すべきポイント

3章【アウトソースするなら】押さえておきたいポイントとおすすめサービス

●まずは「どこまでアウトソースするか」を考えること

●最適なアウトソース先を選ぶためのチェックポイント

●スマホ対応ソリューションGomobileサービスラインナップ・スマホ変換サービス「スマートコンバート」・マルチデバイス対応サービス「フラミンゴ」・Push型配信サービス「ゼブラ」

●ディレクション、デザイン・UI/UXとTechが一体のスペシャリスト、アイスリーデザインとは？

●導入実績一覧

会社概要

3

スマートフォン（以下、スマホ）普及の勢いが止まりません。今や、多くの人がスマホの画面に見入っている風景をよく見かけるようになりました。スマホユーザーはすなわち、企業にとっては消費者でもあります。こうした人々の動向を踏まえ、企業としてもWEBサイトのスマホ対応を早急に進めなければならない状況になってきました。しかし、サイトのスマホ対応にはいくつもの検討課題があり、選択によってはユーザーにとって利用しにくいサイトになったり、大きな開発コストがかかったりすることもあるのです。

一刻も早く始めたいサイトのスマートフォン対応。しかしそこには多くの課題が…

⇒本資料では、サイトのスマホ対応について自社構築による場合、外部へアウトソースする場合、それぞれのポイントを紹介します。自社ホームページのスマホ対応に課題を持つ企業の担当の方には必読の資料です。

本資料の目的

スマホ普及で企業WEBサイトのスマホ対応は必須！

１章


なぜスマホサイトが必要か

●スマホはユーザーとの有力な接点となったスマホの爆発的な普及が続いています。 2014年02月25日に発表された株式会社ビデオリサーチインタラクティブの調査によれば、15～69歳のスマートフォンの個人所有率は、2年前（2012年2月）の2倍となる過半数の54.0%に達したとのことです。特に若い世代にとってスマホは、情報収集・発信の手段として、もはや欠かせないものになっており、欲しい商品の検索・注文などのWEBサイト利用も、ほとんどがスマホで、という人が増えています。

5

このような状況のなか、消費者への積極的な情報発信を行おうとする企業にとっては、もはやPC対応だけのWEBサイトでは不充分になってきました。スマホでも快適に閲覧し、利用できるようにするためWEBサイトのスマホ対応が必須になっています。


スマホサイトを作る上で考えるべきこと

●検討課題が多い、サイトのスマホ対応スマホサイトを作る上で、ユーザー側の視点と運用・管理者側の視点、それぞれで考えて見ましょう。ユーザー側の視点で最も考えるべきことは、ユーザーと接点となる画面デザイン。スマホはPCに比べ表示する情報量が少なく、操作方法も独特です。そのため、スマホサイトは、必要な情報を見つけ出しやすく、使いやすいデザインでなければ、ユーザーは何度も訪れてはくれないでしょう。

6

次に、運用管理者側の視点から見ると、PC向けと別にスマホサイトを開設するかどうかは重要検討事項。スマホサイトを別途作成するとなると、開発工数がかかるだけではなく、運用・管理の負担も別途必要となるからです。このように検討課題が多いスマホサイトの開発・運用。以下の章では、自社で行う場合、外部にアウトソースする場合、それぞれのポイントを紹介しましょう。

【自社内で作るなら】スマホサイト構築の基礎知識

２章


スマホサイト作成の主な流れ

●公開までの流れを理解し、効率的に構築するスマホサイト作成の大きな流れは右図の通り。中でも検討が必要なのは開発手法です。スマホ専用サイトを開設するか、レスポンシブデザイン（P10参照）にするか、大きく2種類の方法があります。次に、WEBサイトの設計も、スマホの画面制約や操作を配慮した設計が必要となる点から注意が必要。デザイン、レイアウト、テキストや写真、イラストなどもどのように入るか考え、全体の構成図とページごとのラフ（ワイヤーフレーム）をまとめたり、必要があれば新たな原稿も用意したりします。選択した方法や設計に基づいてサイト構築を行った後は、デバッグ・テスト公開に。スマホの実機を使った確認には手間がかかりますので、PC上で動作が確認できるエミュレータを利用するとよいでしょう。

8

サイト開発手法の決定

コンテンツ作成・管理

デザイン・レイアウト設計

開発

デバッグ・テスト

運用

メンテナンス

公開


最新技術への対応（１）

● HTML5、CSS3などの活用スマホ専用のサイトを作成するケースについて説明しましょう。スマホで利用されるブラウザは初期の段階から、“HTML5”や“CSS3”などの最新技術に対応しているため、むしろ従来のPC向けサイトよりも開発は容易です。 HTML5は、以前のHTMLが改善されて、使いやすくシンプルになったHTML仕様です。拡張された機能として、映像・音声を再生・制御できること、図形や絵を描画でき、アニメーションも可能なことなどが挙げられます。

9

またCSS3は、色や形、大きさ等の画面装飾をコントロールします。特別なグラフィックソフトを使用しなくても、華やかなページを作成することができます。これらの技術を駆使してユーザーにとって魅力的なページを構築したいものです。


最新技術への対応（２）

●レスポンシブデザインのメリット・デメリットレスポンシブデザインは、PCサイトと同一のHTMLソースでPC、iPhone、Android、iPad など、すべてのデバイスで表示できる仕組みです。そのメリットは、同一ソースを使用するので、修正等は一度だけで良く、運用は非常に容易な点。また、すべてのデバイスを通じて一貫性のあるデザインを見せることができる点も挙げられます。

10

しかし、その反面、既存サイトのレスポンシブ化にはかなりの開発工数が必要なこと、またイメージ画像の拡大縮小により画像が荒れるケースもあります。またスマホ向けに特別のデザインを提供することができないというデメリットもあります。ユーザーの使いやすさ、開発の容易さ、運用の手間など、種々の側面を検討してサイト構築手法を決定する必要があります。

レスポンシブWebデザイン

HTMLは１つ

CSS で

切り替え

スマホ PC

▼レスポンスデザインの仕組み


11

段組表示例スマホに最適化

デザイン・レイアウト面で配慮すべき点

●画面が小さく、指で使うスマホサイトのデザイン・レイアウトでは、画面の狭さと指での操作を充分に考慮する必要があります。例えば、PCサイトでは“段組”が良く用いられますが、そのままスマホで表示すると非常に見にくい画面になってしまいます。またスマホで良く用いられる角丸・四角形のアイコンや大きなボタンなどの傾向と類似のデザインを使用することや、OSや標準アプリと同一のユーザーインタフェースを提供することにより、使い勝手の良い画面を提供できるでしょう。このように、スマホの特性を踏まえて、デザイン・レイアウトを作成することが重要です。


スマホ上での表示確認…エミュレータの活用

●実機がなくても動作を確認できる iPhoneやAndroid向けに、開発で使用するPC上で動作するエミュレータを利用することができます。実機で確認するまでもなく、PC画面上にスマホ画面が表示されスマホと同じ動作をするので、デバッグやテストで利用されています。参考）Androidアプリの開発で使用するAndroid SDKに含まれており、下記のサイトからダウンロードできます。無料で公開されており申請等の手続きも不要です。 http://developer.android.com/sdk/index.html （注）Android SDKの動作のためには、「JDK(Java Development Kit)」が必要です。

12

“http://developer.android.com/tools/ devices/emulator.html“より


その他注意すべきポイント

●スマホ用ブラウザにはPCと異なる仕様も多いスマホサイトの作成にあたって、その他注意すべきポイントを挙げましょう。 ■Flashは使えない Adobe Flashは、iPhoneでは使用できません。また、 Androidでは標準でインストールされていませんので、Flashをサイトに使用している場合には注意が必要。

■スクロールバーはなるべく使用しない PC向けの画面では、しばしば使われていますが、スマホのブラウザでは表示されないものもあります。

■古いスマホでの表示への対応も検討初期のスマホでは解像度320×480のものが主流でした。これらのスマホでの表示をどうするか、検討する必要があります。

■“サブメニュー”表示は難しい PC向けサイトではマウスを乗せただけで開くサブメニューがよく利用されていますが、スマホでは対応していない場合があります。

…など 13

【アウトソースするなら】押さえておきたいポイントと

おすすめサービス

３章


まずは「どこまでアウトソースするか」を考えること

●アウトソースする範囲を明確にスマホサイト開発を外部企業にアウトソースする場合は、開発・運用のどのパートを依頼するか、明確にする必要があります。「コンテンツの作成・管理からメンテナンスまですべて」、「運用だけ」など、予算や目的に応じて検討します。前者ではコストは必要ですが手離れが良く社内に充分な体制がない場合には有効です。後者は、費用も安く、また外部企業との打ち合わせ等を行うことなく、随時、変更等の作業ができますが、自社スタッフへの負担は大。どのようなアウトソース形態でも一長一短があり、社内体制、コスト等を勘案して自社に最適な形態を決定する必要があります。

15

サイト開発手法の決定

コンテンツ作成・管理

デザイン・レイアウト設計

開発

デバッグ・テスト

運用

メンテナンス

公開


最適なアウトソース先を選ぶためのチェックポイント

●まずはチェック！自社のニーズを見極めるスマホサイトを一口にアウトソースするといっても、要望・課題はそれぞれ。自社に合ったサービスを利用するためにも、きちんと見極める必要があります。まずは下図の①～⑨をチェックしてみましょう。

16

①複数のPCサイトをスマホ用に統合したドメインで運用したい ②既存PCサイトとは独立したサービスとして利用したい ③導入後は自社でコンテンツ運用を行いたい

④URLをPCとスマホとタブレットとで分けたくない ⑤月間数百万から数千万PVでも利用価格は抑えたい ⑥コンテンツ管理を自分達で行いたい

⑦スマホへのプッシュ配信を行いたい ⑧セグメントしてプッシュ配信を行いたい ⑨プッシュ配信で、 A/Bテストなどを行いたい

P18 「スマートコンバート」

P19 「フラミンゴ」

P20 「ゼブラ」


ここまで述べたスマホサイト開発手法をアウトソース対応で展開しているのが、アイスリーデザイン社の「Gomobileサービス」です。PCとは独立したスマホサイトを構築するなら「スマートコンバート」、レスポンシブデザインを利用する場合は「フラミンゴ」を、またスマホ向けにPush配信をするなら「ゼブラ」。いずれも多数の導入実績のあるサービスです。

17

スマホ変換サービス

スマートコンバート

プロキシサーバ方式のクラウド型のコンテンツ変換サービス。既存システムから独立して稼働させることができるため既存のWEBサイトを改修することなく、スマホ・タブレットサイトに対応することが可能です。

マルチデバイス対応サービス

フラミンゴ

同一URLでマルチデバイス対応をするためのクラウドサービス。従来のプロキシサーバを経由した方式ではなく、各ユーザーが持つ端末（スマホ・タブレット）で動的にデバイスに最適化されたテンプレートを表示させることができます。

Push型配信サービス

ゼブラ

管理画面機能、顧客属性(DB)機能、通知解析機能を提供するプッシュ配信サービスです。・独自の顧客属性DBによりセグメント配信が可能・顧客サーバとの連携可能・新しいメールマーケティングサービス

スマホ対応ソリューションGomobileサービスラインナップ



既存のPCサイト、モバイルサイトのシステム資産を中間サーバーで変換し、スマホ最適化サイトを生成するクラウドサービスです。このサービスによって利用者はスマホファーストのサービス提供が可能になります。

18

管理画面UI刷新をフラットデザインで全面リニューアルし、操作性と親しみやすさを改善。アクセスレポート、デバッグコンソール機能他が新たに追加されました。金融機関、通信会社、公共サービス、大手電気メーカーから大規模ECを中心に国内トップクラスの導入実績があります。

①スマホ変換サービス「スマートコンバート」


同一URLでマルチデバイス対応をするためのクラウドサービス。各ユーザーが持つ端末（スマホ・タブレット）で動的にデバイスに最適化表示させることができる端末変換タイプのサービスです。レスポンシブウェブは現在のウェブ開発の大きなトレンドの一つですが、複雑なウェブシステムを全てレスポンシブウェブで開発するのは非常に大変です。「フラミンゴ」は、Googleが推奨する同一URLでありながらかつデバイスによって動的に最適なコンテンツの表示を可能にするためのプラットフォームです。「フラミンゴ」は完全に自社サービスであるため、細部に渡ってチューニングが可能であり、万全の技術サポートが提供されています。

19


②マルチデバイス対応サービス「フラミンゴ」


アプリに実装するソリューションによってプッシュ配信を行うサービスが「ゼブラ」。管理画面、顧客属性(DB)および通知解析機能を装備し、下記の配信を実現します。

20

■セグメント配信独自DBに取得したデータに対してセグメント配信が可能です。

■A/B配信送信内容を変えて配信してコンバージョンをあげる仕組みを提供します。

■予約配信日時を指定して配信予約をすることが可能です。

■自動定期配信例えば１週間に2回以上ログインしているユーザに定期的に配信することが可能です。 ※一部開発が必要な場合もあります。


③Push型配信サービス「ゼブラ」

「スマートコンバート」「フラミンゴ」「ゼブラ」を提供するアイスリーデザインは、スマートデバイスのスペシャリスト集団として、クライアント企業のスマホ・タブレット戦略を支援しています。その強みとなるポイントを下記にまとめました。 1.デザイン・UI設計スマホファーストの世界では、より直感的につかえるUI/UXがユーザーから受入られ、ユーザーエクスペリエンスが素晴らしい程、そのアプリはユーザーから広く受け入れられ伝播します。アイスリーデザインは、クライアントへの豊富な経験をベースにスマートデバイスに最適なデザイン・UIを提供します。

2.ハイスペック・エンジニア集団スマホ独特のUIを実現するためには、デザイン・UI設計のみならず高い技術力が求められます。また表現力だけでなく大規模なアクセス等に対応するためには、クライアントアプリケーションの知識のみならずサーバーサイドの知識も必要となってきます。アイスリーデザインでは、フロントエンド、サーバーサイド、クラウドを活用したインフラと、各レイヤーに精通した優秀なエンジニアがチームを組むことによって大規模なアクセスがあるスマホアプリでも安定したサービスを提供することが可能です。

3.グローバルアプローチスマホで提供できるサービスは、これまで以上に国境を容易に超えることが可能です。アイスリーデザインはシリコンバレーからアフリカといった新興国の通信・モバイル事情を絶えず情報収集することによって、グローバルの視点でのサービスを提供が出来る事を心がけています。また海外にオフショア拠点を持つことによってコスト競争力をもってクライアントにサービス提供が可能です。


21

ディレクション、デザイン・UI/UXとTechが一体のスペシャリスト、アイスリーデザインとは？


導入実績一覧

22

●圧倒的なスマホ対応実績アイスリーデザイン社のGomobileサービスには、下記を始めとする多くの導入実績がります。

「スマートコンバート」導入事例「フラミンゴ」導入事例

事例紹介URL http://www.i3design.jp/achievements/

23

会社概要

名称株式会社アイスリーデザイン（英文表記：i3DESIGN Co., Ltd.）

所在地〒150-0002 東京都渋谷区渋谷2-6-12 ベルデ青山2F

代表者代表取締役（CEO）芝陽一郎

設立平成18年7月26日

資本金 30,000,000円

従業員数 22名 (2014年2月現在)

電話 FAX

03-6419-7700（代表） 03-6419-7703

事業内容

1. スマートフォン事業 2. インターネット広告事業 3. リサーチ・コンサルティング事業 4. 受託開発事業

アイスリーデザイン社の社名「i3DESIGN」とは、次の3つのiから成り立っています。 internet international information この3つの分野のビジネスをデザインする会社、これがi3DESIGNです。

サービス詳細URL http://www.i3design.jp/

本資料についてのお問い合わせや、「Goｍobileサービス」「スマートコンバート」「フラミンゴ」「ゼブラ」に関するご相談は下記までご連絡ください。

株式会社アイスリーデザイン

東京都渋谷区渋谷2-6-12 ベルデ青山2F

TEL： 03-6419-7700（平日10:00-19:00） FAX： 03-6419-7703 Email: [email protected]

Documents

「スマートフォンサイトを 作らなければ！」と思った時に ...3 スマートフォン（以下、スマホ）普及の勢いが止まりません。今や、多くの人がスマホ

「スマートフォンサイトを作らなければ！」と思った時に ...3 スマートフォン（以下、スマホ）普及の勢いが止まりません。今や、多くの人がスマホ