Photoshopを安く買う方法をご紹介! 詳細はこちら

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

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

※当ブログの記事には広告が含まれています。

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

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

スポンサーリンク

[PR]

タップして目次を開けます

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

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

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

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

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

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

 

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

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

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

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

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



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

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

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

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

 

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

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

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

 

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

良かったらシェアお願いします!
  • URLをコピーしました!
  • URLをコピーしました!
タップして目次を開けます