電子書籍版「デザイニングWebアクセシビリティ」制作秘話 ~...
-
Upload
- -
Category
Technology
-
view
1.394 -
download
0
Transcript of 電子書籍版「デザイニングWebアクセシビリティ」制作秘話 ~...
デザイニングWebアクセシビリティとは?
誰でもアクセスしやすいWebサイトの制作プロセスについて語る本 障害の有無や、状況にかかわらずアクセスできる
戦略や設計、ビジュアルデザインも重視 ガイドラインの解説ではない
BAが手がけた実例も豊富に収録
7
紙の制約
読めない・読みにくい人がいる 全盲の人は紙の本を読めない
ロービジョン (弱視) の人は拡大読書器に頼ることに
上肢障害があると読んだり持ち運んだりに苦労する
実際に複数の問い合わせを受けた アクセシビリティをテーマにした本であるため、
障害当事者の方の関心も高かった
10
電子書籍版の基本方針
アクセシビリティを重視 さまざまな環境で読めるようにする
ユーザビリティの高いものに 電子書籍の特性を活かした構成にする
現状のリーディングシステム(RS)の実装に合わせた構成にする
14
リフローかFixedか?
拡大を想定するなら圧倒的にリフロー 拡大したときにテキストが折り返される
Fixedではスクロールを繰り返しながら読む羽目に
固定レイアウト版も用意 紙と同じレイアウトで読みたい人もいるかも
そんな方向けに固定レイアウト版も用意
16
電子化にあたっての作業方針
リフロー版のEPUBを作る アクセシビリティ・ユーザビリティに配慮
固定レイアウト版のPDFも提供する こちらは最終原稿をそのままPDF化
自分たちで電子化作業を行う Web制作者なら可能、制作プロセスへの関心も
17
EPUB版における方針
なるべくスタイルをつけない アクセシビリティを重視し、
「直販でDRMフリーEPUBを配布する」という決断
RSによってCSSの対応度はさまざまだが、対象RSは固定できない
多くのRSに対応すべくスタイル指定は極力回避
「スタイル込みで見たい人はPDFを」という割り切り
18
電子化作業プロセス
1. テキスト原稿と画像を用意(原稿起こし)
2. EPUBオーサリング PandocでXHTMLに変換 エディタでXHTMLとメタデータを調整 ZIPで固める
3. RS検証とレビュアーチェック
4. 結果を受けて調整
20
テキストの原稿を用意
InDesignデータからテキストを起こす PDFからエディタにコピペしていく
フォーマットはMarkdown形式を選択 あとで変換しやすくするため
Githubの無料のリポジトリで管理 公開されてしまうが、出版社の好意でOKに
23
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のみだった 最初はMarkdownで原稿を書いていた
DTP作業の後にチェックと修正を行った
この際、修正をInDesignデータのみに反映していた
31
どうすればよかったか?
A) InDesignで編集したら原稿や元画像も更新する 校了が近づいても強い心を持って同期する
B) InDesignでは編集せず常に元データを参照する 事前にワークフローの整備とすり合わせが必要
33
目次の変更
目次を先頭に移動 紙版は 刊行に寄せて→本書の構成→目次 の順
電子書籍版では目次を先頭に移動した
目次の内容を調整 紙版ではコラムが目次に掲載されていない
電子書籍版ではコラムも掲載
目次の階層を深くする案もあったが、長すぎて断念
36
巨大な表の扱い
巻末に「WCAG 2.0と本書内容の対照表」 紙版では見開き3面の巨大な表
電子書籍版では大胆に構成を変更 巨大な表は現状のRSで再現できず、
またモバイルデバイスで非常に読みにくい
表ではなくリスト形式に変更
表もWeb上に用意。PDF版でも表は参照可能
39
索引リンクの設定
巻末の索引を大幅に調整、強化 文中の単語と索引との相互リンク
索引から本文へのリンクだけでなく、文中の該当の語から索引へのリンクも設定
リーダーの検索機能を使えばよいのでは? 意図しない単語にヒットするケース
関連する項目をたどるには索引のほうが使いやすい
42
リンクのルール統一
文中リンクは「書籍内リンク」で統一 索引、あるいは本書の別の章などの参照のみ
外部サイトへのリンクは文中に入れない 段落の外に出し、対応する段落の近くに配置
巻末の「引用事例一覧」のリンクも同様に処理
46
検証プロセス
各種RSでの検証 Windows / Mac / iOS / Android / Kindle
PC / スマートフォン / タブレット / 電書リーダー
アクセシビリティ専門家によるチェック 中根さん(全盲):スクリーンリーダー
伊敷さん(弱視):拡大・反転
たださん(電書に詳しい):総合評価
48
索引リンクの試行錯誤
索引へのリンクであると分かるべき 単にリンクにしても、何へのリンクか分からない
[索引] というテキストを入れてみると 拡大して読むユーザーからは分かりやすいと評価
しかし読み上げでは……
結局、プレーンなリンクにするという判断
49
色の問題
特定環境における色の問題: RSで色反転しても文字色が変わらず読めなくなる
Kindle E-Ink端末などのモノクロ端末の存在
解決アプローチ: Kindleフォーマットのみ色指定なしにした
夜間モード時のリンク色の問題は解決せず
52
電子書籍作りには「元ネタ」が重要
最初から電子化を見越しておく アクセシブル・ライティングを実践
電子化をふまえて原稿や画像などを用意
InDesign上だけで編集しない
それができていれば、EPUB化は容易 中身はHTMLとXMLとCSS、すでに知っているもの
スタイルも、必要最低限なら検証は容易
55
アクセシブル・ライティングとは?
さまざまな環境で読まれることを想定した、電子化前提のライティング モバイルデバイスで読む
スクリーンリーダーで読む
拡大して読む
色を反転する設定で読む
モノクロ端末で読む
56
これが真の「アクセシブル・ライティング」だ!
altに頼らない文章 適切なキャプションがあれば、altは「図」でよい
ノンブル・色・レイアウトに頼らない文章 固定形を前提にせず、リフロー×多数のRSを前提に
構造化された文章 Markdownで準備すれば、おのずと構造化される
57
参考事例
Markdownを起点とするワークフロー
Markdownで書く電子書籍開発環境
GitHubで雑誌・書籍を作る
執筆を支える技術
59
まずリフロー版の電子書籍を出そう
無いものは買えない 紙だと読めない人がいる
PDFでも読めない人、読みにくい人がいる
読めるものがなかったら存在しないのと同じ
最重要な「書籍のアクセシビリティ」=「リフローな電子書籍」を出すこと
62
特別な技術や過度な負荷は必要ない
必要なこと1:方針を決める リフロー? Fixed? 本書は最初から方針が明確だった
必要なこと2:原稿の用意 元原稿、元素材が扱いやすい形かどうかが鍵
必要なこと3:EPUBに変換 ツールでさっくりもよし、Web技術を活かすもよし
63
工夫や試行錯誤はオプション
電書の特性と、現在のRSに合わせて目次・表・索引・リンクを構成 ぜひ本書の使い勝手を評価ください
この工夫はあくまで「やってみた」レベル 「必ずやらなければいけない」類のものではない
書籍の内容に応じて取捨選択を
64
会場よりご案内
電子版 直販: 電子書籍版デザイニングWebアクセシビリティ
Amazon Kindle版デザイニングWebアクセシビリティ
紙版 本日のみの特別定価販売(後ろで)
67