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

Studio Mamenoki – Design Preparatory Office

*

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

      2015/02/22

book0

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

グラデーションを使う

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

枠をつくる

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

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

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

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

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

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

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

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

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

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

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

まとめ

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

 - デザイン

Message

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

WP-SpamFree by Pole Position Marketing

  関連記事

Negative Space Logo Design

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

ペットの保護活動支援Tシャツのデザイン&販売

この度、スタジオまめの木運営のネットショップ「犬との暮らしを彩るデザインショップ …

遊び心のあるデザイングッズ9選

仕事場のデスク周りはどうしても機能性を重視した無機質なものになりがちですが、ちょ …

1枚39円〜の定額制ストックフォトImasia(イメージア)を使ってみた

定額制の画像販売サービス 以前から気になっていた定額制のストックフォトサービスを …

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

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

手書き風文字に10秒で変換【イラストレーター】

イラストレーターで普通に使用しているフォントを簡単に手書き風に変換できて、その状 …

思わず見入ってしまうペット関連サイト5選+1

看板犬ミント&パセリを飼い始めてからペット関連のwebサイトもチェックす …

お客様事例のご紹介“美容室AGEN”様

美容室AGEN様の新規開店販促ツール一式 健康で美しい髪をつくる『トリートメント …

おでんと天婦羅『さゆさゆ』様スタッフユニフォーム制作【実績】

今回ユニフォームのデザインを依頼頂いたさゆさゆ様は、京阪本線の香里園駅前の香里中 …

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

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