今回も前回記事「ウェブデザインで使えるテキスト周りのデザインアイデアまとめ＃1（背景写真との組み合わせ）」に引き続き、ウェブデザインでテキスト周りのデザインで困った時に使えそうなアイデアをまとめていきたいと思います。第二回の今回は文字を変形したり加工したりする方法で見ていきます。  

文字サイズ・ウエイトや並びを不揃いにする

文字の大きさや太さなどは基本的には統一したものを使いますが、あえて文字サイズやウエイトを不揃いにすることでコントラストをつけることができます。また、ベースライン上ではなく、並びも変化させることでリズムが生まれます。このようにすることでよりメッセージ性の強い印象を与えることができます。  

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

ポスターなどでよく見かける手法で、表示されるエリアが限定されていて、その中に決まった文字数のテキストを配置する場合には、縦横の比率を変えることでレイアウトに合わせた文字の配置ができるようになります。また傾斜をつけると、サブコピーとして本文やタイトルコピーなど他のテキスト要素と明確に区別をつけることができます。  

エレメントを切り離す

文字を構成する要素はエレメントと呼ばれたりしますが、本来繋がっている部分をあえて切れ込みを入れて離すことで、また違った印象を与えることができます。書体にもよりますが、切り離された空間ができることで、より軽やかにやわらかい印象に寄せることができます。またポップな表現をしたい場合にも有効で、切り離されたエレメントごとに色を変えても面白そうですね。  

スウォッシュをつける

文字の一部分加えられたハライなどの装飾目的の要素をスウォッシュと言います。欧文フォントにはオルタネートとして用意されているものもありますが（参考記事「フォントのオルタネート（異体字）をデザインに活用する」）和文のテキストにも効果的です。より広告色の強いインパクトのあるデザインに仕上がり、特に、豪華さや可憐さ、上品さなどを表現したい場合にマッチします。  

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

文字色を決める場合にはいろんな方法がありますが、背景色とコントラストが大きい場合に効果的なのが、背景色と文字色を反転させて境界を作る方法です。背景色と文字色だけでは物足りない場合に思い切って色味の境界をつけることで、よりアクセントが強くなり見た目の印象を変えることができます。色味が対称的であればあるほど効果が増します。  

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

少し特殊ですが、このようなアイデアも使いどころによってはとても面白いのではないでしょうか。刀で切り込まれたような効果で、大きな亀裂を入れて文字を少しずらして離すことで、よりリアルな雰囲気になります。訴求力が求められるキャッチコピーのデザインにいかがでしょうか。  

---

  今回は、文字を変形させたり加工することで表現できるデザインのアイデアをまとめてみました。シンプルながらもよりインパクトが強くなるようなテクニックが揃っていると思いますので、バナー制作のアクセントなどに是非試してみてはいかがでしょうか？   （こちらの記事もどうぞ） ・ウェブデザインで使えるテキスト周りのデザインアイデアまとめ＃1（背景写真との組み合わせ） ・画像内の文字を見せるデザイン表現 〜文字に効果を付ける（1）〜 ・画像内の文字を見せるデザイン表現 〜文字に効果を付ける（2）〜 ・画像内の文字を見せるデザイン表現 ～背景を加工する～