ウェブデザインで使えるテキスト周りのデザインアイデアまとめ#2(文字の変形・加工)
今回も前回記事「ウェブデザインで使えるテキスト周りのデザインアイデアまとめ#1(背景写真との組み合わせ)」に引き続き、ウェブデザインでテキスト周りのデザインで困った時に使えそうなアイデアをまとめていきたいと思います。第二回の今回は文字を変形したり加工したりする方法で見ていきます。
文字の大きさや太さなどは基本的には統一したものを使いますが、あえて文字サイズやウエイトを不揃いにすることでコントラストをつけることができます。また、ベースライン上ではなく、並びも変化させることでリズムが生まれます。このようにすることでよりメッセージ性の強い印象を与えることができます。
ポスターなどでよく見かける手法で、表示されるエリアが限定されていて、その中に決まった文字数のテキストを配置する場合には、縦横の比率を変えることでレイアウトに合わせた文字の配置ができるようになります。また傾斜をつけると、サブコピーとして本文やタイトルコピーなど他のテキスト要素と明確に区別をつけることができます。
文字を構成する要素はエレメントと呼ばれたりしますが、本来繋がっている部分をあえて切れ込みを入れて離すことで、また違った印象を与えることができます。書体にもよりますが、切り離された空間ができることで、より軽やかにやわらかい印象に寄せることができます。またポップな表現をしたい場合にも有効で、切り離されたエレメントごとに色を変えても面白そうですね。
文字の一部分加えられたハライなどの装飾目的の要素をスウォッシュと言います。欧文フォントにはオルタネートとして用意されているものもありますが(参考記事「フォントのオルタネート(異体字)をデザインに活用する」)和文のテキストにも効果的です。より広告色の強いインパクトのあるデザインに仕上がり、特に、豪華さや可憐さ、上品さなどを表現したい場合にマッチします。
文字色を決める場合にはいろんな方法がありますが、背景色とコントラストが大きい場合に効果的なのが、背景色と文字色を反転させて境界を作る方法です。背景色と文字色だけでは物足りない場合に思い切って色味の境界をつけることで、よりアクセントが強くなり見た目の印象を変えることができます。色味が対称的であればあるほど効果が増します。
少し特殊ですが、このようなアイデアも使いどころによってはとても面白いのではないでしょうか。刀で切り込まれたような効果で、大きな亀裂を入れて文字を少しずらして離すことで、よりリアルな雰囲気になります。訴求力が求められるキャッチコピーのデザインにいかがでしょうか。
今回は、文字を変形させたり加工することで表現できるデザインのアイデアをまとめてみました。シンプルながらもよりインパクトが強くなるようなテクニックが揃っていると思いますので、バナー制作のアクセントなどに是非試してみてはいかがでしょうか? (こちらの記事もどうぞ) ・ウェブデザインで使えるテキスト周りのデザインアイデアまとめ#1(背景写真との組み合わせ) ・画像内の文字を見せるデザイン表現 〜文字に効果を付ける(1)〜 ・画像内の文字を見せるデザイン表現 〜文字に効果を付ける(2)〜 ・画像内の文字を見せるデザイン表現 ~背景を加工する~
文字サイズ・ウエイトや並びを不揃いにする

縦横比率を変えたり傾斜をつける

エレメントを切り離す

スウォッシュをつける

背景色と反転させて境界をつくる

大きく切り込みを入れてずらす

今回は、文字を変形させたり加工することで表現できるデザインのアイデアをまとめてみました。シンプルながらもよりインパクトが強くなるようなテクニックが揃っていると思いますので、バナー制作のアクセントなどに是非試してみてはいかがでしょうか? (こちらの記事もどうぞ) ・ウェブデザインで使えるテキスト周りのデザインアイデアまとめ#1(背景写真との組み合わせ) ・画像内の文字を見せるデザイン表現 〜文字に効果を付ける(1)〜 ・画像内の文字を見せるデザイン表現 〜文字に効果を付ける(2)〜 ・画像内の文字を見せるデザイン表現 ~背景を加工する~
sponserd
keyword search
recent posts
- Figmaで柔らかな印象のメッシュグラデーションを作成する
Figmaで柔らかな印象のメッシュグラデーションを作成する
- Photoshopで光沢と透明感のあるぷるっとしたテキストを作成する
Photoshopで光沢と透明感のあるぷるっとしたテキストを作成する
- Photoshopでサイバー感のあるレトロフューチャーなイメージを作成する
Photoshopでサイバー感のあるレトロフューチャーなイメージを作成する
- デザイン制作に数学的なアプローチを取り入れてみる #1(グラデーション、カラースケール)
デザイン制作に数学的なアプローチを取り入れてみる #1(グラデーション、カラースケール)
- 【実践テクニック#6】ウェブデザインやバナー制作でグラデーションマスクや光彩の効果を扱う時の注意点
【実践テクニック#6】ウェブデザインやバナー制作でグラデーションマスクや光彩の効果を扱う時の注意点
- 安さやチープな印象を強調させるデザインを考えてみる
安さやチープな印象を強調させるデザインを考えてみる
- メリハリを付けにくいトーナル配色でセパレートカラーを効果的に使う
メリハリを付けにくいトーナル配色でセパレートカラーを効果的に使う
- 【実践テクニック#5】2色の線形グラデーションで中間色をくすませず鮮やかに見せる
【実践テクニック#5】2色の線形グラデーションで中間色をくすませず鮮やかに見せる
categories