電子書籍版「デザイニングWebアクセシビリティ」制作秘話

Transcript

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
33. どうすればよかったか? A) InDesignで編集したら 原稿や元画像も更新する  校了が近づいても強い心を持って同期する B) InDesignでは編集せず 常に元データを参照する  事前にワークフローの整備とすり合わせが必要 33
34. 電子化にあたって工夫した点 34
35. 電子化にあたって工夫した点 目次の変更 巨大な表の扱い 索引リンクの設定 リンクのルール統一 35
36. 目次の変更 目次を先頭に移動  紙版は 刊行に寄せて→本書の構成→目次 の順  電子書籍版では目次を先頭に移動した 目次の内容を調整  紙版ではコラムが目次に掲載されていない  電子書籍版ではコラムも掲載  目次の階層を深くする案もあったが、長すぎて断念 36
37. 紙版・PDF版：6ページ目 37
38. EPUB版：先頭、コラムあり 38
39. 巨大な表の扱い 巻末に「WCAG 2.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で色反転しても文字色が変わらず読めなくなる  Kindle E-Ink端末などのモノクロ端末の存在 解決アプローチ:  Kindleフォーマットのみ色指定なしにした  夜間モード時のリンク色の問題は解決せず 52
53. Kindle for iOS 夜間モード×文字色指定 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