テキストの見せ方

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

更新日:

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




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

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

 

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

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

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

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

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

使用ソフト:AdobePhotoshop テキストの見せ方「」(かぎかっこ)を工夫しよう編
【Photoshop】テキストの調整でできるデザイン!「」(かぎかっこ)を工夫して、中身のテキストが見やすいデザインにする

この記事では、Adobe Photoshop というソフトを使用したテキストの調整について図解を入れて解説します。 普段よく見る「」(かぎかっこ)を工夫して、中身のテキストが見やすい用に調節する方法で ...

続きを見る

 

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

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

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

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

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



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

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

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

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

 

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

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

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

 

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







  • この記事を書いた人
akitashiromaru_A7RKcJhZpnPE

あきた しろまる

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

おすすめ記事はこちら

1

前回、スプレッドシートを使った方法で、ブログが30記事を超えたところで、現状把握・改善点メモを行うと、リライトすべきポイントがわかってきた!というブログを書かせていただきましたが、記事の一覧を出力でき ...

-テキストの見せ方

Copyright© しろまるカフェ , 2018 All Rights Reserved.