日本語Webフォント基礎

ウェブサイトのデザイン性や訴求力を高めるために、これまで、グローバルナビや見出し、キャッチコピーなどのテキストコンテンツでは、文字を画像で表現することが多くなっていました。 ところが、この方法では文章修正のメンテナンス、文章の検索といった課題があります。

そこで生まれた技術が、Webサーバー上にフォントファイルを置く方式、または必要なフォントをクラウドサーバーから取得する方式で、Webデザイナーの意図するフォントを表示できるようにした”Webフォント”です。

昨今、日本語に対応したWebフォントサービスを導入する企業が増えてきました。最近とても身近になってきた「日本語Webフォント」。聞いたことあるけどまだ使ったことがない、どこから取り組んでいいのかわからない、むずかしそうだけど実際はどうなの、と思っている方も多いと思います。このコースでは基礎から日本語Webフォントを学んでいきます。

1限目では、日本語Webフォントを基礎から学び、ご自身で導入できることをゴールとしています。日本語Webフォントは、HTMLとCSSの基本的知識があれば、だれでも習得することができます。また、フォントはデザイナーだけが学ぶものではありません。マークアップエンジニア、ディレクターをはじめ、Webに関わる方、すべての人にとっての必修科目です。身近でありながら、きちんと学ぶ機会が少なかったフォントを楽しく一緒に学びましょう。

授業内容
1. システムフォントの話
2. 画像文字とテキスト文字の違い
3.日本語Webフォントがなぜ必要なのか
4. Webフォントを導入するための準備
5. 導入方法
6. Webフォントのメリット/デメリット

画像文字のサンプルページ

Webフォントのサンプルページ

Motion Typographyの作品URL

FONTPLUS無料トライアル版

ウェブサイトのデザイン性や訴求力を高めるために、これまで、グローバルナビや見出し、キャッチコピーなどのテキストコンテンツでは、文字を画像で表現することが多くなっていました。

ところが、この方法では文章修正のメンテナンス、文章の検索といった課題があります。そこで生まれた技術が、Webサーバー上にフォントファイルを置く方式、または必要なフォントをクラウドサーバーから取得する方式で、Webデザイナーの意図するフォントを表示できるようにした”Webフォント”です。

昨今、日本語に対応したWebフォントサービスを導入する企業が増えてきました。最近とても身近になってきた「日本語Webフォント」。聞いたことあるけどまだ使ったことがない、どこから取り組んでいいのかわからない、むずかしそうだけど実際はどうなの、と思っている方も多いと思います。このコースでは基礎から日本語Webフォントを学んでいきます。

２限目では、書体選択のポイント、文字詰め表現などをデザイン観点から学ぶことができます。書体が持っているイメージや訴求力をうまく活用することでWebサイトのブランディング向上を図ることもできます。また、日本語Webフォント導入事例を紹介しながら導入効果を学びましょう。導入効果を知ることで、クライアントへ提案する際のヒントが見つかります。

雑誌の表紙や広告ポスターにおいてはそのブランドイメージにあった書体が使われ、読みやすい文字組みがされていると思わず目にとまります。Webデザインにおいても、Webフォントを利用することで同様のことができるようになりつつあります。デザイナーの方のみならず、エンジニアの方、ディレクターの方もぜひご参加ください。

授業内容
1. 書体選択のポイント
2. Webフォント文字詰め機能の紹介
3. 表示スピードを改善するコツ
4. 導入事例の紹介
5. クライアントへの提案方法
6. Webフォント最新トレンド

スライド資料6ページ参考URL：http://pr.fontplus.jp/schoo/021/
スライド資料17ページ参考URL：http://pr.fontplus.jp/schoo/004/
スライド資料26ページ参考URL：http://kuri.nifty.com/seesea/index.htm