Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

2,578 views

Published on

2017年3月8日開催のイベント「Web制作者による電子出版の実践 ~電書業界に乗り込め! 今がそのときだ!~」のセッション2で使用したスライドです。
https://ebook-web.connpass.com/event/50752/

Published in: Technology
  • Hello! Get Your Professional Job-Winning Resume Here - Check our website! https://vk.cc/818RFv
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

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

  1. 1. 電子書籍版 「デザイニングWebアクセシビリティ」 制作秘話~Web制作者が電子書籍を作ってみた! 株式会社ビジネス・アーキテクツ 伊原力也・太田良典
  2. 2. 自己紹介 2
  3. 3. BA 3
  4. 4. ウェブアクセシビリティ基盤委員会(WAIC) 4
  5. 5. デザイニングWebアクセシビリティ 5
  6. 6. 「デザイニングWebアクセシビリティ」 とは? 6
  7. 7. デザイニングWebアクセシビリティとは? 誰でもアクセスしやすいWebサイトの 制作プロセスについて語る本  障害の有無や、状況にかかわらずアクセスできる 戦略や設計、ビジュアルデザインも重視  ガイドラインの解説ではない  BAが手がけた実例も豊富に収録 7
  8. 8. 重要な問題 8
  9. 9. 紙である 重要な問題 9
  10. 10. 紙の制約 読めない・読みにくい人がいる  全盲の人は紙の本を読めない  ロービジョン (弱視) の人は拡大読書器に頼ることに  上肢障害があると読んだり持ち運んだりに苦労する 実際に複数の問い合わせを受けた  アクセシビリティをテーマにした本であるため、 障害当事者の方の関心も高かった 10
  11. 11. 電子書籍版 11
  12. 12. 電子書籍版発売までの大まかな流れ 2015年7月 紙版の発売 2016年9月 電子版の作業開始 2016年12月 直販・委託にて発売 2017年2月 Amazonで発売 12
  13. 13. 「デザイニングWebアクセシビリティ」 電子書籍化にあたっての方針 13
  14. 14. 電子書籍版の基本方針 アクセシビリティを重視  さまざまな環境で読めるようにする ユーザビリティの高いものに  電子書籍の特性を活かした構成にする  現状のリーディングシステム(RS)の実装に 合わせた構成にする 14
  15. 15. さまざまな環境 モバイルデバイスで読む スクリーンリーダーで読む 拡大して読む 色を反転する設定で読む モノクロ端末で読む 15
  16. 16. リフローかFixedか? 拡大を想定するなら圧倒的にリフロー  拡大したときにテキストが折り返される  Fixedではスクロールを繰り返しながら読む羽目に 固定レイアウト版も用意  紙と同じレイアウトで読みたい人もいるかも  そんな方向けに固定レイアウト版も用意 16
  17. 17. 電子化にあたっての作業方針 リフロー版のEPUBを作る  アクセシビリティ・ユーザビリティに配慮 固定レイアウト版のPDFも提供する  こちらは最終原稿をそのままPDF化 自分たちで電子化作業を行う  Web制作者なら可能、制作プロセスへの関心も 17
  18. 18. EPUB版における方針 なるべくスタイルをつけない  アクセシビリティを重視し、 「直販でDRMフリーEPUBを配布する」という決断  RSによってCSSの対応度はさまざまだが、 対象RSは固定できない  多くのRSに対応すべくスタイル指定は極力回避  「スタイル込みで見たい人はPDFを」という割り切り 18
  19. 19. 「デザイニングWebアクセシビリティ」 電子化作業 19
  20. 20. 電子化作業プロセス 1. テキスト原稿と画像を用意(原稿起こし) 2. EPUBオーサリング  PandocでXHTMLに変換  エディタでXHTMLとメタデータを調整  ZIPで固める 3. RS検証とレビュアーチェック 4. 結果を受けて調整 20
  21. 21. 原稿起こしの作業 21
  22. 22. 原稿起こしの作業・概要 テキストの原稿を用意する作業 画像の調整 22
  23. 23. テキストの原稿を用意 InDesignデータからテキストを起こす  PDFからエディタにコピペしていく フォーマットはMarkdown形式を選択  あとで変換しやすくするため Githubの無料のリポジトリで管理  公開されてしまうが、出版社の好意でOKに 23
  24. 24. PDFからエディタにコピペ 24
  25. 25. Markdown+GitHub 25 https://github.com/bakera/designing_web_accessibility/blob/master/md_text/1-1%20なぜWebはアクセシブルなのか.md
  26. 26. テキストを起こす作業が大変 一部記号類の文字化け 順番の入れ替わり  InDesign上でテクニカルにレイアウトされたものは 順番がおかしくなっている テキストの抜け落ち  段落丸ごと抜けていると気づかない 26
  27. 27. テキスト取り出し 27 http://www.jepa.or.jp/ebookpedia/201508_2546/
  28. 28. 本当でした 「一括でのテキスト書き出しは、 その後のチェックと調整を考慮すると 現実的とは言えず、ここはページ単位または ページ内のテキストブロック単位で コツコツとテキストをコピー&ペースト していくのが、遠回りのように見えて、 結局、一番効率が良い。」 28
  29. 29. 画像の調整も発生 画像の多くがInDesign上で加工されていた  レイアウトに収めるためのトリミング  強調のための枠や、転換を示す矢印などの付与 版下PDFからキャプチャしなおして対応  350dpi、長辺3200pxでページをPNG書き出し  図版部分だけに絞ってトリミング 29
  30. 30. InDesign上で加工された図版の例 30
  31. 31. なぜこんな作業が必要だったのか? 最終データがInDesignのみだった  最初はMarkdownで原稿を書いていた  DTP作業の後にチェックと修正を行った  この際、修正をInDesignデータのみに反映していた 31
  32. 32. 32
  33. 33. どうすればよかったか? A) InDesignで編集したら 原稿や元画像も更新する  校了が近づいても強い心を持って同期する B) InDesignでは編集せず 常に元データを参照する  事前にワークフローの整備とすり合わせが必要 33
  34. 34. 電子化にあたって工夫した点 34
  35. 35. 電子化にあたって工夫した点 目次の変更 巨大な表の扱い 索引リンクの設定 リンクのルール統一 35
  36. 36. 目次の変更 目次を先頭に移動  紙版は 刊行に寄せて→本書の構成→目次 の順  電子書籍版では目次を先頭に移動した 目次の内容を調整  紙版ではコラムが目次に掲載されていない  電子書籍版ではコラムも掲載  目次の階層を深くする案もあったが、長すぎて断念 36
  37. 37. 紙版・PDF版:6ページ目 37
  38. 38. EPUB版:先頭、コラムあり 38
  39. 39. 巨大な表の扱い 巻末に「WCAG2.0と本書内容の対照表」  紙版では見開き3面の巨大な表 電子書籍版では大胆に構成を変更  巨大な表は現状のRSで再現できず、 またモバイルデバイスで非常に読みにくい  表ではなくリスト形式に変更  表もWeb上に用意。PDF版でも表は参照可能 39
  40. 40. 紙版・PDF版:表 40
  41. 41. EPUB版:リスト 41
  42. 42. 索引リンクの設定 巻末の索引を大幅に調整、強化  文中の単語と索引との相互リンク  索引から本文へのリンクだけでなく、 文中の該当の語から索引へのリンクも設定 リーダーの検索機能を使えばよいのでは?  意図しない単語にヒットするケース  関連する項目をたどるには索引のほうが使いやすい 42
  43. 43. 紙版・PDF版:索引 43
  44. 44. EPUB:索引リンク 44
  45. 45. EPUB:索引リンク 45
  46. 46. リンクのルール統一 文中リンクは「書籍内リンク」で統一  索引、あるいは本書の別の章などの参照のみ 外部サイトへのリンクは文中に入れない  段落の外に出し、対応する段落の近くに配置  巻末の「引用事例一覧」のリンクも同様に処理 46
  47. 47. 検証から生まれた課題と解決案 47
  48. 48. 検証プロセス 各種RSでの検証  Windows/ Mac/ iOS/ Android/Kindle  PC/ スマートフォン / タブレット / 電書リーダー アクセシビリティ専門家によるチェック  中根さん(全盲):スクリーンリーダー  伊敷さん(弱視):拡大・反転  たださん(電書に詳しい):総合評価 48
  49. 49. 索引リンクの試行錯誤 索引へのリンクであると分かるべき  単にリンクにしても、何へのリンクか分からない [索引]というテキストを入れてみると  拡大して読むユーザーからは分かりやすいと評価  しかし読み上げでは…… 結局、プレーンなリンクにするという判断 49
  50. 50. 索引、索引、索引、索引、索引 50
  51. 51. 見出しのスタイル(見た目) 見出しは色つきに  本書のメイン部分は 「問題」「解決アプローチ」の2つに分かれる  それぞれの見出しに異なる色をつけ、 どこを読んでいるか分かりやすくした しかし…… 51
  52. 52. 色の問題 特定環境における色の問題:  RSで色反転しても文字色が変わらず読めなくなる  KindleE-Ink端末などのモノクロ端末の存在 解決アプローチ:  Kindleフォーマットのみ色指定なしにした  夜間モード時のリンク色の問題は解決せず 52
  53. 53. KindleforiOS夜間モード×文字色指定 53
  54. 54. 電子化作業で得た教訓 54
  55. 55. 電子書籍作りには「元ネタ」が重要 最初から電子化を見越しておく  アクセシブル・ライティングを実践  電子化をふまえて原稿や画像などを用意  InDesign上だけで編集しない それができていれば、EPUB化は容易  中身はHTMLとXMLとCSS、すでに知っているもの  スタイルも、必要最低限なら検証は容易 55
  56. 56. アクセシブル・ライティングとは? さまざまな環境で読まれることを想定した、 電子化前提のライティング  モバイルデバイスで読む  スクリーンリーダーで読む  拡大して読む  色を反転する設定で読む  モノクロ端末で読む 56
  57. 57. これが真の「アクセシブル・ライティング」だ! altに頼らない文章  適切なキャプションがあれば、altは「図」でよい ノンブル・色・レイアウトに頼らない文章  固定形を前提にせず、リフロー×多数のRSを前提に 構造化された文章  Markdownで準備すれば、おのずと構造化される 57
  58. 58. 思ったこと Web開発の手法と相性がよさそう  Gitでの管理、共有は効率が良かった  タスクランナー、テストの自動化、CIといった さまざまなエンジニアリング手法も適用できそう 58
  59. 59. 参考事例 Markdownを起点とするワークフロー Markdownで書く電子書籍開発環境 GitHubで雑誌・書籍を作る 執筆を支える技術 59
  60. 60. まとめ 60
  61. 61. 書籍を手に取ってもらう機会を増やすには まずリフロー版の電子書籍を出そう 特別な技術や過度な負荷は必要ない 工夫や試行錯誤はオプション 61
  62. 62. まずリフロー版の電子書籍を出そう 無いものは買えない  紙だと読めない人がいる  PDFでも読めない人、読みにくい人がいる  読めるものがなかったら存在しないのと同じ 最重要な「書籍のアクセシビリティ」 =「リフローな電子書籍」を出すこと 62
  63. 63. 特別な技術や過度な負荷は必要ない 必要なこと1:方針を決める  リフロー? Fixed? 本書は最初から方針が明確だった 必要なこと2:原稿の用意  元原稿、元素材が扱いやすい形かどうかが鍵 必要なこと3:EPUBに変換  ツールでさっくりもよし、Web技術を活かすもよし 63
  64. 64. 工夫や試行錯誤はオプション 電書の特性と、現在のRSに合わせて 目次・表・索引・リンクを構成  ぜひ本書の使い勝手を評価ください この工夫はあくまで「やってみた」レベル  「必ずやらなければいけない」類のものではない  書籍の内容に応じて取捨選択を 64
  65. 65. 電書業界に乗り込め! 今がそのときだ! Web制作者による電子出版の実践 65
  66. 66. ありがとうございました
  67. 67. 会場よりご案内 電子版  直販: 電子書籍版デザイニングWebアクセシビリティ  Amazon Kindle版デザイニングWebアクセシビリティ 紙版  本日のみの特別定価販売(後ろで) 67

×