« ブログのトップページに戻る

今更聞けない!フォント選びの基本

   投稿者 : 2015年6月23日 By

イメージ画像

Webデザインを行うとき、色と同様にビジュアル面で大変重要な要素となってくるのが、どのようなフォント、書体を選ぶかということだ。Webデザインをはじめるときは基本的な書体を選び、全体として統一する方がよい。いろいろな種類のフォントが混ざってくると、統一感のない、まとまりのないデザインになってしまう。
また、Webデザインでは印刷物に比べあまり、フォントに関しては重要ではないとされるが、どのようなフォントを選ぶかで印象は大きく変わる。
今回は押さえておきたい“フォント選びの基本”についてまとめてみた。

 

1.Webデザインではなぜ、フォントにこだわれないのか?

Webデザインの場合はフォントの指定はCSSで設定するが、指定したフォントが特殊だった場合、ユーザーのパソコンに指定したフォントが入っていないと表示されない。CSSで設定するフォントはユーザーのパソコンでデフォルトで入っているフォントの中で設定することが第一となる。

※Webフォントという技術を使えば、ユーザーの環境に依存しないで、テキスト表示はできるが、まだ、日本語に対応したフォントは少ない。

さらに、文字サイズの指定も最小単位は1ピクセルであるので、たとえば、10.5ピクセルと設定しても、ブラウザごとに解釈が違い、レイアウトが崩れる可能性が高い。
また、文字間を印刷物のように細かく一文字一文字を文字ツメすることができないなど、Webにおいてはさまざまな制約があり、印刷物のように細かい設定ができないことを理解したうえでデザインを行わなければならない。

 

2.フォントの基本は「明朝体」と「ゴシック体」である

Web、印刷物に限らず、フォントの種類は大きく分けて二種類である。セリフ体である「明朝体」、セリフのない、サンセリフ体の「ゴシック体」である。
「明朝体」は横線に対して縦線が太く、線の末端に「とめ」「はらい」、「ウロコ」のある書体である。一般的は明朝体は「可読性」が高く、文章が長くなっても目が疲れない書体である。明朝体は新聞や雑誌といった長文を扱う時に用いるのが一般的だ。
「ゴシック体」は横線と縦線の太さがほぼ同じである。ゴシック体は明朝体より「視認性」が高く、はっきり見え、よく目立つ書体といえる。プレゼン用のスライドのテキスト、ポスターやチラシのタイトル、見出しに用いられる。

フォント01

 

3.「明朝体」と「ゴシック体」の印象は?

フォントは文章を伝えるだけではない。フォントには色と同じようにイメージを伝えるという機能も持っている。フォントの持っている視覚的効果を使い分けることがWebデザインでは重要である。

「明朝体」の印象は大人、上品、知的なイメージあり、優雅で繊細な印象がある。縦線の幅が細い明朝体は同じ文字でモダンで中性的、都会的で洗練されたイメージが、縦部が太くなるにつれ、権威的、男性的、歴史的、和風のイメージが強くなる。

 

「ゴシック体」の印象は親しみや存在感、男性的なというイメージがある。線幅が細くなるとシャープで現代的な女性的なイメージになり、太くなると、元気、力強い、大人、男性的といったイメージが強くなる。

ゴシック体

 

下に例として弊社サイトのバナー広告でフォントを変えて比較してみると、伝わるイメージが違うのが良く分かる。
明朝体はアイキャッチとしては弱いが、信頼性や、堅実、格調などのイメージを伝えることができる。
ゴシック体は視認性が高く、親しみ感や、力強さ、男性的といったイメージを伝えることができる。

 

まとめ

フォント選びは、色選びと同様にユーザーに対してどのような印象を与えたいかを基準に選ぶことが重要である。
フォントを選ぶ場合は、それぞれの書体で与える印象、読みやすさを考えてサイトのイメージにあったものにする必要があるということだ。
現在のWebデザインにおける「文字」の在り方は印刷物に比べ、その扱いはまだ、情報伝達の手段でしかないかもしれないが、やがて、フォントによるイメージ伝達においても制約がなくなるときが来るだろう。将来に向けて世の中にたくさんあるフォントのもつ印象イメージ、読みやすさ、視認性など、整理しておくのも良いだろう。

関連する記事

海外展開を支援する補助金・助成金制度を知ってますか?... 海外展開や販売を行うときに利用できる「補助金・助成金」についてご存知だろうか? 最近、よく耳にする言葉だ。しかし、その仕組みや内容については、意外と知られていないようだ。簡単に言うと「補助金、助成金」とは国や地方公共団体から支払われるお金のことで、返済の必要が無いものが多く、中小企業経営者に...
色の持つイメージ:ピンク色は女性、幸福をイメージ... 色が何らかのサインを送りだしていることは誰もがよく知っている。誰がどんな色を選ぼうと、共通しているのは、その色に対して人は反応するということだ。私たちは色に対し条件反射し、気づくこともない。色に対する反応は直観的反応とも言われ、個々の色は人の本能的な反応と密接に関係し、その反応は生理的、感情的、...
Eコマースに利用できるチャットボットって何?... 最近、特にEコマースではチャットボットによるサービスを提供しようという試みが増えている。EC業界では通販サイト「ロハコ」に導入された顧客サポートチャットボット”マナミさん”が有名だ。 また、Appleが提供するiphoneにもある呼びかけ質問に答えてくれたり、会話を楽しむAI機能の一つが、...
集客効果があるといわれるリタゲ広告はどうなの?... ECサイトを運営されている方は一度は行ったことがあるだろうリターゲッティング広告。ディスプレイ型広告を使用したターゲッティング手法の一つで、自社サイトに訪問したユーザーに対して、ユーザーが他のサイトを訪問すると、自社サイトの広告バナーを表示させることができる仕組みが、リターゲッティング広告または...
3C分析で自社WEBサイトを強化するには 3C分析という言葉はマーケティングの世界では良く使われるキーワードではあるが、意外とその意味や実際に3C分析をどう行えば良いのかわからない方も多い。 今回は、3C分析を使って自社WEBサイトを改善またはリニューアルするときの留意点などをまとめてみた。   ●そもそも3C分析とは...
ディバイス毎のWebブラウザシェアを調べてみた 2015.8~9... 前回「こんなに違う! 世界と日本のブラウザシェア」ではデスクトップとスマートホンのブラウザシェアの推移についてその概要を整理してみたが、今回は、最新の各ディバイス毎のブラウザシェア率の日本と世界の違いを調べてみた。   1.デスクトップのブラウザシェア   1-1.国...
このエントリーをはてなブックマークに追加
 

今なら海外展開の為の成功BOOKを無料ダウンロードできます。是非この機会にお読みください。