高いUXをハイブリッド開発で実現するためのポイント
アシアル株式会社 鴨田健次
自己紹介

鴨田 健次(かもた けんじ)
■略歴
アシアル株式会社所属。Webディレクター/Webデザイナー。
主な業務は、プロジェクトマネージャーとして、プロジェクトのマネジメントを行う一方、
デザイン業務があればデザイナーとしても活動し、
コーダーとしてHTMLテンプレートを作成することもあります。

■今まで関わった主なHTML5関連プロジェクト
KDDI 株式会社・ 株式会社テレビ朝日 「auヘッドライン」
アプリ取り放題「auスマートパス」対応のニュース配信アプリ
株式会社テレビ朝日「テレ朝動画アプリ(公式)」
テレビ朝日が公式に提供しているYouTube動画を簡単に検索・視聴できるアプリ
株式会社アシックス 「iPadアプリ 『ASICS SHOE FINDER』」
上記アシックスストアでの分析サービスと連携し、ユーザーの特性に合わせたシューズを探し出すア
プリ。
株式会社テレビ朝日「濱口と一緒にお魚獲るどー!無人島0円生活0円GAME」
テレビ番組と連動したセカンドスクリーンアプリ
ジー・プラン株式会社 Gポイントトラベル スマートフォン版WEBサイト構築
ホテル検索サービスのスマートフォン版サイトの最適化対応
その他、スマートフォンアプリ、PC向けサイト多数。

2013/12/11

2
事例紹介

2013/12/11

<3>
事例紹介 | auヘッドライン

KDDI 株式会社・ 株式会社テレビ朝日
「auヘッドライン」
アプリ取り放題「auスマートパス」対応のニュース配信アプリ。
KDDIのフラグシップアプリの一つ。
前身アプリ「auニュースEX」は、
KDDIのスマートフォンにプリインストールされていた。
現アプリも、プリインストールされているauウィジェット(ニュース)が
「auヘッドライン」に対応しており、ニュース系アプリランキングでは、
常に1位を獲得、全カテゴリランキングでも上位に入っている。
対応機種:
au Androidスマートフォン全機種(Android OS2.2以上)
au iPhone 4S/5/5S(iOS 5.0以上)
作業範囲:
要件定義、基本設計、詳細設計、開発、テスト、
運用、インフラ設計、インフラ構築
テクノロジー:Java、PHP、JavaScript、HTML5、CSS3
開発期間:3ヶ月(Android) 1.5ヶ月(iPhone)
開発体制:3名
2013/12/11

4
事例紹介 | テレ朝動画アプリ(公式)

株式会社テレビ朝日
「テレ朝動画アプリ(公式)」
テレビ朝日がYouTube上で展開している公式動画の視聴に関する
利便性を向上させるためにリリース。
テレビ朝日の公式動画だけが検索・閲覧できる。
SNS連携やお気に入り動画の登録なども可能。
YouTube Data API、および、独自のオススメ動画・公式チャンネルAPI
を使用して、データのやりとりを行っている。
対応機種:
Android(OS2.2以上)、iPhone (iOS 5.0以上)、iPad (iOS 5.0以上)
作業範囲:
要件定義、基本設計、詳細設計、開発、テスト、リリース
テクノロジー:Monaca、HTML5、CSS3、 JavaScript
開発期間:2ヶ月
開発体制:2名

2013/12/11

5
事例紹介 | ASICS SHOE FINDER

株式会社アシックス
「ASICS SHOE FINDER」
アシックスストアなどで行われている足形計
測サービス「STATIC FOOT ID」、走行計測
サービス「DYNAMIC FOOT ID」の測定結果
から、目的に合わせ、自動的におすすめのラ
ンニングシューズを抽出し、測定結果と共に
レポートを表示するアプリケーション。

対応機種:
iPad (iOS 5.0以上)
作業範囲:詳細設計、開発、テスト
テクノロジー:
Monaca、HTML5、CSS3、JavaScript
開発期間:2週間
開発体制:2名

2013/12/11

6
事例紹介 | Gポイントトラベル スマートフォン版WEBサイト

ジー・プラン株式会社
Gポイントトラベル スマートフォン版WEBサイト
Gポイントトラベルはジー・プラン株式会社が運営するホテルプランの
比較サイトです。
スマートフォン版サイトのUI/UX設計、デザイン、開発を行いました。
特徴
・スマートフォンで操作しやすいデザイン・機能
・現在位置から近いホテルの検索が可能
対応機種:
Android、iPhone
作業範囲:
要件定義、基本設計、詳細設計、開発、テスト
テクノロジー:HTML5、CSS3、PHP、JavaScript
開発期間:2ヶ月
開発体制:2名

2013/12/11

7
事例紹介 | Health Planet

株式会社タニタヘルスリンク
Health Planet
HealthPlanetアプリは株式会社タニタが提供するWebサービス
「HealthPlanet」のスマートフォンアプリで、体組成や歩数、血圧、血
糖値などの健康データを管理することができます。本アプリでは、
Web版のHealthPlanetと連携して、健康データの入力や閲覧を行うこと
ができます。また、Bluetooth内蔵の体組成計と連携して自動的に体組
成データをアプリ内に取り込むことができます。
特徴
・モバイルアプリ開発プラットフォームMonacaを使って開発
・HTML5とJavaScriptなどのWeb技術を駆使したハイブリッドアプリ
・Bluetoothを使って専用の体組成計からデータを自動で受け取ること
が可能
対応機種:
Android、iPhone
作業範囲:
要件定義、基本設計、詳細設計、開発、テスト
テクノロジー: HTML5、CSS3、JavaScript、Monaca、Bluetooth
開発期間:2.5ヶ月(Andoridプリインストール版)
開発体制:3名
2013/12/11

8
ハイブリッドアプリとは

2013/12/11

<9>
HTML5アプリとネイティブアプリの違い

HTML5アプリ

ネイティブアプリ

HTML5とJavaScript

Objective-CやJava

Webブラウザーが備える
機能のみ利用可能

端末やOSが持つすべての
機能を利用可能

通常のWeb開発環境
エディタ、Dreamweaver等

XcodeやEclipseといったOSごと
の開発環境

クロスプラットフォーム

○
同じJavaScriptコードを流用可

×
開発言語自体が異なる

実行速度

△
Webブラウザーが実行エンジン

◎
OSが直接実行する

オフライン対応

×
キャッシュを用いて一部オフラ
イン対応も可能

◎
端末内にプログラムが配置

アプリの配布方法

Webサイトにアクセス
マーケットへの登録は不可

マーケットの登録が原則

メンテナンス方法

サーバーから配信するため
常に最新状態をキープ可能

アップデートのたびにマーケッ
ト登録。更新はユーザー次第

開発言語

機能
開発環境

2013/12/11

<10>
HTML5でネイティブ形式のアプリを実現するハイブリッドアプリ

もう一つの選択肢:ハイブリッドアプリ
開発の難易度

クロスプラットフォーム

メンテナンス性

HTML5アプリ(Web)

OS独自機能の活用

端末性能の発揮

ネイティブアプリ

ハイブリッドアプリ

1.

HTML5アプリの開発技術でネイティブ形式のアプリを実現する手法

2.

OSの独自機能や端末性能などをHTML5アプリから補うことが可能

2013/12/11

<11>
ハイブリッドアプリの特徴

HTML5アプリ
開発言語

機能

開発環境

クロスプラットフォーム

ハイブリッドアプリ

HTML5とJavaScript
Webブラウザーが備える
機能のみ利用可能
通常のWeb開発環境
エディタ、Dreamweaver等

ネイティブアプリ
Objective-CやJava

JavaScriptから
ネイティブの機能を
呼び出せる

端末やOSが持つすべての
機能を利用可能

XcodeやEclipseといったOSごとの開発環境
(Monacaでブラウザだけで環境構築も可能)

○
同じJavaScriptコードを流用可

×
開発言語自体が異なる

実行速度

△
Webブラウザーが実行エン
ジン

オフライン対応

×
キャッシュを用いて一部オ
フライン対応も可能

◎
端末内にプログラムが配置

アプリの配布方法

Webサイトにアクセス
マーケットへの登録は不可

マーケットの登録が原則

メンテナンス方法

サーバーから配信するため
常に最新状態をキープ可能

○
ソースコードを端末上に保
存することが可能

ネイティブ部分はマーケッ
ト経由の更新。HTML5部分
は任意のタイミングで更新
可能

◎
OSが直接実行する

アップデートのたびにマー
ケット登録。更新はユー
ザー次第
2013/12/11

<12>
ハイブリッドアプリの利点

2013/12/11

<13>
ハイブリッドアプリの利点



アプリの更新



リーチ(アプリ+WEBでの提供も可能)



プラットフォーム依存性



メンテナンス



短期開発



モックアップの制作

2013/12/11

14
ハイブリッドアプリの利点の活かし方 <アプリの更新>



アプリの更新



リーチ(アプリ+WEBでの提供も可能)



プラットフォーム依存性



メンテナンス



短期開発



モックアップの制作

2013/12/11

15
ハイブリッドアプリの利点の活かし方 <アプリの更新>

アプリ更新申請

アプリ更新
HTML・CSS・PHP更新

審査・修正戻し

アプリ起動

アップデート通知

auヘッドライン
コンテンツ
配信サーバー

au Market
アプリアップデート
(ユーザー任意)

審査通過・マーケット公開
(早くても申請から数日)

3~6ヶ月に1回程度のペース

ページ表示
(即時反映)

auヘッドライン

1ヶ月に2回程度のペース
2013/12/11

16
ハイブリッドアプリの利点の活かし方 <リーチ>+<プラットフォーム非依存>



アプリの更新



リーチ(アプリ+WEBでの提供も可能)



プラットフォーム依存性



メンテナンス



短期開発



モックアップの制作

2013/12/11

17
ハイブリッドアプリの利点の活かし方 <リーチ>+<プラットフォーム非依存>

画面表示:
WebView

アプリ版
(auのAndroid端末のみ利用可)

会員判定/ログイン:
ネイティブ
アプリ設定:
ネイティブ

ウィジェット:
ネイティブ

Android端末は
アプリ版もブラウザ版も利用可能

ブラウザ版
(auのAndroid/iPhone端末で利用可)
auヘッドライン

画面表示:
WebView
会員判定/ログイン:
WebView
アプリ設定:
WebView
ウィジェット:
なし

2013/12/11

18
ハイブリッドアプリの利点の活かし方 <メンテナンス>



アプリの更新



リーチ(アプリ+WEBでの提供も可能)



プラットフォーム依存性



メンテナンス



短期開発



モックアップの制作

2013/12/11

19
ハイブリッドアプリの利点の活かし方 <メンテナンス>

iPhone

Android

iPad

style2.css

style.css

recommend.html
2013/12/11

20
ハイブリッドアプリの利点の活かし方 <メンテナンス>

HTML5 テンプレート

アプリ内にHTML/JavaScript
コードをあらかじめ仕込んでお
き、データはサーバーから取得
し表示する

動画情報

XML

お気に入り

データ取得はJSON
やXMLを利用して表
示速度を最適化

おすすめ・
公式チャンネル情報

localstorage

YouTube Data
API

JSON

テレ朝動画アプリ
管理サーバー

アプリ設定
は、端末内
データベース
に保存
2013/12/11

21
ハイブリッドアプリの利点の活かし方 <短期開発>



アプリの更新



リーチ(アプリ+WEBでの提供も可能)



プラットフォーム依存性



メンテナンス



短期開発



モックアップの制作

2013/12/11

22
ハイブリッドアプリの利点の活かし方 <短期開発>

株式会社アシックス
「ASICS SHOE FINDER」
アシックスストアなどで行われている足形計測サービス「STATIC FOOT
ID」、走行計測サービス「DYNAMIC FOOT ID」の測定結果から、目的に合
わせ、自動的におすすめのランニングシューズを抽出し、測定結果と共にレ
ポートを表示するアプリケーション。



すでにあるWebの資産を活用





既存で用意されていたAPIを用いた
デザイン作業を含め、2週間程度の開発期間でリリース

マーケット公開しない店頭アプリ


iOS Developer Enterprise Program (年間参加費 ¥24,800)


社内配布向けで、ワイヤレスでアプリ更新可能

2013/12/11

23
ハイブリッドアプリの利点の活かし方 <短期開発>



アプリの更新



リーチ(アプリ+WEBでの提供も可能)



プラットフォーム依存性



メンテナンス



短期開発



モックアップの制作

2013/12/11

24
ハイブリッドアプリの利点の活かし方 <モックアップ作成>
○ワイヤーフレーム

○初期モックアップ

○最終モックアップ

2013/12/11

25
開発・運営側のメリットとユーザビリティ
○ 開発・運営側のメリット


アプリの更新




マーケット申請する頻度が低い

アプリ+WEBで提供可能

プラットフォーム依存性




プラットフォームへ依存する部分が少ない

HTMLは基本的にワンソースであるため、
メンテナンス姓は高い

機能・コンテンツが充実している

短期開発




アプリでもウェブでも使うことが出来る
(端末を選ばない)

メンテナンス




アップデートをする手間がかからない

リーチ(アプリ+WEBでの提供も可能)




○ ユーザービリティ

すでにあるWEBコンテンツの再利用が可能

モックアップの制作


表示がWebViewメインであれば、モックアップ

使いやすく、分かりやすい

の作成が容易である

2013/12/11

26
高いUXを実現するために

2013/12/11

<27>
ハイブリッドアプリの課題点



アニメーション




オブジェクトのアニメーション

ナビゲーション





ページ遷移アニメーション

タイトルバー・ナビ/メニューバー

パフォーマンス





大量に画像などのオブジェクトが存在するページの処理
追加でリストを取得するページの処理

ネイティブAPI


使える機能が限られている

2013/12/11

28
ハイブリッドアプリ作成の際に気をつけること



企画・要件定義



モック作成、プロトタイプ作成も考慮する





アプリをシンプルにする
非機能要件についても、確認しておく

設計



縦横対応は必要な部分だけに留める





HTML5で作る部分と、ネイティブで作る部分を意識して設計する
多言語対応を行うようであれば、はじめから考慮しておく

開発





開発するときは、Androidを基準として考える
JavaScriptの記述規約を明確にする

テスト


対応機種数、OS数とテスト工数は比例する

2013/12/11

29
ご静聴ありがとうございました。

2013/12/11

<30>

高いUXをハイブリッド開発で実現するためのポイント