テキストが見やすいデザイン 初級編(2)
2020.2.11
こんにちは、マイモールです。
さて、前回は画像上のテキストを読みやすくする方法についてシェアしました。
(前回はこちら→https://www.mymall.co.jp/blog/post10971)
今回はその続きからです。
3.画像の色を変える
画像の色が邪魔をして文字を見えにくくするのはよくあることです。
例えばこれ。
白が同化して見にくくなっていますね。
そんな時は、こう!
だいぶ文字が見やすくなりましたよね?
好きな色で試してみましょう!
3の応用として、画像の上にレイヤーを乗せる方法もあります。
画像いっぱいにレイヤーを乗せるとこんな感じ。
ビフォー
アフター
他にも応用として、画像をぼかすという方法もあります。
ムードを出すためかつ、画像を目立たせる必要がない時に使える方法です。
ビフォー
アフター
どれくらいぼかすかは、画像によって意図によって変えてみてください!
4.文字に変化を与えてみる
1~3の中では、画像になにか処理を加えたり、図形を使う方法をシェアしました。
ここからは基本の、文字自体に変化を与える方法についてです。
例えばこちら
これをもう少し見やすくするために、文字の周りに境界線をいれてみましょう。
するとこんな感じ。
テキストから足が痺れた感じが伝わりますよね!
ドロップシャドウを使う手もあります。
例えばこちら。
このテキストをもっとはっきりさせましょう。
するとこんな感じ。
不透明度やぼかしの程度など、好きに変えてベストな見え方を探してみて下さい。
最後に
まだまだWEBデザイナー駆け出しの私が最近学んだ方法をシェアしました!
ただ単に文字や数字の大きさを変えるだけではなく、ちゃんとデザインするだけでも見え方は変わってくるということを感じられたでしょうか。
デザインに悩む方の参考になれば嬉しいです!
他にも、文字サイズや行間によってテキストを綺麗に揃えるという方法もありますが、それについてはまたいつか。
それではまた次回で〜
最新のホームページ制作例
-
制作実績:佐々木中央司法書士事務所〈滋賀県大津市〉
業種:士業
-
制作実績:学校法人ルネス学園 ルネス紅葉スポーツ柔整専門学校〈滋賀県甲賀市〉
業種:学校・教育
-
制作実績:株式会社シーレン〈全国〉
業種:その他サービス
-
制作実績:国産畳専門店 Shiharu JAPAN〈滋賀県大津市〉
業種:雑貨・インテリア
-
制作実績:キャストグローバル契約書サイト〈東京都を中心に全国〉
業種:士業
最新のコラム記事
-
コロナ経済対策で様変わりした2020年補助金サポート実績とまとめ
-
令和2年度第3次補正予算案で新たに創設された目玉補助金「中小企業等事業再構築促進事業」について
-
令和2年度第3次補正予算案のものづくり補助金、持続化補助金、IT導入補助金に新特別枠【低感染リスク型ビジネス枠】
-
求職者の目に留まりやすくする、Indeedのキーワード戦略!!
-
Indeedのクリック課金制度は期間形と比べてどうなの?