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

by Rikiya Ihara / magi

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

自己紹介 2

Slide 3

Slide 3 text

BA 3

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

重要な問題 8

Slide 9

Slide 9 text

紙である重要な問題 9

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

電子書籍版 11

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

原稿起こしの作業 21

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

紙版・PDF版：表 40

Slide 41

Slide 41 text

EPUB版：リスト 41

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

紙版・PDF版：索引 43

Slide 44

Slide 44 text

EPUB：索引リンク 44

Slide 45

Slide 45 text

EPUB：索引リンク 45

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

電子化作業で得た教訓 54

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

まとめ 60

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

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

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

ありがとうございました

Slide 67

Slide 67 text

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