テキストの見せ方

【ちょっとで差がつく小ネタ】記号の部分を工夫するだけで、テキストがとっても見やすくなるデザインの方法

ちょっとで差がつく小ネタ:記号の部分を工夫するだけで、 テキストがとっても見やすくなる デザインの方法

WEBデザインをしていても、「なんだか違う・・・」「でも、どこを直したらしっくりくるのかわからない・・・」と思うことはありませんか?

今回は、そんな「しっくりこないデザイン」を記号の部分を工夫することで「しっくりくるデザイン」にするための方法をご紹介します。

スポンサーリンク

「」(かぎかっこ)の工夫一つで、中のテキストがぐっと見やすくなる

デザインの中で、「」(かぎかっこ)を使うと区切りが良くていいのですが、逆にその「」(かぎかっこ)が大きく主張されすぎて中身のテキストに目がいきづらくなることがあります。

デザインのときにそんな状態になると「せっかく中身のテキスト見てほしいのに・・・」ってなりますよね。

そんなときは、「」(かぎかっこ)のフォントサイズを小さく工夫します。また、ありがちな「(かっこ)と文字の間を少しつめる(カーニング、とも呼ばれます)ことで、読みやすいテキストとなります。

Photoshopでの詳しいやり方は【Photoshop】テキストの調整でできるデザイン!「」(かぎかっこ)を工夫して、中身のテキストが見やすいデザインにするという記事でご紹介しています。

[st-card id=1493 label=”” name=”” bgcolor=”” color=”” readmore=”on”]

 

!(ビックリマーク)や?(はてな)の大きさを調節して、
テキストを見やすくする

日本語フォントで文字を打っていて気づくことなんですが、!(ビックリマーク)や?(はてな)のマークが、少しだけ日本語より小さいんです。

だから、少し浮いて見えちゃう。

こんなときは、!(ビックリマーク)や?(はてな)のフォントサイズを少し大きくします。

ただ、大きくするだけだと浮いて見えるという状態は解消されません。なので、!(ビックリマーク)や?(はてな)のそもそもの位置を、1~2px下に落として他のテキストとのベースを合わせます。



”(ダブルクオーテーション)の使い方一つで、
テキストの印象が変わってくる

「」(かぎかっこ)とよく似て、中身のテキストを目立たせづらくすることがある”(ダブルクオーテーション)。

これも、選ぶフォントによっては堅苦しい印象になったり、テキストを見づらくすることがあります。

一つの例ですが、”(ダブルクオーテーション)を丸文字にして不透明度をあげることで、テキストに目がいくし、”(ダブルクオーテーション)自体の主張もなくなります。

 

少しの工夫で、ユーザーさんが見やすいデザインを目指そう!

これらはほんの少しの工夫ですので、「あんまり関係ないじゃん」と思われることもあるかもしれません。

でも、そんな細かい工夫が「すんなり中身が入ってくるデザイン」「読みやすいテキスト」につながることもあります。

 

工夫を習慣づけて、ユーザーさんが見やすいデザインを目指しましょう(*´ェ`*)

ABOUT ME
あきた しろまる
あきた しろまる
20代前半までは教職を目指し中高の数学免許を取得するも、「もっと世の中知ってみたい」という気持ちから、世界一周の船旅へ。帰ってからは派遣社員しながらお金をためて、WEBの勉強をし、WEBデザイナーへ。20代後半からでもWEBデザイナーは目指せる!楽しい!ってことを伝えたい、という気持ちで記事を書いています。