WEBデザインをしていても、「なんだか違う･･･」「でも、どこを直したらしっくりくるのかわからない･･･」と思うことはありませんか？
今回は、そんな「しっくりこないデザイン」を記号の部分を工夫することで「しっくりくるデザイン」にするための方法をご紹介します。
スポンサーリンク
「」（かぎかっこ）の工夫一つで、中のテキストがぐっと見やすくなる
デザインの中で、「」（かぎかっこ）を使うと区切りが良くていいのですが、逆にその「」（かぎかっこ）が大きく主張されすぎて中身のテキストに目がいきづらくなることがあります。
【テキストの見せ方】
普通にテキストを打つだけだと、間が空いてしまったり「」が大きかったりします。中身の文章を目立たせるために、「」を小さくしたり、文字間をつめることで、中身の文章を目立たせる工夫をしたりしてます。#しろまるの小ネタ#WEBデザインお役立ち#図解チャレンジ pic.twitter.com/VVOwm9MJen— あきたしろまる@ガテン系WEBデザイナー (@akitashiromaru) 2018年4月24日
デザインのときにそんな状態になると「せっかく中身のテキスト見てほしいのに･･･」ってなりますよね。
そんなときは、「」（かぎかっこ）のフォントサイズを小さく工夫します。また、ありがちな「（かっこ）と文字の間を少しつめる（カーニング、とも呼ばれます）ことで、読みやすいテキストとなります。
Photoshopでの詳しいやり方は【Photoshop】テキストの調整でできるデザイン！「」（かぎかっこ）を工夫して、中身のテキストが見やすいデザインにするという記事でご紹介しています。
[st-card id=1493 label=”” name=”” bgcolor=”” color=”” readmore=”on”]
！（ビックリマーク）や？（はてな）の大きさを調節して、
テキストを見やすくする
日本語フォントで文字を打っていて気づくことなんですが、！（ビックリマーク）や？（はてな）のマークが、少しだけ日本語より小さいんです。
だから、少し浮いて見えちゃう。
【フォントによるけど、「！」の扱い】
ちょっとだけ小さく見えることがある「！」のフォント。少しだけ大きくして配置すると、違和感なく見えます?今週は毎日小ネタ出せたけど、無理しない範囲でこれからもご紹介していきますね～?#しろまるの小ネタ#WEBデザインお役立ち#図解チャレンジ pic.twitter.com/TAIi3h6Yc3
— あきたしろまる@ガテン系WEBデザイナー (@akitashiromaru) 2018年4月27日
こんなときは、！（ビックリマーク）や？（はてな）のフォントサイズを少し大きくします。
ただ、大きくするだけだと浮いて見えるという状態は解消されません。なので、！（ビックリマーク）や？（はてな）のそもそもの位置を、1～2px下に落として他のテキストとのベースを合わせます。
”（ダブルクオーテーション）の使い方一つで、
テキストの印象が変わってくる
「」（かぎかっこ）とよく似て、中身のテキストを目立たせづらくすることがある”（ダブルクオーテーション）。
これも、選ぶフォントによっては堅苦しい印象になったり、テキストを見づらくすることがあります。
【引用符：ダブルクォーテーションの使い方例】
ゴシック体だと、結構角ばったものになって主張してしまいがちなときがあります?その部分だけ丸文字にして不透明度を低くすると、文字に目がいきやすくなります(*´ｪ`*)･･･小倉パン?#しろまるの小ネタ#WEBデザインお役立ち#図解チャレンジ pic.twitter.com/SpuVjXTyVg
— あきたしろまる@ガテン系WEBデザイナー (@akitashiromaru) 2018年5月18日
一つの例ですが、”（ダブルクオーテーション）を丸文字にして不透明度をあげることで、テキストに目がいくし、”（ダブルクオーテーション）自体の主張もなくなります。
少しの工夫で、ユーザーさんが見やすいデザインを目指そう！
これらはほんの少しの工夫ですので、「あんまり関係ないじゃん」と思われることもあるかもしれません。
でも、そんな細かい工夫が「すんなり中身が入ってくるデザイン」「読みやすいテキスト」につながることもあります。
工夫を習慣づけて、ユーザーさんが見やすいデザインを目指しましょう(*´ｪ`*)
