Webデザイナーのためのタイポグラフィ入門 - タイポグラフィから考えるWebレイアウト

昨今の制作現場ではマルチデバイス対応が求められる場面が増えてきており、OSの断片化や画面の高密度化への対応策のひとつとしてWebフォントの活用が進んできております。

ここ 1,2年で様々なWebフォントの日本語対応が充実し選択肢も増えておりますが、実際に使うとなるとコンテンツの印象を大きく左右する重要な要素となるため、改めてタイポグラフィを学び直したいという声を多く聞くようになりました。

そこで今回はWebデザイナーの方に向けて、デザインの重要な要素であるタイポグラフィについて学んでいただきます。Web制作での活用という観点を踏まえつつ、改めて押さえておきたいタイポグラフィの基本から昨今のトレンドまで、解説していきます。

1. Webデザインにおけるタイポグラフィの重要性

Webデザインでは情報伝達が目的とされるため、文字の扱いが重要になります。 書体の特性を理解して可読性をあげることで、Webサイトの印象が変わります。

2. 美しく文字を組む

タイポグラフィの技術にスペーシングという考え方があります。これは文字と文字の空間を認識して調整する技術です。文字空間を扱うことによってタイトルや見出しは見違えるように美しくなります。

3. タイポグラフィとレイアウトの関係/基礎知識

タイポグラフィで学んだスペーシングはレイアウトでも活用できます。文字と要素の関係性を踏まえつつ、バランスの良いレイアウトの構築方法について解説します。

4. 基本書体の選び方・使い方。書体のルーツを知る

PCやソフトにバンドルされている書体でも、そのルーツや使い方を覚えるとコンセプトに適した選び方ができるようになります。代表的な書体の特徴や傾向、トレンドなども紹介します。

5. UIデザインでのタイポグラフィ

近年、Webフォントの登場やスマホアプリでのUIデザインが注目されている為、タイポグラフィの扱い方に変化があらわれています。現在主流のフラットデザインでのタイポグラフィについて紹介します。

※一部内容が変更になる場合があります。

講師プロフィール

米倉 明男

日本グラフィックデザイナー協会(JAGDA)正会員
Webの学校クスール、和光大学芸術学科、デジタルハリウッド非常勤講師

AOLのアートディレクターとしてWebアプリケーションのUI設計を担当したのち、フリーランスとして 独立。多くの企業Webサイトやアプリケーションのコンサルティング、デザイン設計を手掛ける。ま た、大学や専門学校などでグラフィックデザインやUIデザインの講座、企業研修なども多く担当して おり、デザイン研修のプロとしても広く活躍している。

SNS：Facebook