豆知識デザインはじめまして、入社3ヶ月目、デザインちーむのぴきたんぬです。朝に弱く夜に強い私は、朝ゆっくり出社との相性が良いようで、ストレスフリーな生活を送っています。9時出社とかはできないです(笑)今はGo-Nextで主にバナーを制作する日々を送っています。1年ほど前に文系の四年制大学を卒業してから独学やインターン等を通じてデザインを学んだので、デザイナーとしてまだまだ未熟者の私ですが、日々奮闘しております。そんな私がバナーなどの制作を通じて学んだ、デザイナーとして最低限こだわりたい「文字」についての話をします。文字については、紙をメインに制作するデザイナーさんの方が詳しいと思いますが(何か言われたら怖いので保険をかけておく)、新人Webデザイナーが「これだけは知っておきたい!気を付けたい!」というポイントに絞ってお伝えします。整いましたこのバナーを変えていきます!それでは、今回はこのバナーの文字で、こだわりたいポイントを発揮していきたいと思います。文字をそのまま流し込んだだけの、残念なバナーです。何も考えずに「サンプルだからシンプルに!」と考えたらシンプルどころか何も考えていない感じになりました。こんなバナーがデザイナーから送られて来たら「Oh......(・ω・`)」となること間違いなしですね。今回は3点に絞って説明していきます!長音符(ー)の長さと字間の調整まずは「大特価セール」という文字から。このバナーは文字をそのまま流し込んだだけで、まだ何も調整をしていません。「ル」と「!」の間が不自然に広いことに気が付くと思います。それも含めてここでは2つ調整を行います。長音符(ー)の長さの調整まず1つ目は長音符の長さの調整です。長音符って何ぞや?と思われるかもしれませんが、俗に言う伸ばし棒のことです(私も今回調べて初めて知りましたが......)。今回は、「セ『ー』ル」で使用されています。この長音符は、水平比率(横の比率)が100%の状態だと、隣り合う文字と文字サイズが同じでも、少し大きく(長く)見えてしまいます。長音符の水平比率を90~95%くらいに調整します。長音符を調整した文字の方が、少しすっきりしては見えないでしょうか?「大特価セェェル!(水平比率100%)」が「大特価セェルッ!(水平比率90%)」くらいには感じないでしょうか。感じるということにしてください。次は字間を調整します。それぞれの文字と文字の間が、同じになるように調整していきます。漢字は字間が詰まって見えて、ひらがなやカタカナは開いて見える傾向があるので、目で見て不自然な点は直していきます。今回は「!」の前以外で露骨に不自然と感じるほどの字間はなかったのですが、漢字部分が詰まって見えたので、少しだけ広げました。ちなみに、こんなに「!」の前が空いてしまったのは、「!」を全角で入力しているためです。ならないためにも、「!」や「?」の文末記号は半角で入力するのがいいでしょう。字間の調整は「間隔の数値」ではなく、「見た目」での調整が不可欠なため、自信を持って行うのは未だになかなか難しいところです......。英数字と単位について次に「1,980円」という文字を調整していきます。ここが今回の山場です。山場が2番目にきてしまいました。いいのか......?さて、もしこのバナーで何かを打ち出すとして、最も伝えたい部分はどこでしょうか。この値段部分だと思います。適当に即興で作ったものですが、そうだと思って作ったと思います。その値段の中でも最も伝えなければならないのが「1,980」円だと言うことです。この「1,980円」は同じフォントの同じサイズで打ち込んだにも関わらず、円という単位より、数字の方が小さいのです!上の図で言えば、数字はピンク分だけ円より小さいのです。数字と単位を調整していきます。英数字は欧文書体で今回のバナー見本で、英語を入れ忘れてしまいました。何はともあれ、英文と数字は欧文書体を使用して、和文書体と組み合わせます。和文書体は欧文の表現には向いていないからです。和文書体は、あくまで和文を美しく表現するためのものなのだからです。ちなみに、「和文書体が英数字を苦手としている理由」について詳しいのが下記の記事です。異なるフォント同士を組み合わせるというわけで、数字だけを欧文書体に変更しました。́□`)」と思うかもしれませんが、欧文書体は和文書体よりも小さく設計されているものが多いのでやむなし。大きさを調整しましょう。「1,980」を「円」と同じサイズに揃えました。「カンマ(,)」のサイズを小さくして、字間調整をしました。いくぶん欧文書体の数字の方が、すっきりとして綺麗な文字だなあと感じますね!単位は小さくする単位を数字よりも小さくすることで、本当に伝えたい部分を伝えやすくすることができます。「○○円」「○○%」などという場合、本当に相手に伝えたいことは○○という数字の部分ですよね。円や%などはその数字の説明のために使用しているだけなので、大きさを調節すると見やすくなります!上の図からも分かるように、単位の大きさを小さくすることで、数字のインパクトが大きくなりました。「1,980円」編は終了です。ハイフンは中央に置く最後は電話番号の部分を調整していきます!↑電話番号部分の数字を欧文書体にしてあります。最後のポイントで仕上げです!ハイフンの位置を調整する普通に文字を流し込むだけでは、ハイフンが文字の高さの中心位置に来てくれません。そのため、電話番号や住所などの入力でハイフンを使用する際には、「忘れずに」ハイフンの高さの位置を調整する必要があります。文字ひとつとっても、パッと見たときに違和感が無いように微々たる調整を重ねていきます......!整いましたバナーの文字が整いました。今回紹介したぷちテクニックを使って、違和感がなく読みやすい文字をデザインしてみてください!文字はとても奥深いものなので、これからも一層読みやすいデザインに向けて色々勉強していきたいと思います。適度に非現実的な世界が好きな新人Webデザイナー。うっかりすると、現実逃避している。運動不足だから運動しなくちゃ☆と思い続けて数か月が過ぎました。絶望的に熱しやすく冷めやすい。スマホサイト制作にかかせないbackground-sizeについて5簡単作成!オリジナルのイラストなどのデザインQRコードを作ってみた。その32015.06.12仕事のミスを防ぐためには、確認作業は怠らないようにしましょう2016.11.14旧東海道をいくら歩いてもGo-Nextには着きません。