エンジニアも今すぐ始めたい「タイポグラフィ」と「ロゴデザイン」
-
- 前川 裕一
- Github: kaelaela
Twitter: kaelaela31
2014年度入社。755のAndroidエンジニア。
前回、前々回に引き続き、エンジニアがデザインについて学び、身につけていくテクニカルクリエイター研修についてのレポートです。
今回は 「タイポグラフィ」 と 「ロゴデザイン」 を実際に手を動かしてやってみました。
本業としている人からみたら基礎中の基礎かもしれないですがとても勉強になる研修でした。
少しくらいエンジニアでも聞いたことがあると思いますが、今すぐ始められてなおかつ奥深いのがよかったです。
タイポグラフィ
タイポグラフィというと幅広いですが、今回の課題は自分の名前をローマ字でタイプすると自分の肩書きと所属を日本語でタイプするでした。自分が課題に対して考えたのは以下のようなことでした。- 書体・字体
- 文字の大きさ・太さ
- 行間
- 文字間
これらを考えて作ったものがこちらです。
全員の作品を貼り出して講評へと移ります。
今回、あえて文字の指定はありませんでした。それぞれの名前や雰囲気にあった文字を選べましたが、よく指摘されていたのはひらがなとカタカナと漢字と英数字のバランスを合わせて欲しいということでした。特に日本語を用意していないフォントを使用したものは、日本語の部分が別のフォントで補完されるため太さや大きさがずれてしまいます。なので日本語のないフォントでは英数字部分にあった日本語のフォントを選んだり自作したりする必要があります
フォントは沢山あるのでPCになければ探してみてください。
- DAFONT
カーニングのポイント
タイポグラフィについて少しでもわかる人ならカーニングを知っていると思いますが、実際にやってみると知らなかったこともありました。それぞれのフォントはそのまま打ち込んでみると文字間が整っていないので、そのまま使用すると読みにくい文字になります。まずは文字通しの幅を全て同じにして確認しました。今回使用したのはヒラギノ角ゴシック体です。
これを視覚的に修正していくのが基本です。ベタ打ちの状態から修正幅はこうなりました。
ですが、遠くからみるとまだ苗字より名前の幅が少しだけ開きすぎているように見えます。
基準を決める
ほとんどの場合は「基準となる文字間をどこかに決めて欲しい」と指摘されていました。
自分のものがうまくいかなかった理由もこれです。
大切なのは文字と文字の開きやすさ、詰まりやすさの組み合わせをしっかりみて決める** ことです。
文字の端が直線と曲線の組み合わせや曲線と曲線の組み合わせの時には開いて見えます。
直線と直線の組み合わせでは逆に詰まって見えます。
先ほどの例の場合、名前が開いて見えるのはYとuの組み合わせをうまく調整できていなかったためです。
頭文字の幅を調整して基準にしてから修正してみました。
何度やっても合わなくて、さらに細かい修正をしたいときはアウトライン化して微調整するようです。
文字の配置や構成のポイント
講評のために紙で印刷して提出したのですが、ほとんどの人が紙の余白を考慮して配置、構成されていないと指摘されていました。
カーニングの練習
イラレがなくてもすぐにカーニングをやってみたい人におすすめです。
- Kern Type, the kerning game
ロゴデザイン
今回は「自分のロゴマークをデザインする」というお題で各々自分の好きなものや特徴などで作成しました。僕の場合は日本酒が好きなのでお猪口に用いられる「蛇の目」をモチーフにして考えました。
作成したロゴで真っ先に指摘されたのは「日本酒というメッセージがほとんどわからなくなっている」でした。
自分ではわかるし説明すると伝わりますが、パッと見たときに相手に印象付けられないものになってしまいました。
その他にもグラフィック作品に寄りすぎたものはロゴらしく見えないということが多いです。
街でよく見るロゴには目を凝らしてみるとメッセージが含まれているものが多いです。Amazon,FedEx,Playboy,NIKE,adidasなどなどロゴに隠れたエピソードは有名でしょう。
参照: 有名ブランドロゴの歴史とメッセージ｜RAD FLAG GALLERY
これらのロゴは上と同じくメッセージを説明していません。しかし、印象に残り、或る日突然意味が見えてきたりするものです。大切なのは強いメッセージを説明しすぎず表現することです。これは非常に難しかったです。
一方で必ず意味がある必要はなくなんとなく気持ちいい、リズムがいいというのも印象に残る一つの要因となりそうです。
シンプルさとロバストネス
歴史的にロゴは時間をかけて浸透するとよりシンプルになっていくようです。
AppleやTwitterやNIKEのロゴなども今ではシンプルですが、昔のものをみるとかなり説明的でした。
ロゴは色々なものに印刷、刻印されユーザーのものに届けられるため、媒体を寄らずにシンプルであることが重要です。
また、拡大縮小などに強いロバストなデザインになっていたほうがいいです。
文字を含むロゴではタイポグラフィもまたシンプル化の一つとなります。
例えばDesignという文字をロゴにしていくとき、図のように大きさや隙間を共通化して、単純化していくことでよりロゴらしく見えていきます。
ロゴは視覚的な「言葉」である。と講義で聞いたとおり、難しい言葉が印象に残らないようにロゴもまた複雑だと印象に残りにくいです。アイデアをシンプルにわかりやすく表現できていて、遊びがあるとさらにかっこいいですね。
ですが、最初からシンプルなものを作るよりも、たくさん細部まで作ってみて、
あとから説明的すぎる部分を削ぎ落としていき洗練していくほうがいいようです。
簡単な図形ほど隙がないので、それ以上手をつけられなくなってしまいます。
まとめ
タイポグラフィ- ひらカナや漢字や英数字のバランスを合わせる
- 基準となる文字間をどこかに決める
- 文字と文字の開きやすさ、詰まりやすさの組み合わせをしっかりみる
- 印刷物への配置を考慮して配置、構成する
ロゴデザイン
- アイデアを掛け合わせて、ルールを決める
- 一度細部まで作ってみる
- メッセージは数を絞る
- 拡大縮小などしても壊れないようにする
- 隙のない、完璧なデザインにしない
説明しすぎない
人によってタイプに分かれるのですが、課題の意図をそのまま説明するものを作ってしまうことがあります。作ってみたり講評されている間に気がつくのですが、より印象的なものほど「説明しすぎない」ことが多く、スッと頭に入ってくるものが多いです。
自分のルールを守り、全体のバランスを整える
全員の作品でよく指摘されていたのは自分の作品に対するルールと全体のバランスをしっかり合わせるようにして欲しいでした。
タイポグラフィであれば行間、文字の大きさ、紙に対する配置、日本語のないフォントを使ったときの調整、漢字とのバランスなど一つ一つは気をつけているけれども、全体を通してそれらがまとまっているか、バランスを保っているかが重要です。ロゴであれば、表現の細かさ、線の柔らかさ、太さなどのバランスを整える必要があります。
「気持ちいい」は大切
見たときに自分が気持ち良く感じるかというのはとても重要です。気持ち良さは人や経験によると思いますが、リズムや色合い、配置などは誰が見ても気持ち良くなっていることを心がけたほうがいいです。
研修のあと
自分の過ごしている世界で見過ごしていた、たくさんのデザインを見つけられるようになってきました。雑誌の表紙、記事の組み方、いつも飲んでいる飲み物のロゴ、キーボードの刻印、道端の広告、色々なものが目についてきます。前回の研修でも、美しさなどの普遍的感覚をどのように身に付けるか？という質問があり、「いつも気にしていることが大切」という話がありました。少しは近づいているかもしれません。
タイポグラフィをやり始めると、発表資料はもちろんチームでの説明に使う資料もなぜか「綺麗にしたくなってくる」ようになりました。資料は相手に伝わるかが重要なので、中身さえ正しければいいと言われるかもしれませんが、言わないけど「こんなところ」って思うところも作り込んであると気持ちがいいものです。