ウェブデザイナーにお勧め！フォントやタイポグラフィの知識・テクニックを学ぶまとめ
Post on:2014年5月13日
sponsors
前の会社では新人ウェブデザイナーが必ずやっていたことの一つに、文字詰め1,000本ノックがありました。1,000は大げさな数字ではなく、実際にはそれ以上の数をこなしていたと思います。
ウェブデザインのUI/UXにおいてタイポグラフィは重要な存在で、特にミニマルやフラットなどはタイポグラフィが非常に重要な役目を担っています。
フォントやタイポグラフィの知識を深め、テクニックを身につけるのに役立つ情報をまとめました。
インフォグラフィック：Type Guide
フォントやタイポグラフィの基礎知識を学ぶ
サンセリフ、セリフ、スラブなど書体の分類から、ファミリー構成、フォントの各部位の名称、ファイブラインについての解説。
和文書体は、書体の種類に。
「タイポグラフィを学ぶ」特集の第1回「美しく文字を組む」。学校などでデザインの教育をうけていないウェブデザイナーを対象に、文字を組むとはどういうことか、どこに注目して組むのか、スペースを効果的に使う方法など、やさしく丁寧に解説されています。
第3回「世界中で愛される書体、ヘルベチカとは」ではよく利用するHelvetica, Universなどフォントの背景を知ることでより面白くなると思います。
グラフィックデザイナーの永原 康史氏による「日本語組版のこれまでとこれからをメディアのデザインとして考える」連載コラム。1-12回まで掲載されており、PDFもダウンロードできます。
- 第二回 「日本語の組み方(1) 漢文組み」
- 第三回 「日本語の組み方(2) 欧文組」
- 第八回 「書体を選ぶ(1) 書体を見分ける」
- 第九回 「書体を選ぶ(2) 和文書体を見分ける」
- 第十回 「組み方を考える」
読みやすさをデザインするテクニック
ウェブデザインをはじめ、印刷にも役立つ基本的だけど大切なタイポグラフィのルールをご紹介。
- たくさんのフォントを使わない
- ヒエラルキー
- フォントのサイズ
- ボディコピーに最適なサイズ
- タイプフェイスは読みやすく
- レディング
- カーニング
- アクセント or 強調
- 強調しすぎない
- ボディテキストのルール
- ベースラインは揃えて
- ツラは揃えて
- ボリュームは適切に
- ダブルクォートとビュレット
- フィボナッチ数列
Webデザイナーなら知っておきたいWebタイポグラフィの基本
タイポグラフィで大切なことは、「文字を見せる」「文字を読ませる」こと。ウェブデザインでタイポグラフィのクオリティをあげる5つのテクニックが紹介されています。
- 文字間を詰める
- 大きさ・位置を揃える
- 動きを持たせる
- 文字を変形させる
- 行間と行長を調整する
伝わるデザインから、文字や文章の読みやすさを可読性・視認性・判読性の3つのポイントから考察しています。
上記の「読みやすく」を参考に更に考察したもので、合わせて読んでおきたいですね。
後編もあります。
デザイナーは文字詰めに命をかけよう ～和文と欧文のフォーマットの違いから考える～
文字詰めをどのように行うのか、どこを見るのか、和文と欧文の文字詰めのテクニックがここでマスターできます。
また、Webにおいての理想的な行間とは？では、紙とは異なるウェブ用の行間と文章の幅について非常にためになります。
グラフィックデザイナーの海津ヨシノリ氏のコラムで、ウェブに限らず、さまざまな文字組のバリエーションを実験的に行い、読ませる文字組みついて考察しています。最後の8ページではPDF版もダウンロードできます。
ウェブは読み飛ばさせるようにデザインする！ ジャンプ率の効果
ユーザーがウェブページを見る時、読み物系のページは別ですが、飛ばし読みしていることが多いです。これはデザインする側から見ると、飛ばし読みを前提にデザインする必要があるということです。画像、見出し、カラー、アイコンなどを効果的に使って、このジャンプ率をコントロールします。
これもジャンプ率のお話しで、目立つべきところは目立たせ、重要な箇所をしっかり見せるためのデザインのテクニックです。
- 大小の差を広げる
- 色の彩度差、明度差を大きくする
- 余白を大きくする
- アイコンや線などのワンポイントをつける
- 背景色や枠線をつける
- 文字の太さを変える
- 書体を変える
フォントを選ぶ方法・購入時に気をつけたい事
ウェブデザインで和文フォントを使用する際、最も基本となるのは明朝体とゴシック体です。この2つの特徴と具体的な使い分け方の解説です。フォント選びの参考に！
これでもう迷わない！ Std / Pro / Com / W1G / Paneuropean / Cyrillicなど欧文フォントの言語のキーワードを徹底解説
フォントを購入する際に気になる「Helvetica Std」の「Std」って何？ これ買っていいの？ という疑問がこれで解決します。
フォントは高価なものも多く、なかなか気軽には購入できません。ここにある7つのアドバイスを参考に、判断するのも手です。
- デザインのジャンルに固執しない汎用性のあるデザインの書体を選ぶ
- ファミリーやOpenTypeフォント機能が充実しているフォントを選ぶ
- 書体のデザインはテクスチャで検討する
- どこのフォントストアで購入するか検討する
- ファミリーでまとめて購入する
- USドル建てかユーロ建てか…支払い通貨に注意
- セール情報を欠かさずチェックする
タイポグラフィの勉強の息抜きに
まずは、文字からグラフィックを作りだすクリエイティブ溢れる動画から。
Word as Image (by Ji Lee) from jilee on Vimeo.
マウスのドラッグ、キーボードの矢印キーを使い、カーニングを行うゲーム。「Compare」をクリックすると、カーニングの美しさの点数が表示されます。
sponsors
