Ownedmedia ウェブ制作に役立つコンテンツを発信中!

デザイン 2021.01.19

ウェブデザインで使えるテキスト周りのデザインアイデアまとめ#2(文字の変形・加工)

Tags: ,,,

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

 

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

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

 

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

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

 

エレメントを切り離す

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

 

スウォッシュをつける

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

 

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

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

 

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

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

 


 

今回は、文字を変形させたり加工することで表現できるデザインのアイデアをまとめてみました。シンプルながらもよりインパクトが強くなるようなテクニックが揃っていると思いますので、バナー制作のアクセントなどに是非試してみてはいかがでしょうか?

 

(こちらの記事もどうぞ)
・ウェブデザインで使えるテキスト周りのデザインアイデアまとめ#1(背景写真との組み合わせ)
・画像内の文字を見せるデザイン表現 〜文字に効果を付ける(1)〜
・画像内の文字を見せるデザイン表現 〜文字に効果を付ける(2)〜
・画像内の文字を見せるデザイン表現 ~背景を加工する~

この記事を書いた人

オガワ シンヤ

合同会社デザインサプライ代表兼CEO / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。

  • Twitter

コメントフォーム

記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。なおメールアドレスは公開されませんのでご安心ください。

内容に問題なければ、お名前・ハンドルネームとメールアドレスを入力いただき、下記の「コメントを送信」ボタンを押してください。

CAPTCHA


この記事もよく読まれています

Scroll to Top
ご質問・ご相談はありませんか ?