この記事では、Adobe Photoshop というソフトを使用したテキストの調整について図解を入れて解説します。
テキストで使われる「”（ダブルクォーテーション）」の大きさやフォントの種類を調節して、テキストを見やすくする方法です。
”（ダブルクォーテーション）自体は、英語だと「引用」として使われるものですが、日本語ではよく中のフォントを強調するときに使われます。
LPのタイトルや画像のタイトルなど、”（ダブルクォーテーション）で囲まれたテキストを強調して見せることができます。
スポンサーリンク
完成イメージ
最初に完成イメージを見て下さい。
今回のフォントは游ゴシックを使っているのですが、Beforeだと”（ダブルクォーテーション）が角ばっているし、大きく見えてしまいます。
Afterだと”（ダブルクォーテーション）自体が小さく、丸みを帯びていますね。
”（ダブルクォーテーション）調整前と後の図
テキストの調整方法
新規レイヤーを用意する
まずはPhotoshopを開きましょう。開くサイズは特に気にしなくて大丈夫です。
”（ダブルクォーテーション）で囲んだ文字を入れる
続いて文字を入れていきます。
今回も使用しているフォントはWindowsでは8.1から導入されている「游ゴシック」というフォントです。
ご自分のパソコン内にあるフォントで大丈夫ですし、デザインの途中でこの記事にたどり着いた方は、そのデザインに合わせたフォントで大丈夫です。
ちなみにこのダブルクォーテーションですが、「Shiftキー＋2」を2回押すと、開き・閉じのダブルクォーテーションまで連続で出ます。（游ゴシックの場合）
”（ダブルクォーテーション）を選択し、それだけ日本語の丸文字フォントに変えてみる
次に、”（ダブルクォーテーション）のフォントだけを選択し、日本語で丸文字のフォントに変えてみましょう。
文字パレットは、”（ダブルクォーテーション）の部分がどうなっているかを表しています。もともとのフォントが游ゴシックだったのを、A-OTF UD新丸ゴシックというのに変えました。丸ゴシック、とつけば何でも大丈夫です。
”（ダブルクォーテーション）だけ不透明度を50%にすることで、より中のテキストを目立たせられる
さらにテキストを目立たせられるようにするため、”（ダブルクォーテーション）のみの不透明度を50%にしようと思います。
しかしその前に、「”しろまるパン”」という一文のどこか一部を不透明度50%にすることができないため、
「”しろまるパン”」→「”」「しろまるパン」「”」という、3つのレイヤーに分けます。
分けた上で、”（ダブルクォーテーション）の部分のみ、不透明度を50%にします。
この工夫を使ってテキストを調整する方法は、どんな風に見えるか？
今回のように”（ダブルクォーテーション）を使用して、強調を表すということは日本のWEBデザインではよく見られます。
なので、LPのメイン画像の上に載せるテキストやサイトのメイン画像でも中身のテキストを強調したいときに使うと良いでしょう。
ただ、あくまでも”（ダブルクォーテーション）は海外では「引用符」と認識されるため、多用し過ぎずに、場合によって使い分けてみると良いかも知れません。
かなり細かすぎる工夫ですが、この細かい工夫がユーザーさんの見やすさにつながると思います。
ぜひ使ってみて下さいね(*´ｪ`*)
[st-marumozi-big fontawesome=”” bgcolor=”#F48FB1″ color=”#fff” radius=”30″ margin=”0 10px 10px 0″]こんな記事も読まれています[/st-marumozi-big]
[st-card id=1493 label=”” name=”” bgcolor=”” color=”” readmore=”on”]
