chevron_left

日本語Webフォント基礎

PREMIUM
第1回

日本語Webフォント基礎 −1限目–

2016年6月30日 60min

スライド資料

会員登録して、全てのスライドを見よう

1 / 29

授業の概要

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

そこで生まれた技術が、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フォントを基礎から学びたい方、実際に使ってみたい方

チャプター

play_arrow
自己紹介
03:57
play_arrow
一限目の授業の目的
00:59
play_arrow
Webフォントとは
00:17
play_arrow
質問:このようなバナーをあなたならどうやって制作しますか
03:27
play_arrow
画像文字とWEBフォント文字
02:16
play_arrow
画像データとテキストデータ
01:18
play_arrow
解説:Webフォントとは
00:52
play_arrow
欧文Webフォントと日本語Webフォントの違い
00:59
play_arrow
日本語Webフォントサービスの登場
01:38
play_arrow
システムフォントのお話
00:47
play_arrow
デバイスやOS環境で搭載フォントが異なる
00:44
play_arrow
Windows環境のシステムフォント
01:00
play_arrow
Mac環境のシステムフォント
04:48
play_arrow
日本語Webフォントを導入しよう
02:51
play_arrow
FONTPLUS無料トライアル版で実践
01:43
play_arrow
導入時に気をつけたいポイント
04:13
play_arrow
日本語Webフォントサービス導入のメリット/デメリット
07:56
play_arrow
二限目の告知
01:45
play_arrow
WebフォントでMotion Typography
06:17
play_arrow
Q:1サイトにつき、日本語フォントは何種類くらいまでなら問題ないでしょうか?
01:38
play_arrow
Q:ブラウザに負担をかけずwebフォントを読み込む方法はございますか?CSSを書く順番で変わるとか……?
03:03
play_arrow
Q:日本語の本文までWebフォントにしたら、表示が重く(遅く)ならないんでしょうか。
02:27
play_arrow
Q:見出しだけでなく、例えば日本語webページ全てをWEBフォントにしても、問題ないですか?重くなりますか?
03:41
play_arrow
お知らせ