誰でも簡単に今すぐできるUIテクニック(テキスト編)

こんにちは、おかぴーこと岡本勇樹です。FiNCでデザイナー経験がないところからデザインをはじめて、もうすぐ3年が経ちますが、「今週は佳境だ!」「今週が終わればひと段落だ!」を毎週のように繰り返し、今日まで密度の濃い時間を過ごして来ました。ベンチャー企業においてのデザインは、価値あるものを早く出すにつきます!
そんなサバイバルワークの中で身につけていった武器(UIテクニック)を、いつも使うものや簡単に使えるものを中心に何回かに分けてお伝えできればと思います。デザインをやったことない方にも、資料作りなどに活かせる内容になっていますのでチェックしてみてください。デザインをやっている・やり始めた人にとって、少しでもお役に立てれば幸いです。
1回目のUIテクニックは「文字・テキスト」です。
意味や内容を正確に伝える場合「文字」で表現することが非常に重要です。静止したものから情報を読み取るには、文字が一番具体的に内容を伝えることができる表現だからです。
対話では「ただ伝えること」と「伝わりやすいように配慮して伝える」ことでは伝わり方の結果が大きく異なるように、対文字でも同様のことが言えます。文字がただ羅列してあったり、面白さがなかったり、読みにくいだけで、受け手は読んでくれません。そのため、文字・テキストのUIテクニックを覚えることは、対話でいう「伝え方」をよりよくすることと同等の価値があるのです。
それでは早速4つ、ご紹介していきます。
UIテクニック1. 文字間・行間の調整
まずはこれを抑えなければはじまりません。文字間・行間によって、読みやすさも印象も、オシャレさも断然違います。1行やタイトルの時に思い切って文字間を広げたりするとキャッチーな印象になりますし、長文の場合はなるべく狭めて読みやすさにこだわったりするのが一般的かなと思います。
文字間はタイトル/サブタイトル/本文など、文字の大きさや長さに合わせてそれぞれ調整する技術が重要です。行間は複数行になる際に文字間とセットで読みやすい数値を探しましょう。正解はないため試行錯誤し、自分が納得いく見栄えに整えましょう。
例えば下記画像を見ていただくとわかりますが、要素や大体の配置は変わらなくても、大きさ・文字間・行間が違うだけで少し違った印象を与えることも可能です。
UIテクニック2. 文字同士でコントラストをつける
今まで出てきた画像でもそうですが、上下に文字をならべる際や、1つの文章で小さい文字と大きい文字を合わせるなど、より効果的に見栄え良く文字を引き立たせることができます。
文字だけに限らず、1つのグルーピングの中で緩急があることによって、見た目に面白さが出てきたり目が止まるようにできます。
UIテクニック3. デザインフォントで文字と数字をアイコニックに
文字や数字は、つまるところ「形」です。形が面白ければそれはアイコンの役割を得ることができます。見た目を良くする手段として簡単にできるのでおすすめです。
大きさや配置・色も変えてみたりすると、これだけでもグッとデザインの幅が広がります。
UIテクニック4. 写真とテキストをセットで
写真の上に文字を入れたり、画像の近くに文字を配置するUIが、世の中にはたくさんあります。写真で雰囲気を伝え、文字で具体を伝える。見た目も訴求も相性がとても良いです。写真のビジュアル面を底上げするためだけに使うときもあります。
普通に載せただけでも良い風合いが出るテクニックですが、人やものが写ってないスペースを確保し、そこに文字を乗せるなど、文字の後ろの画像に黒の透明なレイヤーをのせるなど、写真の方に加工をすることも必要になってくるので、他のテクニックと合わせるとより効果的です。
まとめ
いかがでしたでしょうか? 誰でもできるように見えて、意外と奥が深いのが文字・テキストの表現です。また、少しの変化で大きく見え方が変わってくるのも文字・テキストの難しいところであり、面白いところです。
デザインをあまり知らない方は、この4つを覚えておくことで、今まで見ていたサイトや広告など、少し見え方が変わって面白いと感じるようになるかもしれません。また資料などで少しずつ活かせる部分があったり、誰かのデザインのレビューをする際に観点が増え、クオリティをあげるチャンスにつながるかもしれません。
デザインをしている、もしくは始められた方は、実際に使って見て、他のデザインとどう違うのかなど比較することで、アウトプットの精度をより高めることができると思います。
細かい基本的な要素を多く備えることで生み出せるデザインの幅も増え、基本的な要素の精度が高くなれば、より洗練されたものが作れるようになると思います。
少しでもこのUIテクニックが皆さんの成長のきっかけになっていれば嬉しいです!次回もお楽しみに!
タグ: FiNCの仕事紹介, クリエイティブ, デザイン