見出し画像

個人的に実践しているWebデザインガイドライン⑤ テキスト編

あくまで個人的に実践しているデザインガイドラインです。

記事一覧はこちら↓

# 基本事項

使用するフォント・フォントサイズ・フォントカラーはあらかじめ決めておき統一感をもたせる。

文章の頭位置を揃え、他の要素とのベースラインも揃える。

文章の周囲に適度な余白をつけ文章を読みやすく。行間を揃えて適切に開ける。

日本語文章は左揃えが基本。コピーライト表記や署名などの一般慣習的な場合を除き、基本的に右揃えの文章は使用しない。

中央揃えは利用場所を考慮する。見出しなどの短いテキストに用い、長い文章ではなるべく中央揃えを使わない。

視覚に障害がある方は細身の多いフォントは読みづらい。アクセシビリティ対策として文字のウェイトには気を配る。

画像として使用するテキストは適宜アウトライン化する。

長いテキストリンクを連続して使用しない。

文章の区切りをハッキリさせる。

無意味な改行は厳禁。

# フォント

フォント選びは賢く、要件やWebサイトの雰囲気に合ったものを選ぶ。

フォントの種類・大きさ・太さによって印象が大きく変わることに留意する。

ライセンスに必ず注意する。Webフォント利用が許可されていないフォントは絶対に使わない。有料フォントやダウンロードしたフォントは利用が制限されることが多い。フリーフォントも利用が制限されていることもあるので規約は必ずよく読んで厳重に注意すること。

フォントの使い分けは規則性を持たせる。ベースフォントと見出しで使い分けるなど。

フォントはOSの標準フォント(游フォント・ヒラギノ・メイリオetc)で表示されることを考慮し検討する。

IEでは游フォントを表示すると謎の余白ができるので留意。

Webフォントを使う場合はライセンスの心配が少ないのでGoogle Fontsを使う。

日本語のWebフォントはファイルサイズが大きいので読み込みが遅くなることを留意する。

明朝体はおしゃれであるが、ディスプレイによって掠れたり読みにくいことがあるのでベースフォントで使うのは非推奨。見出しなどのデザイン性を強調する箇所で使用する。

Androidはデフォルトで明朝体がインストールされていない場合が多い。Webフォントを利用すればAndroidでも明朝体で表示が可能。

Webフォントで明朝体を実装する際は「Noto Serif CJK」を使うのがオススメ。IE対策にもなる。

飾りフォント・手書きフォント・装飾性の高いフォントはオシャレではあるが読みやすいわけではない。利用する場合は構成に注意する。

# フォントサイズ

フォントサイズで決めておくのは、主にベースフォントと見出し。

ベースフォントサイズは主に12px~18px相当で。ターゲット層やデバイスに応じて検討する。複数サイズの混在はできるだけやらない。

ジャンプ率を意識する。ジャンプ率が大きいと若々しく元気な印象に、ジャンプ率が小さいと大人らしく上品な印象になる。

見出しのサイズはベースフォントを基準に黄金比で決定するとよい。

# フォントカラー

文字は読みやすい色にする。配色編でも触れたが、#000や#fffは背景色やデバイスの明るさとのバランスによっては色が強すぎて見える可能性がある。背景やデザインに合わせてトーンを調整する。

フォントカラーでも原色を使うのは非推奨。

背景色と混同する色は使わない。ユーザビリティを著しく損ねる。

# 文字組

バナーなどの画像実装とは違いWebデザインで文字組に拘ることは難しい。とはいえ、テキストはベタ打ちのままにはしないようにする。

DTPほど細かく調整する必要はないが、詰めやカーニング、トラッキングは読みやすいように調整する。

CSSのfont-feature-settingsプロパティでカーニングを調整できるが、このプロパティには色々と罠が多いので注意する。

Photoshopなどのテキストは等幅がデフォルトになっていることが多い。文字間や行間は適切に調整する。

バナーを作る時は文字組に拘る。

約物の空きが気になる場合は「Yaku Han JP」というWebフォントを使うのがオススメ。

# その他留意点

CSSでfont-family: sans-serif;のように指定するとシステムデフォルトのフォントが使用されることに留意する。OSのアップデートによってフォントが変化する可能性があることに注意する。

MacとWindowsにデフォルトで入っているフォントの種類には差がある。違うOS間でやり取りする際は注意。Windowsにはヒラギノフォントはデフォルトでは入っていない。

# 参考記事

# 参考スライド

# 参考書籍

---

次回「デザインカンプ編」はこちら↓


愛と平和