文字間に気を付けよう

メインビジュアルなどで使用する文字の文字間、みなさんはどのようにされていますか？
私は、文字と文字の間を空けたい時、文章全体にletter-spacingを使用して調整していました。
が・・・フォントによっては、文字間を指定しても一部はくっついたり、一部は離れたり、よ～く見るとバラバラのものもあるんです。
（画像の黄色い枠の中の文字のように一部フォントを大きくする際もずれてしまいますよね。）

メインビジュアルで特徴的なフォントを使用している場合などは、コーディング時に画像化することが多いです。
ＳＥＯに関係ない部分などで、文字を画像化してＯＫな部分は、『1文字ずつ文字間を見て調整していく』とクオリティがアップしますよ。

Figmaで文字間を調整する方法

Figmaで文字間を調整する箇所は青枠の箇所になります。
変更したいテキストを選択し、右のサイドバーのText部分から変更できます。
画像化予定のない文章については、むやみやたらに数値を変更するとコーダーさんを疲弊させてしまう原因になるので注意が必要です。

使用するイラストは作者が同じイラストを使おう

サイトの中でイラストを使用する際、みなさんはどのような基準でイラストを選んでいますか？
自分でイラストが描ける方は別として、イラストACなどを使用される方も多いのではないでしょうか？

Webサイトのデザインのクオリティをアップする方法は、【サイトに使用するイラストは同一作者にする】です！
同一作者だとデザインのテイストが同じなので、自然とサイトの統一感をもたすことができるんです。
同一作者のイラストがない場合には、【抽象的】【ハッキリ】などサイトの世界観が統一できるよう、使用するイラストの『テイスト』を決めるといいですよ。

フチ文字を使う時のコツ

文字がはっきりして見えるので、コーポレートサイトに使用したところ、ブランディングを考えると避けた方がいいと教えていただきました。
フチ文字を使用する時のポイントとして
・強調したいとき（背景あり）
・細文字での使用はNG
・チープに見えるので、使用するサイトに気を付ける
だそうです。

背景色のベタ貼りはNG？

背景色のベタ貼りは、サイトによってはもちろんOK！

でも、クオリティをワンランクUPするには、ワンポイントつけたり、サイトの雰囲気に合わせてグラデーションをかけるとより素敵なデザインになります！

数字は欧文フォントを使おう！

サイトのデザインレビューを依頼した際に教えていただいたのですが、数字は欧文を使う方が好ましいそうです！
欧文の方が歴史が長いので、『文字の形が美しい』とか・・・！
英語＝欧文フォントは知っていましたが、数字についても欧文フォントの方が美しくデザインできるとは知りませんでした。

まとめ

• MV（メインビジュアル）の文字間をチェック！
• 使用するイラストは同一作者のものを使用
• フチ文字は基本使用しない方が良いけど、使用する時は文字の太さに気を付ける
• 背景色のベタ貼りは避ける
• 数字は欧文フォントを使う！

以上がデザインのクオリティをあげるためのプチテクニックになります。
私も実践していますが、ブラッシュアップする前のデザインと比べると・・・

• デザインにまとまりが出る
• どこか安っぽかったサイトがグッとおしゃれになった
• メリハリが出た

などなど変化が出ました。どれも難しくないうえに今すぐできることばかりなので、Webデザイン初心者の方はぜひ取り入れてみてください。