前回に引き続き今回もテキスト周りのデザインサンプルについてまとめていきたいと思います。第3回目となるこの記事では、アウトラインやシャドウ、グロー効果を使ったものにフォーカスして見ていきたいと思います。過去記事にはその他いろいろなデザインをまとめていきますので、こちらも是非ご参考にどうぞ！ （こちらの記事もどうぞ） ・ウェブデザインで使えるテキスト周りのデザインアイデアまとめ＃2（文字の変形・加工） ・ウェブデザインで使えるテキスト周りのデザインアイデアまとめ＃1（背景写真との組み合わせ） ・画像内の文字を見せるデザイン表現 〜文字に効果を付ける（1）〜 ・画像内の文字を見せるデザイン表現 〜文字に効果を付ける（2）〜 ・画像内の文字を見せるデザイン表現 ～背景を加工する～  

アウトラインを重ねて袋文字にする

こちらはよく見かけるアウトラインを重ねた袋文字と呼ばれる手法です。文字の視認性やインパクトも最大限に表現することができます。背景がどんなにごちゃごちゃしていても、しっかりと文字だけを読ませることができますので、使用箇所の制約を受けません。ただし、必要以上に目立ったり、周りとのデザインが合わない、チープに見えるなどもありますので、使い所には注意します。ウェブデザインだけでなく、紙媒体でもよく使われています。   過去記事ではPhotoshopやIllustratorを使って袋文字を使った表現方法を詳しくまとめていますので、こちらもご参考にどうぞ。 （参考記事） Photoshopで輝きのある派手な立体装飾文字を作成する 【デザインワークショップ】vol.5　袋文字のテキストをスポーツ新聞風に表現してみる  

ドロップシャドウの背面にアウトラインを敷く

アウトラインだけの場合に少し物足りない、という場合にはドロップシャドウを重ねるといい感じに視認性が上がり印象的になります。特に文字色が薄い色や明るい色の場合にとても便利です。ドロップシャドウ単体では少し野暮ったく見えがちですが、アウトラインを背面に敷くことで、洗練された印象に仕上げることが出来ます。  

アウトラインとソリッドシャドウを組み合わせる

先ほどの袋文字だとインパクトが強く目立ちすぎる、もう少しデザインに対して自然にマッチするようにしたい、でもしっかりと訴求はしたいというケースに便利な表現です。訴求力と使い勝手の良さがバランスよく、キャッチコピーからサブコピー、ちょっとした飾り文字など幅広く使えます。見た目的にポップに仕上がるので、POP書体や手書き文字、丸文字系のフォントにマッチします。こちらも袋文字と同じく、カジュアルやチープに見えてしまう場合もあるので注意します。  

アウトラインをずらした版ズレ文字

塗りとアウトラインを分けて、それぞれ少しずらすことで判ズレ風のデザインに仕上がります。シンプルながらもデザインのアクセントをつけることができます。印象的には、軽やかさや可愛さ、親しみやすさなどが感じられるので、女性向けのデザインにもピッタリです。塗りと線は同系色で、塗りは淡い色を、線は濃い色を選択するとバランスよく仕上がります。フォントも少し角が丸みを持っているものや墨溜まりがあるものがマッチするのではないでしょうか。  

アウトラインだけで抜き文字にする

こちらはシンプルに塗りなしのアウトラインのみで表現する方法です。ミニマムなデザインに仕上がり、洗練された、カッコよくおしゃれでモダンな印象を与えることができます。背景に写真を使う場合には写真とテキストをなじませることができますので、メッセージ性の強いコピーを入れると尚良いのではないでしょうか。フォントはある程度ウエイトのあるものでないと視認性が下がってしまうので注意が必要です。  

ロングシャドウをつける

ひと昔前に流行ったフラットデザインでよく見かけたロングシャドウをつけた表現方法です。飛び出すような視覚効果があるので、インパクトは強くなります。条件によりますが、少しレトロや懐かしいような印象を与えることができます。文字を立体的に見せる方法はいくつかありますが、ロングシャドウでは文字自体は平面になるので、3Dのような立体的な文字と比較すると、まだある程度周りのデザインになじませやすいのではないでしょうか。   過去記事ではIllustratorを使ってロングシャドウを3Dの立体で表現した方法を詳しくまとめていますので、こちらもご参考にどうぞ。 （参考記事） Illustratorで立体的に飛び出す見出し文字を作成する  

ニューモーフィズム風のハイライトとシャドウをつける

近年のウェブデザインで流行りのニューモーフィズム風の表現です。ハイライトとシャドウの効果を追加し、背景色と同色の塗りにすることで立体的に文字を浮かび上げることができます。使い所は限定的ですが、アプリのスプラッシュスクリーンやUIデザインで使ってみたいデザインですね。  

ネオンサイン風のグロー効果をつける

こちらも使い所は限定的ですが、ネオンサインのように見せることができるグロー効果をつけた表現です。ダークテーマと相性がよく、おしゃれでかっこいいサイトでは是非使ってみたいですね。色味は鮮やかな蛍光色を使うことと、アウトラインは少し太めに、グロー効果はアウトラインの色より少し明るい色味で強めに設定することがポイントです。  

---

  今回はアウトラインやシャドウ、グロー効果にフォーカスして、テキスト周りのデザイン表現のアイデアをまとめてみました。過去記事にもありますが、このようなデザイン表現の引き出しを増やしておくことで、より効率よく質の高いデザインを作成することができますので、ぜひ色々と覚えておきたいですね。