ウェブデザインで使えるテキスト周りのデザインアイデアまとめ#4(塗りの表現)
最終更新日: Update!!
Webデザインでは、メインビジュアルやバナーなど何かとテキスト周りのデザインが必要となるケースが多々あります。今回もそんな時に使えるデザインのアイデアをまとめていきたいと思います。第4回目の本記事では主にテキスト部分の塗りで表現する方法にフォーカスを当ててみました。過去記事も合わせてどうぞ!
(過去の参考記事)
・ウェブデザインで使えるテキスト周りのデザインアイデアまとめ#3(アウトライン・シャドウ・グロー効果)
・ウェブデザインで使えるテキスト周りのデザインアイデアまとめ#2(文字の変形・加工)
・ウェブデザインで使えるテキスト周りのデザインアイデアまとめ#1(背景写真との組み合わせ)
・画像内の文字を見せるデザイン表現 〜文字に効果を付ける(1)〜
・画像内の文字を見せるデザイン表現 〜文字に効果を付ける(2)〜
・画像内の文字を見せるデザイン表現 ~背景を加工する~
テキストの塗りは単色ベタやグラデーションだけでなくパターンなどの柄も使われます。よりデザイン性が高くなり、注目度や表現力がアップします。ストライプやボーダー、スラッシュなどの線型や、ドット、チェック、グリッド、その他いろんなパターン柄などもあり、いろんなバリエーションの幅があります。ただし視認性が落ちるのと、あまり使い過ぎてしまうとしつこい印象を与えてしまうので注意が必要です。
ポップアート系のデザインやコミック、紙媒体などでよく見かけるハーフトーンを塗りに適用したパターンです。ポップでコミカルな印象を与えることができ、とても個性的に仕上がります。使いどころ限られてしまいますが、このような表現がマッチするケースではぜひ使ってみたいですね。
某SNSのロゴマークでも採用されているデザイン表現で、グリッジエフェクトのように躍動感があるクールな印象に仕上がります。ウェブサイトにおいては近年ダークモードの普及に伴い、暗い背景にとてもマッチするこのような見せ方は結構役に立つのではないでしょうか。色味は出来るだけ原色に近いネオンカラーを使うことがポイントで、フォントもジオメトリック系のサンセリフを使うといいですね。
文字の中で周囲が囲まれた部分をカウンターと呼びますが(参考記事「欧文タイポグラフィについて学んでみる【文字の構成】」)この部分を空白にするのではなく、塗りで埋めるのも面白いデザインになります。よりポップで可愛らしい印象になり、遊び心を表現することができます。ちょっとした工夫が目を引くアイデアに繋がりますね。色は単色よりある程度カラフルに見せた方が効果的ではないでしょうか。
文字の中にはそれぞれエレメントと呼ばれる文字を構成する要素が存在し、それが集まって1つの文字を構成しています。通常は文字全体、あるいは文字ごとに色が適用されますが、これをエレメントごとに色を変えることで、また違った印象を与えることができます。シンプルなデザインの中にもリズムが生まれ、注目度を高めることができます。ただ多用しすぎると意図がわからないデザインになってしまいますし、見た目もうるさくなるので難易度が高いデザイン表現かもしれませんね。
今回は塗りを使って、テキスト周りのデザイン表現のアイデアをまとめてみました。テキスト周りのデザインをするときに塗りはよく使われる方法で、且つ簡単に適用できることが多いので、機会があればぜひ気軽に試してみたいですね。
パターンの塗りをつける

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

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

カウンターを塗りつぶす

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

今回は塗りを使って、テキスト周りのデザイン表現のアイデアをまとめてみました。テキスト周りのデザインをするときに塗りはよく使われる方法で、且つ簡単に適用できることが多いので、機会があればぜひ気軽に試してみたいですね。
sponserd
keyword search
recent posts
- Figmaで柔らかな印象のメッシュグラデーションを作成する
Figmaで柔らかな印象のメッシュグラデーションを作成する
- Photoshopで光沢と透明感のあるぷるっとしたテキストを作成する
Photoshopで光沢と透明感のあるぷるっとしたテキストを作成する
- Photoshopでサイバー感のあるレトロフューチャーなイメージを作成する
Photoshopでサイバー感のあるレトロフューチャーなイメージを作成する
- デザイン制作に数学的なアプローチを取り入れてみる #1(グラデーション、カラースケール)
デザイン制作に数学的なアプローチを取り入れてみる #1(グラデーション、カラースケール)
- 【実践テクニック#6】ウェブデザインやバナー制作でグラデーションマスクや光彩の効果を扱う時の注意点
【実践テクニック#6】ウェブデザインやバナー制作でグラデーションマスクや光彩の効果を扱う時の注意点
- 安さやチープな印象を強調させるデザインを考えてみる
安さやチープな印象を強調させるデザインを考えてみる
- メリハリを付けにくいトーナル配色でセパレートカラーを効果的に使う
メリハリを付けにくいトーナル配色でセパレートカラーを効果的に使う
- 【実践テクニック#5】2色の線形グラデーションで中間色をくすませず鮮やかに見せる
【実践テクニック#5】2色の線形グラデーションで中間色をくすませず鮮やかに見せる
categories