DESIGN IT YOURSELF.

BUROKI


top

blog

  • top
  • blog
  • ボクがデザインで文字を扱うときによくやる細かいこだわり

ボクがデザインで文字を扱うときによくやる細かいこだわり

design_thing

  • top
  • blog
  • ボクがデザインで文字を扱うときによくやる細かいこだわり

ボクがデザインで文字を扱うときによくやる細かいこだわり

2019.07.27.

スポンサーリンク

スポンサーリンク

webサイトや名刺やチラシ、デザインする媒体はいろいろありますが、すべてに使用される「文字」。文字の扱い方はデザイナーによりけりですが、読みやすくしてナンボなのは変わりません。

ボクは制作されたものを見るとき、必ず文字組みをチェックします(職業病ですね)。文字組みでその制作物をデザインしたデザイナーのスキルが大体わかるんですよね。細部にまで気を配っているデザイナーはやっぱり良いものつくりますから。

ということで、今回のブログではボクが文字を組むときに「ここは自分の感覚で読みやすくしている」という細かい部分をいくつかピックアップしてみたいと思います。多分見た人は「そこまでやってるんだ」と思うはずです(笑)。

コロン「:」

コロンをよく使うときは営業時間を記載するときです。「時」を使うこともあれば「:」を使うこともあり、それはクライアントによってまちまちです。今回のサンプルでは「02:00」と打ってみました。下記の画像をご覧ください。

修正前のコロン

この画像を見てどうでしょうか?特に何も感じないというデザイナーがいれば、あなたは間違いなく勉強不足です(笑)。コロンの位置が下ですよね。このコロンの位置を真ん中にし、コロンの左右の余白が少し窮屈なので、そこを少し空けます。

修正後のコロン

どうでしょう?変な違和感がなくなりましたね。数字の高さに合わせて中央に配置することで何も気にすることなく時刻情報を把握することができます。このような細かい調整を大きな見出しや小さい文章など関係なくおこなっています。

ハイフン「-」

コロンと同じ流れでハイフンを。ハイフンは電話番号や郵便番号で使用することが多いですよね。これもまずは何もせず文字だけ打ってみます。するとこうなります。

ハイフン修正前

いまはスマホの電話番号は080ですが、ボクは携帯番号をずっと変えていないので090をあえて入力します(笑)。これもやっぱりハイフンの位置がやや下にずれていますよね。そして、ハイフンの位置をそのままにしているデザイナーがすごく多い。細かい部分まで見れていないデザイナーだということを自分で知らせてしまってるんですよね。本当に残念なのでこの機会に気をつけてもらいたいくらいです。

ハイフンもコロンと同じく中央に配置、左右の余白をもう少し開ける調整をします。

ハイフン修正後

修正前と比べて全然違いますよね。電話番号を記載しているデザインはチラシにも看板にもいっぱいあるので、ぜひ意識してハイフンの位置を見てみてください。それぞれ違っている配置だったりして面白いですよ。

半角かっこ「()」

位置が下シリーズでいくと、半角のかっこも同じです。そのまま入力してみると・・

修正前の半角かっこ

どう見ても下にずれていますよね。こちらもコロンとハイフンのように真ん中に配置し直してあげます。

修正後の半角かっこ

今回は月曜日の「月」を間に入れていますが、文字の形によっては左右のかっこの余白のバランスが変わってきたりします。その場合は左右それぞれ均等になるように余白を微調整しています。文字通り「微」調整です。絶対誰もそんなところ見てないやろって自分で自分をツッコんでしまうこともありますが、それでもやってしまうのがデザイナーの性ですね・・

カタカナの「ト」

カタカナの文字組みで一番扱いが難しいのは何だと思いますか?それは間違いなく「ト」です。カタカナのなかで「ト」ほどスタイリッシュなカナはありません。スタイリッシュすぎるんでしょうね。何もせず文字を打ってみるとこうなります。

修正前のト

サンプルで「ナイト」と打ってみましたが、明らかにトの左側が空いていますよね。「ナイト」と読む人もいれば「ナイ」と「ト」を分けて読んでしまう人も出てきそうな距離感です。基本的には文字は正方形の中でつくられていて、トの場合はまず真ん中に一本の縦線があり、そのあとに右側のチョボがついている構造になっているのが左側のスペース空きすぎ問題の原因だと個人的に思っています。

このトの左側の余白を埋めるため、文字間で調整をします。こんな感じになります。

修正後のト

もう少し詰めても問題はないのですが、これで「ナイト」と読めますよね。ほかの単語でいうと「ストリート」なんかも余白の調整がかなり必要になってきますので、「ト」がある文字の余白を意識的に見てみてください。たまに調整されていないままの、トの左側がスッカスカのチラシなんかもあったりしますからね・・

数字の「1」

カタカナは「ト」がスタイリッシュと述べましたが、数字にもスタリッシュなものがありますね。そうです「1」です。(見出しに書いとるがなっていう 笑)1の場合もそのまま入力してしまうとこうなります。

修正前の1

やっぱり縦に長い文字なので左右の余白ができてしまっていますね。ここまで読んでくださっている人の中には、0との余白が気になってソワソワしはじめている人もいるのではないでしょうか?これも1の右側の余白を調整します。

修正後の1

大体0と0の間の余白を参考に調整します。すると全然違和感なくなっていますよね。すっと「1000」が入ってきます。あまり近くならないようには注意しましょう。

意識して調整を繰り返していくと自分だけの感覚が生まれ、研ぎ澄まされていき、読みやすい文字組みができるようになるはずです。

ここまで読むと、見え方が違っているはずです

デザインを依頼された経験のある人、つくってもらったものをいま一度見返してみてください。どうですか?見えてくるものが少し違っていると思います。本当の意味で良いデザインをつくるには、デザイン経験のない人たちがもっとデザインを知ること。つくれなくてもいいんです。知るだけでデザインは全く違ってきます。

そして、知れば知るほどデザインは面白くなっていきます。デザイナーもそうでない人の周りにも「良いデザイン」が溢れますように、ボクはこれからも発信し続けます。

BUROKIの「デザインの中身」

ボク独自の方法で紹介する「デザインの中身」コンテンツ。こんな感じで不定期ですが更新しています。過去のコンテンツは一覧ページからご覧になれますので、ぜひほかのコンテンツも見てみてくださいね。

スポンサーリンク

BUROKI写真

BUROKI写真

はじめましてBUROKIです。

ベンチャー企業にて11年間webやグラフィックデザインとブランディング経験を経て、2019年5月よりフリーランスデザイナーになりました。完全独学でフリーランスになった異色の経歴の持ち主だと思います(笑)

制作実績やインハウスデザイナーのことなど日々更新しています。デザイン制作のご依頼やお問い合わせなども受け付けてますので、なんでもお気軽にご相談ください。

ベンチャー企業でマスターデザイナーとして働いた後、フリーランスになりました。制作実績やインハウスデザイナーのことなど日々更新しています。制作のご依頼なども受け付けてますので、なんでもお気軽にご相談ください。

ご依頼・お問い合わせ

ご依頼・お問い合わせ

related contents

関連コンテンツ一覧
スポンサーリンク

文鳥とデザイナー

スポンサーリンク

blog list

ブログ一覧

think

クセがすごい?BUROKI designの制作集中部屋を初公開いたします

いまの住居に引っ越してから早一年が過ぎ・・。 自分の部屋やデザインする仕事部屋をちゃんとつくっていこういこうと思いながら、なかなかやる気にな…

2020.07.12.

think

2020年6月の活動報告。6月はこんなデザイン制作をしていました

いまは梅雨真っ只中ですが、徐々に暑くなってきましたね。先週長居公園をランニングしていると、なんともうセミが鳴いていました・・。セミって6月に…

2020.07.08.

design_thing

【Q&A】BUROKI designのデザイン制作に関するよくある質問

このブログのアイキャッチ画像どうしようかなって考えていたところ、そういえばタイポグラフィのポストカードを持っていたので、それの「Q」と「A」…

2020.07.06.

private

ルクア大阪のバルチカにある人気店「赤白」のフレンチおでんが美味すぎる

早いものでもう7月ですね。 2020年も半分終わり・・本来ならもうすぐオリンピック!といった時期ですね。なのにまさか延期になるなんて、去年の時点…

2020.07.04.

design_thing

実体験をもとに教える。インハウスデザイナーからの独立方法

フリーランスになってから、ずっと書きたいテーマだと思っていましたがなかなか内容がまとまらず、ようやくこの記事を公開することができました。 ボ…

2020.06.28.

design_thing

webサイトの目印になる。ファビコンの作り方と使い方を解説します

いまやwebサイトの目印として当たり前になった「ファビコン」。 なじみのない人もいるかと思うので説明しますと、ファビコンとはwebサイトを閲覧して…

2020.06.26.

blogをもっと見る

制作のご相談・お問い合わせはフォームから

デザインのご依頼や予算のご相談、お問い合わせなどお気軽にお問い合わせください。
また、書いてほしいブログのリクエストやファンレター(笑)もお待ちしております。

問い合わせフォームはこちら

topトップページ

aboutブロキについて

designデザイン

voiceお客さまの声

blogブログ

films制作動画

cassetteカセットテープ

snsソーシャル