Instagramなどでよく見かける文字のデザイン。
センスの光る作品を見て、自分も作ってみたい!と思う方もいるかもしれません。
今回は、文字をデザインする「タイポグラフィ」の意味、初心者向けの作り方やデザイン例・学習方法を紹介していきます!
目次[ 表示 ]
タイポグラフィとは?

文字を読みやすくデザインしたもの

引用:haconiwa
タイポグラフィは、活字の配列を意味する印刷・デザイン用語で、個人が自由に書体やレイアウトを決め、文字をデザインしていくことを指します。
タイポグラフィは「デザイナーの基本」とも言われていて、デザイン系の学校に通っている方は授業の一環で取り組むことが多いようです。
タイポグラフィを用いることにより、イラストが苦手な人やデザイナーでない人でも、相手に伝えることの出来る情報量を高めることができます。
デザイン未経験でも作れる?

デザインに必要なタブレットやペン、パソコンに接続するペンタブなどを用意できれば、デザイン初心者の方でも簡単にタイポグラフィを作ることができます!
いきなりデザインを決めるのは難しいので、裏紙などに手描きラフを作成し、自分の作りたいイメージを具体化させてから制作すると良いでしょう。
【はじめてのタイポグラフィ】超初心者向けタイポグラフィの作り方

タイポグラフィの作り方
タブレットを使って、タイポグラフィを制作していく手順を紹介します。
タイポグラフィを作るには、以下3つのステップを踏む必要があります。
①手描きラフ(下書き)を制作する

引用:デザナビ
自分がデザインしたい文字を思い浮かべたら、紙やイラストアプリに、手描きラフ(デザインの下書き)を作成していきます。
上の写真のように「大体こんな感じ」というイメージを、何パターンか描いていきましょう。
タブレット端末を利用する場合、「コンセプト」というアプリがおすすめです!
ラフを紙に描いた場合
①紙を用意する
②紙にデザインの下書きを描いていく
③スマホのカメラで紙を撮影
④写真をパソコンやタブレットに送る
ラフをイラストアプリで描いた場合
①イラストアプリを開く
②デザインの下書きを描いていく
③作ったデザインを端末に保存する
②イラストレータに取り込み、ガイド線を引く

引用:SmaBiz!
先ほど作成した手描きラフを、「adobe Illustrator」というアプリに取り込み、ガイド線を引いていきます。
定規などを使わず、手で描いたラフをそのままトレースしてしまうと、ガタガタになりやすいので、高さや幅を揃えるためにガイド線を活用してみましょう。

引用:デザナビ

引用:デザナビ
③線の太さや間隔などを微調整(ブラッシュアップ)

引用:はたらくビビビット
引き続き、「adobe Illustrator」を使って、線の太さや間隔などを微調整しながら、デザインに磨きをかけたら完成です。
タイポグラフィを作るときの注意点
簡単な手順で作成できることは分かりましたが、「あれもこれも付け加えたい!」と装飾しすぎてしまうと、見づらいデザインのタイポグラフィが出来上がってしまいます。
文字を読みやすく、おしゃれにデザインするには以下3つのポイントを抑えておく必要があります。
①適切な配色を行う
全て同じような色で構成してしまうと、どの部分を伝えたいのかが不明瞭になってしまいます。
伝えたい文字の部分を濃い色にしたり、文字から柔らかい印象を与えたい場合は、寒色ではなく暖色を中心に配色を設定したりするなど、工夫していく必要があります。
②余白を作る
行間だけでなく、文字同士の間隔を適度に調節することが必要です。
一般的に150〜190%が読みやすい行間と言われています。
③1~2種類のフォントに抑える
文章系のフォントを作る場合ですが、1~2種類のフォントに抑えることで、可読性の高さを保つことができます。
逆に、イラストのようにタイポグラフィを使用する際は、伝えたい雰囲気に沿ってフォントを選択したり、デザインすることが重要です。
タイポグラフィのデザイン例5選

実際にデザインする前に、どのようなデザインがあるのかを見ておきたいですよね。
ここでは、毎週変わる1つのお題を、各曜日の担当デザイナーが日替わりで作字する、
「日刊タイポ」のデザイン例を紹介します。
『なんでも』

引用元:Instagram(@nikkantypo)
黄色・赤・緑・ピンク・青の5色を使って作られた、ポップな雰囲気のタイポグラフィです。
ぎっしり・むっちり感がたまりません。
『扇風機』

引用元:Instagram(@nikkantypo)
扇風機の羽の部分に、昭和家電のパッケージにあるような、どこか懐かしい雰囲気のフォントの漢字を当てはめたデザインです。
『鏡』

引用元:Instagram(@nikkantypo)
鏡の漢字自体が、鏡を見ているという、面白いデザインのタイポグラフィです。
余計な色を使わず、シンプルな配色でまとめられているのがポイントです。
『花束』

引用元:Instagram(@nikkantypo)
まるで昭和30~40年代のティッシュペーパーのパッケージに起用されていそうな、どこか懐かしさを感じる文字フォントです。
デザイン性が高いのはもちろん、可読性も担保されている点に、デザイナー魂を感じます。
『確定申告』

引用元:Instagram(@nikkantypo)
面倒くさいけど、いずれはやらないといけない「確定申告」をテーマにしたタイポグラフィです。
文字の間の余白を少なくすることで、見る人に「圧」を感じさせることができます。
タイポグラフィデザインの学習方法

ここでは、タイポグラフィを効率的に学ぶためにおすすめの書籍・動画コンテンツを紹介していきます。
書籍
『タイポグラフィで魅せる広告デザイン』

引用元:Amazon
想像力をかきたて、注目を集めるための工夫がなされた文字造形を含む、近年の広告デザイン事例を300点以上紹介した本です。
タイトルやコピーに鮮烈な印象を与え、効果的にメッセージを増強させるためのヒントが沢山記載されています。
『The Graphic Language of Neville Brody』

引用元:Amazon
ザ・フェイスやアリーナのアートディレクターとして80年代~90年代に活躍した、ネヴィル・ブロディの作品集です。
オリジナル書体がふんだんに使用されたデザインや、他にはない画期的な視覚表現を学ぶことができます。
『タイポグラフィ・トゥデイ』

引用:Amazon
ゲルストナー、クロウエル、ルバーリン、杉浦康平、ワインガルトらにいたる達成を俯瞰し、モダン・タイポグラフィのさまざまな精神や文脈をヴィヴィッドに伝える本です。
タイポグラフィの歴史的背景が気になる方におすすめです。
動画
AdobeCreativeStation

引用:YouTube
アドビからCreative関連の製品情報、並びに使い方や制作のヒントなどの動画を配信しているチャンネルです。
illustratorの仕様手順や、タイポグラフィ制作について解説している動画があるので、学習に最適なコンテンツを見つけてみてくださいね。
水鳥ナヲ

引用元:mojimo
現実逃避でバーチャルの世界に転がりこんできた、デザインと音ゲーとお酒が大好きなデザイナーさんです。
フォントデザインの制作風景を動画にしているので、是非参考にしてみてください!
オリジナルのタイポグラフィを作ってみよう!

タイポグラフィの作り方やデザイン例、学習方法についてご紹介しました。
一からデザインするのは難しい!と思う方は、既存のフォントやおしゃれなサイトを参考にしてみるのもいいかもしれません。
是非一度、自分なりの「タイポグラフィ」を制作してみて下さい!