文字。UXデザイナーがwebフォントを語る
こんにちは！
色々あって新卒で入った会社を二週間で退職(インターン2年間してたのに、、)
現在UXデザイナーとして海外渡航を目指してるりゅーやです。
皆さんはデザイナーと聞くと何が思い浮かびますか？
”色”や”形”を創造していくクリエイティブな職業
というイメージが強いのではないでしょうか？
＊デザイナーめっちゃクリエイティブ！！！
でもないんです、、
もちろん、
デザインを構成していく上でこの2つの要素はとても重要です。
ただそれだけではデザインが成り立たないケースもあります。
特にwebのデザイナーにとってはもう一つ重要な要素があります。
それが一体なんなのか、わかりますか？
それは。。。。。
”文字”です。
文字なんてwebにあってあたりまえ。
だからこそ、文字の書体やサイズに”意図”を持たせ、
きちんと方向性を統一したデザインをする必要があります。
目次
書体だけでもデザインは成り立つ
書体だけのデザイン、、
何か見たことがありますか？
例えば！
↑こんなシャツ見たことありますよね？
(高校の沖縄旅行で僕も買いましたw)
文字の形だけで、人にインパクトを与えたり、
魅せることができるんです。
そのことを私たちは無意識で知っているため、
資料の次のページの書体が微妙に違っていることにストレスを感じたり、
”イタリアン”の店名が和風の書体との組み合わせで
妙に惹かれたりするんです。
書体は
ニュアンスを表現することができ、
ブランディングに向いている要素なのです。
さらに文章で使用している書体を揃えることで
統一感が生まれ、
気持ちよく読むことができます。
webフォントとは
web上で文字のデザイン構成を考える際、
書体のみではなく、
”webフォント”を使用します。
中身が文字化けしていることがありませんか？
原因はバンドルフォントが使われているからです。
バンドルフォントとは
それぞれの端末にもともとあるフォントのことで、
もしOSにないフォントが使用されている場合、
このバンドルフォントが表示されてしまいます。
レスポンシブ化が重要しされている昨今では
webサーバー上に置き、どの端末でも同じフォントで閲覧する
ことができるwebフォントの使用が好まれています。
(デザイン品質が高いほど高価になってしまいますが。。)
webフォントの特徴
それでは簡単に4つの特徴をご紹介します。
1.スマホで文字を拡大しても綺麗
画像で処理したテキストは拡大表示した際に、
乱れてしまったり、ガタついて表示されてしまいますが、
webフォントはフォントそのものが表示されているため
そのまま綺麗に表示されます。
2.検索性の向上
テキストが画像の場合、検索でヒットする対象となりません。
そのため、検索された際に上位表示を狙うのであれば
そのページにとって重要な文言(kw)は
テキストで表示することを推奨します。
(SEO対策ってやつですねw)
3.音声読み上げ機能
こちらは最近開発された機能ですよね？
実はこの機能、テキストで表示されているものしか
読み上げることができません。
今後どのような発展をするかわかりませんが、
意識してみてはいかがでしょうか？
4.翻訳機能
webページが母国語のサイトでない場合、
すぐに翻訳機能に頼ることができますよね？
この機能も音声機能と同様に、
テキストしか読み込むことができないのです。
そのため、最初に画像で処理した文字を
後から翻訳できるようにテキストにしたいとなったら
手間がとてもかかってしまいます。
まとめ
webフォントを使用することで、
画像でなくても、CSSとの組み合わせで訴求できる
ケースが増えてきました。
また、文字でないと使えない機能もあります。
色や形といった目立つ部分よりも
根底の部分にある"文字"もwebフォントを使用して
デザインしていきましょう。
