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

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

COPYRIGHT ASIAL CORPORATION. ALL RIGHTS RESERVED.

自己紹介

鴨田　健次 ( かもた　けんじ )

■ 略歴

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

■ 今まで関わった主な HTML5 関連プロジェクト

　ＫＤＤＩ株式会社・株式会社テレビ朝日「 au ヘッドライン」　アプリ取り放題「 au スマートパス」対応のニュース配信アプリ

　株式会社テレビ朝日「テレ朝動画アプリ ( 公式 ) 」　テレビ朝日が公式に提供している YouTube 動画を簡単に検索・視聴できるアプリ

　株式会社アシックス「 iPad アプリ『 ASICS SHOE FINDER 』」　上記アシックスストアでの分析サービスと連携し、ユーザーの特性に合わせたシューズを探し出すアプリ。

　株式会社テレビ朝日「濱口と一緒にお魚獲るどー！無人島 0 円生活 0 円 GAME 」　テレビ番組と連動したセカンドスクリーンアプリ

　ジー・プラン株式会社 G ポイントトラベル　スマートフォン版 WEB サイト構築　ホテル検索サービスのスマートフォン版サイトの最適化対応　　その他、スマートフォンアプリ、 PC 向けサイト多数。

04/13/2023 2

04/13/2023

事例紹介

<3>


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

ＫＤＤＩ株式会社・株式会社テレビ朝日「 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 名

04/13/2023 4


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

株式会社テレビ朝日「テレ朝動画アプリ ( 公式 ) 」

テレビ朝日が YouTube 上で展開している公式動画の視聴に関する利便性を向上させるためにリリース。

テレビ朝日の公式動画だけが検索・閲覧できる。SNS 連携やお気に入り動画の登録なども可能。

YouTube Data API 、および、独自のオススメ動画・公式チャンネル APIを使用して、データのやりとりを行っている。

対応機種：Android(OS2.2 以上 ) 、 iPhone (iOS 5.0 以上 ) 、 iPad (iOS 5.0 以上 )

作業範囲：要件定義、基本設計、詳細設計、開発、テスト、リリース

テクノロジー： Monaca 、 HTML5 、 CSS3 、 JavaScript開発期間： 2 ヶ月開発体制： 2 名

04/13/2023 5


事例紹介 | ASICS SHOE FINDER

株式会社アシックス「 ASICS SHOE FINDER 」

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

対応機種：iPad (iOS 5.0 以上 )

作業範囲：詳細設計、開発、テスト

テクノロジー：Monaca 、 HTML5 、 CSS3 、 JavaScript

開発期間： 2 週間開発体制： 2 名

04/13/2023 6


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

ジー・プラン株式会社G ポイントトラベル　スマートフォン版 WEB サイト

G ポイントトラベルはジー・プラン株式会社が運営するホテルプランの比較サイトです。スマートフォン版サイトの UI/UX 設計、デザイン、開発を行いました。

特徴・スマートフォンで操作しやすいデザイン・機能・現在位置から近いホテルの検索が可能

対応機種：Android 、 iPhone

作業範囲：要件定義、基本設計、詳細設計、開発、テスト

テクノロジー： HTML5 、 CSS3 、 PHP 、 JavaScript開発期間： 2 ヶ月開発体制： 2 名

04/13/2023 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 名 04/13/2023 8

04/13/2023

ハイブリッドアプリとは

<9>

04/13/2023


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

<10>

HTML5 アプリネイティブアプリ

開発言語 HTML5 と JavaScript Objective-C や Java

機能Web ブラウザーが備える

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

機能を利用可能

開発環境通常の Web 開発環境

エディタ、 Dreamweaver等Xcode や Eclipse といった OS

ごとの開発環境

クロスプラットフォーム○

同じ JavaScriptコードを流用可

×開発言語自体が異なる

実行速度△

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

◎OS が直接実行する

オフライン対応×

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

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

アプリの配布方法Web サイトにアクセス

マーケットへの登録は不可マーケットの登録が原則

メンテナンス方法サーバーから配信するため常に最新状態をキープ可能

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

04/13/2023


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

<11>

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

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

開発の難易度

OS 独自機能の活用

端末性能の発揮メンテナンス性

クロスプラットフォーム

HTML5 アプリ（ Web ）ネイティブアプリハイブリッドアプリ

もう一つの選択肢：ハイブリッドアプリ

04/13/2023


ハイブリッドアプリの特徴

<12>

HTML5 アプリハイブリッドアプリネイティブアプリ

開発言語 HTML5 と JavaScript Objective-C や Java

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

JavaScript からネイティブの機能を

呼び出せる

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

開発環境通常の Web 開発環境

エディタ、 Dreamweaver等

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

クロスプラットフォーム ○同じ JavaScriptコードを流用可

×開発言語自体が異なる

実行速度△

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

○ソースコードを端末上に保

存することが可能

◎OS が直接実行する

オフライン対応×

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

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

アプリの配布方法 Web サイトにアクセスマーケットへの登録は不可

マーケットの登録が原則

メンテナンス方法サーバーから配信するため常に最新状態をキープ可能

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

新可能

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

ザー次第

04/13/2023

ハイブリッドアプリの利点

<13>


ハイブリッドアプリの利点

アプリの更新

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

プラットフォーム依存性

メンテナンス

短期開発

モックアップの制作

04/13/2023 14


ハイブリッドアプリの利点の活かし方　＜アプリの更新＞

04/13/2023 15

アプリの更新



メンテナンス

短期開発



ハイブリッドアプリの利点の活かし方　＜アプリの更新＞

04/13/2023 16

au ヘッドラインコンテンツ

配信サーバーau Market

au ヘッドライン

アプリ更新申請

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

アップデート通知

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

アプリ更新

HTML ・ CSS ・ PHP更新

ページ表示(即時反映 )

審査・修正戻し

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

アプリ起動


ハイブリッドアプリの利点の活かし方　＜リーチ＞＋＜プラットフォーム非依存＞

04/13/2023 17

アプリの更新



メンテナンス

短期開発



ハイブリッドアプリの利点の活かし方　＜リーチ＞＋＜プラットフォーム非依存＞

04/13/2023 18

au ヘッドライン

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

画面表示：WebView

会員判定 / ログイン：ネイティブ

アプリ設定：ネイティブ

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

ブラウザ版(au の Android/iPhone 端末で利用可 )

画面表示：WebView

会員判定 / ログイン：WebView

アプリ設定：WebView

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

ウィジェット：なし


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

04/13/2023 19

アプリの更新



メンテナンス

短期開発




04/13/2023 20

Android iPhone iPad

style.css style2.css

recommend.html



04/13/2023 21

YouTube DataAPI

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

XML

動画情報

JSON

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

localstorage

お気に入り

HTML5 テンプレート

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

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

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


ハイブリッドアプリの利点の活かし方　＜短期開発＞

04/13/2023 22

アプリの更新



メンテナンス

短期開発




04/13/2023 23

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

既存で用意されていた API を用いた

デザイン作業を含め、 2 週間程度の開発期間でリリース

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

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

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

株式会社アシックス「 ASICS SHOE FINDER 」

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



04/13/2023 24

アプリの更新



メンテナンス

短期開発



ハイブリッドアプリの利点の活かし方　＜モックアップ作成＞

04/13/2023 25

○ワイヤーフレーム ○初期モックアップ ○最終モックアップ


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

04/13/2023 26

アプリの更新マーケット申請する頻度が低い


アプリ＋WEB で提供可能

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

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

メンテナンス姓は高い

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

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

プの作成が容易である

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

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

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

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

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

04/13/2023

高い UX を実現するために

<27>


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

04/13/2023 28

アニメーション

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

ナビゲーション

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

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

パフォーマンス

大量に画像などのオブジェクトが存在するページの処理

追加でリストを取得するページの処理

ネイティブ API

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


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

04/13/2023 29

企画・要件定義

アプリをシンプルにする

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

非機能要件についても、確認しておく

設計

HTML5 で作る部分と、ネイティブで作る部分を意識して設計する

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

多言語対応を行うようであれば、はじめから考慮しておく

開発

開発するときは、 Android を基準として考える

JavaScript の記述規約を明確にする

テスト

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

04/13/2023

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

<30>

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

Documents