本文へ


アクセシブルな電子書籍作成にチャレンジ・広報とよなかepub

  • 2012/07/06 03:04 JST

あるアクセシビリティの勉強会でお会いした@StudioCORE_ さんが部長をされているイーパ部のお話を聞き、私も電子書籍にはずっと興味があったという話をしたところ、なんと@StudioCORE_さんからFacebook経由でイーパ部にお誘いいただきまして、第11回から参加させていただく事になりました。

イーパ部第11回は、Skypeで東京組と繋いで自己紹介から始まりました。関西組は、2つのチームに別れその中で何を電子書籍化するか話し合ったところ、私が入ったチームAは大阪府豊中市の広報誌と浄瑠璃の写真集の2つを作成する事になり、チームAの中でまた2組に別れ3人組で作業する事になりました。私が実際作業するのは広報紙のほうで、グラフィックデザイナーの@ako_yさんと編集のお仕事をされている@mori_taksiさんと大阪府豊中市の広報誌「広報とよなか」の2012年4月号のデータを使用させていただき、その中から特集(4〜9ページ)、お知らせ(12〜46ページ)の中の何ページか、夢はオリンピックで金メダル(46ページ)あたりを抜粋して電子書籍にする事に決まりました。目標は「アクセシブルでマルチデバイス対応のEPUB形式の広報誌を作成する」です。

チームのメンバーとコミュニケーションを取ったり情報を共有したりと作業を進行していくのにサイボウズLiveを使いました。@delight_d さんがサイボウズLiveのグループを作成してくださり、これで準備万端です。

続きを読む (161 ワード)

無料のEPUB自動生成サービスを試してみました。

  • 2012/06/03 16:46 JST

私は電子書籍にもずっと興味がありまして最近、電子書籍をEPUB形式で作成する勉強をしている中、お友達のヴィヴィさん(@jj3vev さん)がFacebookでアウトプットされていた「イースト、EPUB固定レイアウトに対応した無料のEPUB自動生成サービス開始」という情報を見て 「これまた簡単にEPUB形式の電子書籍が作れるけど、肝心なVoice Overの読み上げはちゃんと出来るの?」と思い試してみる事にしました。

続きを読む (65 ワード)

広報とよなか4月号

epub版(抜粋)

広報誌はできるだけたくさんの市民の方に読んでいただきたい媒体ですが、アンケートなどで、年齢層によっては広報誌を全く読まないという結果も出ています。

そこで、比較的紙の媒体を読まない年齢層を視野に入れ、web、端末、スマートフォンなどで閲覧できるよう、汎用性の高いepubで、視覚的に見せている広報誌をどのように表現できるのかを、今回イーパ部の活動を通して試みる機会を得ることができましたので、チームAはそれに取り組みました。

媒体として、「広報とよなか4月号」の過去のデータを許可をいただき使用。 これはイーパ部の活動として独自に制作させていただいたものですので、豊中市の意向とは関係ありません。

制作フロー

八尋担当

  • 広報誌用に作成した
    InDesignデータを流用してepub書き出し

    …の予定でしたが、印刷用に作られたデータは複雑で、 epub書き出し用に調整するのに非常に時間を費やした 上に、エラーで書き出しすらできませんでした 断念

  • 次の工程へ
  • epub書き出し用に、
    InDesignで新規に作成

    本文中に使用されているピクトをテキスト変換や機種 依存文字の修正などのテキストの調整や、画像データ をRGBに変換、写真の代替テキストなど挿入など

  • 次の工程へ
  • epub書き出し

次の工程へ

みるく担当

  • アクセシビリティチェック
    • 写真には適切な代替テキストがあるかどうか
    • 背景色と文字色のコントラスト比は十分取れているか
    • 文章構造に基づいてマークアップされているか
  • 次の工程へ
  • XHTML&CSS修正作業&content.opfとtoc.ncxファイル作成
    • アクセシビリティチェックでひっかかった箇所の修正
    • デザイン通り表示していない箇所の修正
    • いらないタグやid,classを削除
    • content.opfには使用するファイルをすべてここに記述
    • toc.ncxは、目次を作成するファイルなので見出しを記述
  • 次の工程へ
  • EPUBコンテナを作成
    • OEBPSフォルダとMETA-INFフォルダをzip形式で圧縮
    • 圧縮したファイルの形式をepubに変更
    • Windows用の「ePubPack」というツールを使用しEPUBコンテナを作成

次の工程へ

チーム全員

  • レイアウト確認
    Adobe Digital Editions・Firefoxのアドオン・iPad・iPhone・CopperReader・Himawari
  • 次の工程へ
  • 修正
  • 次の工程へ
  • 確認
  • 次の工程へ
  • 修正
  • 次の工程へ
  • 確認
  • 次の工程へ
  • 修正
  • そして
  • 完成

目指したこと

  • アクセシブルにする
  • マルチデバイス対応
  • 上記の条件をクリアしつつ、理解しやすいく退屈しないレイアウト

レイアウトについて

文字と画像・表組をからめた場合、デバイスの幅が変わることにより、レイアウトが大きく崩れます。どのデバイスで表示させても、大きくレイアウトが崩れないよう、ある程度の遊びを考えながら制作しました。

CSSやHTMLの関係上、困難な表示方法もありましたが、できるだけ単調にならず、理解しやすいレイアウトを目指しました。 が、リーダーの解析の仕方の違いによる表示の違いや、特に禁則や約物のツメなど、気になる箇所も多いのですが、現時点で出来ることはやったと思っています。

プロフィール

八尋
グラフィックデザイナー。仕事の大半が雑誌や情報誌、広報誌などのエディトリアルデザイン。
InDesignで作業をしない日はないくらい、InDesignにはお世話になっています。
みるく
フリーのマークアップエンジニア兼ウェブバリアフリー品質保証技術者。 オープンソースのCMS Geeklogのテーマ(日本語コア開発者)、Zen Cartのテーマを作成をしています。

広報とよなか4月号無料ダウンロードはコチラから