1. 電子書籍版
「デザイニングWebアクセシビリティ」
制作秘話～Web制作者が電子書籍を作ってみた!
株式会社ビジネス・アーキテクツ
伊原力也・太田良典

2. 自己紹介
2

3. BA
3

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

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

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

7. デザイニングWebアクセシビリティとは?
誰でもアクセスしやすいWebサイトの
制作プロセスについて語る本
 障害の有無や、状況にかかわらずアクセスできる
戦略や設計、ビジュアルデザインも重視
 ガイドラインの解説ではない
 BAが手がけた実例も豊富に収録
7

8. 重要な問題
8

9. 紙である
重要な問題
9

10. 紙の制約
読めない・読みにくい人がいる
 全盲の人は紙の本を読めない
 ロービジョン (弱視) の人は拡大読書器に頼ることに
 上肢障害があると読んだり持ち運んだりに苦労する
実際に複数の問い合わせを受けた
 アクセシビリティをテーマにした本であるため、
障害当事者の方の関心も高かった
10

11. 電子書籍版
11

12. 電子書籍版発売までの大まかな流れ
2015年7月 紙版の発売
2016年9月 電子版の作業開始
2016年12月 直販・委託にて発売
2017年2月 Amazonで発売
12

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

14. 電子書籍版の基本方針
アクセシビリティを重視
 さまざまな環境で読めるようにする
ユーザビリティの高いものに
 電子書籍の特性を活かした構成にする
 現状のリーディングシステム（RS）の実装に
合わせた構成にする
14

15. さまざまな環境
モバイルデバイスで読む
スクリーンリーダーで読む
拡大して読む
色を反転する設定で読む
モノクロ端末で読む
15

16. リフローかFixedか?
拡大を想定するなら圧倒的にリフロー
 拡大したときにテキストが折り返される
 Fixedではスクロールを繰り返しながら読む羽目に
固定レイアウト版も用意
 紙と同じレイアウトで読みたい人もいるかも
 そんな方向けに固定レイアウト版も用意
16

17. 電子化にあたっての作業方針
リフロー版のEPUBを作る
 アクセシビリティ・ユーザビリティに配慮
固定レイアウト版のPDFも提供する
 こちらは最終原稿をそのままPDF化
自分たちで電子化作業を行う
 Web制作者なら可能、制作プロセスへの関心も
17

18. EPUB版における方針
なるべくスタイルをつけない
 アクセシビリティを重視し、
「直販でDRMフリーEPUBを配布する」という決断
 RSによってCSSの対応度はさまざまだが、
対象RSは固定できない
 多くのRSに対応すべくスタイル指定は極力回避
 「スタイル込みで見たい人はPDFを」という割り切り
18

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

20. 電子化作業プロセス
1. テキスト原稿と画像を用意(原稿起こし)
2. EPUBオーサリング
 PandocでXHTMLに変換
 エディタでXHTMLとメタデータを調整
 ZIPで固める
3. RS検証とレビュアーチェック
4. 結果を受けて調整
20

21. 原稿起こしの作業
21

22. 原稿起こしの作業・概要
テキストの原稿を用意する作業
画像の調整
22

23. テキストの原稿を用意
InDesignデータからテキストを起こす
 PDFからエディタにコピペしていく
フォーマットはMarkdown形式を選択
 あとで変換しやすくするため
Githubの無料のリポジトリで管理
 公開されてしまうが、出版社の好意でOKに
23

24. PDFからエディタにコピペ
24

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

26. テキストを起こす作業が大変
一部記号類の文字化け
順番の入れ替わり
 InDesign上でテクニカルにレイアウトされたものは
順番がおかしくなっている
テキストの抜け落ち
 段落丸ごと抜けていると気づかない
26

27. テキスト取り出し
27
http://www.jepa.or.jp/ebookpedia/201508_2546/

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

29. 画像の調整も発生
画像の多くがInDesign上で加工されていた
 レイアウトに収めるためのトリミング
 強調のための枠や、転換を示す矢印などの付与
版下PDFからキャプチャしなおして対応
 350dpi、長辺3200pxでページをPNG書き出し
 図版部分だけに絞ってトリミング
29

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

31. なぜこんな作業が必要だったのか?
最終データがInDesignのみだった
 最初はMarkdownで原稿を書いていた
 DTP作業の後にチェックと修正を行った
 この際、修正をInDesignデータのみに反映していた
31

32. 32

33. どうすればよかったか?
A) InDesignで編集したら
原稿や元画像も更新する
 校了が近づいても強い心を持って同期する
B) InDesignでは編集せず
常に元データを参照する
 事前にワークフローの整備とすり合わせが必要
33

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

35. 電子化にあたって工夫した点
目次の変更
巨大な表の扱い
索引リンクの設定
リンクのルール統一
35

36. 目次の変更
目次を先頭に移動
 紙版は 刊行に寄せて→本書の構成→目次 の順
 電子書籍版では目次を先頭に移動した
目次の内容を調整
 紙版ではコラムが目次に掲載されていない
 電子書籍版ではコラムも掲載
 目次の階層を深くする案もあったが、長すぎて断念
36

37. 紙版・PDF版：6ページ目
37

38. EPUB版：先頭、コラムあり
38

39. 巨大な表の扱い
巻末に「WCAG2.0と本書内容の対照表」
 紙版では見開き3面の巨大な表
電子書籍版では大胆に構成を変更
 巨大な表は現状のRSで再現できず、
またモバイルデバイスで非常に読みにくい
 表ではなくリスト形式に変更
 表もWeb上に用意。PDF版でも表は参照可能
39

40. 紙版・PDF版：表
40

41. EPUB版：リスト
41

42. 索引リンクの設定
巻末の索引を大幅に調整、強化
 文中の単語と索引との相互リンク
 索引から本文へのリンクだけでなく、
文中の該当の語から索引へのリンクも設定
リーダーの検索機能を使えばよいのでは?
 意図しない単語にヒットするケース
 関連する項目をたどるには索引のほうが使いやすい
42

43. 紙版・PDF版：索引
43

44. EPUB：索引リンク
44

45. EPUB：索引リンク
45

46. リンクのルール統一
文中リンクは「書籍内リンク」で統一
 索引、あるいは本書の別の章などの参照のみ
外部サイトへのリンクは文中に入れない
 段落の外に出し、対応する段落の近くに配置
 巻末の「引用事例一覧」のリンクも同様に処理
46

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

48. 検証プロセス
各種RSでの検証
 Windows/ Mac/ iOS/ Android/Kindle
 PC/ スマートフォン / タブレット / 電書リーダー
アクセシビリティ専門家によるチェック
 中根さん（全盲）：スクリーンリーダー
 伊敷さん（弱視）：拡大・反転
 たださん（電書に詳しい）：総合評価
48

49. 索引リンクの試行錯誤
索引へのリンクであると分かるべき
 単にリンクにしても、何へのリンクか分からない
[索引]というテキストを入れてみると
 拡大して読むユーザーからは分かりやすいと評価
 しかし読み上げでは……
結局、プレーンなリンクにするという判断
49

50. 索引、索引、索引、索引、索引
50

51. 見出しのスタイル(見た目)
見出しは色つきに
 本書のメイン部分は
「問題」「解決アプローチ」の2つに分かれる
 それぞれの見出しに異なる色をつけ、
どこを読んでいるか分かりやすくした
しかし……
51

52. 色の問題
特定環境における色の問題:
 RSで色反転しても文字色が変わらず読めなくなる
 KindleE-Ink端末などのモノクロ端末の存在
解決アプローチ:
 Kindleフォーマットのみ色指定なしにした
 夜間モード時のリンク色の問題は解決せず
52

53. KindleforiOS夜間モード×文字色指定
53

54. 電子化作業で得た教訓
54

55. 電子書籍作りには「元ネタ」が重要
最初から電子化を見越しておく
 アクセシブル・ライティングを実践
 電子化をふまえて原稿や画像などを用意
 InDesign上だけで編集しない
それができていれば、EPUB化は容易
 中身はHTMLとXMLとCSS、すでに知っているもの
 スタイルも、必要最低限なら検証は容易
55

56. アクセシブル・ライティングとは？
さまざまな環境で読まれることを想定した、
電子化前提のライティング
 モバイルデバイスで読む
 スクリーンリーダーで読む
 拡大して読む
 色を反転する設定で読む
 モノクロ端末で読む
56

57. これが真の「アクセシブル・ライティング」だ！
altに頼らない文章
 適切なキャプションがあれば、altは「図」でよい
ノンブル・色・レイアウトに頼らない文章
 固定形を前提にせず、リフロー×多数のRSを前提に
構造化された文章
 Markdownで準備すれば、おのずと構造化される
57

58. 思ったこと
Web開発の手法と相性がよさそう
 Gitでの管理、共有は効率が良かった
 タスクランナー、テストの自動化、CIといった
さまざまなエンジニアリング手法も適用できそう
58

59. 参考事例
Markdownを起点とするワークフロー
Markdownで書く電子書籍開発環境
GitHubで雑誌・書籍を作る
執筆を支える技術
59

60. まとめ
60

61. 書籍を手に取ってもらう機会を増やすには
まずリフロー版の電子書籍を出そう
特別な技術や過度な負荷は必要ない
工夫や試行錯誤はオプション
61

62. まずリフロー版の電子書籍を出そう
無いものは買えない
 紙だと読めない人がいる
 PDFでも読めない人、読みにくい人がいる
 読めるものがなかったら存在しないのと同じ
最重要な「書籍のアクセシビリティ」
＝「リフローな電子書籍」を出すこと
62

63. 特別な技術や過度な負荷は必要ない
必要なこと1：方針を決める
 リフロー? Fixed? 本書は最初から方針が明確だった
必要なこと2：原稿の用意
 元原稿、元素材が扱いやすい形かどうかが鍵
必要なこと3：EPUBに変換
 ツールでさっくりもよし、Web技術を活かすもよし
63

64. 工夫や試行錯誤はオプション
電書の特性と、現在のRSに合わせて
目次・表・索引・リンクを構成
 ぜひ本書の使い勝手を評価ください
この工夫はあくまで「やってみた」レベル
 「必ずやらなければいけない」類のものではない
 書籍の内容に応じて取捨選択を
64

65. 電書業界に乗り込め!
今がそのときだ!
Web制作者による電子出版の実践
65

66. ありがとうございました

67. 会場よりご案内
電子版
 直販: 電子書籍版デザイニングWebアクセシビリティ
 Amazon Kindle版デザイニングWebアクセシビリティ
紙版
 本日のみの特別定価販売（後ろで）
67