電子書籍版「デザイニングWebアクセシビリティ」制作秘話 ～ Web制作者が電子書籍を作ってみた!

電子書籍版「デザイニングWebアクセシビリティ」制作秘話～Web制作者が電子書籍を作ってみた!

株式会社ビジネス・アーキテクツ伊原力也・太田良典

自己紹介

2

BA

3

ウェブアクセシビリティ基盤委員会（WAIC）

4

デザイニングWebアクセシビリティ

5

「デザイニングWebアクセシビリティ」とは?

6

デザイニングWebアクセシビリティとは?

誰でもアクセスしやすいWebサイトの制作プロセスについて語る本 障害の有無や、状況にかかわらずアクセスできる

戦略や設計、ビジュアルデザインも重視 ガイドラインの解説ではない

BAが手がけた実例も豊富に収録

7

重要な問題

8

紙である

重要な問題

9

紙の制約

読めない・読みにくい人がいる 全盲の人は紙の本を読めない

ロービジョン (弱視) の人は拡大読書器に頼ることに

上肢障害があると読んだり持ち運んだりに苦労する

実際に複数の問い合わせを受けた アクセシビリティをテーマにした本であるため、

障害当事者の方の関心も高かった

10

電子書籍版

11

電子書籍版発売までの大まかな流れ

2015年7月 紙版の発売

2016年9月 電子版の作業開始

2016年12月 直販・委託にて発売

2017年2月 Amazonで発売

12

「デザイニングWebアクセシビリティ」電子書籍化にあたっての方針

13

電子書籍版の基本方針

アクセシビリティを重視 さまざまな環境で読めるようにする

ユーザビリティの高いものに 電子書籍の特性を活かした構成にする

現状のリーディングシステム（RS）の実装に合わせた構成にする

14

さまざまな環境

モバイルデバイスで読む

スクリーンリーダーで読む

拡大して読む

色を反転する設定で読む

モノクロ端末で読む

15

リフローかFixedか?

拡大を想定するなら圧倒的にリフロー 拡大したときにテキストが折り返される

Fixedではスクロールを繰り返しながら読む羽目に

固定レイアウト版も用意 紙と同じレイアウトで読みたい人もいるかも

そんな方向けに固定レイアウト版も用意

16

電子化にあたっての作業方針

リフロー版のEPUBを作る アクセシビリティ・ユーザビリティに配慮

固定レイアウト版のPDFも提供する こちらは最終原稿をそのままPDF化

自分たちで電子化作業を行う Web制作者なら可能、制作プロセスへの関心も

17

EPUB版における方針

なるべくスタイルをつけない アクセシビリティを重視し、

「直販でDRMフリーEPUBを配布する」という決断

RSによってCSSの対応度はさまざまだが、対象RSは固定できない

多くのRSに対応すべくスタイル指定は極力回避

「スタイル込みで見たい人はPDFを」という割り切り

18

「デザイニングWebアクセシビリティ」電子化作業

19

電子化作業プロセス

1. テキスト原稿と画像を用意(原稿起こし)

2. EPUBオーサリング PandocでXHTMLに変換 エディタでXHTMLとメタデータを調整 ZIPで固める

3. RS検証とレビュアーチェック

4. 結果を受けて調整

20

原稿起こしの作業

21

原稿起こしの作業・概要

テキストの原稿を用意する作業

画像の調整

22

テキストの原稿を用意

InDesignデータからテキストを起こす PDFからエディタにコピペしていく

フォーマットはMarkdown形式を選択 あとで変換しやすくするため

Githubの無料のリポジトリで管理 公開されてしまうが、出版社の好意でOKに

23

PDFからエディタにコピペ

24

Markdown + GitHub

25https://github.com/bakera/designing_web_accessibility/blob/master/md_text/1-1%20なぜWebはアクセシブルなのか.md

テキストを起こす作業が大変

一部記号類の文字化け

順番の入れ替わり InDesign上でテクニカルにレイアウトされたものは

順番がおかしくなっている

テキストの抜け落ち 段落丸ごと抜けていると気づかない

26

テキスト取り出し

27http://www.jepa.or.jp/ebookpedia/201508_2546/

本当でした

「一括でのテキスト書き出しは、その後のチェックと調整を考慮すると現実的とは言えず、ここはページ単位またはページ内のテキストブロック単位でコツコツとテキストをコピー＆ペーストしていくのが、遠回りのように見えて、結局、一番効率が良い。」

28

画像の調整も発生

画像の多くがInDesign上で加工されていた レイアウトに収めるためのトリミング

強調のための枠や、転換を示す矢印などの付与

版下PDFからキャプチャしなおして対応 350dpi、長辺3200pxでページをPNG書き出し

図版部分だけに絞ってトリミング

29

InDesign上で加工された図版の例

30

なぜこんな作業が必要だったのか?

最終データがInDesignのみだった 最初はMarkdownで原稿を書いていた

DTP作業の後にチェックと修正を行った

この際、修正をInDesignデータのみに反映していた

31

32

どうすればよかったか?

A) InDesignで編集したら原稿や元画像も更新する 校了が近づいても強い心を持って同期する

B) InDesignでは編集せず常に元データを参照する 事前にワークフローの整備とすり合わせが必要

33

電子化にあたって工夫した点

34

電子化にあたって工夫した点

目次の変更

巨大な表の扱い

索引リンクの設定

リンクのルール統一

35

目次の変更

目次を先頭に移動 紙版は 刊行に寄せて→本書の構成→目次 の順

電子書籍版では目次を先頭に移動した

目次の内容を調整 紙版ではコラムが目次に掲載されていない

電子書籍版ではコラムも掲載

目次の階層を深くする案もあったが、長すぎて断念

36

紙版・PDF版：6ページ目

37

EPUB版：先頭、コラムあり

38

巨大な表の扱い

巻末に「WCAG 2.0と本書内容の対照表」 紙版では見開き3面の巨大な表

電子書籍版では大胆に構成を変更 巨大な表は現状のRSで再現できず、

またモバイルデバイスで非常に読みにくい

表ではなくリスト形式に変更

表もWeb上に用意。PDF版でも表は参照可能

39

紙版・PDF版：表

40

EPUB版：リスト

41

索引リンクの設定

巻末の索引を大幅に調整、強化 文中の単語と索引との相互リンク

索引から本文へのリンクだけでなく、文中の該当の語から索引へのリンクも設定

リーダーの検索機能を使えばよいのでは? 意図しない単語にヒットするケース

関連する項目をたどるには索引のほうが使いやすい

42

紙版・PDF版：索引

43

EPUB：索引リンク

44

EPUB：索引リンク

45

リンクのルール統一

文中リンクは「書籍内リンク」で統一 索引、あるいは本書の別の章などの参照のみ

外部サイトへのリンクは文中に入れない 段落の外に出し、対応する段落の近くに配置

巻末の「引用事例一覧」のリンクも同様に処理

46

検証から生まれた課題と解決案

47

検証プロセス

各種RSでの検証 Windows / Mac / iOS / Android / Kindle

PC / スマートフォン / タブレット / 電書リーダー

アクセシビリティ専門家によるチェック 中根さん（全盲）：スクリーンリーダー

伊敷さん（弱視）：拡大・反転

たださん（電書に詳しい）：総合評価

48

索引リンクの試行錯誤

索引へのリンクであると分かるべき 単にリンクにしても、何へのリンクか分からない

[索引] というテキストを入れてみると 拡大して読むユーザーからは分かりやすいと評価

しかし読み上げでは……

結局、プレーンなリンクにするという判断

49

索引、索引、索引、索引、索引

50

見出しのスタイル (見た目)

見出しは色つきに 本書のメイン部分は

「問題」「解決アプローチ」の2つに分かれる

それぞれの見出しに異なる色をつけ、どこを読んでいるか分かりやすくした

しかし……

51

色の問題

特定環境における色の問題: RSで色反転しても文字色が変わらず読めなくなる

Kindle E-Ink端末などのモノクロ端末の存在

解決アプローチ: Kindleフォーマットのみ色指定なしにした

夜間モード時のリンク色の問題は解決せず

52

Kindle for iOS 夜間モード × 文字色指定

53

電子化作業で得た教訓

54

電子書籍作りには「元ネタ」が重要

最初から電子化を見越しておく アクセシブル・ライティングを実践

電子化をふまえて原稿や画像などを用意

InDesign上だけで編集しない

それができていれば、EPUB化は容易 中身はHTMLとXMLとCSS、すでに知っているもの

スタイルも、必要最低限なら検証は容易

55

アクセシブル・ライティングとは？

さまざまな環境で読まれることを想定した、電子化前提のライティング モバイルデバイスで読む

スクリーンリーダーで読む

拡大して読む

色を反転する設定で読む

モノクロ端末で読む

56

これが真の「アクセシブル・ライティング」だ！

altに頼らない文章 適切なキャプションがあれば、altは「図」でよい

ノンブル・色・レイアウトに頼らない文章 固定形を前提にせず、リフロー×多数のRSを前提に

構造化された文章 Markdownで準備すれば、おのずと構造化される

57

思ったこと

Web開発の手法と相性がよさそう Gitでの管理、共有は効率が良かった

タスクランナー、テストの自動化、CIといったさまざまなエンジニアリング手法も適用できそう

58

参考事例

Markdownを起点とするワークフロー

Markdownで書く電子書籍開発環境

GitHubで雑誌・書籍を作る

執筆を支える技術

59

まとめ

60

書籍を手に取ってもらう機会を増やすには

まずリフロー版の電子書籍を出そう

特別な技術や過度な負荷は必要ない

工夫や試行錯誤はオプション

61

まずリフロー版の電子書籍を出そう

無いものは買えない 紙だと読めない人がいる

PDFでも読めない人、読みにくい人がいる

読めるものがなかったら存在しないのと同じ

最重要な「書籍のアクセシビリティ」＝「リフローな電子書籍」を出すこと

62

特別な技術や過度な負荷は必要ない

必要なこと1：方針を決める リフロー? Fixed? 本書は最初から方針が明確だった

必要なこと2：原稿の用意 元原稿、元素材が扱いやすい形かどうかが鍵

必要なこと3：EPUBに変換 ツールでさっくりもよし、Web技術を活かすもよし

63

工夫や試行錯誤はオプション

電書の特性と、現在のRSに合わせて目次・表・索引・リンクを構成 ぜひ本書の使い勝手を評価ください

この工夫はあくまで「やってみた」レベル 「必ずやらなければいけない」類のものではない

書籍の内容に応じて取捨選択を

64

電書業界に乗り込め!今がそのときだ!

Web制作者による電子出版の実践

65

ありがとうございました

会場よりご案内

電子版 直販: 電子書籍版デザイニングWebアクセシビリティ

Amazon Kindle版デザイニングWebアクセシビリティ

紙版 本日のみの特別定価販売（後ろで）

67