個人的に実践しているWebデザインガイドライン⑤ テキスト編
あくまで個人的に実践しているデザインガイドラインです。
記事一覧はこちら↓
# 基本事項
使用するフォント・フォントサイズ・フォントカラーはあらかじめ決めておき統一感をもたせる。
文章の頭位置を揃え、他の要素とのベースラインも揃える。
文章の周囲に適度な余白をつけ文章を読みやすく。行間を揃えて適切に開ける。
日本語文章は左揃えが基本。コピーライト表記や署名などの一般慣習的な場合を除き、基本的に右揃えの文章は使用しない。
中央揃えは利用場所を考慮する。見出しなどの短いテキストに用い、長い文章ではなるべく中央揃えを使わない。
視覚に障害がある方は細身の多いフォントは読みづらい。アクセシビリティ対策として文字のウェイトには気を配る。
画像として使用するテキストは適宜アウトライン化する。
長いテキストリンクを連続して使用しない。
文章の区切りをハッキリさせる。
無意味な改行は厳禁。
# フォント
フォント選びは賢く、要件やWebサイトの雰囲気に合ったものを選ぶ。
フォントの種類・大きさ・太さによって印象が大きく変わることに留意する。
ライセンスに必ず注意する。Webフォント利用が許可されていないフォントは絶対に使わない。有料フォントやダウンロードしたフォントは利用が制限されることが多い。フリーフォントも利用が制限されていることもあるので規約は必ずよく読んで厳重に注意すること。
フォントの使い分けは規則性を持たせる。ベースフォントと見出しで使い分けるなど。
フォントはOSの標準フォント（游フォント・ヒラギノ・メイリオetc）で表示されることを考慮し検討する。
IEでは游フォントを表示すると謎の余白ができるので留意。
Webフォントを使う場合はライセンスの心配が少ないのでGoogle Fontsを使う。
僕が好きなGoogle Fontsは
— TAK (@tak_dcxi) October 15, 2019
・Open Sans
・Lora
・Cinzel
・Dancing Script
あたり。
Google Fontsはライセンスの心配が少ないので、基本的にwebフォントはGoogle Fontsを使って他はYaku Han JP以外あまり使わないです。 https://t.co/qIulWyBHQJ
日本語のWebフォントはファイルサイズが大きいので読み込みが遅くなることを留意する。
明朝体はおしゃれであるが、ディスプレイによって掠れたり読みにくいことがあるのでベースフォントで使うのは非推奨。見出しなどのデザイン性を強調する箇所で使用する。
Androidはデフォルトで明朝体がインストールされていない場合が多い。Webフォントを利用すればAndroidでも明朝体で表示が可能。
Webフォントで明朝体を実装する際は「Noto Serif CJK」を使うのがオススメ。IE対策にもなる。
Webにおいて明朝体はNoto Serif CJKを使うhttps://t.co/DKL4O8FEe3
— TAK (@tak_dcxi) October 18, 2019
IEで游フォントを表示するとベースラインがズレるし、他のWinにデフォルトで入ってる明朝体は微妙。Noto Serif CJKを指定すればIEでも綺麗でズレのない明朝体が実装できるから最適解だと思う。Win7もまだ生きてるしね。
飾りフォント・手書きフォント・装飾性の高いフォントはオシャレではあるが読みやすいわけではない。利用する場合は構成に注意する。
# フォントサイズ
フォントサイズで決めておくのは、主にベースフォントと見出し。
ベースフォントサイズは主に12px～18px相当で。ターゲット層やデバイスに応じて検討する。複数サイズの混在はできるだけやらない。
フォントサイズは小さすぎると高解像度設定のWindowsなんかのデバイスで文字が小さすぎてユーザビリティを下げる恐れがある。老眼のある高齢者はホントに見えないことが多いので、中高年層を意識したサイトではフォントサイズは大きめに指定した方がいいかも。大胆に18px相当とか。
— TAK (@tak_dcxi) October 17, 2019
スマホで文字が大きいと改行が煩雑化する、覗き見の回避がしにくいなど逆にユーザビリティを下げることもあるとか。若者をターゲットにしたサイトのスマホでのフォントは小さめにした方がいいかもしれない。実際、ブランド系サイトのスマホ版は10px〜12pxで指定しているケースが多くなっているとか。
— TAK (@tak_dcxi) October 17, 2019
ジャンプ率を意識する。ジャンプ率が大きいと若々しく元気な印象に、ジャンプ率が小さいと大人らしく上品な印象になる。
見出しのサイズはベースフォントを基準に黄金比で決定するとよい。
見出し(h1〜h6)のサイズは黄金比を基準に決定するとバランスが良くなるのでオススメ。Type Scale[https://t.co/k2hP9wSqwt]で指定のフォントサイズから黄金比の計算が可能👍ちなみにPhotoshopのデフォルトのテキストサイズ値は黄金比。さすがAdobe。
— TAK (@tak_dcxi) October 17, 2019
# フォントカラー
文字は読みやすい色にする。配色編でも触れたが、#000や#fffは背景色やデバイスの明るさとのバランスによっては色が強すぎて見える可能性がある。背景やデザインに合わせてトーンを調整する。
フォントカラーでも原色を使うのは非推奨。
背景色と混同する色は使わない。ユーザビリティを著しく損ねる。
# 文字組
バナーなどの画像実装とは違いWebデザインで文字組に拘ることは難しい。とはいえ、テキストはベタ打ちのままにはしないようにする。
DTPほど細かく調整する必要はないが、詰めやカーニング、トラッキングは読みやすいように調整する。
CSSのfont-feature-settingsプロパティでカーニングを調整できるが、このプロパティには色々と罠が多いので注意する。
【font-feature-settingsの罠】
— TAK (@tak_dcxi) September 4, 2019
font-feature-settingsを使うとOpenTypeフォントの文字詰めができるんですが、それ以外のフォント(メイリオとか)では効かないのでコレで詰めてletter-spacingで字間を調整するやり方だとWin7といった游フォントが搭載されてないOSで字間が空きすぎることがあります
Photoshopなどのテキストは等幅がデフォルトになっていることが多い。文字間や行間は適切に調整する。
バナーを作る時は文字組に拘る。
約物の空きが気になる場合は「Yaku Han JP」というWebフォントを使うのがオススメ。
# その他留意点
CSSでfont-family: sans-serif;のように指定するとシステムデフォルトのフォントが使用されることに留意する。OSのアップデートによってフォントが変化する可能性があることに注意する。
MacとWindowsにデフォルトで入っているフォントの種類には差がある。違うOS間でやり取りする際は注意。Windowsにはヒラギノフォントはデフォルトでは入っていない。
# 参考記事
# 参考スライド
# 参考書籍
---
次回「デザインカンプ編」はこちら↓
いいなと思ったら応援しよう！
