グラフィックデザイン超入門(イラレ講座)
改定:2020/11/24 ver.2 デジタル時代のタイポグラフィ追記
日時:2018/11/12(月)10:40-
場所:お茶大椎尾研
はじめに
イラレの使い方がよくわからない,論文や発表資料の図をもう少しだけデザインを意識したものにしていきたい,との要望がありましたので,イラレ講座(グラフィックデザイン超入門)をお話したいと思います.
本ページでは,論文や発表資料を今よりも少しだけかっこ良くするためのノウハウを伝授します.
デジタル時代のタイポグラフィ
1980年代に登場した「Macintosh」が登場したことで,DTP(Desktop Publishing)「DTP革命」が到来
文字は「フォント(Font)」という形でコンピュータの中に搭載され,書体や文字の大きさ,組版までがデータとして制作可能になりました(それまでは活字や写植の職人さんが組版のノウハウを持っていました)
InDesign(Adobeの組版ソフト)の登場により,ページ構成しながら書籍1冊を制作できるように進化
理想的な文字組のデザインを追求することができるようになった(誰でもできる)反面,禁則処理等の組版ルールもデザイナー自身が理解し,解決しなければいけなくなった 禁則処理の例:「行頭禁則」・「行末禁則」・「分離禁則」
1891年,ウィリアム・モリスは「ケルムスコット・プレス」を立ち上げ,活字を自ら設計し,数々の美しい書籍を出版した
文字や書籍を取り巻く環境は日々進化している(らしい)
グリッドシステムについて
グラフィックデザインの基礎テクニックの一つとして,レイアウトを行う際に,架空の縦横線を引き,その線に沿って文字や図を配置する方法をグリッドシステム(以下,グリッド)と呼びます.
https://gyazo.com/7ad6a112dfe33d7582aa20aff2d6858e
グリッドを考案したのは,スイスのグラフィックデザイナーのJosef Mueller-Brockmann(ヨゼフ・ミューラー=ブルックマン)氏です.
DTP(DeskTop Publishing)デザインする人は必見の本です.
最近では印刷物のみならず,Webデザインにもグリッドが採用されています.UIフレームワークが台頭してきたことで,誰でも簡単に綺麗なデザインが作れるようになりました.
採用するメリット
可読性・視認性が高まる
コンテンツを整理することができる
デザインを階層化しやすい
テキストをデザインしやすくなる
発表資料を見やすく・わかりやすくしてみよう
パワポでもグリッドを考えてみましょう
標準(4:3)は縦3分割程度が妥当かなと思ってます.(下のサンプルは大体3分割)
最近良く使われるワイド(16:9)だと,縦4分割ぐらいが妥当なサイズだと思います.
https://gyazo.com/b5c49006f4c4dcc12aed8aa8de2d5eea
発表資料に入れるべき要素を整理してみましょう
タイトル
小見出し
詳細な説明等
発表資料の中は文字で埋め過ぎないようにすること(ビジュアルに伝えるために図を活用する)
説明するときに絶対に必要な「キーワード」を入れておくこと
一言で言うと?を考えながら資料を作ってみる
ページ番号
ワンポイントアドバイス
上下左右には必ず余白を入れましょう
プレゼン資料で使うフォントはゴシック体かサンセリフ体にしましょう
https://gyazo.com/95cee2e680fe68398339d49439cc4432
プロジェクタは解像度が低いので,明朝体は読みにくくなってしまいがち(横線が細くてかすれてしまう)
https://gyazo.com/725c86ea6821df6e7ed1ca645a4a535e
オススメフォント:メイリオ(Win),ヒラギノ角ゴシック(Mac)/英語はHelvetica一択
某社のデザイン部門の資料には必ず「メイリオ」が採用されていました.
オススメサイズ:タイトルは30pt以上,本文は20pt以上(少し強調したい文字は24pt以上)
table:各画面の最小フォントサイズ(推奨)
サイズ 最小サイズ
標準(4:3) 20pt以上
ワイド(16:3) 20pt以上
文字の開始位置をグリッドに揃えましょう
背景色が白色(#FFFFFF)の時は黒色(#000000)を使わない方が良かったりします
白と黒のコントラストは強すぎるので,少しだけ灰色(#151515等)にして,目に優しい配色にしましょう
1画面内に入れる色は最大3色まで,を意識すること
文字の基本色・・・説明等の文字色.黒やグレー等
メイン色・・・資料全体のイメージカラー.タイトルや小見出しで使用する
強調色・・・キーワードや重要な文言に使う色.メイン色と補色になる色を使うと目立つ
色を付けるときには意味を持たせて下さい(主張したいところにだけ色を付ける等)
補色がわからない人はマンセル色相環を参考にして下さい。
彩度や明度が近い補色を使用すると,目に優しいデザインになります.
https://gyazo.com/b24580d76506aa1c8ffc2211e6efb7d7
強調するときの文字の装飾は誇張しすぎないように注意すること
太字にして下線も引く,みたいなデザインを良く目にしますが,どちらか一つでも十分に強調できます.
イラレを使って図を作ろう
様々な図形を組み合わせて,イメージを形にしてみましょう
参考になりそうな図が見つからなかったので,希望があればお見せします.(か,その場で何か描きます.)
ワンポイントアドバイス
図の縦横は黄金比(1:1.618)を使ってみよう
写真だけを使う場合も,黄金比にした方がしっくりしたデザインになると思います.
トレーストレーストレース!
イラレを使ってポスターを作ろう
ポスターでもグリッドを使います
参考画像はA3サイズのポスター作成時のグリッドです.A3サイズのポスターも,縦3分割程度が妥当かなと思います.
https://gyazo.com/a62c65661c49e1fbd693c57720bdec5a
ワンポイントアドバイス
レイヤーの考え方はデザイナーやデザインルールによって変わるので,あくまで私見のアドバイスになります.
title:研究タイトルと所属を入れる
contents :説明を入れておく.内容に応じて複数のレイヤーを作っても良いと思います
background:背景,基本的にはロックして使う.このレイヤーにグリッドも入れておくと便利
最低限,backgroundとcontentsが分かれていれば作業しやすいと思います.
ちなみに,Webデザインの場合は,大抵の場合SASSに準拠して作成します(会社員時代はSASS+BEM を頻用していました) SASSを採用した場合のレイヤーの分類例:Header,Footer,Text,Icon,Images,Button,Background
ポスター内に画像を入れる時は,最終版では無い限り,画像の配置を活用してください
画像を埋め込んでしまうと,イラレファイルが重くなる可能性が高まる&修正が効かない場合が多いです.
配置にしておくと,画像のパスだけしか参照しないので,修正したファイルを再読み込みするだけで簡単に修正できます.
まとめ
研究と同様,沢山作り,他者に見せ,見識のある人から講評を受け,リフレクションしながら長い時間をかけて技量を養っていくのが必要です.
かっこいいデザインを見つけたらまずは真似る.真似てから自分流にアレンジしていって下さい.
余談:グラフィックデザインを極めてみたい人へ
現在の作品はほぼ全てがイラレで作られているので初心者でも簡単に真似できそうなものですが,「似て非なるもの」になるはずです.
少しずつ良い作品が「目が見えはじめる」とともに,自然にグラフィックデザインの表現も「良いものに」なってくるはず,と昔指導されたのを思い出しました.
良いデザインを「理解できる」のと,良いデザインを「作れる」というのでは天と地ほど違います.
参考書籍・サイト
Josef Mueller-Brockmann: Pioneer of Swiss Graphic Design
ヨゼフ・ミューラー=ブロックマンの作品集です.どのデザインも整然としててめちゃかっこいいです.
デザインする技術 ~よりよいデザインのための基礎知識, 矢野りん