日本語Webフォント基礎

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

おためし受講中
  • 授業で使用する教材

    教材はありません

「授業フィードバック」で、授業の感想を教えてください!

チュートリアルは、こちらの「その他のオプション」からいつでも確認いただけます。

コピーしました!

ここには授業中のやりとりが表示されます

生放送でのコメントが再生されています

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

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

再生位置挿入 資料挿入
筆記アシスト
ONOFF
    全2回 2016年6月30日公開
    日本語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無料トライアル版

     

     

    受講生代表

    • 江川 みどり

      江川 みどり

      スクー放送部

    教室画面の機能をご紹介します

    学習機能を活用して、効率よく学習しましょう!