この文字の遊ばせ方、どっちが正解？文字デザイン演出のセンスを磨こう

3問目の答え：B

以上が私なりの解答です。

あなたがよいと感じた文字の調整は、AとBどちらでしたか？

ではここからは、それぞれの作例のAとBで、何が異なっていてどちらが効果的なのか？を説明し、作例で用いられていたデザインテクニックについてもご紹介します。

1．文字装飾は「アピアランス」で美しく整える

まず、1問目から振り返っていきましょう。

私が選んだ答えは「B」でした。

なぜなら、Bはベースとなる茶色の文字が潰れず、フォント本来のシルエットを保ったまま、外側にだけふちどりが付いているからです。

普段からIllustratorを使い慣れている方はお気づきかもしれませんが、実はAとBでは、ふちどり線の「作り方」が異なっています。

AとBのふちどり線は、それぞれ以下の方法で作られています。

• A：ツールパネルの「線」に直接色を付けたり、文字をコピーして背面に重ねたりして線を付けている
• B：「アピアランス」という機能を使って線を付けている

文字の見た目は似ていても、「フォントの形をきれいに保てるか」と「カンタンに修正できるか」という点で、この2つには大きな差があるんです。

なぜ「線の色付け」や「文字の重ね技」がNGなのか

Aのふちどり文字の設定方法について、もう少し詳しく解説します。

Aの白いふちどり部分は、ツールパネルの「線」で作成しています。

しかし、これだと、線が文字の内側にまで食い込んでしまい、文字が細く潰れてしまいます。

さらに、二重のふちどり（ピンクの部分）は別に作った文字を重ねているため、文字を修正するたびにすべてのレイヤーを調整し直さなければなりません。

この方法は作業効率が悪く、ミスの原因にもなります。

【注意点】重ね順の入れ替えできれいな装飾を作ろう

アピアランスは、新しく追加した設定が上に重なります。

例えば、「塗り」→「線」の順に設定した場合、「線」が「塗り」の上に適用されてしまうため、パネル上で項目をドラッグして順番を入れ替えましょう。

「塗り」を一番上にもってくるのが、美しく仕上げる鉄則です。

「アピアランス」を使う6つのメリット

「アピアランス」の基本的な使い方がわかったところで、あらためて「アピアランス」を使うメリットをまとめておきましょう。

1．作業効率アップ！

塗り・線・効果を一箇所で管理。

複雑な装飾のために別のオブジェクトを作る必要がありません。

2．美しい仕上がりを実現

「線」を「塗り」の背面に配置できるため、文字本来の形（塗り）を損なわず、外側にだけフチを付けることができます。

3．文字修正がカンタン

テキストをアウトライン化していないので、後からフォント変更や文言の修正をしても装飾がそのまま残ります。

4．スポイトツールで一発コピー

スポイトを使えば、複雑なアピアランス設定も丸ごと一瞬でコピー可能。

（事前に、「スポイトの抽出対象」と「スポイトの適用対象」の設定で、「アピアランス」にチェックを入れておく必要があります）

他のテキストに同じ装飾を適用したいときに便利です。

5．スタイルとして登録・再利用できる

よく使う装飾は「グラフィックスタイル」として保存可能。

他のプロジェクトでも使い回せて、デザインの統一感も保てます。

6．後から調整しやすい

アピアランスパネル内でいつでも数値の微調整や効果のオンオフができるため、試行錯誤がスムーズに進みます。

2．文字のサイズは適切なジャンプ率を意識する

続いて、2問目の振り返りです。

私が選んだ答えは「A」でした。

なぜなら、Aはすべての文字の縦横比（ここでは「垂直・水平比率」と呼びます）が正しく保たれた状態で、適切なジャンプ率（大小のサイズ差）が付いているからです。

AとBのジャンプ率の付け方には、以下のような違いがあります。

• A：ひとつのテキストデータのまま、「数値」でサイズ比率を調整している
• B：サイズを変えた文字をそれぞれ分割して作成し、「目分量」で拡大・縮小している

Bのように、文字をバラバラにして感覚で操作してしまうと、比率が微妙にズレてフォントが歪んだり、文字の間隔が不揃いになったりします。

今回は違いがわかりやすいように少し大げさに崩しましたが、無意識にやってしまいがちな「なんとなくの拡大」が、デザイン全体の違和感につながってしまうのです。

「そんなことはしない！」と思った方は、今回のように一文の中でジャンプ率を付けるとき、どのように操作していますか？
もしかして、サイズ変更したい文字を選択し、適当にフォントサイズを操作していませんか？

【手順3】他の文字も同様に調整して完成

同様の手順で、「最大」や「武器」といったほかの単語も、それぞれ垂直・水平比率が同じになるように調整すれば完成です。

文字にジャンプ率をつける際、感覚に頼った拡大・縮小はフォントの歪みや違和感の原因になります。

「垂直・水平比率」を使って、正確なサイズ管理を心がけましょう。

なぜなら、Bのほうが「読んだときのリズム」が整理されており、視線がスムーズに誘導されるデザインになっているからです。

Aのように、単語の頭文字や強調したい文字を小さくしてしまうと、読むときに引っかかりを感じ、違和感が出てしまいます。

Aでは「盛る」という言葉がそれにあたります。

テキスト内でジャンプ率を付ける際のコツは、「読んだときのリズムのよさ」だと私は考えます。

声に出して読んだときのリズムと、視覚的な文字の大小・位置が伴っていないと、どうしても「しっくりこない」仕上がりになってしまいます。

フォントサイズの変更や配置調整を行う際は、このリズム感を意識してみてください。

なお、よほど遊び心を強調したいデザインでない限り、極端なサイズ差は避けたほうが全体がまとまりやすくなります。

また、「てにをは」などの助詞を大きくすることは、特別な理由がない限り避けるのが無難です。

ところで、今回の作例のようなジャンプ率や動きのある配置を作るとき、文字をアウトライン化してから一文字ずつ調整していませんか？

アウトライン化して調整するのは確かに自由度が高い方法ですが、後から「1文字だけ打ち替えたい」「フォントを変えたい」となったときに、すべて作り直しになってしまうという大きなデメリットがあります。

そこでオススメしたいのが、テキストデータのまま自由に動かせる「文字タッチツール」です。

【手順3】感覚的に変形・移動させる

表示されたハンドルを使い、以下のように操作します。

• サイズ変更：右上のハンドルをドラッグして拡大縮小。
  ※あえて縦横比率を変えるといった特別な意図がない限り、必ず右上のハンドルを使って「垂直・水平比率」を保ったまま操作しましょう。
• 回転：上中央のハンドルをドラッグして、感覚的に角度を調整。
• 位置移動：文字をそのままドラッグして好きな場所へ配置。
• ベースラインシフト：左下のハンドルを上下に動かして、文字の座標を微調整。

このように、テキストデータを維持したまま「文字タッチツール」でサイズや配置を調整することで、後からの文字修正にも柔軟に対応できる、遊び心あふれるデザインが完成します。

まとめ：文字デザイン演出のスキルを磨くポイント

今回は「文字演出」に関するクイズと、デザインテクニックを取り上げました。

最後に今回のノウハウのまとめです。

1．文字装飾は「アピアランス」で美しく整える

複雑な文字装飾には、ツールパネルの「塗りと線」ではなく「アピアランス」を活用しましょう。

塗り・線・効果を一箇所で管理できるため、美しい仕上がりと修正のしやすさを両立できます。

テキストデータのまま編集できるので、スポイトツールでのコピーや、グラフィックスタイルとしての再利用もカンタンです。

2．文字のサイズは適切なジャンプ率を意識する

文字にジャンプ率を付けるときは、文字パネルの「垂直・水平比率」を使いましょう。

フォント本来の美しさを保ったまま、数値で正確にサイズを管理できます。

最小フォントサイズの規定がある案件でも便利で、デザイン全体に統一感を保ちながら効率的に作業できます。

3．遊び心のあるデザインでは、リズムのよさを意識する

文字に角度を付けたり自由に配置したりしたいときは、「文字タッチツール」が便利です。

アウトライン化せずに感覚的な操作で1文字ずつ変形できるため、ポップで動きのあるデザインを効率よく、納得のいく形に整えられます。