見やすいデザインのコツ①~単位を小さくする編~

こんにちは、Reika(@mypacereika)です😊

【見やすいデザインのコツ】では、普段デザインをしない人、デザインが苦手な人でもできる、かんたんな小技を紹介していきたいと思っています。

まず今回は「単位を小さくする」ことについて、取り上げます。

ちょっとのひと手間で、見やすさはもちろん、受け手が求める数字がぱっと目に入りやすくなる手法です。ぜひ試してみてください。

どんなときに使える?

単位が含まれる文字列が出てきたら、使ってみてください。例えば次のようなものです。

  • 円 / ¥ /yen
  • g(グラム)/ mm(ミリ)
  • 年月日
  • 位 など

どうして単位を小さくする必要があるの?

見る人(受け手)が求める情報を、すばやく見つけられるようにしてあげるためです。

例えば、スーパーのチラシなら値段を、イベント案内なら開催日時が気になるはずですよね。

値段や開催日時の数字さえ書かれていれば、単位は図や文脈からだいたい想像がつくものです。

それならば、重要度の低い「単位」は、「数字」を強調させるための引き立て役に回らせましょう!

やり方をおしえて!

やり方説明を、短いアニメーションでつくってみました。ぜひご参考ください!
※スマホの場合、動かない場合があります…<(_ _)>

単位を小さくする手順


それでは、手順ごとに解説していきます。

STEP 1

step1:打ちっぱなしの状態

まずは、打ちっぱなしの文字列を準備します。

STEP 2

step2:単位を小さくする

単位を小さくします。元の文字より2/3~1/2くらいのサイズにすると、単位の存在感を残しつつも、数字を引き立てることができます。曜日も小さくしてメリハリをつけます。

STEP 3

step3:すき間を微調整

単位を小さくすることによってできた「すき間」を詰めます。ちょっとセンスが要る作業ですが、自分が読みやすいと思える間隔であればOK。気にしないで!

MORE

MORE:数字を太字にして、より強調しても◎

太字にしたり、色をつけて、さらに強調するとより目に入りやすくなります。

GOOD JOB

他の単位も同様の手順です!

注意点ですが、単位をただ小さくするだけだと、小さくした部分だけ浮いてしまって不自然になってしまいます。

そのため、単位を小さくした後は、ベースライン(文字列の一番下のライン)に合わせることも忘れずにやってくださいね!単位をベースラインに着地させてあげましょう。

単位を着地させてあげましょう!

 

他にも、単位を小さくした例を作ってみましたので、参考にしてみてください。

▼ 打ちっぱなしよりも、断然、情報が伝わりやすくなっていませんか…?

単位を小さくした例

単位を小さくした例

さいごに

さいごに

「単位を小さくする」という小技をご紹介しましたが、これは文字組みというデザインの基本手法で、そのうちの一つです。

日本語の文章は、漢字やひらがな・英数字・記号などを使うので、打ちっぱなしの状態だとアンバランスになりやすく、文字組みにも労力が要ります。。

これをプラスにとらえると、ちょっとでも文字組みに力を入れれば、周りと差がつく読みやすい文章(見るように読める!)をつくることができる、とも言えます。

文字組みの第一歩として、まずは今回ご紹介したことを、いろいろな場面でぜひ使ってみてください^^

この記事で使用した素材

※素材を使用する際は、素材配布サイトの利用規約をよく読み、ルールを守って使用しましょう!

素材サイトの利用規約で最低限チェックすべき注意点5つ

よかった記事には、ぜひクリックをお願いします💓

ハートの数を参考にランキングを作りたいと思っているので、ご協力いただけたら幸いです。