温故知新!アイディアのヒントが得られるかも…

[Illustrator]タブを使う ~タブ設定で任意の文字または記号で揃える~

そもそもIllustratorの「タブ機能」を使うようになったきっかけは…

私はTVっ子で、娯楽が増えた現在でもTVが一番の楽しみです。自分時間で鑑賞したいので録画をします。そして気に入ったものがあればDISCにして保存しています。

過日、日テレで『リバーサルオーケストラ』という音楽ドラマを放映していたので録画して観ました。そこそこ面白かったので、今までなら迷わずにDISCにしていたのですが、最近は、自分の年齢を考えると躊躇ちゅうちょしてしまいます。

現在、ダビングしたDISCは1,400枚ほどあります。1枚のDISCに収めているタイトル数は平均して4タイトルくらいあるので、総タイトル数は5,600ほどになります。録画時間は1タイトルが42分(コマーシャルカットしたときのおおよその録画時間)だとして、235,200分になります。1日のTV鑑賞時間を3時間だとすると、新作も観るのでDISCを観るのはせいぜい1時間くらいです。結果、約3,900日分をDISCにしていることになります。毎日、せっせと鑑賞して10年は楽しめます。笑っちゃいますね。私の人生はあとわずかだというのに。

とにかく余生を楽しむのに必要にして十分な録画数があるのです。新しいドラマをDISCにしても観る確率は極めて低いと思われます。あえてDISCにするには、それらを差し置いてでも観たいと思うようなドラマであるかどうかが問われることになります。その点、『リバーサルオーケストラ』は今ひとつ、突き上げてくるような感動が少なかったので、その可能性は極めて低くく、考えた末にファイルを削除しようと思いました。

ある日、孫娘とドラマの感想をメールでやりとりをしていました。彼女は、一、二度は観たようでしたが、忙しくなって観られなくなったようでした。ドラマに興味が薄れたかに思えたので、録画したものを削除しようと考えていると漏らしてしまいました。

孫娘はパーカッション奏者です。同じ音楽といってもドラマと彼女が置かれている現実の音楽とは違った世界なので、DISCにしてまで観ることはないだろうという勝手な思い込みもありました。当然、異論は無いものと思っていましたが、案に相違してDISCにして欲しいというのです。普段、あれこれ欲しいとはいわない孫娘なので意を決して(最近はDISCづくりが面倒になっていますが)つくることにしました。

一旦、その気になると盤面は白のままにしておけないし、ケースはデザインしたJacketで飾りたいと思うのがグラフィックデザイナー(以下Gデザイナー)のさが。JacketとLabelをつくることにしました。

「小学校運動会」の応援団の静止画 写真右:「こどもシアター」の広報用の静止画
写真左:「小学校運動会」のJacket(上)とLabel(下)は応援団の静止画を収めたもの。写真右:「こどもシアター」のJacket(上)とLabel(下)。これは広報用の静止画を収めたもので、全学年、全シーンのデータを収録したために2枚組になっています。
娘が入学した小学校で撮影したものをプリントしてあげたら「写真屋さんみたい」とおだてられて、イベントのほとんどをカメラマンとしてボランティアを行いました。そして、いざデータを収めたディスクをつくるとなると、本業であるGデザイナーの血が騒ぎ、JacketとLabelのデザイン&プリントまでやってしまいました。6年間のDISCづくりは撮影もさることながら、PhotshopやIllustratorを学習するのに良い機会をいただいたと思います。

簡単につくって終わらせるはずが… 〜デザイナーは小さなことが気になる〜

Jacket等の作成に当たって画像に関しては日テレさんのHPから拝借し、アレンジして使うことにしました(個人で楽しむ範囲なので「著作権」などの問題ないでしょう)。かつてならオリジナルな何かを考えて元画像とは違ったものにつくり変えていたのですが、今回はできるだけ手数をかけないで素早く完成させることを目標にしました。
と、そのつもりで番組のHPを参考につくり始めたのですが、Jacket裏に配されている「CAST STUFF」欄の表記が気になりました。例えばHPのキャストサイトには、

谷岡初音…門脇 麦

のように表記されています。

HPの CAST 欄
『リバーサルオーケストラ』のHPより。「CAST STUFF」欄の表記。
キャスト・スタッフ|【公式】日本テレビ2023年1月期水曜ドラマ『リバーサルオーケストラ』
キャスト・スタッフ情報やコメントをご覧になれます。

このドラマは「オーケストラ」の物語です。役名と役者名を読んだだけではドラマのイメージが広がりません。特に音楽業界に身を置く私の孫娘などは、ドラマの観賞中または鑑賞後にフルート奏者は誰さんだった? とか、ティパニーは? などと知りたい欲求が出るのではないかと想像しました。なので担当する楽器名(またはposition)を加える必要があると思いました。

コンサートマスター:谷岡初音…門脇 麦

という風に、役名の前に「コロン(:)」を挟んでポジションを加えたのです。これで、門脇麦さんが演じる谷岡初音の担当するポジションが分かります。
そのように決めてテキストを打ち始めたのですが、その途端、またしても気になることが…。

常葉朝陽

という役名が出てきました。何と読むのでしょう。「ときわ あさひ」と読ませています。「あさひ」は読めても「ときわ」と読ませるのはフェイントですよね。「ときわ」は「常盤」がよく知られた表記です。古くは源義経の母「常盤御前」。女優の「常盤貴子」さんは有名です。

ドラマの中の名前にはそんなフェイントがあるので、「穂刈」を「ほかり」とそのまま読むことに抵抗がありました。結局、「ほかり」と読めばよかったのですが、馴染みのない姓なので戸惑いました。曖昧に記憶した情報は脳内できちんと整理できません。正しく記憶するためには「ほかり」が正しいと知る(確定する)必要があります。

さらに、「小野田 隼」。これは「おのだ はやと」と読むのが一般的です。また、最近まで一線でプレイしていた有名な卓球選手に「水谷 隼(みずたに じゅん)」さんがいるので「じゅん」と読む人もいるかもしれません。しかし、ドラマでは「おのだ はやて」と読ませています。一般的には「はやて」は「颯」と表記します。「隼」を「はやて」と読むなんて思いつきませんでした。「谷岡奏奈」はどうでしょう。「たにおか」まで読み進んでハタと思考が停止してしまいました。こういうのも「キラキラ」というのでしょうか。番組では「たにおか かんな」と読ませています。

人名の読み方は一般の人の場合も難しいですが、ドラマの場合は世界観を表すための重要な要素でもあるので、作者(脚本家)さんは持てる創造力を駆使します。その結果、意外な読み方が演出とあいまってドラマで独特な世界観が膨らみます。その分、視聴者は右往左往させられるのですが、それは楽しみでもあります。なのでドラマではイメージフルな漢字を使って意外な読み方をさせることは珍しくありません。むしろ、それを普通のこととしています。

以上のことから役名にはルビが必要だと考えました。役者名も同様ですが、俳優さんの場合は周知だったり、ネットなどを使って調べることができるのでここでは必要ないと判断して省略しました。結果、こうなります。

マエストロ:常葉朝陽ときわあさひ/田中 圭

なかなかいい感じだと思ったのでこの形式で仕上げることにしました。この時、「コロン(:)」や「3点リーダー(…)」が「点(ドット)」でできていてイメージが被っているので、役名と役者名を結んでいた「3点リーダー(…)」を「半角スラッシュ(/)」に変えています。

ところが、またしても気になる表記に出会いました。
相武紗季(あいぶ さき)さん演じる「後藤かおり」です。表記すると、

音楽雑誌「フェルマータ」の副編集長:後藤かおりごとうかおり/相武紗季

となります。「かおり」から「ごとうかおり」へは、「ひらがな」→「ひらがな」と続くので誤読しがちです。美しくもありません。考えた末にルビ(ふりがな)はローマ字表記にしました。

音楽雑誌「フェルマータ」の副編集長:後藤かおりgotou kaori/相武紗季

このように並べると、担当する楽器名(またはposition)、役名、ふりがな、役者名がくっきりと姿を表します。
主な出演者を列記すると以下のようになります。

【児玉交響楽団(玉響)】
コンサートマスター:谷岡初音tanioka hatune/門脇 麦
マエストロ:常葉朝陽tokiwa asahi/田中 圭
チェロ首席:佐々木玲緒sasaki reo/瀧内公美
フルート首席:庄司蒼syouji aoi/坂東龍汰
ヴィオラトップサイド:桃井みどりmomoi midori/濱田マリ
オーボエ首席:穂刈良明hokari yosiaki/平田 満
セカンドヴァイオリン首席:土井琢郎doi takurou/前野朋哉
第1ヴァイオリン トップサイド:松本弓香matumoto yumika/行平あい佳
トランペット首席:ヨーゼフyozefu/ロイック・ガルニエ
ティンパニ:藤谷耀司fujitani youji/渋川清彦
玉響の事務局長:小野田隼onoda hayate/岡部たかし 
【初音の家族】
初音の妹:谷岡奏奈tanioka kanna/恒松祐里
初音の母:谷岡祥子tanioka syouko/奥貫薫
初音の父:谷岡丈雄tanioka takeo/利重剛
【朝陽の関係者】
朝陽の父、西さいたま市長:常葉修介tokiwa syuusuke/生瀬勝久
朝陽の母:常葉康子tokiwa yasuko/石野真子
音楽雑誌「フェルマータ」の副編集長:後藤かおりgotou kaori/相武紗季
【周辺人物】
ヴァイオリニスト:三島彰一郎mishima syouitirou/永山絢斗
次期市長の座を狙う市議会議員:本宮雄一motomiya yuuiti/津田健次郎
スーパーゼネコン「高階組」の会長。「高階フィル」のオーナー:高階藍子takasina aiko/原 日出子
彰一郎の父親。世界的なマエストロ:三島光太郎misima koutarou/加藤雅也
彰一郎の母親。有名ヴァイオリニスト:上条あかりKamijo akari/街田しおん

こうして、キャストとスタッフの表記法が決まりました。
しかし、見た目は左揃えのままでいいのかというと疑問が残ります。1行ならともかく、行数が増えると情報を増やしたことが裏目に出て読むのが面倒で、美しくありません。元のままにしておいた方がいいといわれても仕方ありません。ここらが「伝える」ことの難しさです。

機能的で美しい形にする

レイアウトを行うときに「左揃え」「中央揃え」「右揃え」にするのが美しい形の基本です。しかし、これらはすべて、内容を無視した外側(見かけ)だけの美しさに止まります。内容を伝えつつ、美しい形にするには工夫が必要です。

左揃え
左揃え
中央揃え
中央揃え
右揃え
右揃え

元の表記は「3点リーダー(…)」を挟んで左に役名、右に役者名を配したものでした。映画のエンドロールがこのようになっていて、洋画では昔から使われています。日本映画は縦書きが主流でしたが、まとめ方は上が役名、下が役者名だったので、縦、横の違いはあるものの考え方は同じです。役名、役者名を表すのに合理的な配置なのでしょうね。ここでは元の表記にならって、従来のように左に役名、右に役者名を置くことにします。

このとき「3点リーダー(…)」を「:(コロン)」に変えました。理由は、情報を増やしたために各行が横に伸びたからです。
「…」は横を強調し、「:」は縦の流れをつくり出します。元になっている番組サイトの「CAST STUFF」欄ではそれぞれの行の情報が少ないので縦の流れが強調されています。「…」を使うことでそれが少し和らいで見えます。
それに比べて、私がつくった「CAST STUFF」欄は1行が長くなり、横に伸びすぎた感があるので、「:」を使うことで縦の流れをつくりだして、バランスをとりました。

コロン揃え
コロン揃え

意味(情報)を加えることで複雑になりましたが、元の表記と比べても遜色なく仕上がっています。

ここまで、「CAST STUFF」の表記について、そこに含むべき内容と美しいまとめ方について述べてきました。その中で、「コロン揃え」という言葉を使っていますが、「コロン揃え」という呼称は正式なものではありません。
Illustratorのタブの記入欄には「揃え文字」とありました。そのままいうと「揃え文字揃え」となり、混乱しそうな変な呼び方になるので、ここでは「コロン揃え」ということにしました。

「コロン揃え」。それは「コロン」だけではなく「任意の(好きな)文字」「任意の(好きな)記号」を記入欄に打ち込めば、その文字や記号に揃えることができる便利な機能です。
ということで、今回はIllustratorのタブ機能を使った「コロンで揃える方法」を紹介します。

Illustratorのタブ機能を使って、「任意の(好きな)文字」または「任意の(好きな)記号」で揃える方法

1.テキストを用意する
テキストファイルを編集するソフトを起動して印字し、全てを選択してコピーしておきます。

テキストを用意する
ここではMacの標準装備である「テキストエディット」の「標準テキスト」を使用しています。

2.Illustratorを起動して「新規ファイル」を作成する
Illustratorを起動したらメニューから「新規ファイル」を選択します。
ファイル名(ここでは「tab_コロン揃え」)を入力したら用途に応じて設定項目に記入します。
例:画面では幅=210mmミリメートル 高さ=148mm 方向=横 カラーモード=RGB ラスタライズ効果=スクリーン(72dpi)としています。

イラストレーター起動画面
Adobe Illustrator2023 の起動画面。
新規ファイル作成画面
「新規ドキュメント」の設定画面。

3.「文字スタイル」パレット
「文字スタイル」パレットを表示しておきます(後でも構いません)。「文字スタイル」パレットが表示されていない時は、画面上のメニューバーから「ウィンドウ」→「書式」→「文字スタイル」で「文字スタイル」パレットが表示されます。

「文字スタイル」パレットを表示させる
「文字スタイル」パレット。後に「文字スタイル」を設定します。

4.テキストを配置する
DISC JacketとLabel はPhotshopでつくることにしているので、本来なら印字したテキストはPhotshopのドキュメント上に配置すべきですが、Photshopには「タブ設定」が見当たらないので、一旦、Illustratorのドキュメント上に配置してから、タブで文字を整えてPhotshopに配置することにしました。
ここではMacの「メモ」アプリで印字したテキストをコピーして、Illustratorのドキュメント上にペーストしました。

Illustratorのドキュメント上にテキストを配置
「メモ」アプリでは13ptだけれどIllustratorに配置したら12ptになっていました。ペーストの際に、「メモ」アプリで設定してある属性は保持されないようです。見た目に問題はないのでそのままにしています。

5.タブパネルを表示させる
タブパネルは、ポインタ(黒矢印)でテキストボックスを選択し、画面上のメニューバーから「ウィンドウ」→「書式」→「タブ」で表示されます。

タブパネル表示
タブパネルは選択したテキストに吸着して表示されます。
もし、何かの操作の途中でテキストボックスとタブパネルが離れた場合は「磁石アイコン 」をクリックすればテキスト上にパネルを配置(吸着)することができます。

6.タブの設定をする
タブパネルでは、タブの種類→「小数点揃え」 タブ位置→「70mm」 揃え文字→「:」を設定します。

タブルーラーでタブの設定をする
タブの種類は「左揃え」「中央揃え」「右揃え」「文字揃え」の4種があります。任意の文字や記号に揃えるには「文字揃え」を選びます。他を選んだ場合は「揃え文字」の入力ができなくなります。「位置」の入力では単位に注意。リーダーは「ナシ」で、「揃え文字」は「コロン(:)」です。

設定が終わったら、行の頭にカーソルを入れてtabキーを打つと指定したタブ位置でコロンが揃います。

テキストが「コロン」で揃う
全ての行が「コロン(:)」で揃いました。左揃え、中央揃え、右揃えなどに比べると、ずっと認識しやすくなりました。

「コロン(:)」で揃えると美しく、認識しやすくなりました。しかし、ここでちょっとした問題があります。タブ位置をよーく見ると「コロン」は指定の「70mm」よりも少し右側にズレているのがわかります。

設定からズレたコロンの位置
タブを設定した位置と実際に揃った位置には誤差があります。

なぜこのような状態になるのかについてはどこにも説明がありません。
で、調べました。
その結果、タブパネル設定で「揃え文字」にした場合は文字幅の頭(横組みの場合は左)に揃うことがわかりました。コロン(ふたつのドット)は文字幅の左右中央に、縦に並んでいます。従って、数値通りにコロンを揃えるには1/2em(2分のI文字)分だけ戻してあげる必要があります。

「コロン揃え」にした場合に揃う位置

ここでは12ptの「コロン」を使用しているので6pt分右にズレています。位置を修正するにはルーラー上にある「小数点揃え」の矢印をつまんで左へドラッグします。
「コロン(:)」を70mmの位置に正確に揃えたい場合は「位置」に入力した数値を補正します。ここでは「12pt」を使っていますので70mmから「6pt」を差し引いた数値=67.9mmを入力します。(6pt=2.11667mmです。)

67.9mmコロン揃え
コロンで揃えた「CAST STUFF」欄15
全てのCASTとSTUFFをコロンで揃えました。 ※「コロン揃え」行うにあたって注意しなければならないことがあります。行頭からコロンまでの距離を超える数値(距離)を設定しないとタブは効かないので、一番長い「肩書き」の行を目安に距離を決めてください。ここでは「高階藍子」の行を目安にしています。このことは「左揃え」以外の「中央揃え」「右揃え」も同様です。

イメージ通りになりましたが、しばし達成感を味わったのもつかの間、またまた見つけてしまいました。後藤かおりさんや高階藍子さんなどの周辺人物の場合は肩書きが長いのが気になります。省きたくもないので、考えた末に役名だけ色を変えてみることにしました。
ここで、先ほど表示しておいた「文字スタイル」パレットを使うことになります。

7.文字スタイルを作成する
「文字スタイル」パレットの[標準文字スタイル]をダブルクリックして「文字スタイルオプション」ダイアログ開きます。
「文字スタイルオプション」で、「スタイル名(ここでは「肩書き」)」を入力して、左の設定項目から「文字カラー」を選び、「線色={なし}」、「塗り=レッド」を選び「OK」で終了させます。
※「文字スタイル」パレットの右上にあるオプションバー(3本線印)から「新規文字スタイル」を選んでもスタイルを作ることができます。

「文字スタイルオプション」ダイアログ
画像右が「文字スタイル」のフローティングパネル。[標準文字スタイル]をダブルクリックすると「文字スタイルオプション」というダイアログが開きます。スタイル名(ここでは「肩書き」)を入力していくつかの設定をすると、「文字スタイル」のフローティングパネルに「肩書き」というスタイルができあがります。

8.スタイルの適用
「文字スタイル」ができたら、テキストツールで1行目の肩書き部分を選択して、「文字スタイル」のフローティングパネルに表示されている「肩書き」をクリックすれば選択部分の文字が「赤」に変わります。

肩書きを赤に変える

他の行も同様にして肩書きの色を「赤」に変えます。「文字スタイル」を使って全ての行の色を変えるのは面倒ですが、その分読む人に美しくて認識しやすい表記になります。

コロンで揃えた CAST STUFF 欄
コロンで揃えた 「CAST STUFF」 欄。「肩書き」に色をつけて認識しやすいようにしました。

このようにして、『リバーサルオーケストラ』Jacket 裏の「CAST STUFF」欄はできあがりました。

『リバーサルオーケストラ』のJacketの「CAST&STUFF」欄
『リバーサルオーケストラ』のJacket。
リバーサルオーケストラ_Label
『リバーサルオーケストラ』のLabel

【付録】基本 タブの使い方 〜「料理のレシピ」でタブを使う〜

タブ機能はデザイナーの私にとって滅多に使わない機能です。デジタルに移行したときには指定紙を作成してスタッフに作業をしてもらう立場だったので、最近までほとんど使ったことがありませんでした。
一般的には経理や統計などで使われています。出版関係では書籍だと「目次」や「索引」などで使いまが、そういう意味では今回ここで紹介したタブの使い方は一般的ではないかもしれません。
なので、タブ機能を理解するために基本的なタブの使い方を紹介します。

「タブ」は「インデント」と一緒に語られることが多いので混乱しがちです。大まかにいうと、それぞれ文字を揃えることに使う機能です。「インデント」は段落(改行から改行)に対して使用しますが、「タブ」は段落の途中にある文字の位置を任意の場所に揃えます。
ここでは生活に密着した「料理のレシピ」でのタブの使い方を紹介します。