講演レポート : 2014年12月12日 FontLovers #1 #fontloversjp : キャラクターから考えるフォント – 森賢人さん

Fontlobers #1 に関するブログ記事

  1. 「Webデザイナーでも知っているべき、グラフィックデザインとタイポグラフィの常識」生明義秀さん
  2. 「Web Typography & Material Honesty」小久保浩大郎さん
  3. 「キャラクターから考えるフォント」森賢人さん – この記事

2014年12月12日に開催された FontLovers #1 から、森賢人さんの講演レポートです。

テーマは「キャラクターから考えるフォント」です。

3つ目のセッションでちょっと集中力が切れてしまいまして、メモがとっ散らかってたり欠損していたりしておりまして、先のセッションのようにメモ書きをエントリーの中ではちょっと出しにくい感じになってましたので、感想だけを書く形にします。(ちょっと記事が短めですみません…。)


同人作品のゲーム「東方Project」を元ネタに、フォントを作成した。そして同人誌作品としてコミケでも売った……というお話でした。

森さんのプロジェクト : TOHO FONT PROJECT vol.02

発想の原点としては……

最近あまりにも擬人化やキャラ化が多すぎるように思う。

逆に、キャラクターを書体化したら、面白いんじゃないだろうか?と考えるようになった。

……ということでした。この逆転の発想を起点としてフォントづくりを始めたという経緯が、面白いなと思いました。

元ネタのキャラクターのイメージや物語を忠実に守り、フォントの中に細かい背景を盛り込んで作っていったところに、オタク度の高さやデザインへの意識の高さを感じました。

また、販促用にムービーも作成したということでした。森さんがディレクションで、動画作成は森さんの友人の方が作ったとのことでした。これがまた本格的ですごいと思いました。

Glyphs

森さんはIllustratorでフォントの図形を取り込んだり書いたりした後に、Glyphsというフォント作成ツールに取り込んでいるとのことでした。

Glyphsに関して詳しい解説の記事はおそらくこの記事(2年以上前ですが)。

» ドイツからやってきた書体制作ソフトGlyphs Toshi Omagari

また、2011年にはこういう記事もありました。

Glyphs / Glyphs Mini — “誰でも使える”全く新しいフォント制作ソフト – フォントブログ

Mac用のソフトで、2万円台くらいの価格で購入できるものらしいです。また、廉価版で4千円台で買える Glyphs Mini というものもあるみたいですね。


参考リンク

講演メモ : 2014年12月12日 FontLovers #1 #fontloversjp : Webデザイナーでも知っているべき、グラフィックデザインとタイポグラフィの常識 – 生明 義秀(あざみ ぎしゅう)さん

Fontlobers #1 に関するブログ記事

  1. 「Webデザイナーでも知っているべき、グラフィックデザインとタイポグラフィの常識」生明義秀さん – この記事
  2. 「Web Typography & Material Honesty」小久保浩大郎さん
  3. 「キャラクターから考えるフォント」森賢人さん

2014年12月12日に開催された FontLovers #1 から、生明 義秀(あざみ ぎしゅう)さん( @g_azami )の講演メモです。

テーマは、「Webデザイナーでも知っているべき、グラフィックデザインとタイポグラフィの常識 」です。

メモは箇条書きで書いております。

(※ もしかすると後日加筆、修正する場合もあるかもしれません。予めご了承ください。)

(※ 小久保さん、森さんのセッションは後日記事としてアップする予定です。)


まずは、寄稿したある記事について。

まずは、この記事をご覧になったことはありますか? ……

記事: CSSでのフォント指定について考える(2014年) – DTP Transit

Webのデザインという以前に、Font-familyってどうしてたのよ? そんなんでいいのか!?

ブラウザによって表示が違う。名前つけなくちゃいけない。表示どうなるの?WindowsとMacで入っているフォント違うじゃん。

……そういう事もあって、私(※生明さん)が徹底的に調べて、このブログに寄稿しました。

伝わる情報を「表現」するには、何が必要か?

最終的なフォントの目的 = 伝えたい情報があるから

伝えたい情報をちゃんと読んでもらうために。本来それには何が必要?

  1. コンセプト(テーマ、ポリシー)
  2. 理論、技法(セオリー、テクニック)
  3. ツール(操作方法)

なお、デザインの勉強 = アプリケーションツールの勉強 ……ではない!(もちろん頭の中にあるものを具現化するには、必要な勉強の一部ではあるが)

今日の話は 2. の理論、技法について話します。

グラフィックデザインの4大原則 = 要素間における相対的な関係性の理論

グラフィックデザインの4大原則 = 要素間における相対的な関係性の理論

  1. 近接
  2. 整列
  3. 反復
  4. コントラスト

フィールドに対するアプローチ

デザイナーは「なんとな〜〜く」で要素を配置しない。

アートボードの中の位置の関係性を追求して、配置する場所を探す。

クライアントさん等とかに『どうしてその位置なんですか?』と言われた時に、答えられるようにできなければならない。理由がある。ビジネスである以上『なんとなく』という答えはできない。

近接

隙間がほとんど等間隔で配置されている…… (NG)

隙間に差を付ける。

近づけるということは離すということ。

何ミリ・何文字空ければいいの? → 実は決まっていない。隙間が空けばいい。ホワイトスペースという。

整列

真ん中に揃えるのが安心する…… (NG)

左揃え、右揃え、中央揃え。

中央揃えなんて滅多に使わない。左揃えがほとんど。

「見えない線」はデザインの命。

中央揃えはシンメトリー = 安心・安定感・威厳を感じさせるから、ついつい素人さんは使いがち。

反復

近接関係の感覚のリズムは、必ず同じリズムの感覚で。

反復で整えるのは、最初に説明した3要素の「コンセプト」を体現させることにもつながる重要なことである。

イレギュラーを極力さける。(もしやるなら大胆にやる)

コントラスト

見出しを大きくする。フォントウェイトも高める。

文字のサイズや色に、「差」をつける = コントラスト

各要素のアプローチ

(※ 生明さんがデモで4要素(反復を除く)の実例を見せました。以下は何を書いているのか文脈がわかりにくいかもしれませんが、メモをそのまま出します。)

近接

文字間(カーニング)を開く。縮める。

整列

右揃えの例

コントラスト (※ 見せる順番を変更)

要素別に異なるフォントウェイトを組み合わせる。

フォントサイズ

反復

一度出ているキャラクター(要素)を、別の形で再利用する。

何かを増やす場合、既存のものを複製して盛り込むと、4要素のルール的にもつながりが持てて、いい感じになる。

書体について

だいたい4種類におさまる。

  • serif(セリフ体/明朝体)
  • sans-serif(サンセリフ体/ゴシック体)
  • script(スクリプト体/行書体)
  • (上記以外) decorative デコラティブ系。デザイン書体。その他。

こんな使い方はよくない。(※ 下記リンクのURLは生明さんの紹介ではなく筆者が後から探したものです。)

コンセプトにかなうフォントを使用しよう。

フォントのキャラクター

同じ種類で異なる書体は、混在させない方がよい。

全く違い種類のフォントや、異なるウエイトを組み合わせて、コントラストの効果を狙う。


感想

主にフォントの書体とテキストレイアウトについての基礎的なところのお話だったと思いました。

基礎ではあるものの、こういうところこそ非常に大事であり忘れてはいけないポイントなので、良い復習になったと思いました。

そしてこういったものは、決してセンスや才能とかではなく、覚えようと思えば誰でも覚えられるロジカルなものでもあると思います。たとえ肩書き的に「デザイナー」と名乗るつもりがなかったとしても、覚えておいて損は無いものだろうと思いました。


参考リンク