• WEB

新人Webデザイナーによる、デザインでこれだけは知っておきたい「文字」の話

  • ぴきたんぬ
    ぴきたんぬ デザインちーむ
  • このエントリーをはてなブックマークに追加
新人Webデザイナーによる、デザインでこれだけは気を付けたい「文字」の話

はじめまして、入社3ヶ月目、デザインちーむのぴきたんぬです。ぬーん。

朝に弱く夜に強い私は、朝ゆっくり出社との相性が良いようで、ストレスフリーな生活を送っています。当分9時出社とかはできないです(笑)

今はGo-Nextで主にバナーを制作する日々を送っています。

1年ほど前に文系の四年制大学を卒業してから独学やインターン等を通じてデザインを学んだので、デザイナーとしてまだまだ未熟者の私ですが、日々奮闘しております。

そんな私がバナーなどの制作を通じて学んだ、デザイナーとして最低限こだわりたい「文字」についての話をします。文字については、紙をメインに制作するデザイナーさんの方が詳しいと思いますが(何か言われたら怖いので保険をかけておく)、新人Webデザイナーが「これだけは知っておきたい!気を付けたい!」というポイントに絞ってお伝えします。

このバナーを変えていきます!

それでは、今回はこのバナーの文字で、こだわりたいポイントを発揮していきたいと思います。

これから変えていくバナーです

とりあえず文字をそのまま流し込んだだけの、残念なバナーです。何も考えずに「サンプルだからシンプルに!」と考えたらシンプルどころか何も考えていない感じになりました。もしこんなバナーがデザイナーから送られて来たら「Oh……(・ω・`)」となること間違いなしですね。

今回は3点に絞って説明していきます!

長音符(ー)の長さと字間の調整

悪い見本その1

まずは「大特価セール」という文字から。
このバナーは文字をそのまま流し込んだだけで、まだ何も調整をしていません。とりあえず「ル」と「!」の間が不自然に広いことに気が付くと思います。それも含めてここでは2つ調整を行います。

長音符(ー)の長さの調整

まず1つ目は長音符の長さの調整です。長音符って何ぞや?と思われるかもしれませんが、俗に言う伸ばし棒のことです(私も今回調べて初めて知りましたが……)。
今回は、「セ『ー』ル」で使用されています。

この長音符は、水平比率(横の比率)が100%の状態だと、隣り合う文字と文字サイズが同じでも、少し大きく(長く)見えてしまいます。なので、長音符の水平比率を90~95%くらいに調整します。

長音符の水平比率を90%に調整

長音符を調整した文字の方が、少しすっきりしては見えないでしょうか?「大特価セェェル!(水平比率100%)」が「大特価セェルッ!(水平比率90%)」くらいには感じないでしょうか。感じるということにしてください。

字間の調整

次は字間を調整します。それぞれの文字と文字の間が、同じになるように調整していきます。

漢字は字間が詰まって見えて、ひらがなやカタカナは開いて見える傾向があるので、目で見て不自然な点は直していきます。

字間の調整を行いました

今回は「!」の前以外で露骨に不自然と感じるほどの字間はなかったのですが、漢字部分が詰まって見えたので、少しだけ広げました。

ちなみに、こんなに「!」の前が空いてしまったのは、「!」を全角で入力しているためです。こうならないためにも、「!」や「?」の文末記号は半角で入力するのがいいでしょう。字間の調整は「間隔の数値」ではなく、「見た目」での調整が不可欠なため、自信を持って行うのは未だになかなか難しいところです……。

英数字と単位について

1,980円という文字の調整をします

次に「1,980円」という文字を調整していきます。ここが今回の山場です。山場が2番目にきてしまいました。いいのか……?

さて、もしこのバナーで何かを打ち出すとして、最も伝えたい部分はどこでしょうか。

おそらくこの値段部分だと思います。適当に即興で作ったものですが、そうだと思って作ったと思います。その値段の中でも最も伝えなければならないのが「1,980」円だと言うことです。

けれども、よく見てください。この「1,980円」は同じフォント同じサイズで打ち込んだにも関わらず、円という単位より、数字の方が小さいのです!

円という単位より数字の方が小さい

上の図で言えば、数字はピンク分だけ円より小さいのです。数字と単位を調整していきます。

英数字は欧文書体で

今回のバナー見本で、英語を入れ忘れてしまいました。痛恨のミス。何はともあれ、英文と数字は欧文書体を使用して、和文書体と組み合わせます。

なぜならば、和文書体は欧文の表現には向いていないからです。和文書体は、あくまで和文を美しく表現するためのものなのだからです。

ちなみに、「和文書体が英数字を苦手としている理由」について詳しいのが下記の記事です。

というわけで、数字だけを欧文書体に変更しました。

英数字を欧文書体に変更する

「欧文書体にすると小さくなってしまった……(´□`)」と思うかもしれませんが、欧文書体は和文書体よりも小さく設計されているものが多いのでやむなし。大きさを調整しましょう。

数字に使用した欧文書体が小さいので和文に合わせて調整

ひとまず、「1,980」を「円」と同じサイズに揃えました。そして、「カンマ(,)」のサイズを小さくして、字間調整をしました。いくぶん欧文書体の数字の方が、すっきりとして綺麗な文字だなあと感じますね!

単位は小さくする

単位を数字よりも小さくすることで、本当に伝えたい部分を伝えやすくすることができます。

例えば「○○円」「○○%」などという場合、本当に相手に伝えたいことは○○という数字の部分ですよね。円や%などはその数字の説明のために使用しているだけなので、大きさを調節すると見やすくなります!

単位を小さくしたほうが、必要な情報が入りやすい

上の図からも分かるように、単位の大きさを小さくすることで、数字のインパクトが大きくなりました。

ひとまず、「1,980円」編は終了です。

ハイフンは中央に置く

最後は電話番号の部分を調整していきます!

電話番号のハイフンを直します

↑電話番号部分の数字を欧文書体にしてあります。最後のポイントで仕上げです!

ハイフンの位置を調整する

文字を流し込むだけでは、ハイフンは中央にきてくれないため、調整します

普通に文字を流し込むだけでは、ハイフンが文字の高さの中心位置に来てくれません。そのため、電話番号や住所などの入力でハイフンを使用する際には、「忘れずに」ハイフンの高さの位置を調整する必要があります。

ハイフンの位置を少し上げて、違和感のない位置にします

文字ひとつとっても、パッと見たときに違和感が無いように微々たる調整を重ねていきます……!

整いました

バナーの文字を整えました

バナーの文字が整いました。
ぜひ今回紹介したぷちテクニックを使って、違和感がなく読みやすい文字をデザインしてみてください!
文字はとても奥深いものなので、これからも一層読みやすいデザインに向けて色々勉強していきたいと思います。

このエントリーをはてなブックマークに追加

ぴきたんぬが最近書いた記事

WRITERS POSTS もっと見る

他にもこんな記事が読まれています!

  • WEB
  • マーケティング
  • サーバー・ネットワーク
  • ライフスタイル
  • お知らせ