この記事を読むとわかること
書籍制作に使用するツール
書籍を制作する際に気をつけるべきこと
出版社に頼らず版下データを内製するとどんなことが起こるのか
2025年11月20日に「デザインからサイト構築まで FigmaだけでWeb制作」という書籍が発売されます。
この本はIMAKEの代表濱野とその周辺のデザイナーの共著でFigmaの基礎と新しく追加されたFigma Sitesについて書かれた本です。通常は、執筆者がテキストやパーツを用意し、出版社にて版下データを作成し出版されますが、今回は版下データ作成までIMAKEで内製という初の試みで製作されました。
書籍を編集する上で気をつけたことや工夫などを備忘録として残したいと思います。
今後、書籍を作る方の参考になれば嬉しいです。
目次
Figmaに関する本を出版します！
2025年11月21日(金)に日経BP様から「デザインからサイト構築まで FigmaだけでWeb制作」本が出版されます。Figmaの基礎と新しく追加されたFigma Sitesについて書かれており、IMAKE代表濱野とその周辺のデザイナーの5人で執筆しています。
↑こちらからご購入できますので是非！
通常は、執筆者5人がテキストやパーツを用意し、出版社にて版下データを作成し出版されますが、今回は版下データ作成までIMAKEで内製という初の試みで製作されました。
この記事では版下データ作成の際に気をつけたことや工夫などを備忘録として記したいと思います。
「なぜ書籍を出すことになったの？」「どんな目的や想いがあったの？」という企画背景については、こちらの記事で詳しくご紹介しています。
作成ツールの選定
作成ツールは組版ソフトとしてInDesign、画像に引き出し線をつける・図を作成はIllustrator、画像のカラーモード・解像度変換、トリミングはPhotoshopを使用しました。
💡 組版と編集の違いですが、検索すると「組版は、文字や画像を印刷物に配置する作業を指し、編集は内容の構成や校正を含む全般的な作業」と出てきます。この記事では原稿作成以外の書籍の版下データを作成する工程全てを「編集」と表現していきます。
InDesignはAdobeの組版ソフト
大きな印刷会社では独自のものをお使いのところもあるのででしょうが、個人や中小規模ではInDesignを使用することが多いのではないでしょうか。
最近はPDF入稿もできますし、Wordなどのワープロソフトで作成しても印刷できるかもしれません。
ですが、InDesignは段落・文字・表スタイルや合成フォント、マスターページ、ブック機能、自動目次生成など効率よく書籍を作成するのに便利な機能が満載です。パンフレットなど数ページの小冊子でもInDesignでの作成をお勧めします。
💡 そのほかにもInDesignではトンボをつけることができますし、PDF出力の際に印刷に最適なプロファイルを選択することもできます。
画像に引き出し線をつける・図を作成するのはIllustrator
画像のみを貼り付けて、InDesignで引き出し線をつけることもできます。その方が引き出し線の色や太さを統一しやすいですし、InDesignと画像編集ソフトだけで作成することができます。
ページに対して他のオブジェクトに影響されず固定の位置に置くことはできますが、作業中に追加、削除でページが動くことを考えると段落に合わせて動く方が都合がいいです。
図やスクリーンショットを段落に応じて動くようにするにはフレームを段落に固定したいのですが、InDesignのフレーム機能は複数のオブジェクトを持つことができません。Illustratorで一つのオブジェクトにしてある方が扱いやすいと考えました。ただし、引き出し線の太さを統一するためには、書籍に載る実寸で作業する必要があります。
💡 図の作成ですが、Illustratorに不慣れで、「Figmaで作成し画像で書き出してはダメか」という執筆者もいました。
結論からいうと、そもそも画像（ラスターデータ）はダメです。どんなに解像度を上げても境界線や文字がぼやけます。
解決策としてはSVG形式で書き出してIllustrator ai形式にするとベクターデータにすることができます。ただし、文字が単語や段落に関係なくバラバラだったり、線が長方形だったりします。書籍内でフォントや線の太さ、矢尻を統一するにはIllustratorで描画し直す必要があります。
画像のカラーモード・解像度変換、トリミングはPhotoshop
スクリーンショットはPNG形式やJPEG形式で撮影されます。そしてデジタルデバイスですのでカラーモードはRGBです。
これを書籍に掲載するにはカラーモードはCMYKに変換しなくてはなりません。
PNG形式はCMYKで保存できません。JPEG形式はCMYKで保存できるものの、保存するごとにファイルサイズが圧縮され画質が劣化していきます。まず最初にPhotoshopで開いたらカラーモードを変更して、Photoshop PSD形式にすることで、カラーモードの設定を維持し、画質の劣化を防ぐことができます。
| ファイル形式 | カラーモード | ファイル圧縮による劣化 |
|---|---|---|
| PNG | RGB | なし |
| JPG | RGB ／CMYK | あり |
| Photoshop PSD | RGB ／CMYK | なし |
💡 紙の編集ではtiff（Tag Image File Format）というファイル形式も以前はよく使われていました。高画質なため作品としての写真や大きく引き伸ばす看板などでは使用されますが、ファイルサイズが大きいため画像をふんだんに使用する書籍や表示スピードを重視するWebサイトなどでは使用されません。
カラー選定
Figmaの本ということでメインカラーにFigmaカラー、赤、オレンジ、紫、青、緑に近い色の中から、文字色にしても背景色にしても視認性が良く、強すぎない色を章カラーとして5色決定しました。さらに各章にサブカラーとしてそれぞれの章カラーの補色に近いものを採用して、各章2色展開にしています。
読んでいて、章が切り替わるのを色でも認識できる様になっています。
デザイン
せっかく内製でデザインから作るのだから、Figmaの要素をたっぷり詰め込んだワクワクする様なデザインに仕上げようと考え、Figmaのロゴやインターフェースから書籍のパーツを作成しました。章ごとの2色を使い、あしらいをデザインし、節やセクションの切り替わりや用語の説明が一目でわかる様になっています。
各章2色展開ですが、引き出し線やPoint、Memoは章カラーと被らないもので書籍全体で統一し、重要箇所はわかりやすくしました。
また、Figmaらしさを表現するために色覚特性の方に配慮した配色とはいかなかったので、色の違いで区別する様なものは避けています。重要箇所は太字と下線両方で表す様にしています。
編集の内製、スケジュールがタイトなため書籍のどこからでも作業できるデータ作り
以前は取扱説明書の版下作成会社にいたので編集作業は苦労はしませんでした。その頃はオペレーターとしてひたすら与えられたテキストや画像をレイアウトしていたので、書籍のデザインは初めてです。
デザインとして凝っているだけでなく、編集する際になるべくスタイルやコピーペーストで簡単に作業できる様にテンプレートを作成しました。カラーは章カラー、サブカラーをスウォッチに登録し、スタイルに使用することで、章ごとにカラーを変えてもスウォッチを変更するだけで全て適用されるように作成しています。
InDsignでのテンプレート作成で使用した機能
原稿が五月雨的に上がってくることも考え、自動機能を駆使して変更に強いデータにもなっています。
- 合成フォント
- マスターページ
- 段落・文字・表スタイル
- 変数
- カラースウォッチ
- ブック機能
- 自動番号
- 目次・索引生成
- 相互参照
- スタイルを参照
💡 デザインを凝ったものにすると必ずしもスタイルを当てるだけでは済まないものもあります。その場合は、コピー＆ペーストで持ってきて調整するのですが、使用しないマスターページにコピー元を置いておくことで、章ごとの差分をなくし、さかのぼって探しに行ったりせずにスムーズに作業することができます。
スクリーンショットの撮り方
スクリーンショットは各執筆者にて撮影のため、どのくらいの大きさで書籍に載るのか想像してもらう必要があったので、はじめにテンプレートを作成することで、書籍に載るサイズを決定しました。
書籍サイズがA5と小さめなので大きい画像と小さい画像を使い分ける必要がありました。大きいサイズばかりだとページ数を圧迫してしまい、小さいサイズだとよくわからないからです。
手順の初めに大きい画像で全体像を示し、各手順では設定パネルなどを拡大して…と説明するものの、なかなか理解してもらえず苦労しました。
また、一度Photoshopでトリミングしてしまうと、画角を広げるには元の画像に戻らなくてはならず作業が増えてしまうので、画角が変更になりそうな画像は、最後まで初期の解像度、サイズの全画面のスクリーンショットをIllustratorでトリミングし、そのままでは一つ一つのファイルのサイズが大きいので、最後にファイルサイズを小さくするためにPhotoshopでトリミング作業を行いました。
書籍全体ではかなりの枚数の画像を扱うため、印刷データを小さくするには大切なことです。
執筆者によってはあらかじめトリミングや解像度、画像寸法も掲載用に整えてくれています。そういう画像はページに余裕がある場合に大きくする際、リサイズ前の画像に戻って解像度、画像寸法をやり直す必要があります。
執筆メンバーから原稿があがってこない
原稿作成はGoogleドキュメントを採用しました。
はじめはInCopyを使用する予定でしたが、InCopyをInDesignにリンクさせると、原稿作成と編集が並行して行えると聞き、作業を始める前に検証しました。ところが後からInDesignで行った編集が、InCopyで原稿に手を加えてInDesignを更新しようとすると元に戻ってしまうことが判明したため、他のツールを模索することに。
結局Googleドキュメントで執筆してもらい、編集後の追記や修正は「提案モード」で差分がわかるようにし、InDesignで追記・修正する方法に落ち着きました。InCopyとInDesignが相互参照されていればいいのですが、どうもそうはなっていないようです。
そして内製だと甘えが出るのか、はたまたみなさんお忙しいのか、なかなか原稿が上がってこず、Googleドキュメントをのぞくと、細かい言い回しなどをちょこちょこ直している様子です。「細かいところは後で直せますので、スクリーンショットをまず撮りましょう！」「節ごとの移動など順番を入れ替えるのも後でできます！」など執筆の皆さんのお尻を叩くのも私の役目です。
実際に書籍の中での手順を追いながらスクリーンショットを撮るのですが、その作業の際、抜けている手順があったり、サンプルファイルの不備に気づいたりして、原稿も修正が入りました。
そしてページのレイアウトは画像を置いてみて初めて見えてくることがあります。まずはざっくり最後まで原稿を書き、手順を基にスクリーンショットを撮ることが肝心です。細かい言い回しはあとで修正できるのです。
書籍として読みやすい工夫
執筆者は全員が講師として活動しているので、口頭で説明する感覚で文章を書いています。
「長い！」「文章が多い！」「言い回しがくどい！」「意味がわからない！」を読み解き、どうやったら1ページ1ページが読みやすくなるのかを考えながらの作業です。
与えられたテキストを編集するだけでなく、どう表現したらわかりやすいか考え、図にしてみたり、表にしてみたり、順番を変えてみたり、時にはタイトルや文章を足したりと、書籍として読者に伝わる表現を心がけました。
執筆者によって内容は同じ様な構成でも表現が違うものもあり、それを統一していく必要もありました。これは全部の原稿が揃ってからしかできない作業です。
これらのことはただ単にテキストをレイアウトしていてはできません。内容を読み込み、理解する必要があります。
原稿を早く上げることがその本の質を上げます。
編集してみてわかった本の質を上げるコツ
原稿は早く上げる
ざっくりでいいのです。まず内容を確定させましょう。
手順を載せる場合はその手順もざっくり用意します。
スクリーンショットを撮る段階で必ず過不足や修正が生じます。早めに上げていればあとでいくらでも修正できます。
スクリーンショットは早めに撮る
編集の際に画角を変更するのはスクリーンショットを撮り直さないといけない場合もあります。
一発で決めようとせず、撮り直しありきで早めにあげれば、あとで修正可能です。ギリギリに画像が提出されると、納期のために撮り直しを断念せざるを得ません。
原稿はちょこちょこ直さない
細かい文言をちょこちょこ直していると、キリがないです。こちらも見落としが出ます。Googleドキュメントの扱いにもミスが出て、差分がわからなくなります。一度直したところがひと文まるまる差し替えになれば、ちょこちょこ直しにかかった時間も無駄になります。
手を入れるタイミングは以下です。
- 最初に書いた時
- スクリーンショットを撮った時
- 編集されてきた時
「1」も段階があると思います。頭から順番に書こうと思わず、まずはざっくりプロットし、肉付けしていきましょう。
全部が「2」まで終わった段階で編集すると、各執筆者ごとの表現の違いなどが炙り出され、足りないものが見えてきます。表記の揺れもその段階でチェックすれば執筆者自身のちょこちょこ直しも減らせるでしょう。
以上が書籍編集時の気をつけたことや工夫です。 終わってみて、「もっと時間があったら…」という部分はもちろんあります！ ですが今回の編集作業は、ただ与えられたものをレイアウトだけしていたDTP時代とは比べ物にならない喜びがありました！
この記事がこれから書籍を作りたい方のなにかの参考になると嬉しいです。
デザイン教育なら…
IMAKEが大切にしているデザインの考え方はこちらから！
この記事を書いた人
sns
