スタジオまめの木 デザイン準備室

Studio Mamenoki – Design Preparatory Office

*

デザインの現場で使っている『文字を読みやすくする』5つの方法

      2015/02/22

book0

写真の上に文字を配置するデザインの場合、場所に寄っては読みにくくなってしまうこともあります。そういったときの自分なりの対処法をご紹介します。

グラデーションを使う

文字がビルに埋もれて読みにくい

文字がビルに埋もれて読みにくい

茶色のグラデーションを文字の後ろに入れて可読性を改善させました。

茶色のグラデーションを文字の後ろに入れて可読性を改善させました。

写真のイメージを変えずに文字の位置も変えたく無い場合によく使う手法です。方法としては画像と文字のあいだにグラデーションのレイヤーを挟みます。写真のトーンに合わせたグラデーションにすることで写真の雰囲気が変わることを防ぎます。

ピントが合っている部分を作る

背景の機械と同化して文字が読みにくい

背景の機械と同化して文字が読みにくい

人に焦点をあてるように背景をぼかし可読性を改善

人に焦点をあてるように背景をぼかし可読性を改善させました。

写真の中で見せたい部分が決まっているときは、見せたい部分にピントを合わせ、それ以外の部分をぼかします。ぼかした部分に文字を配置し可読性を改善させます。

全体をぼかす&色をかぶせる

テーブルの上のモノと同化して読めません。

テーブルの上のモノと同化して読めません。

全体をぼかして淡い色をかぶせて可読性を改善しました。

全体をぼかして淡い色をかぶせて可読性を改善しました。

詳細な部分まで見せる必要のない雰囲気を演出するためのイメージ写真の場合は、大胆に全体をぼかして淡い色を乗せてみるのも良いかもしれません。雰囲気という点では、こういった加工を施したほうが良い結果を生む事もあります。

枠をつくる

背景に文字が同化して読めません。

背景に文字が同化して読めません。

背景を透かした白い枠を設けて文字の可読性を改善しました。

背景を透かした白い枠を設けて文字の可読性を改善しました。

トリミングしてもよい写真であればテキスト枠を設置するのも手です。可読性という点では間違いなく読みやすくなる方法です。しかも簡単です。

あえて暗くする、又は明るくする

床の溝やコードなどが邪魔して白文字でも黒文字でも読みにくい

床の溝やコードなどが邪魔して白文字でも黒文字でも読みにくい

大胆に暗くすることで可読性を改善しました。

大胆に暗くすることで可読性を改善しました。

白い文字でも黒い文字でも読みにくい背景の場合、あえて暗くしたり明るくするなど明暗をつけることで読みやすさを改善します。

まとめ

写真に文字を重ねるデザインは、写真自体の構図が決まっているので文字を入れるスペースというものは予め決まっています。ですので、写真によっては可読性を保つ事が難しい場合も多々あります。写真を大きく扱った雑誌やwebなどをよく見ると文字の背景に読みやすくするための加工がこっそりと施してあったりするので、そういった視点でデザインを見てみると新たな発見があるかもしれません。

 - デザイン

Message

メールアドレスが公開されることはありません。

WP-SpamFree by Pole Position Marketing

  関連記事

アイロンプリントでワンコTシャツを自作してみた

スタジオまめの木の看板犬ミント&パセリは、ジャックラッセルという非常に抜け毛が激 …

ウッドバーニングでデザイン性アップ

スタジオまめの木の看板犬のミント&パセリは2階のリビングで暮らしています。3階に …

デザインのアイデアがないときの5つの対処法

ひとつの案件に対して2案、3案と複数のデザイン案を制作していると、『アイデアが出 …

パンフのリニューアル案件のご紹介

スタジオまめの木ではパンフレットの制作を主にしています。ゼロから制作するものもあ …

webデザイン初心者にもおススメの参考書

今さら聞けない基礎を学ぶ 一度、基礎を学べばその後は実務経験の中で仕事の質を上げ …

Negative Space Logo Design

余白を上手に取り入れたロゴデザイン ロゴ作成時に参考になる余白(ネガティブ スペ …

“唯一の可愛らしさ”ミックス犬のTシャツ作りました

スタジオまめの木の看板犬のミント&パセリはジャック・ラッセル・テリアという犬種で …

お客様事例のご紹介“株式会社ビッグス”様

 株式会社ビッグス様の会社案内 トラックドライバーや各種送迎ドライバーから街宣カ …

簡単にコピースペースを作る方法【フォトショップ】

写真の上に文字を配置するデザインをする場合、写真に適度な余白が必要になります。し …

関西のデザイン&手作り系イベント5選

スタジオまめの木で昨年から“with you”というwebショップを運営している …