Webデザインでは、メインビジュアルやバナーなど何かとテキスト周りのデザインが必要となるケースが多々あります。今回もそんな時に使えるデザインのアイデアをまとめていきたいと思います。第4回目の本記事では主にテキスト部分の塗りで表現する方法にフォーカスを当ててみました。過去記事も合わせてどうぞ！ （過去の参考記事） ・ウェブデザインで使えるテキスト周りのデザインアイデアまとめ＃3（アウトライン・シャドウ・グロー効果） ・ウェブデザインで使えるテキスト周りのデザインアイデアまとめ＃2（文字の変形・加工） ・ウェブデザインで使えるテキスト周りのデザインアイデアまとめ＃1（背景写真との組み合わせ） ・画像内の文字を見せるデザイン表現 〜文字に効果を付ける（1）〜 ・画像内の文字を見せるデザイン表現 〜文字に効果を付ける（2）〜 ・画像内の文字を見せるデザイン表現 ～背景を加工する～  

パターンの塗りをつける

テキストの塗りは単色ベタやグラデーションだけでなくパターンなどの柄も使われます。よりデザイン性が高くなり、注目度や表現力がアップします。ストライプやボーダー、スラッシュなどの線型や、ドット、チェック、グリッド、その他いろんなパターン柄などもあり、いろんなバリエーションの幅があります。ただし視認性が落ちるのと、あまり使い過ぎてしまうとしつこい印象を与えてしまうので注意が必要です。  

ハーフトーンの塗りをつける

ポップアート系のデザインやコミック、紙媒体などでよく見かけるハーフトーンを塗りに適用したパターンです。ポップでコミカルな印象を与えることができ、とても個性的に仕上がります。使いどころ限られてしまいますが、このような表現がマッチするケースではぜひ使ってみたいですね。  

塗りを重ねてずらしてグリッジエフェクト風にする

某SNSのロゴマークでも採用されているデザイン表現で、グリッジエフェクトのように躍動感があるクールな印象に仕上がります。ウェブサイトにおいては近年ダークモードの普及に伴い、暗い背景にとてもマッチするこのような見せ方は結構役に立つのではないでしょうか。色味は出来るだけ原色に近いネオンカラーを使うことがポイントで、フォントもジオメトリック系のサンセリフを使うといいですね。  

カウンターを塗りつぶす

文字の中で周囲が囲まれた部分をカウンターと呼びますが（参考記事「欧文タイポグラフィについて学んでみる【文字の構成】」）この部分を空白にするのではなく、塗りで埋めるのも面白いデザインになります。よりポップで可愛らしい印象になり、遊び心を表現することができます。ちょっとした工夫が目を引くアイデアに繋がりますね。色は単色よりある程度カラフルに見せた方が効果的ではないでしょうか。  

エレメント単位で色を変える

文字の中にはそれぞれエレメントと呼ばれる文字を構成する要素が存在し、それが集まって1つの文字を構成しています。通常は文字全体、あるいは文字ごとに色が適用されますが、これをエレメントごとに色を変えることで、また違った印象を与えることができます。シンプルなデザインの中にもリズムが生まれ、注目度を高めることができます。ただ多用しすぎると意図がわからないデザインになってしまいますし、見た目もうるさくなるので難易度が高いデザイン表現かもしれませんね。  

---

  今回は塗りを使って、テキスト周りのデザイン表現のアイデアをまとめてみました。テキスト周りのデザインをするときに塗りはよく使われる方法で、且つ簡単に適用できることが多いので、機会があればぜひ気軽に試してみたいですね。