月商100万円を達成するヒント満載!楽天市場・Yahooショッピング・ECサイト運営のマニュアル

フォントはデザインにとっての声であるという事実

皆さんこんばんわ。本日は珍しく夜のブログ執筆です。いつもは朝の時間に書いているのですが今週は朝から新商品の構成に追われており締め切りギリギリまで手付かずになってしまっていました。

さて、前回の記事にて写真の重要性をお伝えしたのですが本日はデザインにおいて画像と双璧をなすフォントについてです。私のデザインの師曰く「フォントは声」と、心に染みる格言を頂きました。当時ものすごく感銘を受けて自分自身の信条に加えた事を今でも強く覚えています。

フォントから感じる声は受け取り手の感性によって異なりますが一般的な感性を基軸として私の見解も踏まえた様々なフォントをデザインに落とし込んでみましょう。字詰めなどの話は真琴の過去の記事を参考にして下さい。

目次

  1. 明朝体は日本語に優しい
  2. 細ゴシックは洗練されてモダン
  3. 太ゴシックって親しみやすい
  4. フォントで変わる伝わり方
  5. まとめ

明朝体は日本語に優しい

新聞から雑誌の見出しパッケージなど見ない日は確実にないくらいに私達の生活に溶け込んだフォントの代表、それが明朝体です。縦横の先の強弱が生むコントラストで縦書き横書き関係なく可読性の高い設計になっています。文庫本や漫画のセリフ、新聞などの文字を大量に読む事を想定した印刷物はもれなく中太明朝になっていますね。英語のセリフ体(Times New Romanなど)も同様です。しかし、WEBではあまり本文に明朝を使用することはありません。これはドット表示のモニターで明朝を表示すると横線の細い部分がかすれてしまい逆に可読性が損なわれるためにモニター出力の場合はゴシックがメインになっています。

また、後述のゴシック体よりシュッとしたイメージなのでキャッチコピーなどで使用することでシャープな印象を与えます。

細ゴシックは洗練されてモダン

ゴシック体の中でも細いゴシック(サンセリフ体含む)は、数年前からのフラットデザイントレンドに起因して使用される頻度が高くなってきました。細ゴシックは線が細いので小さな文字などで使用すると可読性が著しく落ちるのでフォントサイズと背景とのコントラストに注意して利用することでモダンな印象を読み手に与えることが出来ます。

iOS7移行のアップルのデザインでよく目にするデザインなので馴染みのある方も多いかと思います。極端に細いフォントはデフォルトのフォントセットには入っていませんがPhotoshopなどをインストールするとセットでついてくる小塚ゴシックのELなどが手に入れやすい日本語細いゴシックです。新ゴとくらべて幅が狭いのでスッキリとまとめる事ができます。

太ゴシックって親しみやすい

私の個人的な意見ですがWEB(特にEC)では太ゴシックが最大派閥なのではないかと考えています。これは親しみやすさと力強さの公約数を満たしているからに他なりません。モニター出力でもかすれることなく表示されるので太さを買えて見出しと本文を統一したフォントでデザインできるなど声の統一が簡単に行えることも扱いやすさのポイントですね。

私は太ゴシックの場合はほぼモリサワの新ゴを使っています。小塚ゴシックに比べて横幅の広さが親しみやすさとなり老若男女問わず幅広い読み手に自然に受け入れられるためです。その反面大衆性が高いので独自の世界観などを構築する際には使い勝手の悪い物となってしまいます。良くも悪くも大衆向けの親しみやすいフォントとなっています。

フォントで変わる伝わり方

過去に制作したものを様々なフォントに変更してどのように印象が変わるかを試してみましょう。

ゴシック見出し+ゴシック本文

とてもニュートラル、全体的にコンパクトにまとまっています。可もなく不可もなく無難な組合せですね。個人的にはミニマリズムが好きなので好きな組合せの一つです。

明朝見出し+ゴシック本文

フォントサイズ大きめなので明朝体の細い部分も視認でき、見出しと本文のコントラストを容易に視認できます。上記のゴシック×ゴシックとあわせて汎用性の高い組合せです。

明朝見出し+明朝本文

フォントサイズ的に見出しは問題ないのですが本文は少し字が潰れてしまっています。どうしてもフォントサイズが小さい明朝体は先端の細い部分が視認しづらい場合が多いです。これはPCでもレティーナディスプレイなどの高解像度のスマホでも同様ですので視認性を意識したフォントサイズやアンチエイリアスの設定が必須となります。

ゴシック見出し+明朝本文

あくまで個人的な意見なのですがものすごくアンバランスな感じを受けます。特に罫線部分と本文のコントラストが悪い意味で強いのでチグハグに感じて一貫性のある文章であると認識しにくいおデザインです。本文も先述のフォントサイズの小さい明朝体なので可読性に乏しく見出しともマッチしていません。

ポップ体+MSゴシック(Windows純正フォント)

論外です!写真との雰囲気、世界観など全てにおいて褒めることができません。「ダサい」の一言につきます。町内会のチラシレベルで到底寛容できるものではありません。

文字装飾のちょっとしたテクニック

明朝体の見出しは余白を十分に取ることで落ち着いた印象で安心感を与えます。逆に余白を詰めすぎると窮屈な印象になってしまい伝えたい世界観を阻害することになってしまいます。

細~中ゴシック体では細い罫線などの装飾や下線などを組み合わせることでトレンディなデザインを演出することが出来ます。2017年もゴーストボタンなどのトレンドは継続なので使用頻度が高くなりますね。

まとめ

有料無料様々なフォントがあり、それぞれに読み手への伝わり方、可読性、ユーザビリティなどに特徴を持っています。フォントを変えることで商品説明の声が男性なのか、女性なのか。落ち着いているのか、明朗快活なのかなど多種多様な伝わり方をデザインできます。

どんなWEBサイトでも文字があり、フォントで魅せ方を意識しています。何となくで使用している新米デザイナーさんには特に色々なフォントを試してみてください。自分が読み手に伝えたい世界観をデザインできます。

でも気をつけて下さい、「カッコイイから英語で~」や「可読性だけで明朝」といったステレオタイプの考え方ではなくあくまで読み手ファーストでデザインすることが大事です。完成したものを社内で共有してダメ出ししてもらったりしてデザインは洗練されて行くものです。

以下商用可能なフリーフォントです。弊社でもよく使用しているものですのでよかったら一度使ってみて下さい。

はんなり明朝

女性的なイメージで意外と使いやすい明朝体です縦書きでも雰囲気抜群ですよ

ダウンロードはこちら→http://typingart.net/?p=44

NOTO SANS(ゴシック体)

GoogleとAdobeが共同開発したフォントで世界中の文字をカバーするという大いなる目的の元配布されています、webフォントでもお馴染みなのですがウェイトが結構あるので普通にデザインでも多用しています。ちなみに、NOTO SANとはNO more TOhu moji SANSの略で豆腐文字の撲滅が名前の由来です。

ダウンロードはこちら→https://www.google.com/get/noto/#sans-jpan

※豆腐文字とは

文字化けしたりフォントにない形状の文字を代替する□で表される文字。

by
株式会社松平商会の社長です。経営者として組織のマネジメントをするのが仕事ですが、デザイナー上がりなので制作全般を楽しんで仕事しています。初級~中級程度の制作のテクニックと写真撮影、経営の記事を中心に執筆しています。
SNSでフォローする