「デザイン解体新書」から学ぶ文字のデザイン

Webサイト・雑誌・広告など媒体問わず、情報を伝えるのに欠かせないのは、「文字」です。

プロジェクトやクリエイティブごとのコンセプトに合わせて、文字を選択し制作していくと思いますが、いざ選んだ「文字」について説明を求められたときに、答えに詰まってしまった経験はないでしょうか?

 

私も同様に文字の扱い方について、初めは理解が足りておらず、そんなときオススメしてもらったのが「デザイン解体新書」でした。

今回は「デザイン解体新書」を参考に、文字についてきほんを紹介します。

おさらい 文字のきほん

文字というとやはり様々な書体を思い浮かべる人も多いかもしれません。

しかし書体について知っていく前に、文字そのものについて、きほんのきほんをおさらいしてみましょう。

仮想ボディと字面

文字には、仮想ボディと字面の2つの要素があります。

字面の大きさは、書体によって異なり、かな文字は漢字よりもやや小さめに作られることが多いです。

この字面の大きさによって、文字間の見え方が大きく変わるため、見える印象も異なるものになります。

字面が揃っていれば、整然と見え、字面に緩急があれば、文字が読みやすい、と言った風です。

書体の特徴をよく知る

そこで、書体ごとにどのような特徴があり、字面をしているのか、確認してみました。

「デザイン解体新書」では、書体の特徴を主に2つに分類分けしています。

スタイル

Old style (例 リュウミンKO、太ゴB101、イワタ明朝オールド)

漢字とかなの濃度が同じ。

短く折り返す、横組み本文などに適す。

癖が強く、小さい級数だとかなが目立つ。

 

New style (例 新ゴ、AXIS、ゴシックMB)

小さい級数だと、ヌケ感があるため可読性があがる。

 

字面の差

大がな (例 新ゴ、AXIS、ゴシックMB)

横組み本文、行長の短い縦組み、箱組みに適している。

小級数での文字組みに適さない。

 

小がな (例 リュウミンKS、游明朝体、筑紫明朝、セザンヌ)

文字組みに抑揚がつき、本文で読みやすい。かなが小さい分、行間が広く見える。

タイトル組みのように大きく扱う場合、調整詰めしないとぱらついて見える。

 

様々な書体が数多くありますが、この分類分けが頭に入っていれば、書体を選ぶ際にどこに属する書体なのか見当をつけやすくなります。

また、書体ごとの特徴がわかると、なぜ自分がこの書体を選んだのか、説得力を持って説明することができそうですね。

実際に比べて見た

大がなフォントと小がなフォントを本文サイズで比べてみました。

ひらがなの「の」などを見てみると、漢字とひらがなで字面の差の違いがはっきり分かると思います。

新ゴに比べて、ヒラギノや游ゴシック体の方が同じゴシック体でもヌケ感があり、読みやすく感じますね。

Mac/iOSの標準フォントとして使われているヒラギノ角ゴは、癖も少なく、色々なWebサービスでも頻繁に使用されているのを見かけます。

まとめ

今回のテーマは、文字・書体について知るでした。

「デザイン解体新書」は10年前以上前に出版された本ですが、文字についての考え方は今のデザインにおいても変わらず、参考にできそうなポイントが多数ありました。

書体をよく知ることで、今、人気のあるフォントにはどんな特徴があって、どんなデザインに向いているのか、分析しやすくなったと感じています。

Web上で使用できるWebフォントも日に日に増えているので、特徴をしっかりと踏まえて、使いこなせるようにしていきたいですね。

辻 蒔菜

辻 蒔菜

東京造形大学でWebデザインやWebプログラミングなどの基礎的な技術を習得。映像メディア表現、インターフェースデザインなどについても学ぶ。在学中は地域活性化のためにきぐるみの中に入って子供とたわむれたりしていた。 2017年4月に新卒でbasicに入社後、CIを始めとしたデザインを担当している。 アリクイ好きが高じて、家にアリクイグッズが増えつつある。

Recommend Articles

1

バナーのデザインで悩んだ時に参考にしたい5つのパターン

簡単なようで難しいバナーをデザインすることって難しいですよね。小さいスペースに必要な要素を入れなければならないので、悩んだことがある方も多いのではないでしょうか?この記事ではバナーデザインを取り上げるだけではなく、どんなところが参考になるのかを合わせてご紹介します!バナーのアイデアで煮詰まっているデザイナーさんや、デザインの勉強のためにバナーのコピーをしようと思っている学生さんは是非読んでみてください。

2

簡単にオシャレで見やすくなるスライドの作り方

この記事では、デザイナーではない方や新人のデザイナーさんがプレゼンテーション(パワーポイントなど)のスライド作成で困ったときに、簡単にオシャレで見やすいスライドを作る方法をご紹介します! 法則に則って作成すれば、簡単にキレイなスライドを作ることが出来ますよ!

3

【イベントレポート】UX、デザイン思考、サービスデザインのための「チームで使える共感ペルソナ™入門 」

サービスの設計をする際にペルソナを決めるのはもちろんですが、それをチームでうまく共有し活用するのは想像以上に難しいですよね。チーム内でうまく共有できず、いつの間にかペルソナが忘れられてしまっている…なんてことは少なくないのではないでしょうか。そうしたペルソナ作成の難しさを解決するヒントをさぐるため、先日、株式会社アイ・エム・ジェイ R&D室主催のイベント「UX、デザイン思考、サービスデザインのための『チームで使える共感ペルソナ™入門 』」に参加してきました!

4

別に最初から正社員じゃなくても良い〜未経験からWebデザイナーになるまで私が行ったこと〜

今年の7月からデザイナーとして働いているのですが、実は元からデザイナーだったのではなく、アルバイトとしてベーシックに入社したという経緯があります。なぜ正社員ではなく、アルバイトからスタートして、どのような経緯でデザイナーにコンバートしたのかをここにシェアして、今後未経験の業界に転職を考えている人、特にWebデザイナーへの転職を考えている人への参考になればと思います。

5

「実績や得たノウハウを発信するところまでがシゴトの報酬」 iOSエンジニア堤修一さんの仕事論に迫る| dotFes 2016 shibuya

2016年10月からサンフランシスコでFyusion社でiOSエンジニアとして活躍されている堤修一さん。今回はdotFes 2016で行われた「デザイン×ライフスタイル 制作者として海外で働くということ」というテーマのセッションで、海外で働くためのワークスタイルを語られました。

Basic Designers’ Portfolio

ferret

ferret One

phocase

留学Debut

Designer Wanted!

  • Kunihiro Okamura
  • Hikaru Kobayashi
  • You
  • Fumiya Shibusawa
  • Yuki Asamoto

この内容で送信します。よろしいですか?