Contents
デザインを考える～タイポグラフィ〜
タイポグラフィとは？
タイポグラフィとは、元々は活版を用いた印刷術のことです。
現在ではデザインにおける活字（テキスト）の構成および表現を意味します。具体的にはフォントの種類、サイズ、文字組や行間等を特定のルールに則って上手く組み合わせることで、文章の読みやすさや美しさを意識したデザインを作る手法です。
Webデザインの９５％はタイポグラフィとも言われています。タイポグラフィがしっかりできているかどうかで、そのデザインのクオリティを大きく左右します。初心者は意外と疎かにしがちなテキストのデザインですが、フォント、サイズ、色、行間など様々な設定をしっかりと確認してデザインを行うようにしましょう。
タイポグラフィの効果
タイポグラフィを用いることで、イラストが苦手な人やデザイナーでない人でも、相手に伝えることの出来る情報量と濃度を高めることが可能になります。
タイポグラフィの目的は大きく２つに分けられるます。
デザイン性の高いテキストデザインにするような場合は文字を見せるタイポグラフィで、本文のテキストのデザインを読みやすく整えるような場合は文字を読ませるタイポグラフィとされています。
文字を見せるタイポグラフィ
デザイン性の高いテキストに仕上げることで、デザインの一部として組み込む場合
文字を読ませるタイポグラフィ
フォント、太さ、サイズ、行間、色などを調整することによって、読みやすいテキストするのが
ヒーローヘッダーにタイポグラフィを組み合わせてWebデザインは定番になりつつあり、多くのWebサイトで取り入れられています。
タイポグラフィのポイント
タイポグラフィを使用する場合、いくつかのポイントがあります。以下にそのポイントとなる項目をご紹介します。
フォント（書体）
それぞれのフォントが持つ印象の傾向を知ることが重要です。
選ぶ手順として、まずは日本で使用する和文 フォント・欧文 フォントを細かく分類した８カテゴリの中から、フォントの系統を選びます。
さらに系統内のフォントからさらに絞り込んでイメージに合うものを選ぶことで、ユーザーに伝えたいイメージを的確に伝達することが可能になります。
ゴシック体は力強く、明朝体はやわらかな印象を与えます。
強さや堅牢性を表現したい場合はコントラストのはっきりした色の太字ゴシック体を使用したり、繊細さや柔軟性を表現したい場合はコントラストを抑えた色の細字明朝体を使用したりすると良いでしょう。
サイズ／色
フォントサイズの種類を絞る。
あまりに多くのフォントやフォントサイズを使用することは、読み手に散漫な印象を与えます。１つのドキュメントの中で、サイズを3種類程度の使用に抑えるとすっきりと見せることができます。
同じフォントでもウェイト（文字の太さ）や色を変えることにより、与えるイメージを変えることができます。
フォントファミリーを決めることも重要です。
フォントファミリーとは、ウェイトや文字幅が異なるフォントのまとまりのことです。Webデザインをすっきり見せるためには、フォントの種類は増やさずフォントファミリーを有効活用しましょう。
重要な部分ほど大きなフォントサイズして重要な情報であることを見る人に強調して伝えることができます。
重要度の低い部分はサイズを小さく薄くすることで補足的な情報であることを見る人に伝えることができます。
白の背景にはグレイや半透明の黒を使い。
濃い背景には半透明の白を使うのがおすすめです。
リズム感
視線誘導やイメージを付加してリズム感を持たせましょう。
リズム感を持たせるとはフォントサイズや色に緩急をつけることにより、伝えたい情報に優先度をつけることです。キャッチコピーと地文が同じフォントの場合、閲覧者はどこを見れば良いか迷ってしまうことがあります。フォントサイズやレイアウトを考える際には、どの情報を見て欲しいか優先順位をつけることにより意味のあるデザインを作れます。
出版物では数字を大きくして単位を小さめに表現してみましょう。リズム感を持たせることにより、文章が見やすくなるだけでなく、必ず見てほしい重要度の高い情報を提示することができます。
レイアウト
視線移動を意識してレイアウトしましょう。
行間を詰めすぎた場合、１行目から２行目へ読み進める際に、１行目の行頭に視線が移動してしまうことがあります。また、１行目を読んでいる際に２行目の文字が視界に入って気が散ることもあるかもしれません。
読みやすい文章にするためには、視線移動を意識してレイアウトしましょう。一般的に、横書き文章の行間は１５０～１９０％程度、行長は１５～４０文字程度にすると読みやすいと言われています。
デザイン例
・アルファベットを活用する。
アルファベット１文字をシンボリックに配置
・写真を活用する
写真の上に文字をのせたり
写真の中に文字を組み込む
写真を文字型にする
・イラストや曲線に沿ってレイアウトする
・手書きフォントで楽しい雰囲気を出す
タイポグラフィの説明サイト
Webマーケティングメディア https://ferret-plus.com/2017