【タイポグラフィーの解説&作り方】13個のデザインのコツをマスターして実際に作ろう。

【タイポグラフィーの解説&作り方】13個のデザインのコツをマスターして実際に作ろう。

「タイポグラフィ」という言葉は、主に2つの意味で使われています。ひとつは、文章を読みやすく見せるデザインの手法。もうひとつは、アーティスティックな文字自体のデザインです。

2つのタイポグラフィーの起源や書体の構造などを学ぶことで、デザインの深い意味づけができるようになります。デザイナーは、タイポグラフィーのルール、タイポグラフィーにおける是非と可否を知っていなければならなりません。

今回は、タイポグラフィーの解説とデザインのコツ13個をまとめるとともに、実際の作り方をご紹介します。

 

タイポグラフィーデザインの基礎と13のポイント


Jeison Barba / Behance

タイポグラフィには、主に2つの定義があります。

  1. 文章を読みやすく見せるデザインの手法
    文字の配置や並びによって、文章を読みやすくする手法としてのタイポグラフィ。余白をうまく使ったり、レイアウトを工夫したりして、文章を読みやすく配置します。
  2. アーティスティックな文字自体のデザイン
    ただの文字情報ではなく、文字自体をデザインに組み込んでしまうのもタイポグラフィです。色や太さを変えたり、文字のタッチを変えることで、全体として見たときに文字がデザインの一部になります。

これらのタイポグラフィーデザインは科学と芸術の組み合わせから成り立つものであり、かなり複雑です。正確な測定値、語彙、設計書を考慮しておく必要があります。

ここからは、その原則をおさらいしましょう。

1. フォントのサイズは「エックスハイト」を基準に。


Ganz Toll / Behance

英字フォントにおいては、エックスハイトという一つの基準があります。小文字の「x」の縦の長さを指します。タイプフェイスをペアリングする際は、スマートコールをエックスハイトと一致させるか、もしくは同じ高さにしましょう。フォントによってはページ上で占めるスペースも変わることがあります。

横幅は「セット幅」と呼ばれており、字間を左右するので全体の印象を大きく変えます。最も一般的な測定単位であるポイントの歴史は、18世紀までさかのぼります。

1ポイント辺りの長さは1/72インチ、12ポイントで列幅の測単位である1パイカに相当します。タイプサイズは、インチ、ミリメートル、またはピクセルで表すこともできます。

2. 行間はフォントサイズによって変更する


Philip LaibacherDenis Junemann / Behance

各タイプライン間の垂直方向のスペースは、リーディングの呼び名で知られています。これは、メタルタイプの設定時に、鉛のストリップを使用してラインを区切るためです。一般則として、先頭の値はフォントサイズの1.25倍から1.5倍程度にする必要があります。

3. 字間の美しさをカーニングする

Stereo Unit , Donghyun Lim / Behance

2つ以上の文字を並べる場合、美しい並びを実現するために、文字間のスペースを調整する行為を「カーニング」と呼びます。たとえば、大文字のVと大文字のAがある場合、対角線のストロークがカーニングされ、Vの右上がAの左下に位置します。

これは、できるだけ早く習得すべきスキルのひとつです。このスキルを習得することで、大きな違いが生まれます。一方、トラッキングはすべての文字の間隔に関係なく、均等に適用されます。

4. タイポグラフィー設計におけるスケールと階層

重要な情報と、それほど重要ではない情報がある場合は、大きい見出し、小さい見出し、より小さいボディタイプを使用して各情報を区別し、読者をリードしましょう。また、色、重さ、間隔を用いて階層を生み出すこともできます。

5. フォントの種類は最小限にする


Katt Phatt / Behance

複数のフォントを使用するなら、その数は3つまでに制限しましょう。本文にひとつ、見出しにもうひとつ、最後のひとつは小見出しに、といった具合にです。

すべてのフォントに統一感を持たせることができれば、異なる書体で自由に表現して大丈夫です。ただし、非常によく似たふたつのフォントを使用すると、意図的にフォントを変更しているのか、単に間違っただけなのか、見る人に誤解されてしまうこともあります。

6. 正しいアラインメントを実践する


Ben Fearnley / Behance

これは非常に重要なポイントです。デザイナーではない一般の人々は、なんでも整列させる傾向があります。中心に置いた方がバランスがとれているように感じるからです。

しかし、これは最も効果の薄い、読みにくい配列です。それ故、センターに寄せる時は。考え抜いた上で設定する必要があります。テキストに大きな凹みがある場合は、段落を読み違う可能性があるからです。常に輪郭を意識するようにしてください。

7. 組み合わせに適したセカンダリフォントを選ぶ


Shaivalini Kumar / Behance

異なるタイポグラフィーを組み合わせるは非常に重要なので、見出しと小見出しがある場合は、ふたつの異なる書体、つまり互いに補完する書体になります。これにより、視覚的な階層を確立できます。

ここでのポイントは、矛盾するふたつのフォント、またはほとんど区別できないふたつのフォントを避けることです。あくまでも全体的の一貫性を失わないようにしましょう。

8. タイポグラフィーデザインの可読性を重視する

いかなるデザインにおいても、ユーザーが簡単にメッセージを読みとれるようにしなければなりません。最も基本的なNG例として、暗い背景の暗いテキストを合わせたデザインがありますが、可読性を高めるのは必要です。

また、コントラスト度の高い画像に、小さなフォントを使用する……これもまた同様にNGです。せっかくの印象的なタイポグラフィーデザインも、きちんとテキストが読めなければ無駄になってしまいます。

9. フォントパレットは賢く選ぶ


Vault 49 / Behance

カラーは、デザイナーにとって最も強力なツールのひとつです。ただし、デザイン全体を通して、慎重に考え抜かれた配色でなければ、効果を発揮しません。デザインにどんな色が適しているかを知りたいのなら、カラー理論を掘り下げてみましょう。例えば、オレンジは食欲を増加させる色と考えられており、その結果、ファーストフードのデザインに多く使用されています。

既存の枠にとらわれない、独創的なデザインは、パンチの効いた素晴らしいデザインを生み出しますが、ここで一つ注意です。フォントの色があまり散漫にならないように気をつけましょう。さもないと、ユーザーの気が散ってしまう可能性があります。

10. 「はみ出し部分」を取り除く


Laura Sala / Behance

デザインをネクストレベルまで高めてくれる方法のひとつは、段落組みをしたときに現れる「はみ出し部分」を失くすことです。段落組みの際には最後にひとつだけ「孤立」してしまう部分をオルファン、二段以上段落組みする際、列をまたいで孤立してしまう部分をウィドーと呼びます。

両者はどんなタイプのデザインにも現れますが、それらをうまく扱うことができれば、デザイナーとしての強力な武器になるでしょう。

11. 空白はただの空きスペース以上のもの

空白は、デザインをレベルアップする非常に貴重なツールです。空白を賢く使うことで、コンポジションの最も重要な部分に焦点を当てることができ、デザインが生き生きとし始めます。デザインのコンポーネントも安定し、簡単に洗練されたデザインを生み出すことができます。

空白を効果的に使うことで、新しい要素を追加することなく、複数のメッセージを伝えることができます。例えば、新製品のイヤホンのポスターの場合。キャンバス上にイヤホンの画だけを置いてガジェットを強調することで、製品を際立たせることができます。

ノイズキャンセリングイヤフォンの場合も、イヤホンの画の周りは空白にしておくことで、外のノイズが入ってこないことを表現できます。クレバーな表現だと思いませんか?

12. デザインの流行を追わない

Abraham García / Behance

デザインのスタイル/手法にも流行はあります。すぐに流行りに飛びつくデザイナーもいるかもしれませんが、ファッション業界と同じく、いつかは廃れてしまうものです。

今日は人気でも、明日は誰も覚えていないかもしれません。一前に作成した 「時代を超越したデザイン」のロゴが、今や時代遅れになっているかもしれません。

しかし、タイムレスなデザインを凌駕するフォントもあります。人気のデザインには何か必ず理由があるもの。デザイナーならその理由について調べるべきです。つまり、設計コンポーネントを分析する必要があります。あくまでも、タイポグラフィーにおける流行とは、注意深く分析する対象でしかなく、すぐに便乗するものではありません。

13. インスピレーションを見つける

JEN BARTEL / Tumblr

インスピレーションを得るのはとても大事です。一番おすすめなのは、既存のイラストを分析することです。何がタイポグラフィーを効果的かつ魅力的にするかを知るには、オンライン上にある膨大な数の記事を見ていくのがベストです。また、ふと目を惹いたグラフィックスやフォントを分析しても良いでしょう。

タイポグラフィーの作り方

1. 新規ドキュメントを立ち上げる

まずはIllustratorを起動し、「新規」ボタンをクリックします。画面上部にあるタブからカテゴリーを選択し、「空のドキュメントプリセット」を選択して下さい。

プリセットを選択すると、寸法・カラーモード・解像度等が、プロジェクトに応じてあらかじめ設定されています。カスタマイズが必要な場合は、「プリセットの詳細」で行いましょう。設定が完了したら「作成」をクリックし、新規ドキュメントを開きましょう。

2. ベースとなる文字を入力する

ここからいよいよ作成に入ります。文字ツールを選択して、アートボードをクリック。表示させたいテキストを入力し、プリセットのテキストと差し替えて下さい。

入力したテキストが表示されたら、テキストを対角にドラッグし、すべて選択します。上部のコントロールパネルで、フォント・スタイル・サイズを変更し、アレンジしてみましょう。

3.Adobe Typekitライブラリを使う

さらなる装飾を施したい場合、Adobe Typekitライブラリから好きなフォントを探し、「同期」をクリックして、コンピューターに追加します。そして、Illustratorで、フォントメニューから新しいTypekitフォントを選択します 。

4. 詳細をアレンジする

Escキーを押してテキストオブジェクトを選択し、右クリックメニューから「アウトラインを作成」を選択。次に、字形を選択したまま、ダイレクト選択ツールを使用して、アンカーポイントを任意の方向にドラッグしましょう。

5. ai形式で保存する

作品が出来上がったら、ファイル/保存を選択。ファイル名を設定し、ai形式で保存します。Web上に投稿する際は、ファイル・書き出し・スクリーン用に書き出しを選択しましょう。ファイル形式を指定した後、「アートボードを書き出し」をクリックすれば完成です。

まとめ

タイポグラフィーは、言葉を読みやすくするだけのものではなく、タイプを配置する技術と、そのアレンジメントからなるアートです。

ルールは、優れたタイポグラフィーを作成するためのガイドラインでしかありません。

現存の素晴らしいタイポグラフィーのほとんどが、上記の原則を一つか二つは破った上で作られています。しかし、きちんと理解するまでは、ルールを破るべきではありません。

(翻訳:Ayaka Takei)

SHARE

  • お問い合わせ
  • お問い合わせ
  • お問い合わせ