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

Studio Mamenoki – Design Preparatory Office

*

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

      2015/02/22

book0

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

グラデーションを使う

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

枠をつくる

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

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

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

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

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

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

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

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

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

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

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

まとめ

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

 - デザイン

Message

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

WP-SpamFree by Pole Position Marketing

  関連記事

実は釣りTシャツも作ってました

ミントとパセリを飼い始めてから頻繁には行けていないのですが、『釣り』大好きです。 …

デザインのちょっとした技

『トーンジャンプを馴染ませる技』 紙媒体のグラフィックデザインをされている方なら …

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

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

空気を変えるフォントのふしぎ

デザインの影の主役“フォント” 大方のデザイナーがお世話になっているフォントメー …

株式会社岡田運輸様の入社案内【制作実績】

株式会社岡田運輸様は埼玉県草加市に本社を置く運送会社です。業務内容は、一般貨物運 …

東尾メック株式会社様のバインダー【制作実績】

今回、ご依頼いただいた東尾メック株式会社様は水やガス等を流す配管と配管を結ぶ『管 …

三つ折りパンフのビフォー・アフター

パンフレットのリニューアル案件をご紹介いたします。 今回のお客様は警察犬訓練から …

Adobeモバイルアプリ“Adobe Shape”は仕事で使えるのか?

デザインの仕事で使用しているAdobeCS5を思い切ってCC(クリエイティブ・ク …

新作できました!

「犬と飼い主のためのデザインショップ“with you”」の新作が出来たのでご紹 …

photoshopのブラシの作り方【フォトショップ】

以前の記事『簡単にコピースペースを作る方法【フォトショップ】』で雲のブラシを利用 …