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

現場で使えるデザインセンスを、2択クイズで身に付ける「デザインクイズチャレンジ」。

デザイナーの大田です。

今回、私は「タイポグラフィ」についてのクイズを出題します。

タイポグラフィとは、文字を読みやすく、美しく、効果的に見せるデザイン手法のことです。

タイポグラフィとひとことで言っても、その世界はとても広く、フォント選びや文字組み、余白の設計など、様々な要素が含まれます。

今回は、その中でも「作字（さくじ）」という手法に焦点を当てたクイズを用意しました。

単にフォントをそのまま使うのではなく、言葉がもつ“雰囲気”や“世界観”を表現するために、オリジナルの文字の形を一からデザインする。

これが、タイポグラフィの中でも特にクリエイティブな分野である「作字」です。

それでは早速ですが、3問クイズを出します。

以下の3つの作例を見て、AとB、あなたはどちらの「作字タイポグラフィ」がより読みやすく、美しく、効果的だと感じますか？

style

reading width, l spacing

1問目「読みやすいのはどっち？」（難易度★★）

style

reading width, l spacing

2問目「整っているのはどっち？」（難易度★★）

style

reading width, l spacing

3問目「疾走感が伝わるのはどっち？」（難易度★★★）

いかがでしたか？

私が考える答えは……

style

reading width, l spacing

1問目の答え：B

style

reading width, l spacing

2問目の答え：B

style

reading width, l spacing

3問目の答え：B

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

あなたが「美しい」「読みやすい」と感じたのはどちらでしたか？

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

style

reading width, m spacing

※本コーナーの作例は、Adobe Illustratorを使って作られています。

Illustratorは、ロゴやイラストをはじめ、ポスターや名刺といった紙媒体のデザイン、さらにwebやアプリのUI設計まで対応できるデザインツール。

多くのプロが使っており、最新のAI機能も搭載しています。

ワンランク上のデザインを実現したい方や、プロフェッショナルなデザイナーを目指したい方は、ぜひAdobe Illustratorを使ってみてください。

すべてのデザインクイズを見る

style

reading width, l spacing

1．崩しても可読性を担保する

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

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

なぜならAは、「ツクシ」の部分が「シクシ」や「ツクツ」と読めてしまい、可読性の観点でやや詰めが甘いからです。

style

reading width, l spacing

「崩す」と「壊す」は紙一重

タイポグラフィは、情報を伝えるための「文字」であると同時に、形そのものがもつ「デザイン表現」でもあります。

しかし、このデザイン性だけを追及しすぎると「読めない造形美」になってしまうことも……。

文字をデザインとして扱う際、最も注意すべきは「可読性」を保ちながら表現力を高めることです。

今回の作例にある「ツ」や「シ」など、形状が似ていて扱いにくい文字の場合は、Bのようにドットの位置を調整することで読みやすさを保ち、見る人にストレスを与えないデザインにできます。

一方で、「純喫茶」の文字は大きくデフォルメされています。

しかし、横画や払いといった「漢字のアイデンティティ」をしっかり残しています。

その文字がもつ基本的な構造をしっかりと残していれば、形を崩しても「純喫茶」として認識でき、意味が破綻することはありません。

タイポグラフィを作成する際は、可読性という土台をしっかり保ったうえで、「崩すところは崩し、残すところは残す」といったメリハリを大切にしましょう。

style

reading width, m spacing

Illustratorで「手描きのアイデアをトレースして作る」タイポグラフィ

1問目の作例は、手描きのアイデアからIllustratorでタイポグラフィをデザインしていく、という流れで作成しました。

そうすることで、アイデアを最大限に活かしたタイポグラフィが完成します。

詳しい手順を、以下で解説します。

style

reading width, m spacing

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

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

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

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

style

reading width, s spacing

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

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

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

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

style

reading width, s spacing

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

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

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

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

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

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

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

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

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

style

reading width, s spacing

IllustratorのAI機能「生成再配色」で新しいバリエーションを作ろう

作字が完成したら、次は色を変えて世界観を表現してみましょう。

Illustratorのカラーパレット生成AI「生成再配色」機能を使えば、今の文字デザインをもとにAIが自動で配色を提案してくれます。

やり方はカンタンです。

アートワークを選択した状態で、「編集」＞「カラーを編集」＞「生成再配色」をクリック。

「夜の海のような配色」や「レトロな配色」などのプロンプトを入力すると、AIがその雰囲気に合わせたカラーバリエーションを自動で生成してくれます。

タイポグラフィの魅力は、「言葉に感情を乗せて伝えられること」にあります。

しかし、読めないほど崩すと引っ掛かりやノイズが生まれてしまい、意図が読み手に伝わりづらくなってしまいます。

可読性を担保しつつ要素を取捨選択することで、作者の意図がより明確に伝わります。

崩すとは、壊すことではなく文字の構造を理解したうえで再構築すること。

そこに“読める美しさ”が生まれます。

style

reading width, m spacing

2．エレメントを統一して、一貫性のあるデザインにする

次に2問目を振り返ります。

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

なぜなら、Aは文字ごとに直線的な要素と曲線的な要素が混在していて、全体としての統一感に欠けるからです。

例えば、Aの「タ」や「グ」は鋭い角度をもつ一方で、「ラ」「フ」「ィ」などは柔らかく丸みのあるラインになっています。

このように、デザインの基本的なパーツ（エレメント）が統一されていないと、全体がチグハグに見えてしまい、デザインの意図が読み手に伝わりにくくなってしまいます。

それに対してBは、すべての文字のハライやハネが直線をベースにデザインされています。

この「直線を基調とする」というルールで統一されているため、すべての文字に一貫したシャープな印象が生まれています。

さらに、一部に丸い要素を組み合わせることで、単調にならず、視覚的なアクセントも加えています。

このように、基本的なエレメントは揃えつつ、要所にアクセントを加えることで、行き当たりばったりではなく、意図をもって設計されたデザインとして伝わるのです。

タイポグラフィを作るうえで大切なのは、「エレメントを統一する意識」です。

文字の角度、線の太さ、カーブの形状など、デザインの基本的な構成要素をどのエレメントで統一するかを決めることで、デザイン全体に一貫性が生まれ、「意図をもって設計された」という印象を与えられます。

style

reading width, l spacing

Illustratorで「既成フォントをトレースして作る」タイポグラフィ

2問目の作例は、既成フォントをトレースして作成しました。

そうすることで、一つひとつの文字の大きさや印象を揃えつつ、個性あるタイポグラフィに仕上げることができます。

詳しい手順を、以下で解説します。

style

reading width, m spacing

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

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

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

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

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

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

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

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

style

reading width, s spacing

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

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

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

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

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

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

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

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

style

reading width, s spacing

3．文字の意味に沿った装飾を付ける

それでは最後の3問目です。

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

どちらもよく似ていますが、Aは装飾の一本一本が太く、曲線的でやや重たい印象になっています。

そのため、「疾走」という言葉がもつ“スピード感”とは少し方向性がズレてしまっています。

一方でBは、疾走感のあるシャープな印象の装飾により、視覚的に引っ掛かりのない印象になっているのがわかります。

タイポグラフィにおける装飾（あしらい）は、ただ無作為に付け加えるのではなく、文字がもつ意味とデザインが結びついているかが重要です。

Aはただ線を足したために装飾がノイズのように感じられますが、Bのように文脈を理解し、より適切なあしらいを加えることで、“走る”という動作のスピード感や躍動感を自然な形で表現できています。

このように、装飾が表現したい印象をきちんと伝えられているかを意識することが、「言葉と造形が一体となったデザイン」を生み出す第一歩につながります。

なお、以下の記事では、タイポグラフィの基本とIllustratorの実践的なテクニックを網羅的に紹介しているので、ぜひ参考にしてみてください。

タイポグラフィとは？基礎知識とコツを解説

style

reading width, l spacing

Illustratorで「既存フォントを活用して作る」タイポグラフィ

3問目の作例は、既存フォントを流用・変形して作成していきました。

既存フォントを使うと、ベースの完成度が高いので、短時間で見栄えのよいタイポグラフィが作れます。

詳しい手順を、以下で解説します。

style

reading width, m spacing

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

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

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

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

style

reading width, s spacing

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

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

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

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

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