9/24(Sun)
本記事では、タイポグラフィついて学んでいきます。文字選びの理論を学んで一段上のデザイン力を手に入れましょう。
※この内容は東洋美術学校の丸山 貴明先生・中村 将大の「明日から使えるデザイン基礎理論【配色、タイポグラフィ、レイアウト編】」を基に作成しています。
■目次
1. タイポグラフィってなに？
2. 文字の選び方で重視することは3つ
（1） 書体はシチュエーションに合わせよう
（2）サイズ・ウェイトはヒエラルキーを決めてから
（3）デザイン力は字間／行送りの調整で決まる
“タイポグラフィは、活字（あるいは一定の文字の形状を複製し反復使用して印刷するための媒体）を用い、それを適切に配列することで、印刷物における文字の体裁を整える技芸である。”（wikipedia「タイポグラフィ」より引用）
世界的に知られるデザイン会社、Information Architects Inc.では、
Web Design is 95% Typography Webデザインは、95パーセントがタイポグラフィだ！
と言われるほどWebデザインにおいてとっても大切なものです。
デザインはあくまでも情報を伝達のためにあります。それはタイポグラフィにおいても同じです。自分の伝えたいことに応じて適切なものを選びましょう。いざ文字を選ぶ時、どういった基準で選んだらいいのか分からない人は、書体、サイズ、ウェイト、字間／行送りの4つのポイントに注意してみましょう。
世の中には多くの書体がありますが、今回は和文書体を大きく2つ（セリフ体とサンセリフ体）に分けてみていきます。
(引用 明日から使えるデザイン基礎理論【配色、タイポグラフィ、レイアウト編】)
セリフ体 例；ローマン体、明朝体
(引用 明日から使えるデザイン基礎理論【配色、タイポグラフィ、レイアウト編】)
セリフとは、文字のストロークの端にある飾りのこと。明朝体だったら、習字のようにとめはねが分かる飾りのことです。メッセージカードに使われるような欧文書体もセリフがありますね。ちなみににこの飾りのこと、うろこやひげ、ひげ飾りなど呼び方は色々です。書籍に用いられているので、馴染みがあり、可読性にも優れています。
サンセリフ体 例：ゴシック体
(引用 明日から使えるデザイン基礎理論【配色、タイポグラフィ、レイアウト編】)
こちらはセリフ体と対照的でセリフがない文字を指します。フランス語で「サン」は「〜のない」という意味をさすことから、サンセリフ体と言うそうです。文字の太さが一定で、タイトルや見出しなど協調したい文字に使われることが多いです。近代的な印象を受けますね。
では名刺を例にサイズについて考えてみましょう。もちろん、作りたいものによって大きさは変わりますが、大切なのは限られたスペースの中で、どの情報に重きをおくのか、ヒエラルキーをはっきりとすることです。
名刺で伝えるべき情報は、①名前＞②肩書き＞③住所、連絡先の順番ですね。
(引用 明日から使えるデザイン基礎理論【配色、タイポグラフィ、レイアウト編】)
しかし、上記のこちらの名刺だと、文字がすべて同じ大きさ。何が重要なのか分かりません。
(引用 明日から使えるデザイン基礎理論【配色、タイポグラフィ、レイアウト編】)
続いて上記のこちらの名刺、本来伝えるべき情報の名前よりも他の情報が目立ってしまっています。
(引用 明日から使えるデザイン基礎理論【配色、タイポグラフィ、レイアウト編】)
上記の名刺はヒエラルキーにそって大きさを決めた名刺です。これこそが、伝えたい情報の重要性を表現できた名刺です。サイズの違いでうまく情報の重要度を表せていますね！
続いては文字と文字のスペースについてみていきます。細かい調整ですが、ここまでしっかり出来ているとぐっとデザインの質が上がります。
例えば下記の文字。普通にパソコン上で文字を打っただけでは、「仮想ボディ」という正方形ボディに文字が配置され、このように画数の多いの漢字と漢字の間は狭く、ひらがなやカタカナなど画数の少ないものとの間はスペースが広く取られてしまいます。
(引用 明日から使えるデザイン基礎理論【配色、タイポグラフィ、レイアウト編】)
ウェイトとは、文字の太さのことです。先ほどは、サイズで情報の重要性を表現しましたが、実はウェイトでも情報のヒエラルキーを操作することが出来ます。一般的には、強調したい部分のウェイトを太くしたり、逆に強調したくない部分のウェイトを細くしたりすることで伝える情報のヒエラルキーを操作するそうです。
(引用 明日から使えるデザイン基礎理論【配色、タイポグラフィ、レイアウト編】)
これらを文字に合わせて字間を調整するとこのようになります。
(引用 明日から使えるデザイン基礎理論【配色、タイポグラフィ、レイアウト編】)
ただの字間ですが、だいぶ読みやすくなりますね。ただ均等に配置するといっても、字間を広くするか狭くするかで違う印象を見せることが出来るので、是非試行錯誤してみてくださいね。
(引用 明日から使えるデザイン基礎理論【配色、タイポグラフィ、レイアウト編】)
行間とは、行と行の間のことですが、この行間と次の行の文字までを入れたものを行送りと呼びます。一般的にこの行送りのサイズは文字サイズの1.5倍から2倍と言われています。行間だけでみると、文字の半分から同じ大きさの分スペースが空いているということになります。こちらも字間と同じく、大きく印象を変えることが出来ますので、読みやすさと表現をしっかり考えて、理論的に決めましょう。
たかが文字されど文字。タイポグラフィの重要性について理解していただけましたでしょうか？
Webデザインにおいてとっても大切なタイポグラフィを極めて、理論を意識しながらデザインして、比べてみてくださいね。
デザイナーにとって必須なスキルであるIllustratorに興味のあるあなたにIllustratorを学ぶための授業3選をご紹介します！これらの授業を通じて、具体的にIllustratorの基礎知識から、WEBサイトのデザイン方法について理解することができます。ぜひこれらの授業を受講し、Illustratorに関する知識を身につけましょう！
本授業はIllustratorをこれから使えるようになりたい、もう一度基礎から学びたいという入門者の方向けの授業です。基本操作、オブジェクトの操作・変形について、Adobe認定インストラクターのまきの ゆみ先生と学んでいきましょう。
本授業では、初心者向けにWebデザインの基礎をおさえながら、IllustratorCCとPhotoshopCCの両方を使ったデザイン方法を学んでいきます。両アプリケーションの基本的な設定から、コーディングの一歩手前までを実践形式でレクチャーしていくので、手を動かしながらデザインを完成させましょう。
この授業では、普段何気なく手にしているショッパー(商品と一緒にお客様に手渡す紙袋)の担う役割や効果、Illustratorを使用したショッパーの制作方法について学んでいきます。
ショッパー制作には、立体物ならではの機能面を意識したり、より印象的な色、素材、印刷技法の選定など紙媒体とは少し違った視点が求められますが、実例紹介や実際の制作過程の解説を交えながら実際に制作していきましょう。
いかがでしたでしょうか？
これらの授業を受講することで、Illustratorに関する基本的な知識を身につけることが出来るでしょう。さらに、これらの授業を通じて、自身がこれからIllustratorをどのように実践に移していこうかを考えることも出来たのではないでしょうか？
スクーではこれら3つの授業以外にIllustratorに関する授業を多数開講しています。ぜひスクーでさまざまな授業を受講し、Illustratorに関する知見を深めていきましょう！
