おためし受講中

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

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

そこで生まれた技術が、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無料トライアル版

 

 

学生代表

  • 江川 みどり

    江川 みどり

    スクー放送部

【ノート機能】
授業内容や覚えておきたいポイントなど、ノートに自由に残せます

再生位置挿入 資料挿入
筆記アシスト
ONOFF
    【チャプター機能】
    授業内容をピンポイントでおさえながら
    ご自身のペースで進めることができます
    【前半】授業
    自己紹介
    03:57  (00:14 ~ )
    一限目の授業の目的
    00:59  (04:11 ~ )
    Webフォントとは
    00:17  (05:10 ~ )
    質問:このようなバナーをあなたならどうやって制作しますか
    03:27  (05:27 ~ )
    画像文字とWEBフォント文字
    02:16  (08:54 ~ )
    画像データとテキストデータ
    01:18  (11:10 ~ )
    解説:Webフォントとは
    00:52  (12:28 ~ )
    欧文Webフォントと日本語Webフォントの違い
    00:59  (13:20 ~ )
    日本語Webフォントサービスの登場
    01:38  (14:19 ~ )
    システムフォントのお話
    00:47  (15:57 ~ )
    デバイスやOS環境で搭載フォントが異なる
    00:44  (16:44 ~ )
    Windows環境のシステムフォント
    01:00  (17:28 ~ )
    Mac環境のシステムフォント
    04:48  (18:28 ~ )
    日本語Webフォントを導入しよう
    02:51  (23:16 ~ )
    FONTPLUS無料トライアル版で実践
    01:43  (26:07 ~ )
    導入時に気をつけたいポイント
    04:13  (27:50 ~ )
    日本語Webフォントサービス導入のメリット/デメリット
    07:56  (32:03 ~ )
    二限目の告知
    01:45  (39:59 ~ )
    WebフォントでMotion Typography
    06:17  (41:44 ~ )
    【後半】質疑応答
    Q:1サイトにつき、日本語フォントは何種類くらいまでなら問題ないでしょうか?
    01:38  (48:34 ~ )
    Q:ブラウザに負担をかけずwebフォントを読み込む方法はございますか?CSSを書く順番で変わるとか……?
    03:03  (50:12 ~ )
    Q:日本語の本文までWebフォントにしたら、表示が重く(遅く)ならないんでしょうか。
    02:27  (53:15 ~ )
    Q:見出しだけでなく、例えば日本語webページ全てをWEBフォントにしても、問題ないですか?重くなりますか?
    03:41  (55:42 ~ )
    お知らせ
      (59:23 ~ )