先日よりテキスト周りのデザインに関する記事が続いていますが、まだまだデザイン表現のアイデアはたくさんあります。5回目の今回はデザイン要素を加えて装飾していくバリエーションについてまとめています。これまでの過去記事は下記にまとめていますので、ぜひこちらもご覧ください。 （過去の参考記事） ・ウェブデザインで使えるテキスト周りのデザインアイデアまとめ＃4（塗りの表現） ・ウェブデザインで使えるテキスト周りのデザインアイデアまとめ＃3（アウトライン・シャドウ・グロー効果） ・ウェブデザインで使えるテキスト周りのデザインアイデアまとめ＃2（文字の変形・加工） ・ウェブデザインで使えるテキスト周りのデザインアイデアまとめ＃1（背景写真との組み合わせ） ・画像内の文字を見せるデザイン表現 〜文字に効果を付ける（1）〜 ・画像内の文字を見せるデザイン表現 〜文字に効果を付ける（2）〜 ・画像内の文字を見せるデザイン表現 ～背景を加工する～  

マーカーペン風の背景を引く

強調するテキストの背景に塗りを適用させる手法ですが、単純に文字サイズに合わせて入れるのではなく、高さを調整し少しずらして入れることで、マーカーでラインを引いたように見せることができます。こうすることでより自然かつデザイン的にも洗練されたような印象を与えることができます。細かい部分の少しの工夫が差となって現れますね。背景色は薄く鮮やかな色が相性良しですね、グラデーションなんかにしても面白そうですね。  

装飾要素を加える

主にアクセントや目を引かせるための装飾用デザイン要素を強調させたいテキストに合わせてあしらうことで、シンプルながらも効果的に注目を集めることができます。このような装飾は控えめにすることで、全体のデザインテーマを崩すことなく、自然になじませることができ、場面を選ばず使うことができます。そこまで目立たないものでもアリとナシでは大きく印象が変わってきますね。少しポップな仕上がりになるので、POPのような広告には絶対に入れておきたいですね。  

背景に帯や矩形要素を引く

文字量が多かったり、背景に写真などがある場合にはテキストの視認性をいかにして確保するかが問題だったりしますが、そんな場合にとても有効な手法が背景にベタ塗りの帯や矩形を使う方法です。視認性だけでなく色味を調整することでコントラストも確保できるため、いろんなところで使えてとても便利ですね。バナーなどの限られたスペースでのデザインでもしっかりと情報を入れることができ、文字周りのデザインの基本とも言える手法ですね。アウトラインと組み合わせて少し変則的なレイアウトにすることで、リズムをつけても面白いですね。  

マス目に文字を入れる

某有名ドラマのロゴを連想させるデザインですが、インパクトはかなり強く印象に残る見た目に仕上がるため、タイトルコピーなどの場所に使ってみたいですね。少しレトロな雰囲気も与えることができ、フォントを工夫することでまた違った印象になります。どちらかというと太めの書体が相性が良さそうです。マス目は塗りつぶすことでアクセントやリズムをつけることも可能です。  

エレメントにイラストを使う

文字を構成する要素であるエレメントに、テキストに関連するイラストを差し替えたり、カウンターなどのスペースに配置する方法です。イラストは過度にすると文字が読みにくくなりますので、可読性も確保しつつ、アクセント程度に限定して使うことがポイントです。イラストのタッチとフォントの種類は合わせておかないと違和感を与えてしまいますので注意が必要です。また使うイラストはシンプルなものを採用すると作りやすいですね。  

---

  前回に引き続き、今回もテキスト周りのデザイン表現のアイデアをまとめてみました。工夫次第でまだまだいろんなデザインが生まれそうですね！使いどころや適用する文字に合わせて効果的に使い分けるようにしてみてくださいね。