このタイポグラフィ、どっちが正解？作字のセンスを磨いておこう

【手順1】手描きでアイデアを出す

まずは、紙やiPad上でいくつかのアイデアを出し、どれが一番しっくりくるか精査していきます。

今回は「架空の純喫茶」をイメージし、「レトロ感」を意識してアイデアを出しました。

そして、最終的にこちらの案を採用しました。

【手順2】手描きをスキャン or 写真で取り込み、Illustratorに配置

次に、描いた文字をスキャン（またはスマホで撮影）してPCに取り込み、Illustratorのアートボード上に配置します。

そして、配置した画像を半透明（40〜50％）に設定し、その上に新しいレイヤーを作成します。

この新しいレイヤー上に、ペンツールを使って文字の輪郭をなぞって（トレースして）いきましょう。

【手順3】滑らかな見た目になるようにアンカーポイントを整理

アンカーポイントが多すぎて線がガタつくときは、アンカーポイントを整理しましょう。

アンカーポイントを削除するには、主に2つの方法があります。

1つ目は、「ペンツール」を使う方法です。

1. 該当のオブジェクトを選択し、「ペンツール」をクリック
2. 削除したいアンカーポイントにペンツールのアイコンを合わせると、アイコンの右下に「-」が表示される
3. その状態でクリックすると、アンカーポイントが削除できる

2つ目は、「ダイレクト選択ツール」を使う方法です。

1. 「ダイレクト選択ツール」を選択した状態で、削除したいアンカーポイントを1つずつ選択
2. キーボードの「Delete」キーを押すか、メニューから「オブジェクト」＞「パス」＞「アンカーポイントの削除」を選択すると、アンカーポイントが削除できる

アンカーポイントを削除したら、両端にあるパスのハンドルを調整していきましょう。

これで、がたつきのある手書きの線も滑らかなストロークになります。

1． 元フォントを書式から打ち込む

まず、ベースとなるフォントを選び、「文字ツール」で文字を打ち込みます。

今回はAdobe Fontsの「百千鳥 Regular」を使いました。

「百千鳥」は、バリアブルフォント（1つの書体で太さや幅などを自由に変えられるもの）です。
そこで、バリアブルの機能を使って横幅を広げたり、文字同士の間隔（トラッキング）を調整したりして、変形を加えていきます。

ちなみに、一部のフォントベンダーは、フォントデータの改変や加工をライセンス上制限しています。

一方、Adobe Fontsではその点が明確に許諾されており、デザイン上の自由度が高いのが特長です。

バリアブル以外のフォントの場合は、バウンディングボックスのハンドルをドラッグして変形させます。

プロパティパネルから、トラッキングを調整してみるのもよいでしょう。

2． トレース時はシンボル化で効率と統一感アップ

このテキストを50%程度に透過し、その上に新しいレイヤーを作成します。
その上から、ペンツールを使ってデザインを作成していきます。

トレース後のパーツは、シンボル化しておくと他の文字にも再利用できます。

こうすることで、「タ」と「ク」、「ラ」と「フ」など、似た骨格の文字を変形して転用できて便利です。

シンボル化するには、オブジェクトを選択して、「ウィンドウ」＞「シンボル」＞「新規シンボル」をクリックします。

そして、名前を付けて登録すれば、パネルからドラッグ＆ドロップで再利用可能になります。

共通パーツをシンボル化しておくことで、統一感と作業効率が大幅にアップしますので、ぜひ試してみてください。

このように、基本となるエレメントを揃えつつ、アクセントを意図的に取り入れることで、「意図の見えるタイポグラフィ」を実現できます。

1． 元のフォントをベースに変形していく

まず、ベースとなるフォントを選び、「文字ツール」で文字を打ち込みます。

そこから「シアー」コマンドを使い、全体の傾きを調整していきます。

オブジェクトを選択した状態で「オブジェクト」＞「変形」＞「シアー」をクリックして「シアー」ダイアログボックスを表示して調整します。

2． 文字のデザインに沿ったあしらいを足していく

「長方形ツール」を長押しして「直線ツール」を選択し、文字の「ハライ」や「ハネ」の向きを参考に、流れに合わせた線を引きます。

作成した直線を選択した状態で、「表示」＞「ガイド」＞「ガイドの作成」をクリックし、ガイドラインを作成します。

そのガイドに沿って、ペンツールや多角形ツールで横に細長い三角形を複数作成し、スピード感のあるストロークを作成します。

オブジェクトを選択し、optionまたはAltキーを押しながらドラッグ。

その後⌘＋D（Ctrl＋D）を連打することでスピード線を量産します。

最後に、それらを筆画の末端に配置し、変形やダイレクト選択ツールで形に沿わせると自然に馴染みます。