画像の上に文字を載せる5つのテクニック～Webデザインのためのタイポグラフィ

前回の記事では、デザインにおけるタイポグラフィについて、そもそもタイポグラフィって何？という部分から、その種類などの基本をご説明しました。今回からは2回に渡って、実際にWeb制作時に実践で使えるタイポグラフィデザインについて使い方や方法などを見ていきましょう。

→画像編集機能も付属のサイト作成ツール　BiNDupを30日間無料体験

タイポグラフィデザインの使用例

タイポグラフィと難しく言ってはいますが、画像制作ツールでWeb用のバナーやパーツを作ったことがある方なら、実際にデザインに取り入れた経験があると思います。タイポグラフィは文字ですから、Webパーツには必須ですよね。Webで使用するとなると、ビルボードやバナーでのデザインに使うことが多くなってくると思います。

ビルボード

メイン画像の上にショップ名とコピーを載せた例

バナー

メディアの掲載情報へ誘導するバナー例

→画像編集機能も付属のサイト作成ツール　BiNDupを30日間無料体験

画像に載せる文字の可読性を上げるための5つのテクニック

ビルボードにこうしたタイポグラフィと写真を組み合わせたデザインを使うと、インパクトがあり、サイトを初めて見た時に印象を残すことかできます。もちろん写真やイラストと組み合わせるだけでなく、タイポグラフィのみデザインしたりなど、デザイン例は色々あると思いますが、写真と文字を組み合わせる場合、文字情報が読みにくいのは避けたいところです。
ここからは、ビルボードやSNS用のデザインを見ていきながら、タイポグラフィの可読性を上げていくノウハウをご紹介していきます。

1.オーバーレイを加える

写真にオーバーレイ（重ねる）効果を使うことで、文字の可読性をあげます。 写真の色がサイト全体の雰囲気を違う場合にも便利に使えます。

2.シェイプを使う

写真と文字のコントラストがはっきりしなくて読みにくい場合には、文字の後ろにシェイプを入れる方法がお勧めです。ここでは写真も見えるように、シェイプを透過することがポイントです。写真にも文字にもちょうどよい透過を意識します。このシェイプを入れる方法は、汎用性が高いし簡単。SNS用にもいいですね。

→画像編集機能も付属のサイト作成ツール　BiNDupを30日間無料体験

3.背景をぼかす

写真と文字のコントラストを改善するには基本的には何かを使ったりテキストを調節するのですが、写真自体をぼかしてしまう方法もあります。これは、より文字に注目させたい場合に効果的です。背景を色だけにするよりも写真をぼかすと立体感のある表現にすることができます。

4.ラインを入れる

文字の上下にラインを入れるだけで、写真と文字との境目がわかりやすくなりより読みやすくなります。

5.ドロップシャドウをつける

これは定番な方法ですが、いかにも影があります！という感じは古くなってしまいます。今はドロップシャドウがかかっていることがわからない程度に入れることがポイントです。さりげなく。できれば影の色は画像の中にある色を使いたいです。

いかがでしたか？タイポグラフィはWeb制作にはなくてはならないデザイン手段です。より文字を読みやすくする方法を使うともっとデザインの幅が広がりますね。
次回は、ホームページ制作サービス「BiNDup」の画像編集ツール「SiGN」を実際使っての作り方を解説したいと思います。お楽しみに！

インスタで宣伝するための画像をSiGNで作る～タイポグラフィ実践編

画像編集ツールがお勧め！BiNDupを使ってみる