2014.05.15 電子出版制作ツール「APPCROSS」実践ワークショップ 日本電子出版協会

1. デジタル出版
インタラクティブインター
フェースデザイン-
AppCrossプラットホームコーチ
ング
資策會創研所
簡陳中 Anthony Chien
http://www.appcross.tw
マンマシンインターフェースデザイナー

2. まるで本当の本みたいだが、本を超えた！

3. 使いやすさ
ディザイ
ラビリティ
E-マガジンの主題内容はユーザーの
ニーズを満足できる。
ブランド
経験
対話型コンテンツの操作が
簡単で使いこなす。
ユーザーは会話型デザインのいい体
験に楽しんでいる。
ユーザーはマガジンのブランドの全
体的にいいイメージを持っている。
ニーズ
新しいメディアデザイン 新しいデザインの心

4. ユーザーインターフェース(UI) vs.
ユーザー エクスペリエンス(UX)
電子書籍の作り方

5. UI = UX
電子書籍の作り方
ユーザーインターフェース ユーザー経験

6. What is UI ?
ユーザーインターフェースとは人とデバイスの出会の場である。ユー
ザーはデバイス機能を利用しインプットとアウトプットを行う。イン
ターフェースとはインプットとアウトプットのプロセス配置で、ユー
ザーはデバイスの機能を運用してほしい結果に導くこと。
電子書籍の作り方

7. 電子書籍の作り方
UI の目標
ユーザーが最も短い時間でインターフェース操作を馴染んでミッション
を完成するのがUIの目標。使えるだけじゃいいUIデザインとは言えない。
ユーザーが楽しんでいて、そしてリピートするこそいいデザインである。

8. What is UX ? As (role), I want to do (goal), so I can
(reason)ユーザー経験のデザイン、ユーザーインターフェースデザイン、ビジュ
アルスタイル、プログラム効能と機能等を含んで、長期な観察と詳細分
析と通してユーザーのアクティビティパータンと利用の習慣を知る。
つまり、ユーザー経験である。
電子書籍の作り方

9. ユーザー設計三元素包括：
電子書籍の作り方
ユーザー
Users
使用シーン
Context
內容
Content

10. 電子ストーリーのメインユーザーが児童で、設
計上は主にマルチメディアの運用で、画像を中
心に、文字、動画、音声、音效、音樂等を補助
することによってあるストーリーのシーンを表
現し、読むときに読者と高度インタラクティブ
な接触をする。
電子書籍の作り方
ユーザー は誰 ??
異なるイ-ブックの内容よって目標ターゲットも違う。
電子マガジンのメインユーザーが大人で、設計
上も內容の提示を中心に、文章を中心に画像で
補助し、チャプターのコンテンツにインタラク
ティブ元件でユーザーを誘導操作し、読む価値
を高める。

11. 電子書籍の作り方
文化 環境 ユーザー活動
動機
目標と任務
知識と習慣
情緒と能力
注意力
利用シーンContext
ユーザーのメンタルモデルによって状況設計する。メンタルモデルとは
ユーザーが自分自身の経験と直感で、デバイスインターフェースと会話
を取ること。メンタルモデルを構築することでユーザーの会話シーンを
予測できるので、事前に会話のプロセス定義をデザインすることで、
ユーザーのニーズを満足する。
行動デバイス
ユーザーインターフェース

12. 1. 画像は手で操作、拡大できる。保存、シャアに自由。
2. 従来な読む習慣の維持：注記、マーク、ノート
3. 目だけのリーディングじゃなくで、マルチメディア音声、映像
を結合することで全方位の読む体験を提供。
4. いつでも本を出す、保存、読むことができる。
本から電子書籍へと進化する
電子書籍の作り方

13. インターフェースデザイン準則
Interface Design Principal
電子書籍の作り方

14. 電子書籍の作り方
1. インタラクティブオブジェクトの分かりやすさ
デザインオブジェクトを明確にする必要があり、インターフェイスのデ
ザインもユーザーが一目ですべての機能ステップの操作方法を理解でき
るようにする必要がある。
インタラクティブボタンが初期設定のままで、ボタンは、（図1）点滅·フェージ
ング（図2）異なる色（図3）異なる形状 によって区別されている。
(圖一) (圖二) (圖三)

15. 電子書籍の作り方
2. インターフェースの一致性
デザインのスタイルは一致しないといけない、色の処理もインター
フェースの置き場所も。
同じチァプターのデザインテーマは類似または同一である必要があります。ユーザー過
去の使用経験に従い操作、またインターフェースの相互作用をすることがます。すべて
の色、ボタンやその他の機能配置が画一的にしなければならない。

16. 電子書籍の作り方
3. タイムリーなフィードバック
ユーザーに今進行していることを知らせ、操作の過程に会話取ることで
有効的にユーザーに”ここを押して”というようなヒントを与え、また”
これはインタラクティブなオブジェクト”であることを提示するだけ
じゃなく、追加情報も提供している。
（図I）ドロップリフレッシュ機能は、グラフの変更によて更新を通知。 （図
2）Plant Nannyはボタンを2秒長押して音声を出す。(図3）押すとホバー効果が
現れる。(図４) 2ステージアイコンを押すとより多くの情報を表示する
(圖一) (圖二)
(圖三)
(圖四)

17. 電子書籍の作り方
4. ユーザー操作モード
操作モードはユーザー普段の習慣に一致すると、ユーザーは過去の経験
にしたがって操作モードに反映する。ハンドオペレーションやインタラ
クティブ元件をデザインする時に、生活経験との結び付きを注意すべき。
左図はユーザーの経験運用( video放送、拡大縮小、削除、情報…などのicons )
直感でビデオをクリック放送、或はプラグインを操作する。右の図はタッチicon
のサイズを設計するときに注意すべき事項である。

18. 電子書籍の作り方
5. Discoverability ヒントを提供する
操作しやすいインターフェースを設計し、プラグインのヒントを提供す
ることで、ユーザーは簡単にインターフェース検査よりインタラクティ
ブ効果のある元素を見つける。
はじめてユーザーに適切なインタラクティブヒントを提供するときに、左の写真
の例だと、章節の切り替えについて、今何ページと矢印を付けて、ユーザーを誘
導する。右の図例だと、インタラクティブな写真に說明文章を付けて、直接ユー
ザーに操作方式を告知する。

19. 電子書籍の作り方
6.スケーラビリティと柔軟性
デバイスインターフェース應用
違うデバイスには違う使用モードがある。デジタルの時代に、インター
フェースデザインを作るときに、デバイスのサイズ或は縦横のインター
フェース変換を考慮すべき、柔軟的に配置を変換するほうがいい。
デジタルコンテンツは異なるデバイスで閲覧されるので、設計する前にインタラ
クティブコンテンツとデバイス表現を考えて、画面配置は違うインターフェース
でも閲覧できるよう切り替える(左圖)縦か横式(右圖)

20. 電子書籍の作り方
7. Reliability 身に付けられる
インターフェースがわかりやすく、ユーザーがすぐコントロールできる
よう、その需要を満足できるように設計すべき。
ユーザーは操作說明を持って操作方法を勉強し、毎期の電子雑誌も同じiconsで
指示することで、ユーザー學習の負担を減らし、これはまさに前も触れたように
操作の一致性、名詞統一

21. New Media Digital Content Production Solution
ニューメディア デジタルプロダクション
ソリューション
(APP CROSS)
AppCrossプラットフォーム

22. 電子書籍の作り方
Step1
制作したい電子書籍籍
のテーマを考える
AppCross電子書籍の製作フロー(1/2)
Step2
テーマに関連するデータ
を集め、素材を整理
し、アウトラインを決
める
Step3
InDesignを使用した電子書籍のコンテンツ
をレイアウトします。また、AppCross
プラグインでインタラクティブな効果
が追加されます。電子書籍の編集完
了後エクスポートすると、パッケージ
ングされたzipファイルができます。
AppCross フラットホーム介紹

23. 電子書籍の作り方
Step4-1
i Tunesを使用してエクスポート
後のzipファイルをiPad上の
AppPreviewにインストールでき、
すぐにiPadで完成後の電子書籍
籍をプレビューできます。
AppCross電子書籍の製作フロー(2/2)
Step4-2
ステップ4-2: zipファイルをAppCrossServer
にアップロードし、パッケージング配信
を行い、AppStoreにパッケージ追加を
行うと、世界中のユーザーがダウン
ロードできるようになります。
AppCross プラットホーム介紹

24. 電子書籍の作り方
Indesign Plugin
AppCrossプラットフォーム介紹
• 17種類のプラグインを提供し、デバイス特性に聞く、動く、触る、感動に結合した
インタラクティブモードデザイン
• 即時なプレビュー機能
1.スタマイズ機能 2. インターネット
サービス
3. カスタマイ
ズ機能
4. エクスポートと
プレビュー