ウェブ制作においてデザインをする際にテキストを使う場合に様々な表現方法があります。そこで今回からは普段ウェブデザインで使うテキスト周りのデザイン表現をまとめていきたいと思います。第一回目の今回は背景写真と組み合わせるときに使える手法を中心に見ていきます。   実は数年前に文字のデザイン表現手法についていくつかの方法を記事でまとめておりますが、どれも基本的な装飾となり、近年のデザイントレンドや表現の多様性もあって、より進化してきています。もちろん以前の記事で紹介したものも十分使えるのですが、より印象に残るデザインを目指すためにも工夫していきたいものですね。 （過去の参考記事はこちら） ・画像内の文字を見せるデザイン表現 〜文字に効果を付ける（1）〜 ・画像内の文字を見せるデザイン表現 〜文字に効果を付ける（2）〜 ・画像内の文字を見せるデザイン表現 ～背景を加工する～  

描画モードを変えて重ねる

通常の描画モードの背景写真に対して、表面のレイヤーでテキストを重ねて表示させる際に描画モードを変えることで、背景写真になじませながらもしっかりと存在感を表現することができます。描画モードで変更する際には「オーバーレイ」などのコントラストが上がるものが良いのではないでしょうか。  

テキストの形でマスクする

逆転の発想でテキスト部分の背景写真として表示させる方法で、テキストの視認性をしっかりと確保することができます。背景写真にはあまりごちゃついたものを使うと、どのようなイメージかがよくわからないので注意しましょう。またフォントも太字でややコンデンス気味のものを採用し、カーニングを詰めることで、しっかりと背景写真を見せることができます。  

半透明やスモークのレイヤーを挟む

ファーストビューに設置されているヒーローヘッダーに採用されることが多く、写真のイメージを保持しながら、無理なく表面にテキストを配置させることが可能です。テキストと背景写真の間に挟むレイヤーは暗い方が使いやすいでしょう。またレイヤーには細かいパターンを合わせることもあります。  

ブラー効果がついた矩形を挟む

すりガラスのようなブラー効果がついた矩形を用意し、その上にテキストを置く形です。ブラー部分でも背景は確認できるため、背景写真の中になじませつつも、しっかりとテキストを読ませることができるスペースを確保できます。スクリプト書体など曲線で細くもともと視認性が低いテキストでも使いやすいです。  

太めのボーダーで周りを囲む

こちらもよく見かける表現で、なぜか太めのボーターで囲むだけでスタイリッシュかつオシャレに見えるので不思議ですよね。使う書体はサンセリフやゴシック系のものが相性がよく、ボーターの太さは文字の線幅よりもやや太くするのと、文字組みを正方形に近づけるとバランスよく仕上がります。  

被写体の背面に配置して背景写真に溶け込ませる

雑誌の表示などでもよく見かける手法で、背景写真の表面に重ねるのではなく、背景写真の中に被写体と共に溶け込ませることで、立体感とインパクトを表現することができます。ただし、被写体の背面にテキストが隠れることもあるので、視認性がやや下がる点には注意しましょう。文字の大きさや太さでしっかりと視認性を確保します。  

曲線形の要素に沿ってテキストを配置する

テキストは縦や横方向へ直線的に配置されるだけではなく、曲線に沿って配置することで、よりメッセージ性が強くなったり、ソフトで可愛らしい雰囲気を演出することができます。フォントも手書きや丸文字などの柔らかい印象のものを採用したいですね。  

余白が少ないラベル要素を背景に敷く

紙媒体などのデザインでもよく見かける手法ですね、どことなくアナログな雰囲気が漂う、親しみを感じさせる印象に仕上がります。デザインとしてもミニマムなものになるので、シンプルで洗練された上品な世界観にもマッチします。余白は限りなく少なくするのがポイントです。墨だまりがあるような書体と相性も良いですね。  

---

  今回は、ウェブデザインにおけるテキスト周りのデザインについて、主に背景写真と組み合わせる際の様々なアイデアをまとめてみました。バナーやメインビジュアルなどの作成時にデザインのアイデアになるのではないでしょうか。他にも様々な表現がありますので、また別記事にしてまとめてみたいと思います。