5月24日開催『DESIGN for Innovation 2017-デザインが経営を加速させる-』詳細はこちらから>>

freshtrax

ビートラックスがサンフランシスコから最新情報を配信中

  • Brandon K. Hill

    Brandon K. Hill

    CEO of btrax, Inc

    CEO of btrax, Inc - Design Mentor to Startup Weekend - Contributor to TechCrunch Japan - Guest Speaker at UC Berkeley Asia Business Conference - Guest Speaker at Social Media Week Tokyo - Guest Speaker at 500Startups Japan Day

  • → 記事一覧

    • このエントリーをはてなブックマークに追加
    • follow us in feedly
  • Jul 1, 2014

main-img

タイポグラフィ入門 – 10のやってはいけない事 –

良いデザインを作り出すには、クリエイティブである事以上に、基本的なデザイン理論とルールを理解する必要がある。言い換えると、デザインのルールを理解し守っていれば、ほとんどの場合悪いデザインにはならない。逆に、基本的なルールを無視した場合は、急にクオリティが下がってしまう。そのようなデザインはプロの目から見ても一目瞭然である。実際にデザイナーを面接する際には、「何が出来るか」よりも、「やってはいけない事を理解しているか」を重要視する。

そんなデザインにおいて、最も重要な要素の一つが、文字要素を扱ったタイポグラフィーである。以前に紹介した、ミニマルデザインの記事や、フラットデザインの記事でも、タイポグラフィーの重要さが説明されている。

フォント選びや、サイズ、スタイル、文字組、行間等をルールに従い、上手に組み合わせる事で、例え ”絵” が描けなくても、タイポグラフィーをベースとした、かっこ良いデザインを作り出す事が可能になる。そんなタイポグラフィーは、デザインの基本中の基本でありながら、実は奥が非常に深い。優れたタイポグラフィーは、そうでないものに比べ、相手に伝える事の出来る情報量とその濃度に大きな差が出る。

タイポグラフィーに関する10のルール

下記の10の基本的なルールを守っていれば、デザイナーはもとより、たとえデザインセンスが無いと思っている非デザイナーの方でも、美しいタイポグラフィーデザインが実現可能になる。

 

1. 利用するフォントの種類が多過ぎる

最も多いミスの一つ。色々なフォントを試してみたいが故に、一つの要素に思わず過剰な種類のフォントを使ってしまう。これにより非常に読みにくくなり、メッセージが伝わりにくくなる。利用するフォントはなるべく3つ以下に抑えたい。
1

2. 行間スペースが狭過ぎる

文章が複数行になる場合、十分に上下の行間のスペースを設けたい。スペースが狭過ぎると、とたんに読みにくくなってしまう。
2

3. 背景が複雑な画像で文字が読みにくい

どんなにかっこ良いデザインだったとしても、文字を読み取る事が出来なければ意味が無い。写真を背景に設定し、その上に文字を載せるパターンがあるが、その場合は文字の可読性を保持する事。
7

4. 文字要素の周りの余白が足りない

デザインをするさいには、デザイン要素自体に加え、その周辺の余白の分量が非常に重要になる。タイポグラフィーにおいても、読みやすさとデザイン性を確保する為に、文字要素の周辺に十分な余白を与える事でメリハリを出す事が出来る。
3

5. 文章のアライメントがズレている

アライメント (文字寄せ) はタイポグラフィーの基本中の基本であるが、これが意外と出来ていないケースが後を絶たない。特に上と左が少しでもズレている場合は、一気に興ざめ。
4

6. 本文に読みにくいフォントが使われている

見出しやアクセント部分にユニークなフォントを利用するのは良いが、本文の部分にあまりデコレーション系の特徴的なフォントを利用すると、無駄なデザイン性が単純に文章を読みにくくするだけ。
5

7. 見出しと本文の文字サイズのバランスが悪い

情報のヒエラルキーを意識し、見出し、小見出し、そして本文部分、それぞれの役割に合わせた文字サイズとスタイルを適用する事で、より効果的に情報を伝える事が可能になる。
6

8. 文字量の多い本文のセンター合わせ

複数行に渡る文章レイアウトを作成する際にセンター合わせを採用するのは要注意。読みやすさが損なわれてしまうケースがほとんど。アクセントとして文章内の一部だけをセンター合わせにするのは問題無い。
8

9. 類似フォントの同時利用

HelveticaとArial, GaramondとTimes New Romanなど、かなり似ているが微妙に異なるフォントを同じエリアに並べてしまうと、ミョーな”ニセモノ感”が出てしまい、デザインにメリハリが無くなってしまう。そんな時はスタイルが大きく異なるフォントを合わせたい。
9

10. 文字を引きのばす

そして最もやってはいけない事として、”文字の引きのばし”がある。そもそもフォントは、デザイナーが心血を注ぐ事で、最も美しいプロポーションになっている。したがって、それ自体がデザイン要素として完結している。それを無理矢理縦や横に引きのばすのは、十中八九の場合御法度。
10

 

まとめ

優れたデザインを生み出したければ、まずはルールを守る事。英語で”Break the rule only when you know the rule. (ルールを破るのであれば。まずはそれを理解してから)“という表現があるが、奇抜なデザインを求める前に、まずはルールに従うことで、”正しい”デザインをしてみよう。タイポグラフィーの場合は、第一に読みやすさ、その次に文字要素から伝わってくるメッセージや雰囲気を大切にしたい。

タイポグラフィーは文字に生命を吹き込み、そこに書かれた言葉以上のメッセージを伝える。

 

筆者: Brandon K. Hill / CEO, btrax, Inc.

【5/24イベント開催のお知らせ】DESIGN for Innovation 2017

〜デザインが経営を加速させる〜
5月24日 @Nagatacho GRID

■ btrax (ビートラックス) 社について■

btraxはサンフランシスコを拠点とし、世界の市場をターゲットにデザインソリューションで3つのサービスを提供しています。

  • Global Design Consulting
    世界市場に響くデザインソリューションでビジネスのグローバル展開をサポート
  • Innovation Booster 
    グローバル人材育成から新規事業開発までイノベーションに関するノウハウとメソッドを提供
  • D.Haus
    人と技術をデザインでつなぐコミュニティ型ワークスペース

私たちはイノベーションを創造し社会に新たな変化をもたらすことを社会的使命とし、お客様に最良のパートナーとして選ばれることを目標にこれからも挑戦し続けます。

btraxホームページ
btraxブログ「freshtrax
tokyo@btrax.comまでお気軽にお問い合わせください!

 ib-banner 

Like us on Facebook

Scroll to top

シリコンバレーから最新情報をゲット!

 

btrax-logo-100

サンフランシスコに本社を構えるクリエイティブエージェンシーbtraxのニュースレターに登録して最新の情報をいち早くゲットしませんか?

 

・オウンドメディアfreshtrax 今月の注目記事

・CEO Brandonの無料オンラインセミナー情報

・最新サービス・現地イベント情報

 

Subscribe!
Twitterで共有
Facebookで共有
はてなブックマークに追加
pocketで共有
Lineで共有