ぬけみち展・PARA GLYPHOTHECA(鈴木哲生さん)の壁面のこと

7月の頭から先月末までアーツ前橋にて開催された『ぬけみち展 かわす・つくる・ともにいる―生きるための回路』。この展示では7組の作家が出展されたのですが、その中で鈴木哲生さんの『PARA GLYPHOTHECA』の一部壁面デザインを手伝わせていただきました。今回は手伝わせていただくことになった経緯や、デザインプロセスについて書いていこうかと思います。僕が担当させていただいたものは4つのセクションの中の1つの、さらに一部なのでワークスというよりもブログの形で。ブログの執筆に関しては鈴木さんからOKをいただいており、また写真は畔上くんが撮影・レタッチをしてくれたものを使わせていただいています。また、鈴木さんのTumblrにも記事があるので、よければそちらもぜひ読んでみてください。改めてすごい人数が関わっています。

展示そのものは多くの知り合いが訪れていて、大学の後輩が行きましたよと写真を送ってくれたり、群馬が地元の大学の友達に良かったら行ってよ〜と勧めたら実際行ってくれて、感想もたくさん教えてくれて良かったです。Twitterとかで何度も言ってましたが僕も行きたかった……フランスと日本の距離が恨まれますね。(以後、だ・である調でお届け)

畔上くんの映像と、その隣に貼られている自分の制作した壁紙。身長の2倍ほどありなかなか壮観

繋がりと姿勢

元々自分が鈴木哲生さん(以後哲生さん・タイプ業界に鈴木さんが複数いらっしゃるため)と繋がりがあったかというと正直なところあまりなかったと思う。今回を含めてTwitterでのやり取りは多分片手で数えるくらいで、初めてお話ししたのは2024年の2月、渡仏前後の時で、多摩美の授業のための海外のタイプ/デザイン学校の卒業生へのアンケートの件だった。自分はReading MATDでの経験を返答させていただいたほか、何人かの知人・同僚を紹介した(あとはTwitterを検索したら、2019年に一回リプを送っていたらしい)。その後、まだ僕が手伝わせていただくのが決まる前に、哲生さんの記事でも書かれているあをもみじさん(堀さん)を紹介したので一回、別件で一回くらい。あとはTwitterで僕がRoboFontについてぼやいていたのに返信してくださったり、僕の篝火のブログを読んでくださったりといったところのはず。

そもそも哲生さんを知ったのはおそらく大学生の頃で、カレンダーを購入して、何らかのトークを聞いた覚えもある。自分の写真を掘り返してみたところ、print gallery tokyoで行われた「ORDINARY PEOPLE Everyday, Graphics, and Calendar」という展示とそのトークイベントに参加したようだ(iPhoneで写真を撮っていたおかげで位置情報が残っていて助かった)。その前か後かKABK卒であることも知り、KABK卒でありながら書体を生業とせず(この頃の自分はMATDかKABKを出た人は全員書体デザイナーになると思っていた)、文字を広く扱うかっこいいデザイナーという印象を持った。雑誌で知ったのが先か哲生さんのツイートを見たのが先か忘れたけれど、今はなきcurry 草枕にも何度か訪れたことがある。他には、『ラジオ屋さんごっこ』の哲生さんゲスト回を聞いたり、かつて配信されていた『青電話』というPodcastのネーミングとジャケットがめちゃくちゃかっこよくて、大成さんと墨とPathのロゴタイプを作るときに「青電話 いいよね」「いい…」みたいな話をしたり。

あとは、The Graphic Design Reviewの『ポストデジタル・レタリング考』を読むとわかるように、哲生さんも「レタリング」という言葉をスメイヤーズ氏の言葉を引用しながら使い分けており、その点でも勝手に親近感を覚えている。

フリーランスの「嬉しさ」

話が少々逸れてしまったかもしれないが。あをもみじさんを紹介してから数日の後、DMで2週間ほどの単発の仕事をお願いできないかと相談を受け、内容を聞く前にぜひやらせてくださいと返信した。前述の通りカッケーと思っていた人から相談していただいた嬉しさもあるし、シンプルにフリーランスとして仕事をもらえる嬉しさもあった。

フリーランスを始めて数ヶ月ほど経って、大変なこともいろいろあるけれど、いいことももちろんある。一番のいいことは仕事のひとつひとつの嬉しさだと思う。もちろん会社でもらう仕事も自分個人では関わることのできない規模だったりしてやる気が出るけれど、フリーランスだと自分個人に仕事を頼んでくれることがとても嬉しい。

哲生さんの記事で2回早さに触れていただいているのだが、実際のところ他の仕事もやりつつもかなり張り切って壁面デザインに取り組んだ。最初のお話をいただいたのが6/1、最終データを送ったのが締切の入稿日の5日前である6/10。これは展示自体の面白さによるワクワクとフリーランス的嬉しさ、そしてツイートでかなりの人数が展示に関わっていることを知り、少しでも僕のパートを早く終わらせてリソースを空けられればという老婆心(?)による。そんなことを言いつつも、僕はかなり細かくコミュニケーションをしてしまうたちなので必要以上にメッセージを送ってしまっていたかもしれないので、それは申し訳ない。

スケジュール

全体のスケジュール感としては、6/1(月)にお声がけをいただき打ち合わせをして、6/2(火)はリサーチをしたりフォントを作ったりして最初のスケッチを作成。6/3(水)に初回のデザインを作ってフィードバックを打合せでいただいた。木曜は別件の仕事をやって、6/6(土)には実際のサイズを決めたり、フィードバックを取り入れてフォント・画像それぞれのデザインを固めた。

6/8(月)は一気にInDesignでのドキュメント作成、フォントの情報を流し込める形にするプログラムの作成、InDesign上のデータ結合の設定、フォントと画像の選定、画像の編集アクションの作成。この時点で一回フォントのリストを送ったところ、往年のディスプレイ書体を増やしてここ十年のファンシーめな書体は少なめに、とフィードバックをいただいた。6/9(火)はなんか軽く体調を崩したりしつつもフォントをいくつか入れ替えて、InDesignのデータ結合を実行。流し込みによってオーバーセットテキストが出てしまったところは修正したり、フォントの位置を調整したり。Podcastも収録。

そして6/10(水)。フォントの方の調整を終えて画像の方の流し込みもして、画像をランダムな順番で差し込み、pdfで書き出してIllustrator上で配置・背景色を追加して完成、送付。結構みっちりとした感じで毎日やることが違い、充実感がある。

展示会場の都合でいくつかトリミングされていたみたいだけど、実際に展示会場に配置されたものはなかなかの数とサイズで壮観だった。メインの畔上くんの作品に並んでいい存在感や説得力を出せているのではないかと思う。そう、書けてなかったけれど今回畔上くんの制作物の隣に配置するものだったことも嬉しかった(大学卒業の時、僕+畔上くん+2人で卒業制作の展示を計画したもののコロナ禍で頓挫してしまったため)。

正面から見た壁紙の一部。かなりの量のパネルがある

デザインとそのプロセス

ここからは、詳しく実際デザインする上で考えたことや試したことを書いていこうと思う。最初はリサーチに数時間取り組んだ。哲生さんのデザインの構想として、「TENET序盤の研究者の部屋」「2001年宇宙の旅のようなブルータルさ・無骨なSci-Fi」「新カイザー・ヴィルヘルム記念教会のような、テクニカルかつクラシック」という方向性をもらい、それらに加えて、発達しすぎていない簡素なデザインであるスター・ウォーズやブレードランナーなどのVFXも見ていった。ただ、正直それらのリサーチを画面に反映できたかというと結構難しくて、基本的な方向性は畔上くんの映像のデザイン(哲生さんデザイン?)に自分の手癖を加えたような形となった。ブログでは「インチキテクノロジカルなデザインも得意そう」と想定していただいていたが、それが発揮できたかはわからない。余談として、僕は4月にベルリンをカンファレンスのため訪れていたのだが、カイザー・ヴィルヘルム記念教会はピンを刺していたもののちょっと遠かったために立ち寄っていなかったのが悔やまれる。

実際の展示の一部。フォントごとの情報が入っている

畔上くんの映像のスクリーンショット。デザインはこちらをかなり参考にする形となった

フォーマットデザイン Ver.1

6/5に向けて、8種類ほど画面のバリエーションを制作した。8種類といってもデザインの方向性はほとんど一緒で、情報の密度や書体のどのような情報を表示するかが主な観点になっている。

最初に制作したバリエーション。さまざまな情報、密度感を試行している

サイズ

まず検証・決定をしなければいけない要素として1書体あたりのサイズがあった。壁紙自体のサイズは3.5m x 5.2mということで決定はしていたものの、1枚あたりのサイズ含め提案をお願いしたいとのことでいくつか検討している。最初に想定されていたサイズは10cm x 20cmだったが、これだと910枚のパネルをデザインする必要があり、流し込み自体を自動化できたとしても微調整やそもそもの書体選定で相当苦労しそうだった。他のサイズとして横長の10cm x 30cm(595枚)、1.5倍サイズの15cm x 30 cm(391枚)、2倍サイズの20cm x 40cm(221枚)などを検討した後、程よく横長のプロポーションで本来の想定サイズにもうまく収まる17.5cm x 40cm(260枚)に決定した。

Illustrator上でのサイズ検討の様子。こういうマス目上のオブジェクトを作るときはアピアランス→パスの変形のコピー機能を使うと軽いし計算も楽にできるぞ

仮想スキャンコード

僕はこういった架空の画面、及び何らかのデータを表示するグラフィックをデザインする際には、たとえ自分の中で完結するものであっても全体を通した整合性や納得感のあるものにしたいと思っている。機械が文字を生成するにあたって今までの文字をアーカイブしているならば、それら全体を通したナンバリングやひとつひとつの名称を機械側が認識できる必要があると考え、Human Readabilityを無視し、Machine Readabilityのみを考えた部分があるとグラフィックとしてのインパクトと納得感があると思った。つまりは現実でのバーコードやQRコード、マークシートであり、Monotypeがキーボードで打たれた文字を認識するために紙テープの穴を利用しているのも文脈的に繋がっていて良さそう、という思いもあった(詳しくは大曲さんの記事を見てください)。

先ほど述べたように整合性や納得感のある意味のあるグラフィックにしたいという気持ちはもちろんあるが、同様に簡単に鑑賞者が解読できてしまうのもまたあまり面白くないと思っている。できれば、写真を家でよくよく調べてみたらわかる、くらいの難易度が望ましい(あくまで自分の美学)。そう考えたときに、rMQRコード(横長のQRコード)なども考えられたが実際にMachine Readableなものはやめることにした。そして、せっかくテキストを表すならば自力で図形を並べるよりはフォントを作って実際のテキストで打ったものがそのままグラフィックになった方が一貫しており、尚且つ楽であることは間違いない。何でもフォントで解決するのは僕の悪癖でもあるが、最近はそれでいいと思っているので、まずデザインを始めてすぐフォントを作り始めた。

とはいえ1からテキスト→図形のシステムを作るのは大変なので、まずは既存のシステムを検討した。最初に思いつくのはモールス信号だが、モールス信号は1と0なので図形のバリエーションが乏しくなってしまう上に、テキストが長くなりそうという懸念点もある。情報の密度や作りやすさのバランスを考えた上、今回は点字を転用することに決めた。

ただ、点字をグラフィックとして扱うにあたっては「視覚障害者へのバリアを取り除くための手段としての点字を、グラフィックとして遊ぶのは倫理的などうなのか」というまた別の懸念も浮かぶ。しかしながら、今回の使用方法として、元々読ませるためのものではないグラフィックなのでそのまま使用することにした(ポケモンのルビー・サファイアなどでも点字が古代文字というグラフィック、および謎解きの装置として扱われている例もある)。

点字グラフィックのフォントはGlyphsのピクセルフォント機能を用いて制作しており、地と図それぞれのコンポーネントを編集することで、シンプルなものからデコラティブなものまでバリエーションを10種類ほど制作している。さすがにストライプのものなどは幾分かデコラティブすぎたため、哲生さんと相談の上シンプルなものが採用された。

点字をベースにしたスキャンコードグラフィックのバリエーション。メインの書体名には右列一番下、左上ナンバリングには中央列一番下を採用した

左上のタグ的な部分はやはり辞書のインデックスのようなものが欲しいと思って追加したもので、内容は「No.l_01n_001」というシンプルなもの。これは壁紙における位置を表しており、lはline、すなわちx方向の列の位置、nは全体の通し番号である。これらはlの方にInDesignのセクション、nの方にページ番号を入れることで機械的に挿入され、実際の印刷位置と整合しており気持ちいい。(nの方はその列における番号としたかったがInDesignの機能的に面倒そうだったのでページ番号をそのまま利用できる通し番号とした。)

右の大きく使用している部分はそのまま書体名を用いており、フォントのFull Nameを用いている。最初と最後は:と;で挟んでおり、それらに特殊なドットを挿入し、いわゆるQRコードの角にある模様のような、「スキャナーが行頭と行末を認識できるマーク」的なものを想定した。ただし、何となく見ればわかるようにこのフィールドは文字数があまり多くは入らず、最大13–14文字程度。もちろんフォントサイズを小さくすれば入りはするのだが、なるべく大きくしてインパクトを出したい。オプティカルサイズやファウンダリタグなどをファミリー名に含めているフォントが容易にそれらの上限を超えてしまうため、詳しくは後述するのだが「Haitham Disp Thin Italic」「Flexa Cond Black」などいくつかの単語を短縮するロジックを追加している(それでも溢れてしまったものは手作業で修正した)。

書体・コード下の情報

全体のデザインに使用する書体に指定はなかったが、前述の畔上くんの制作物側の書体にある程度テイストを合わせたほうがいいかと思い、最初はCondensedのグロテスクとして、制作中のDoppo Condensedを使用した。どうせなら自分のものを使っちゃうか…というスケベ心は否定できない。その他、等幅の例としてFounders Grotesk Monoなども試している。その後何らかのフィードバックを受けて、Condensedではなく普通の幅、かつ書体のサイズはなるべく統一することになり通常の幅のDoppoの複数ウェイトを使うことになった。少しトラッキングを詰めたことで時代感を纏ったものになったと思う。

少し大きめに表示している部分は細かめのピクセルフォントとなっている。他にも普通のDoppo、PT Monoなども試したのだが、「一見普通のサンセリフだがよくみるとピクセルフォント」のようなものがいいのではとフィードバックをいただいた。PangramPangramのNeueBitなどはその場で話に出たもののちょっとピクセルが粗いということで、新しく探して買うか逡巡した結果、これも自分で作った方が早えなと思いDoppoのピクセルバージョンを制作した。と言ってもこの部分は16進数表示なので作るのは0123456789ABCDEFのみでそこまで時間はかけていない。また、ピクセルで表すにあたっては曲線部分を滑らかに表現するのが難しかったため、2や7などは直線で処理している。

細かい情報部分の書体もDoppoの他Founders Grotesk Mono, IBM Plex Monoなどを試していたが、OCR Bがいいのでは、となり最終的にOCR Bを採用している。

実際の内容としては上のコード部分とほとんど同じと言っていい。こちらは機械用ではなく、Human Readable(?)なラベルという想定。ピクセルフォントの大きい方はFont Family Name(ex: Doppo)、小さいテキストの方はFont Subfamily Nameとデザイナー(ex: SemiBold, Masaki Ando)を16進数に変換したものとなっている。ただ、こちらもかなりフィールドから溢れてしまったためかなり手動での調整を入れている。初期の他の案としては、そのフォントがカバーしているOpenType機能(GPOS/GSUB)をチェックボックスで表記する、という案もあったがそちらはなんだかんだなくなった。

スキャンコードおよびその周辺情報のデザインのバリエーション。左上は本番のデザイン。左下と右下以外はGPOSとGSUBのチェックボックスを採用している。何気に、周辺のキャプションも理解しやすいものと短縮しているものがあり、さまざまな方向性をテストしていることがわかる

ピクセル版Doppoと通常Doppoの比較。全体のプロポーションもやや縦長にしている

右下グラフィック

右下に配置しているグラフィックも、データとして意味のあるものを配置しようとしている。最終的なデザインはOCR Bで組まれたバイナリ風の16進数文字列だが、最初に制作した案は手癖もあるがよりグラフィカルなものとなっている。左のマス目のグラフィックはフォント内のOS/2テーブルにおけるpanoseという値を起こしたもの。panoseはフォントを代替する際や分類する際に使用される、デザイナーがフォントに埋め込んだ特徴・属性などを表すパラメータで、セリフかサンセリフか、セリフの厚みはどのくらいか、コントラストはどのくらいか…といった値を入力することができる。しかし懸念点としてあったのは、panoseは利用されることが少ないのもあり入力していないフォントも市場に多く存在するということだ。その場合は自分で算出して入力するか自動で判別するスクリプトを通す必要があり、楽はできなさそうな雰囲気はあった。

最初に制作したフォント情報グラフィック一覧。左上から、panose、バーティカルメトリクス、ストロークでのグリフ形状とGID、ttxにおけるグリフ構造、バイナリ、意味のないグラフ

右側の横棒のグラフは同じくOS/2テーブルのsTypo系列のバーティカルメトリクスとなっており、書体のアセンダ、ディセンダ、xハイトなどを起こしている。他の案としては画面左とは別の例示字形を線で表示し、それらのGIDとttx変換によるパス構造の表示もあったが、ttxを市販の書体に行うのはEULAで禁じられているフォントの解析にあたりそうなこともあり断念した。最後のグラフィックは、2001年宇宙の旅に大きく寄せた過剰にシンプルな棒グラフと波形(?)になっている。確かこれは打ち合わせの数十分前くらいに急いで入れたので実際どのような値を入れるかとかはその時はまるで考えていなかったと思う。

最終的にはバイナリの16進数が並んでいるものが機械的、非人間的で良いということで、フォントのバイナリをOCR Bで並べる形となった。しかし、フォントのバイナリそのまま入れるのはどうだろうという懸念もあって、乱数を用いて変換したものを並べることにした。ただし、全くランダムに変換してしまうとバイナリらしさが失われてしまうため、0だけを保持し他の値のみを変換するプログラムを通している。

代表グリフ

画面左部分の代表グリフはまあそのままではあるのだが、さまざまな情報量を試行している。シンプルに文字だけ置いたもの、背景を敷いたもの、目盛とバーティカルメトリクスを背景に敷いたもの、ノードを置いたものなど。前たまたまAfter 8 Booksというパリの本屋で買ったMaxitypeのOCR-XおよびSlectaという書体の見本帳を持っていて、それのイメージが近かったため参考によく見ていた。

一番情報量が多いバリエーション。入っている横線などの情報はOS/2テーブルから取得可能ではあるが、この案になったらこの線を引いたりノードにオブジェクトを置くスクリプトを作っていたのだろうか

入力する文字列はランダムな大文字+小文字の文字列にすることもできたが、大文字の基本となるH、対照的に小文字でディセンダーがあり、書体の特徴が出るgに統一することになった。

フォーマットデザイン Ver.2

前回のものにフィードバックをいただいたので、適用しつつ決まったサイズでレイアウトをし直した。なお、前回のものも今回のものも、グリッドを組んでその上でデザインを行なっている。癖になってんだ、グリッドを組むの…

フィードバックの内容としては、前述のOCR Bや使用書体の変更の他に、線の細さが現代っぽいため少し太くして時代感をもう少し古くしたい、というものがあったため全体的に線の太さやつけ方でバリエーションを作成した。写真を用いたレタリング・サインペインティング・印刷物由来の文字のレイアウトは哲生さんからPhotoshopで行う加工方法の指示をもらい、それを適用している(このそれっぽさを出す加工が打ち合わせから数時間で送られてきて、早さと知識の広さの凄さを感じた…)。なお、画像に関しても右下の情報部分はバイナリを使用している。

フォーマット制作のために組んでいるグリッド。

Ver.2のフォーマット。サイズを調整し、内容もかなり固まっている

フォント・画像選定、tsv作成

フォーマットが完成したあとは、早速使用する書体を選定していった。最初は自分の持っている書体ライブラリのみから選定し、新しく購入したり、Google Fontsなどから持ってくることはしなかった(元々入っていたものはもちろん対象ではあるが)。全体が260枚で、画像を50枚ほど入れる予定だったため選ぶ必要がある書体数はだいたい210程度。「書体のネームバリューを意識しないこと。全ての書体をアーカイブしているデータベースならば書体の知名度は関係ないはず(Helveticaを優先的に選んだりしない)」「幅広いスタイルとウェイト、イタリックなどから選定する、なるべくバラつくようにする」といったことを意識しながら選定している。なお、数書体なら混ぜてもいいか…と思ってここでも自分の書体とか知り合いの書体を入れている。

自分の制作したDoppoをこっそり入れている

選定は自分が使っているフォント管理アプリのTypeface 3のクイックコレクション機能を利用した。このアプリではコレクションを並べて印刷などもできたため、流し込みやtsv作成に移る前に一度pdfとして書き出し哲生さんに確認を行った。哲生さんの記事でも触れられている通り、少し2010年代以降のファンシーなもの、シャープなものが多く、かつモンセンに載っているような1900年代のディスプレイ書体は少なかったためそのバランスを整えるように指示をもらい、Adobe Fontsなどを使って幾らか選定書体を変更した。ついでにAlbertus Novaは大曲さんが関わった書体でもあるので購入した。

写真の選定に関しては、哲生さんからいただいた22枚の文字の写真(どれもめちゃくちゃ面白い)からいくつかを差し引いて、自分が旅先で撮った写真を加えて50枚としている。正直なところ哲生さんの写真がどれもいいので、自分の入れたい写真と哲生さんの写真で残したいものとでかなり悩んだ覚えがある。とはいえ、自分の趣味である旅行と写真が活かせたのはかなり嬉しい。具体的には、フランス、イギリス、ドイツ、ルクセンブルク、日本、香港、韓国、インドなどで撮影した写真を使えたはず。特にインドで撮った写真は、現地ケララ州で使われている僕が全く読めないマラヤーラム文字や、多言語の標識、碑文などから撮ったそもそもスクリプトのわからない文字も入れることができてよかった。

自分の撮った写真から使ったもの①。ルクセンブルクのバス停のビットマップフォント

自分の撮った写真から使ったもの②。マラヤーラム語のポスター

自分の撮った写真から使ったもの③。香港の看板

書体の選定を行ったのち、それらの情報がまとまったtsvファイルを作成するためのPythonのスクリプトをClaudeを用いて作成。情報の流し込みはInDesignのデータ結合という機能を使っており、データ結合はソースとしてcsvないしtsvを利用する。一般的なcsvではなくtsvを利用した理由は、csvはコンマ区切りで列を判定するため、もしかしたら文字列に混入してしまう可能性があるかも…ということでタブ区切りのtsvにした。

Pythonスクリプトでは主にフォントのnameテーブルのname ID 4, 16, 17, 9の情報を読み取り、それらを前述の通りフォーマットに収める形式に合わせて記号で挟んだり、16進数に変換したり、短縮処理を施している。なお、name ID(および以前検討していたOS/2テーブル)の内容を読むことに関して、EULAに触れないかという懸念もあったものの、これらのテーブルはアプリケーションによって確認・利用されるものなので、解析やリバースエンジニアリングには該当しないと判断した。スキャンコード部分に入るフォントファミリー名およびサブファミリー名の短縮処理に関しては、13文字を超える場合「ファウンダリのタグや文字セットが入る場合は削除する(GT, PPなど)」「Display→Disp、Compressed→Comp、Italic→Ital, Extra→Exなど、複数ファミリーで共通する属性は短縮する」という処理を行った。

画像に関しても同様のtsv変換を行っているが、画像ファイルはバイナリ以上の情報がないため(メタ情報を追加することもできるとは思うが面倒だったため)、画像の加工をする際にファイル一つ一つに説明文を自分で付けて、それらを16進数などで変換するようにした。例として「berlin_tainletter-nicht-fortrain_takenbymasaki.psd」のような形。複数の属性をアンダーバーで区別している。何気にこの説明を書くのに時間がかかった。

InDesign上でのフォーマット作成と流し込み・調整

デザインが決まり、使う書体や画像も決まり、データも揃った。あとはひたすら情報を埋め、微調整をしていくだけという段階になった。細かく説明していなかったが、今回はデザインをIllustratorで決定→InDesignで組み直し、1書体1ページで流し込み→pdfで書き出してIllustratorで組み合わせ1枚の壁紙へ、というプロセスで制作を行なった。最初からIllustratorで全部やることもできるが絶対重くなるだろうし、共通要素があるデザインへのスタイルの適用、ノンブルやセクションの適用、フレームに対しての画像の配置、データ結合機能による流し込みなどInDesignを介した方が効率的だと判断している(自分は2桁超えるなら冊子もInDesignで作りたいし文字はGlyphsで作りたいタイプなので、そういうこと)。あとはpdfを出力するWebアプリを作るみたいなこともまあバイブコーディングで可能ではあると思うが、普通に扱い慣れているInDesignにした。

InDesign上でのフォーマット作成はまあIllustratorで作ったものを再現するだけなので特に言うことはない。Illustrator上ではグリッドを用いてmmの整数単位で制作を行なっていたのでその辺りの再現が容易だったのは良かったと思う。フォント用と画像用の親ページを作って、テキストそれぞれに段落スタイルを作成し、左上の通し番号のところはセクションとノンブルを設定。そしてデータ結合の設定をしていく。左部分のフォントを適用した「Hg」部分の書体適用はデータ結合では無理そうだったので(何らかスクリプトを使えばできたかもしれないが)、手動で設定していくことにした。ただ、流し込むデータが全て16進数ないしスキャンコードに変換されてしまいどの書体なのかわからなくなるので、ページ左下に書体名を普通のラテンで表示するフィールドも追加した。

InDesignで実際に流し込みを行なったデータ。左下には確認用の書体名を別レイヤーで入れた

データ結合は特に滞りなく行うことができ、そこからはひたすら調整を行なっていく。「Hg」部分の書体適用とサイズ合わせ、オーバーセットテキストの手動調整が主。少し困ったのが書体の適用で、なぜかInDesignの文字パネルの書体選択がすごい重くて、入力してから反映されるまで数秒かかる上、最初にタイプした文字が2文字になってしまい結構ストレスフルだった。書体が多すぎたからなのか?原因はわからない。サイズ調整では、グリッドにHの高さを合わせてフォントサイズを調整していった。xハイトが書体によって違うのは知っている人が多いと思うが、キャップハイトやアセンダーなどの高さは大まかな共通認識はあるものの、標準というのは特に存在せず、書体ごとにバラバラとなっているため合わせていく必要があった。これに関してもスクリプトなんかで楽をする方法はあったかもしれないが、せいぜい200程度なので手動で調整している。

写真の流し込み・調整はフォントよりずっと楽で、パスを指定することでInDesign側で画像そのものも挿入してくれる。基本的な機能ではあるが、InDesignの気に入っている点は特にオブジェクトサイズの調整で、フレームに均等に流し込む、縦横比率に合わせる、フレーム側を合わせる等が行えるのが素晴らしい。今回は高さ固定でそれに合わせて画像を入れていく形だったので「縦横比率に合わせる」を使ったはず。

書き出し、配置、完成へ

すべての流し込みと調整が終わった後、pdfでの書き出しに進む。フォントと画像の流し込みは別々のinddファイルで行なっていたため、まずはそれを合わせて、画像を人間的なランダム具合で挿入していった。これもスクリプトより手でやった方が早そうだったので手作業。ページパネルでページの表示を横方向にして、パネルオプションでページのサイズを小さくすることでページ一覧をマス目状に表示できるため、それでひたすら画像のページをいい感じの場所に入れていく。

InDesignのページパネルで画像をランダムに入れていく過程。この表示方法は初めて見た

書き出しの際は、左下の確認用のフォント名のオブジェクトを一括で削除して、背景色も取り除いてpdfにした。というのも、哲生さんからページごとの背景色を10%程度揺らぎのあるグレーにしてほしいとオーダーをもらっていたのだが、それならば背景色はInDesignでつけるよりも最終的にIllustratorでやった方が早いと判断したので。

Illustratorではpdfをマス目状に配置していくのだが、これも標準機能だと微妙に面倒だ。背景色をばらけさせるのも手でやるのは大変そうだったので、pdfを列数ないし行数、間隔を指定して並べるスクリプトと、背景色を指定した範囲内でばらけさせるスクリプトをClaudeで作成してそれらを使用してデータを作成した。あとは塗りたしを広げてページ間に罫線を引いて完成。アートボードが大きかったのでpdfで書き出しはできなかった。その後、1ページだけ差し替えが入ったものの滞りなく納品できた。

密度感ある

結構な長さになってしまったが僕が携わらせていただいた壁紙の制作過程はこんなところです。実物もすごいいい感じにできていると思いますし、何より制作過程でどういう情報を入れるか、そしてそれを一括で処理するにはどのような手法を取ればよいか、といった手段を考えて実行する過程がとても楽しかったですし、フォントを作ったりフォント内の情報を使ったりと、自分の知識やスキルを色々と活かせたのもとても嬉しいプロジェクトでした。

おそらく他に関わった若者も同じ分だけのエピソードや過程があると思います。畔上くんも書きますといっていたので読むのが楽しみです。哲生さんも前編の記事がいつか出るのでしょうか。それも読むのが待ち遠しい限りですね。

この5月、6月あたりはありがたいことにやることがたくさんあって忙しい日々を過ごしていました。最近はかなり落ち着いてきて、仕事自体も書体が多くなり、1プロジェクト自体が長く、リリースまでも時間がかかるため今後より何してるんだこの人となりそうですが、何とかやっていこうと思います。とりあえず来週末はスイスに5日ほどいく予定なのでそれが楽しみですね。それではまた。

展示のその他の写真。画像もランダムに挿入している

展示のその他の写真その2。

Share:
« 記事一覧にもどる

Doppo / PURE