EC studio EC studio デザインブログ

こんにちは。新免です。

普段から私たちは沢山の文字を目にする機会があります。
文字は身の回りに溢れており、私たちに様々な情報や
印象を与えてくれます。

文字はただ読み物として情報を伝えるだけではなく、
文字をデザインに落とし込むことで様々な印象を
与えることになります。そのため、デザインをする上で
文字の扱は非常に気をつけなければいけません。

そこで今回は、文字の扱い方で気をつけていることの
基本的な部分をまとめてみようと思います。

フォントの統一

フォントは和文フォントの中に「明朝体」「ゴシック体」、
欧文フォントの中にも「セリフ体」「サンセリフ体」という種類があり、
その中にも様々なフォントがあり、選ぶのに迷ってしまうほどです。

ただし、いろんな種類のフォントがあるからといって、異なるフォントを
多数使ってしまうと、イメージに違和感が出てしまいます。
フォントは作るビジュアルの雰囲気にあわせ統一すると、
違和感も生じず信頼感のあるイメージに仕上がります。

フォントの統一

和欧混合のフォントの組み合わせ

デザインをする上でタイトルやキャッチコピーを作る場合に、
日本語と英数字が混ざる場合があります。

例えば「Webサイト」という言葉でも 「Web」「サイト」と和欧混合になっています。
和文フォントだけでも入力できますが、 英数字は欧文フォントの方がバランスの
とれた文字になっているので、英数字の部分は「欧文フォント」 日本語の部分は
「和文フォント」を混ぜて使うとバランスのとれたものになります。

和欧混合でフォントを使う場合は「明朝体とセリフ系」「ゴシック体とサンセリフ系」
という組み合わせで使うと非常にバランスが良いです。
ただし、和文フォントの方が大きく見えるので、フォントの高さや太さなど
欧文フォントのサイズ調整が必要です。

和欧混合
※フォントの高さや太さの調整が必要

行間は140%~150%で設定する

Webサイトは読み物系のコンテンツも多く存在します。
読み物系のコンテンツであれば必然的に文章が多くなりますが、
そこで気をつけたいのが行間です。

行間が狭いと詰まっているように感じ、読みにくくなり
ユーザーの離脱の原因にもなってしまいます。
狭くなりすぎないよう行間に気をつけましょう。

また、横画面いっぱいに伸びている文章も読みにくいので、
適度な箇所での改行も必要です。

行間の設定

アンカーテキストはわかりやすい色を指定する

アンカーテキストの色はスタイルシートを設定すれば
色を変更することができますが、 リンクだとわかる色にしましょう。

赤などに設定してしまうとリンクなのか、強調された文章なのか
判別できなくなってしまいます。 アンカーテキストの色は通常、
青色で表示され文字の下に線が表示され、訪問後は紫で表示されます。

アンカーテキスト

文字のジャンプ率

文字のジャンプ率とは、文字の大きさの大小比率のことです。
大小比率が大きいほどジャンプ率は「高く」なり、
大小比率が小さいほどジャンプ率は「低く」なります。

大きなジャンプ率でデザインする場合は、
元気、躍動的、目立つ、楽しい、広告的、飛ばし見しやすい、などの
印象を与えます。新聞、週刊誌、中吊り広告、ファッション誌などで
ジャンプ率の高いデザインのものがよく見られます。

低いジャンプ率でデザインする場合、は
上品、気品がある、説得力、知性的、堅い、目立たない、などの
印象を与えます。教育関連書、週刊誌などでジャンプ率の低い
デザインのものがよく見られます。

文字のジャンプ率

見出しをつける

見出しの目的は、紙面・画面上にリズムを作り、ユーザーの視線を引きつける
という目的があります。 ただしユーザーの視線を引きつけるからと言って、
ただ単純に目立つものにすればいいと言うことではありません。

見出しをデザインする際、上記で述べた「フォントの組み合わせ」や
「ジャンプ率」なども気をつけることが必要ですが、デザイナーが
一番気を付けなければならないことは、過度なグラフィックを用いないことです。

あくまで主役は本文ですので、過度なグラフィックを用い
「本文を読んでもらえない」ということが無いようにしましょう。

また、見出しの内容も本文で何が書いてあるのか完結に
わかるものが好ましく、本文の内容を反映した具体的な内容や、
ユーザーに記事を読みたいと思わせる文章にしましょう。

例)
× → パソコン機能
○ → 5年間使える充実のスペック

文字の扱いでデザインの印象は変わってしまいます。
サイトの雰囲気にあったフォントを選び、統一させることで、
ユーザーに狙い通りの印象を与えることも可能です。

またWebサイトは読み物なので、ユーザーの事を考え、
読みやすい「行間」「文字量」「大きさ」をしっかり考慮することも大切です。


関連した記事:
投稿者
カテゴリー
人気のエントリー
最近のエントリー
アーカイブ
Copyright© ChatWork, All Rights Reserved. secured by ESET.