blog

サムネイル:同人誌デザインのメイキング Part.1 再稿制作・フォントの選び方

風野湊さん(サークル:呼吸書房)作の小説本『すべての樹木は光』新装版ジャケットデザインを担当しました。

本作『すべての樹木は光』新装版ジャケットデザインの制作を例に、「小説のジャケットデザインの作り方」を読み物として公開します。

この連載は「デザイナーはデザイン制作時にどんなことを考えていたか」「デザイナーにデザイン依頼をするときに依頼者はどんなことを考えていたか」を伝える読み物なので、ソフトウェアの使い方などの技術的な部分は省いて書いています。

前回の Part.2 では、初稿として2案を出し、採用案を絞りました。

今回の Part.3 では、おおまかなレイアウトが決まったので、デザインを詰めていく過程を紹介します。今回のポイントは次の2箇所です。

  • イラストのトリミングの考え方
  • フォントの選び方

 

依頼者・風野さんからのレポが届きました

本デザイン制作の依頼人である風野湊さんが、依頼人目線の本件メイキング記事を書いてくれました。

同人誌デザイン制作を誰かに依頼してみたい」方はこちらのレポがとても参考になると思います。お褒めの言葉もいただきありがとうございます!


広告 (SPONSORED LINK)

 


Part.2 追記:実物にアタリを重ねてみる

今回の制作物は既刊の新装版表紙なので、手元に書籍の初版がありました。またイラストの解像度の都合でイラストの配置は初版から大きく動かせません。

初版から、書籍の判型とイラストの配置が変わらないため、デザインのアタリをトレーシングペーパーで直接取ることができました。

後述の「テストプリント」の段落でも書きますが、本はディスプレイ上だけでなく実物でサイズを確認しながら制作した方が良いです。

▼ 初稿でボツにした「中央に文字を配置」のバージョン。木を挟んで左右対称でいい感じになるかと思いきや、①人物(ユハ)は画面の右側にいる、②画面の左右でイラストの明るさが異なる という2つの理由により、思ったよりもシンメトリーな印象を与えられなかったのでボツにしました

写真:風野湊『すべての樹木は光』初稿案・トレーシングペーパーを使ったデザイン確認

▼ 初稿A案・B案それぞれを写したトレーシングペーパー。初版の書籍に重ねながらレイアウトを調整しました

写真:風野湊『すべての樹木は光』初稿案・トレーシングペーパーを使ったデザイン確認


再稿:H4 イラストの使い方を考える

自然界の配置場所を考える(空は上に・地面は下に)

初稿では、H4(裏表紙)の文字の配置場所は良い感じでした。

▼ 初稿採用案

『すべての樹木は光』初稿B案

しかし、H1とH4で全く同じ絵が表と裏に同じサイズで同じ場所に配置されていてつまらないという欠点や、H4ではユハの顔を見せたくない(初版のように顔の見えないトリミングが良い)という要望がありました。

初版を見ると、ユハの足元~樹木の根本・若い木々・下草・地面の部分を切り抜いて、H4の上半分に配置しています。

▼ 初版

風野湊作『すべての樹木は光』初版ジャケットデザイン

H1とH4で同じ絵が続いていないので飽きが来ないのが長所なのですが、本来は「下」にあるはずの「地面」がH4の上部に配置されているため、若干の不自然さを感じました。

もし、空・地面・水面などの自然物の画像を配置するなら、空は上に・地面や水面は下に配置した方が安定感があります。(参考:『デザイン解体新書』, 工藤強勝[監修], ワークスコーポレーション, 2006/p.127)ただしセオリーから外れて、例えば地面を上に配置して浮遊感や不安定さを出すデザインがアリになる場合もありますので、最終的にはケースバイケースです。

 

切り抜いて面白い場所を考える

新装版レイアウトでは、H4にはイラストを紙面の下部に配置し、帯のように扱います。ここで初版と同じようにイラストの足元を選んでトリミングすると、H1とH4で同じ場所(紙面の下部)に同じような図(地面)が連続してしまいます。

そこで、H4でイラストを切り抜く箇所を初版から変更することにしました。ここでは書籍タイトル『すべての樹木は光』の「光」に注目して、光を透過して青々と見える樹木の枝葉を採用しました。

スクリーンショット:『すべての樹木は光』H4用イラストのトリミング位置

初版と同じく地面をトリミングした場合、トリミングされた範囲内で使われている色彩は中間色の緑から緑の濃い部分・茶色で、最も明るい部分から最も暗い部分の明度差がさほど変わりません。

一方で上空の葉をトリミングした場合は、葉を描いた濃淡だけでなく、塗り残した紙の白色も画面に入ります。画面には白〜明るい緑〜緑〜樹皮の濃い色が入り、光に透けた葉の輪郭がくっきりと見えるので、地面をトリミングした場合よりもコントラストの差が大きく、図像として情報量の多さ=見ごたえがあります。

ちなみにイラストの最上部からではなく少し下からトリミングをしているのは、イラスト上部にいる鳥をトリミング範囲に入れないためです(鳥だけに?)。「光」というテーマのもと、光に透ける枝葉を表現する上で、ここに小動物が画面に加わると画面のノイズになってしまうためです。

 

解像度が足りない画像を拡大し、テクスチャを乗せる

以上により、H1イラストの上空の枝葉部分をトリミングしてH4に使用することにしました。

ただし原画の解像度が書籍の仕上がりサイズとほぼ同じサイズであるため、イラストを単に拡大しては印刷に耐える画質にはなりません。

Adobe Photoshop CC 2018 以降のバージョンでは、人工知能を用いて元画像のディティールを補完した拡大が可能になりました(「ディティールを保持 2.0」)。しかし「ディティールを保持 2.0」を使用しても、おそらくイラストレーターが精緻に描いたイラストのディティールは損なわれると考えました。なのでH4のイラストの使い方は画面のアクセント・装飾目的と割り切り、画像拡大処理をしたあとにテクスチャを重ねる加工を行いました。

スクリーンショット:『すべての樹木は光』H4用イラストの加工作業画面

▼使用したテクスチャ

テクスチャは「Paper-co」の素材を使用しました。

Paper-co | 紙のテクスチャー素材を無料でダウンロードできるサイト
https://free-paper-texture.com/

イラストの原画は水彩画なので、本来は布のテクスチャよりも紙のテクスチャを選んだ方が素材として自然です(布の上に描くのは、油絵の具など粘性が高い素材の絵の具です)。

今回布のテクスチャを選んだ理由は、作中の元・ゲストハウスの家のリビングや中庭にはこういう麻のような粗い目の布がカーテン代わりに使われてそうだなというイメージを抱いたため、その連想で採用しています。

 

再稿:H1 タイトルのフォントを考える

なんとなくでフォントを選ばない

みんな大好きフォント選びのコーナーです。

デザインに慣れていない人は様々なフォントに目移りして混乱するポイントかと思います。ちまたのフリーフォントにも格好いいフォントはたくさんありますが、ここでは「フォントに頼って文字打っただけ」よりは一歩先に進みたいものです。

デザインの骨子はまずはレイアウトで、文字の大きさ配置(余白の関係)のリズムやバランスがある程度整ってから、多様なフォントを使って味付けをしていくのが良いと私は考えています。フォントはデザインのコンセプト(目標)が完全に決まってから、そのコンセプトを叶えるものを選んだ方が良いです。

 

候補を並べる

前回(同人誌デザインのメイキング – Part.2 初稿制作)、タイトルの配置や雰囲気のおおまかな目標立てを行いました。

  • タイトルは横向き3行「すべての/樹木は/光」と配置する
  • 背景に文字を埋没させない(遠目に見てもタイトルが読めるようにする)
  • (なんらかの風合いのある感じにしたい)

以上の条件で、まずは手持ちのフォントでたくさん文字を打ってみました。すべて Morisawa Passport のフォントを使用しています。

スクリーンショット:『すべての樹木は光』題字案

明朝体・ゴシック体・その他デザイン書体(つまり、フォントの形の種類)の区別を考えません。「イラストに対して題字が埋没しないか」「物語の内容に合っているか」「対象とする読者層に合っているか」を判断材料にしています。

選ばれたものの傾向として、ゴシック体は活版印刷時代の活字に由来するオールド系の骨組みのフォントが候補に上がっています。明朝体や筆文字系のフォントは本文組用の明朝体(読むための文字)ではなく、ディスプレイ用の書体(見るための文字)を使うことで、タイトルの文字に風合いを与えようとしています。

A P-OTF A1ゴシック StdN R

長所:墨溜まりがあるので「風合い」という条件を満たせる。ゴシック体なので、明朝体よりもタイトルを目立たせられる。

短所:めちゃくちゃ良く見かけるフォント。あと本作に使うにはやや優しすぎる(マイルドすぎる)印象。

A P-OTF 解ミン 宙 StdN M

長所:雰囲気がある。漢字の見た目は珍しい。

短所:珍しすぎてやや奇をてらいすぎか。

A P-OTF 解ミン 月 StdN

長所:解ミン 宙 と同様。この2つは漢字が同じ・かなの見た目で「宙」「月」に分かれている。

短所:ちょっとファンタジー文学寄りすぎる。

A P-OTF かもめ龍爪 StdN M

長所:カクカクとした毛筆が印象的。

短所:細いので題字がイラストに埋没するかも。

A P-OTF きざはし金陵 StdN M 【採用】

長所:特別に奇をてらいすぎていないが、「樹木」「光」の左はらい(ノの字)がきれい。ウェイト(太さのバリエーション)もM, Bの2種類がある。

短所:横向きベタ組みだとバラけた印象になる。カーニング注意。

A P-OTF くれたけ銘石 StdN B

長所:他のゴシック体に比べると珍しい形。

短所:重心が低く、どっしり構えすぎている。題字には「光」の美しさと、物語のわずかに不穏な予感を漂わせたい。

A P-OTF さくらぎ蛍雪 StdN M

長所:「きざはし金陵」と同じく繊細で美しい。

短所:繊細なので、題字がイラストに埋没するかも。

[かな]A-OTF 墨東N Std M・[漢字]A-OTF ゴシックMB101 Pr6 の合成

長所:かなの形状が面白い。

短所:本作の緊張感を表すのに、ゴシック体は不向きかもしれない。

A-OTF ゴシックMB101 Pr6

長所:風合いがある。

短所:やっぱりこれもめちゃくちゃよく見かけるフォント。

A-OTF 武蔵野 Std

長所:風合いはばっちり。

短所:物語に対して(もともと都会出身のユハに対して)素朴すぎるかも。

A P-OTF 秀英にじみ四号 StdN M【候補】

長所:フォント側で活版印刷の墨溜まり風の「にじみ」が作られているフォント。「風合いのある題字」というリクエストには最も叶う。

短所:グリフが四角いので、活字や原稿用紙のような「工業製品」を彷彿とさせる「マス目」の感じが出る(「は」「光」など線の縦横の直角がはっきり出ているところで顕著)。題字にはやや不安定さを出しながら流れるような印象にしたい(樹形のような曲線感を出したい)ので、マス目っぽさが足を引っ張るかもしれない。

 

フォントの候補の絞り方

作品に合う雰囲気のフォントが複数見つかったときの、フォントの選び方の判断材料の一部を紹介します。

今回は「秀英にじみ四号」と「きざはし金陵」を候補に絞りました。

▼秀英にじみ四号

風野湊『すべての樹木は光』原稿案・秀英にじみ四号ver

▼きざはし金陵【採用】

風野湊『すべての樹木は光』再稿案・きざはし金陵ver

実際に配置してみる

題字として組んでみた見栄えが良くても、いざイラストの上に乗せてみると似合わないということも多くありました。「かもめ龍爪」などは線が細いため、文字にドロップシャドウをかけても題字がイラストに埋もれてしまいました。

ウェイトが多い方が便利

ウェイトとはフォントの太さのことで、R(Regular)・M(Medium)・B(Bold)などの形でフォント名の末尾に表示されます。

例えば「ゴシックMB101 Pr6」にはウェイトのバリエーションはありません。

Illustrator側でフォントを若干太く/細く加工することは可能なのですが、フォントデザイナーが用意した太/細のバリエーションを使った方がきれいです。(同じフォントでも、ウェイトの太いフォント・細いフォントで、フォントデザイナーが骨組みの形を変えていることがあります。細いフォントの線を単に太くしただけでは、フォントデザイナーの意図を損なって、文字の形のバランスを崩す可能性があります)

フォントの来歴を考える

題字に採用したフォント「きざはし金陵」は中国・明代の書物の漢字書体と、1893年(明治26年)のかな書体の合成書体です。

候補に上がった秀英にじみ四号と比較して、木・光 などの漢字の左はらい(ノ)が美しい点と、書体のオールドな来歴が「異界・旧世界から来訪したもの=ヒトが生まれる前から地上に生い茂る森林」っぽいと思い採用しました。

きざはし金陵 M | 書体見本 | モリサワのフォント | 株式会社モリサワ
https://www.morisawa.co.jp/fonts/specimen/3699

 

再稿:H4 情報のフォントを考える

多種類のフォントを使いすぎない

1つの作品に種類の異なる多くのフォントを使うと、画面の一体感が出ずにゴチャゴチャした悪印象を与えます。

今回はタイトルを「きざはし金陵 M」に決定しました。背表紙の「リュウミン L-KL」・裏表紙下部「XANO明朝」は既存フォーマットのため変更できません。なので裏表紙の情報も、すでに使用したフォントとそのバリエーションから選んでいきます。

 

キャッチコピー:きざはし金陵

「そのようにして、魔法は失われた。」

ここは題字と同様に「きざはし金陵」を使い、樹木たちの世界から伝来した古い「魔法」が実在していたことを強調しました。

 

あらすじ:リュウミン L-KL

「透明な街、うつくしい街、……」以下8行

あらすじは物語本文への導入であり、本文の延長線上にあるので、本文と同じ「リュウミン L-KL」としました。正確に測っていませんが、文字サイズも本文とおおむね同一です。字間の空き方も本文の組み方に寄せました。

 

読めなくても良いテキスト:リュウミン L-KL +[かな]リュウミンL-KS

内心の混乱「彼女には分からない。」以下6行

呪文「人間としての表皮は樹皮に」以下16行

これらは読めなくても良いテキストである=読むためのフォントよりは雰囲気を「見せる」ためのフォントの方が近いこと、特に呪文はキャッチコピーの「魔法」に近いことから、最初は「きざはし金陵」で組んでいました。

ですが、もともとかなが小さい「きざはし金陵」をこのサイズで配置すると「読めなすぎる」問題が発生しました。

「意図的に読めない」テキストの注意点

「意図的に読めない・意図的に読みづらい」テキストの扱いには注意が必要です。ただ読みづらく配置しただけでは、「読めなくなっちゃった」失敗例に見えるためです。

初版のレイアウトを見ながら、依頼者の風野さんには「呪文部分は読めなくてもよいテキストとして配置した」ことは伺っていました。ですが初版の文字は私には残念ながら「読めなくなっちゃった」ように受け取れました。

「なっちゃった」感を避けるには、これが「作為した意図」であることをはっきり伝える必要があります。

例えば初版では、黒い文字色で小さな文字の呪文を「『惰性でそのまま』イラストの上に乗せた結果『読めなくなっちゃった』のかな?」と受け取ってしまいました。

そこでイラストに重なる4行目「すべての神経はゆたかな根に」以降の文字色を白に変えました。「画像にかぶせた部分の文字色を『わざわざ』白に変更しているということは、『意図的に』読みづらいテキストを配置しているのだ」と解釈されることを期待しています。

このように「わざわざ」途中から文字色を変えている作為を表現するために(+収まりの良さとか色々な理由で)、ユハの困惑を示す「彼女には分からない。」以下6行・呪文「人間としての表皮は樹皮に」以下16行を連続させ、前者は白背景に緑の文字・後者はイラストの上に白文字で重ねることにしました。

また、行間と余白の関係を等間隔にすることで、「行数の都合でテキストをイラストの上に置いちゃった」のではなく「意図して均等に配置している」ことを見せました。

 

シリーズ流用テキスト:XANO明朝U32・パスのオフセット+0.025mm(ラウンド)

「風野湊/幻想長編小説/熱帯雨林の樹木変身譚」

イラストの上に文字をかぶせるので、読みやすいように「パスのオフセット」機能で線をわずかに太くしています。

 

テストプリント・モックアップ作成

ここまでの作業はPC画面を見ながらの制作作業(DTP = Desk Top Printing)でした。

ですが今回作るのは実体のある印刷物なので、制作の早い段階で実寸大にテストプリントをした方が良いです。PCなどのディスプレイでデータを見るのと、紙に刷ってみるのとは、印象が変わります。

ただし家庭用インクジェットプリンタやコンビニコピー機などと、印刷所の機械(オンデマンドプリンターまたはオフセット印刷機)は、出力される色が異なりますので、手元でのテストプリントは色調のチェックには使えません。このテストプリントは文字の配置やイラストの位置などレイアウト面のみを確認するために出力します。

印刷物は、仕上がりのサイズぴったりの大きさではなく、上下左右に+3mm大きいサイズで制作します。印刷物は端を揃えるために印刷→裁断の工程を踏むため、仕上がりの上下左右3mmが切り落とされるためです。

ディスプレイには「仕上がりのサイズ+3mm」の画面が表示されるので、作業者には実際の仕上がりサイズよりも余白が大きく見えます。仕上がりサイズから各辺3mmを裁ち落とした実際のサイズ感を確認するためにも、テストプリントは必須です。

あとは「実体があると気分がアガる」という点も大きいです。笑 完成形が近づいてくるのは楽しいですね。

今回は既刊の新装版デザイン制作なので、初版にそのまま巻きつけました。もし完全新作の場合は、似たサイズの本を使って確かめてみるといいと思います。

写真:風野湊『すべての樹木は光』再稿モックアップ

写真:風野湊『すべての樹木は光』再稿モックアップH1

写真:風野湊『すべての樹木は光』再稿モックアップH4

 

再稿:完成版

風野湊『すべての樹木は光』再校案・きざはし金陵ver

この段階で完成形にはだいぶ近づきましたが、まだブラッシュアップを行います。依頼者の意見も聞きたいので、この段階で一旦提出しました。

提出の際には画面上でのデータチェックに留めずに、依頼者も等倍でプリントすることを推奨しています。


次回:3校(完成版)制作へ続く

今回は主にこの2点について解説しました。

  • イラストのトリミングの考え方
  • フォントの選び方

次回は完成に向けたブラッシュアップです。

 

途中私用で忙しくなったり、そうかと思えば旅行してたり(文学フリマ岩手たのしかったです)お絵描きしてたり(たのしかったです)で、本記事制作が遅れて申し訳ありません。

次回も宜しくお願い致します。

 

Author : 山川 夜高

山川 夜高

libsy 管理人。DTP・webデザインを中心とした文化的何でも屋。
このサイトでは自作品(小説・美術作品)の発表と成果物の紹介をしています。blogではDTP等のTIPSを中心に自由研究を掲載しています。
お問合わせは contact からお気軽に。

twitter @mtn_river
広告 (SPONSORED LINK)
広告 (SPONSORED LINK)

PAGE TOP