ウェブデザイナーにお勧め!フォントやタイポグラフィの知識・テクニックを学ぶまとめ

前の会社では新人ウェブデザイナーが必ずやっていたことの一つに、文字詰め1,000本ノックがありました。1,000は大げさな数字ではなく、実際にはそれ以上の数をこなしていたと思います。
ウェブデザインのUI/UXにおいてタイポグラフィは重要な存在で、特にミニマルやフラットなどはタイポグラフィが非常に重要な役目を担っています。

フォントやタイポグラフィの知識を深め、テクニックを身につけるのに役立つ情報をまとめました。

インフォグラフィックのキャプチャ

インフォグラフィック:Type Guide

フォントやタイポグラフィの基礎知識を学ぶ

サイトのキャプチャ

フォントの基礎知識

サンセリフ、セリフ、スラブなど書体の分類から、ファミリー構成、フォントの各部位の名称、ファイブラインについての解説。
和文書体は、書体の種類に。

サイトのキャプチャ

美しく文字を組む

「タイポグラフィを学ぶ」特集の第1回「美しく文字を組む」。学校などでデザインの教育をうけていないウェブデザイナーを対象に、文字を組むとはどういうことか、どこに注目して組むのか、スペースを効果的に使う方法など、やさしく丁寧に解説されています。
第3回「世界中で愛される書体、ヘルベチカとは」ではよく利用するHelvetica, Universなどフォントの背景を知ることでより面白くなると思います。

サイトのキャプチャ

文字を組む方法 -モリサワ

グラフィックデザイナーの永原 康史氏による「日本語組版のこれまでとこれからをメディアのデザインとして考える」連載コラム。1-12回まで掲載されており、PDFもダウンロードできます。

読みやすさをデザインするテクニック

サイトのキャプチャ

基本的だけど大切なタイポグラフィのシンプルな14のルール

ウェブデザインをはじめ、印刷にも役立つ基本的だけど大切なタイポグラフィのルールをご紹介。

  1. たくさんのフォントを使わない
  2. ヒエラルキー
  3. フォントのサイズ
  4. ボディコピーに最適なサイズ
  5. タイプフェイスは読みやすく
  6. レディング
  7. カーニング
  8. アクセント or 強調
  9. 強調しすぎない
  10. ボディテキストのルール
  11. ベースラインは揃えて
  12. ツラは揃えて
  13. ボリュームは適切に
  14. ダブルクォートとビュレット
  15. フィボナッチ数列
サイトのキャプチャ

Webデザイナーなら知っておきたいWebタイポグラフィの基本

タイポグラフィで大切なことは、「文字を見せる」「文字を読ませる」こと。ウェブデザインでタイポグラフィのクオリティをあげる5つのテクニックが紹介されています。

  1. 文字間を詰める
  2. 大きさ・位置を揃える
  3. 動きを持たせる
  4. 文字を変形させる
  5. 行間と行長を調整する
サイトのキャプチャ

読みやすく

伝わるデザインから、文字や文章の読みやすさを可読性・視認性・判読性の3つのポイントから考察しています。

サイトのキャプチャ

文字の読みやすさを生み出す為の知識と方法【前編】

上記の「読みやすく」を参考に更に考察したもので、合わせて読んでおきたいですね。
後編もあります。

サイトのキャプチャ

デザイナーは文字詰めに命をかけよう ~和文と欧文のフォーマットの違いから考える~

文字詰めをどのように行うのか、どこを見るのか、和文と欧文の文字詰めのテクニックがここでマスターできます。
また、Webにおいての理想的な行間とは?では、紙とは異なるウェブ用の行間と文章の幅について非常にためになります。

サイトのキャプチャ

読ませる文字組みと注目してもらう文字組み

グラフィックデザイナーの海津ヨシノリ氏のコラムで、ウェブに限らず、さまざまな文字組のバリエーションを実験的に行い、読ませる文字組みついて考察しています。最後の8ページではPDF版もダウンロードできます。

サイトのキャプチャ

ウェブは読み飛ばさせるようにデザインする! ジャンプ率の効果

ユーザーがウェブページを見る時、読み物系のページは別ですが、飛ばし読みしていることが多いです。これはデザインする側から見ると、飛ばし読みを前提にデザインする必要があるということです。画像、見出し、カラー、アイコンなどを効果的に使って、このジャンプ率をコントロールします。

サイトのキャプチャ

テキストのメリハリをつける方法7つ

これもジャンプ率のお話しで、目立つべきところは目立たせ、重要な箇所をしっかり見せるためのデザインのテクニックです。

  1. 大小の差を広げる
  2. 色の彩度差、明度差を大きくする
  3. 余白を大きくする
  4. アイコンや線などのワンポイントをつける
  5. 背景色や枠線をつける
  6. 文字の太さを変える
  7. 書体を変える

フォントを選ぶ方法・購入時に気をつけたい事

サイトのキャプチャ

明朝体とゴシック体の基本

ウェブデザインで和文フォントを使用する際、最も基本となるのは明朝体とゴシック体です。この2つの特徴と具体的な使い分け方の解説です。フォント選びの参考に!

サイトのキャプチャ

これでもう迷わない! Std / Pro / Com / W1G / Paneuropean / Cyrillicなど欧文フォントの言語のキーワードを徹底解説

フォントを購入する際に気になる「Helvetica Std」の「Std」って何? これ買っていいの? という疑問がこれで解決します。

サイトのキャプチャ

欧文フォントを買おうとしている人へ7つのアドバイス

フォントは高価なものも多く、なかなか気軽には購入できません。ここにある7つのアドバイスを参考に、判断するのも手です。

  1. デザインのジャンルに固執しない汎用性のあるデザインの書体を選ぶ
  2. ファミリーやOpenTypeフォント機能が充実しているフォントを選ぶ
  3. 書体のデザインはテクスチャで検討する
  4. どこのフォントストアで購入するか検討する
  5. ファミリーでまとめて購入する
  6. USドル建てかユーロ建てか…支払い通貨に注意
  7. セール情報を欠かさずチェックする

タイポグラフィの勉強の息抜きに

まずは、文字からグラフィックを作りだすクリエイティブ溢れる動画から。

サイトのキャプチャ

Kern Type

マウスのドラッグ、キーボードの矢印キーを使い、カーニングを行うゲーム。「Compare」をクリックすると、カーニングの美しさの点数が表示されます。

top of page

©2017 coliss