COLUMN

クレイグ・モド ぼくらの時代の本

クレイグ・モド ぼくらの時代の本
第5回 本をプラットフォームに ――電子版『Art Space Tokyo』製作記(後編)

craig_banner05Illustration:Luis Mendo

前編からの続きです。

メディアはマッサージである

「最もEPUBに詳しい人」を探していたぼくは」オライリー・メディアのロン・ビロドー(Ron Bilodeau)を紹介された。「最も詳しい」なんてあやふやな探し方ではあったが、ロンはまさにその言葉にふさわしい人物だった。何度かの電話の後、彼はぼくたちのInDesignファイルの調整作業を引き受けてくれた。Mobiファイル(Kindle用)へ変換可能で出来上がりの見た目が美しいEPUBファイル(iBooks用)と、リンクの付いたPDFファイル。これらの元になるInDesignファイルを作ってくれることになったのだ。

実は、複雑なInDesignのデータをきれいなEPUBファイルにするのは簡単なことではない。そこでぼくは、ロンの作業工程をすべて公開してもらうように頼んだ。その工程はおそろしいほど細かく、はっきり言って、あきれてしまうほどだった。ぼくたちのInDesignファイルを、出来上がりの見た目を意識しながら再構成し、シェルスクリプトを書き換えたり、その他細かすぎる微調整を多く必要とする。その工程を、見てみてほしい。

    概要
    このプロジェクトは、紙の本向けに作られた元のInDesignデータ(CS4)を、印刷用にも、インタラクティビティを備えたPDFにも、EPUBにも書き出せるInDesignデータ(CS5.5 beta)を作成するものである。
    このメモはその工程を記したものだ。
    ——ロン・ビロドー

メモを開く/隠す

ステップ1:InDesignファイルの再構成

書き出し可能な状態にするために、たくさんのファイルを更新したり書き直したりする必要がある。

全体
・CS5.5へ変換
・各章と節をそれぞれ独立したInDesignファイルに分解する
・すべての段落スタイルと文字スタイルは、きちんと統一されていること
・「書き出しタグの編集」を使ってIDつきの段落スタイルや文字スタイルをカスタムCSS用のタグとクラスにマッピング
・マスターページを更新し、フッターやマージン等のオーバーライドを消去する
・アーティクルパネルで、EPUB書き出し時の順番や書き出しに必要なオブジェクトを指定する
・オールキャップス/スモールキャップスはすべて大文字に
・EPUB書き出し時にクリック可能な脚注とするために、あらかじめすべての脚注を実際に設定しておくこと

相互参照
・参照先のページ番号情報はEPUBに書き出す場合無視される
・文書内での相互参照は、EPUBでクリック可能な状態に設定すること
・外部のURLリンクもクリック可能な状態に設定すること

章見出し/節見出し
・すべてのページエレメントをひとまとめにしておく
・それぞれにオブジェクトスタイルを設定し、EPUB書き出し時にPNGとして書き出せるようにしておく

著作権ページ
・二重ルール:EPUBでは省略する要素があるのでアーティクルパネルに設定を追加
・最後の画像:グループ化してオブジェクトスタイルを設定し、PNGで書き出せるようにする
・謝辞:赤い丸(●)のエレメントをマスターページに移動して、EPUB書き出し時には含まれないようにする

本文
・相互参照機能を使って、PDFとEPUBで目次をクリックできるようにする(これは目次に限ってできる仕様)
・ページ番号をアーティクルパネルにまとめて追加。EPUB書き出し時には含まれないように設定する(EPUBはページ番号に対応していないため)
・目次の自動作成を設定する
・ペーストボードに最終的な目次のリストを作成し、PDFブックマークで書き出せるようにする
・同様にEPUBのncxファイル用に目次の自動作成を設定

序文やその他の前付ページ
・各セクションの先頭に改ページ設定を入れて、EPUBで改ページできるようにする
・必要な箇所には相互参照を入れる
・参照先ページ番号をアーティクルパネルに追加。EPUB書き出し時に含まれないように設定する
・「地図の見方」のセクション:グループ化してオブジェクトスタイルを設定しPNGで書き出せるようにする

各章
・章扉:アートスペースの画像を再度トリミングする(必要があれば)。まとめてオブジェクトスタイルを設定し、150dpiのPNGで書き出せるようにする

各章のイントロと地図
・章見出しの前に改ページ設定を入れて、EPUBで改ページできるようにする
・各章冒頭のアイコン:オブジェクトスタイルを設定して、EPUBに書き出した時に、章見出しの前に中央ぞろえで300dpiのPNGになるようにする
・すべての地図にまとめてオブジェクトスタイルを設定し300dpiのPNGとして書き出せるようにする
・他の地図ページへのリンクがある場合、それぞれEPUBに書き出さないよう設定する
・冒頭のスモールキャップス:EPUBで正しく大文字に書き出せるようにする(EPUBがスモールキャップスに対応していないため)
・地図の参照情報に番号をふる
・アンカー付きオブジェクトを設定しPNGファイルで書き出せるようにする
・印刷/PDF用:参照情報は欄外ページの余白に表示される
・EPUB用: 参照情報はインライン画像として本文中に表示される

インタビュー
・各インタビュータイトルと初めの質問の前に改ページ設定を入れる
・最初のページでインタビュイーの似顔絵とプロフィールが並ぶよう、アーティクルパネルで設定する
・インタビュイーの似顔絵のオブジェクトスタイルを設定しPNGとして書き出せるようにする
・オブジェクトスタイルを適用して、画像をEPUB上のどこに表示させるか指定する(EPUB CSSを使って)

質問項目の赤い丸(●)
・赤い丸にID名と番号をつける
・カスタムCSSと赤い丸の画像ファイルは、EPUBで書き出したときに、できるだけ元のデザインに近づくように設定する

インタビュイーのイニシャル (マージン部分)
・タブストップを設定、文字スタイルを変更する
・これでEPUBの CSSでページデザインを似せることができる

節終わりのアイコン
・インライン画像(行内に配置されるオブジェクト)として設定しEPUB用にPNGで書き出せるようにする

エッセイ
・タイトルの前で改ページ設定を入れる
・「著者について」の部分(画像も含む)は、「インタビュー」の冒頭と同じように設定する

本文の後に続く文章
・参照先ページ番号はEPUB書き出し時には無視する
・テキストには相互参照できるようリンクを貼っておく
・画像はPNGで書き出せるようにしておく

年表
・タブストップを使ってインデントを設定し、年号の文字スタイルも設定する
・必要に応じて相互参照を作成しクリックできるようにする

索引
・現状:参照先のページ番号は削除して、リンク無しのシンプルなリストとして残す
・理想:これもリンクつきにできればもっとEPUBとMobiファイルの価値があがる

謝辞
・このセクションは3つの項ごとに改ページ設定をする
・寄稿者の紹介はここに含む
・画像とそれに付随するテキストは「インタビュイー」のセクションと同じように設定する

「この本の出資者」
・見出しをセクション冒頭に入れる
・印刷/PDFでは見出しは非表示に
・EPUBでは表示
・最後の画像もPNGで書き出されるように設定する
・「終わり」を示すアイコンの前に改ページ設定をして、このアイコンが単独のページで表示されるようにする

ステップ2:書き出しされたEPUBファイルの編集

これはぼくが行った最後の仕上げ(InDesignから書き出されたEPUBの編集)。これで電子本用の美しいファイルができるはず(今のところ)。

それから、カスタムCSS はEPUB用、Mobi用どちらも一から書いてある。InDesignはCSSが(まだ)あまり得意じゃないんだ。

EPUB
・InDesignからのEPUB書き出しに際して、CSSはカスタマイズする
・画像の差替え作業が必要
・InDesignはEPUB用に画像を最適化する際の調整にはあまり向いていない。そこでPhotoshopを使って手作業ですべての画像ファイルを最適化する
・EPUBを書き出してから、最適化しておいた画像ファイルに差替える

HTMLを整える
これはxhtmlファイルをきれいにするために、TextWranglerを使って書いたGREPコマンド。change/replaceが入っていないが、単に削除しただけである。
font-size:.*?;
style=[\”][\”]
(?< =.)\]</span>
 <span class=”hidden”>\]
<span class=”bracket”> \[(?=.*)
 <span class=”hidden”>\[<span class=”bracket”>
width=[\”].*?[\”]
height=[\”].*?[\”]

Kindle
・出来上がっている(きれいな)EPUBファイルを複製する
・Kindle用のカスタムCSSに差替える
・HTMLを整える

文中の地図参照を “(番号)” に置き換える

<img class=[\”].*?[\”] src=[\”].*?[\”] alt=”1″/> (1)
<img class=[\”].*?[\”] src=[\”].*?[\”] alt=”2″/> (2)
<img class=[\”].*?[\”] src=[\”].*?[\”] alt=”3″/> (3)
<img class=[\”].*?[\”] src=[\”].*?[\”] alt=”4″/> (4)
<img class=[\”].*?[\”] src=[\”].*?[\”] alt=”5″/> (5)
<img class=[\”].*?[\”] src=[\”].*?[\”] alt=”6″/> (6)
<img class=[\”].*?[\”] src=[\”].*?[\”] alt=”7″/> (7)

脚注の直前に横罫線を加える

<div class=”footnotes”>
<div class=”footnotes”>
<hr />

最後に:Kindlegenを使ってEPUBをMobiファイルに変換する

狂気の沙汰だろ?

結果はどうだったかって? とても豪華なiBooks版と、ものすごく機能的なKindle版が出来上がった。iPadやiPhoneでの見た目もすばらしい。しかもKindleのおかげで、すべてのAndroidデバイスでも読める。さらに電子版セットを購入すると、美しくレイアウトされあらゆるリンクが埋め込まれたPDFもついてくる。

統一されたデザイン

iBooks版やKindle版の目的は、紙の本の複製を作ることではない。紙の本に込められたデザインやレイアウトの美学を引き継ぎながらも、出来るだけ引きずられない形で電子版を作ることだ。どちらかに偏らないように気をつけながら、紙と電子の統一性も保っておきたかった。

以下の点ではデザイン上の統一性を保っている。

タイポグラフィ:iBooksとKindle(Fire)は@font-faceに対応しているので、紙の本と同じフォントを使うことができた。ヘッダーと本文はすべて統一されている
アイコン:『Art Space Tokyo』の「ロケーション」アイコン——赤い丸(●)に白い花びら模様——をどの版も等しく、目立つように使うことができた
イラストレーション:高橋信雅によるインク画と僕たちお手製の地図は紙、E-Ink、Retina、デスクトップ、どんな環境でも一様に美しく表示することができた

こうした統一性は紙と電子を並べてみるとよくわかるだろう。

紙の本と電子の本。違いはあるがよく似ている

紙の本と電子の本。違いはあるがよく似ている

ヘッダーと本文のフォント、アイコン、そしてイラスト(地図)、この3つすべてをご覧いただけるだろう。ただし、紙の本のレイアウトをiBooksで完全に再現しようとした訳でもない。わかりやすい例を挙げておく。iBooksのヘッダーはどのページでも常に中央にくるため、記事の見出しを左寄せにするとアキができてしまう。これを解消するために、記事の見出しを中央ぞろえに変更した。

iBooks版をiPhoneで見ても、デザインと文字のスタイルが同じように反映されている。

『Art Space Tokyo』 ——iPhoneで見るibooks版

『Art Space Tokyo』 ——iPhoneで見るibooks版

もちろん、これらの点はウェブ版で見ても同じである。

紙の本から電子本への移植は、必ずしも一対一対応である必要はない。しかし良質なデザイン性があれば、メディアの垣根を越え、新しいメディアに適応した移植が可能になる。「良いデザインとは何か? それは渡り歩いて行くデザインである★13」。フランク・キメロ(Frank Chimero)はそう語っている。

これで完璧? まだだ。でも、かなり良いところまで来ている。このままでも十分許容範囲ではある。しかしこれらのプラットフォームは誕生から日が浅く、発展の途中である。成熟していくにつれ、より美しく、より洗練された電子本を目にするだろうし、作り上げてもいくだろう。

2年後の世界

2010年、iPadの販売が開始された。Kindleも注目されてはいたが、一気に売り上げを伸ばすのは2011年、まだ少し先のことである ★14 。当時のぼくたちは電子の本や雑誌に関して「新しいデバイスにどうやって本や雑誌を移植するか」を考えていた。「デジタルが本や雑誌にどのような影響を与えるか」とは考えてもいなかった ★15

現在のiBooksとKindle(iOS用/Android用アプリや専用デバイス)と2010年のiBooksとKindle(アプリと専用デバイス)を比べてみても、表面的な違いはそんなにない。どちらもEPUBやそれに類するファイルに対応した画面が表示される。

世界中どこだって

むしろ、2010年からの2年間で大きく変化したのは、企画の実現方法と商品の流通経路だ。クラウドファンディングから出版の元手を得ることができるようになった。そして1つのファイル——そう、たった1つ——のEPUBを作るだけで、世界中ほとんどすべてのモバイル機器へ向けて出版ができるようになった。Amazon、Apple、B&N(バーンズ・アンド・ノーブル)はマスマーケットへの流通と販売を行っている。EPUBのダウンロードリンクをバラまけば、アフリカでも、インドでも、南米でも、タイやベトナムでも(任意の地名を並べただけだ)、誰もがダウンロードして、モバイルで読むことができる。読書のためのデバイスはほとんどどこにでもある ★16 。そしてサポート、流通、購買の層も各地に広がっている。

これからもっと多くの読者がデジタルで読むようになる。もっと多くの著者が読者に向けて直接本を売るようになる ★17 。デジタルの外の世界では、小さな出版社が流通業者と手を組んで、在庫不要のプリント・オンデマンド事業を始めている(たった5年前ですら考えられなかったことだ)。つまり、システムが変わったのだ。

そしてその後……

デバイスが広く普及し売り上げも好調な現在、今度はプラットフォームが成熟する番である。Kindleは、ここ数年ほとんど変わっていない。iBooksは、オンラインであれオフラインであれ、いまだにハイライトを集める場所がない。そればかりか、ソーシャルリーディング機能導入への動きが少しも見られない。Readmill(リードミル)のようなスタートアップはソーシャルリーディングへの魅力的な回答を提示しているが、iBooksやKindleのエコシステムと直接つながっていないため、使いたいと思ってから実際に使うまでに多くの煩わしいステップを踏まなければならない。

手探りの状態にある電子出版において、最小の投資で最大の効果をあげるにはどうすればいいかと考えている出版社があるならば、オープンスタンダードのEPUBを採用すればいい。もしも、マルチデバイス対応でクラウドシンクも可能なプラットフォームを1から設計し、十分な開発チームを雇い、オープンスタンダードを新たに構築する労をいとわず試行錯誤する、という意気込みがあるのでなければ、いちばんいいのは既存のプラットフォームを活用することだろう。

そう遠くない昔、電子本など存在しなかった。KindleもiPadもなかった。そこには自己完結的な物質があった。ネットワーク化されていない物質が。今と昔で唯一違うのは、それらの物質が互いに手を繋ぎ始めたということである。物質の中身は変わっていない。しかし手を繋ぐというこのささやかな一歩が、大きな変化を引き起こす可能性もある。ぼくたちがプラットフォームと手を組んだ本作りを続ける先に、その変化があるのかもしれない。

[ぼくらの時代の本 第5回 了]
 

 
Note


★13The Shape of Design(デザインのあり方)フランク・キメロ、2012年

★14Kindle books official take over print sales at Amazon(Kindle向け電子書籍がAmazonの販売部数で紙の本を越える)Engadget、2011年5月。Amazon Kindle selling more than 1MM per week(Kindleの週間販売台数が100万台以上を記録)Bloomberg, 2011年12月

★15|この2つの違いについてぼくは、エッセイBooks in the Age of the iPad『iPad時代の本』を考える」の中で検討している。

★16E-books for smart kids on ‘dumb’ phones(賢い子供が「時代遅れ」の携帯で読む電子書籍)Yahoo! Finance、2012年4月。Almost 90 percent of people in South Africa own a mobile phone(南アフリカの約90%の子供が携帯電話を所持)Frog Design、Project M

★17A list of 170+ authors who have sold more than 50,000 self-published ebooks to date(セルフ・パブリッシングで5万部以上売り上げた170人以上の作家最新リスト)Self-Publishing Success Stories、2012年5月

−−−
本をプラットフォームに
電子版『Art Space Tokyo』製作記
オリジナル執筆:2012年8月
クレイグ・モド 著
樋口武志 訳
−−−

 
 

『ぼくらの時代の本』
クレイグ・モド
訳:樋口武志 大原ケイ


美しい紙の本/電子の本
ボイジャーより発売中


電子版 本体900円+税
印刷版 本体2,000円+税(四六判240頁・縦書)

bokuranohon_150217


PROFILEプロフィール (50音順)

クレイグ・モド

作家、パブリッシャー、デザイナー。 拠点はカリフォルニア海岸地域と東京。 MacDowell Colonyライティングフェロー、TechFellow Award受賞、2011年にはFlipboardのプロダクトデザインを担当。New Scientist、The New York Times、CNN.com、The Morning News、Codex: Journal of Typographyなど様々な媒体に寄稿している。 http://craigmod.com

[本章翻訳]樋口武志(ひぐち・たけし)

1985年福岡生まれ。早稲田大学国際教養学部卒。2011年まで株式会社東北新社に勤務。現在、早稲田大学大学院在学中。共訳書に『イルカをボコる5つの理由』(インプレスジャパン)、ピコ・アイヤー「空港は検査場」、ニコール・クラウス「若き絵描きたち」(ともに早稲田文学フリーペーパー『WB』)など。字幕翻訳に『ディクテーター』、『エージェント:ライアン』、『パラノーマル・アクティビティ/呪いの印』など。