おためし受講中

Webデザインの基本タイポグラフィ

Webのためのグラフィックデザインを学ぼう!第二回

Webサイトという平面を構成するのはグラフィックデザインです。
欧文はオープンソースというベクター情報がフォントの中に入っているため、画像にしなくてもサイト上で美しく見えますが、日本語フォントは文字数が多すぎて対応が遅れています。そんなわけで、日本語の文字情報を画像にしてかっこよく表現するためにはタイポグラフィの知識がが必要不可欠です。

この授業では、文字のレイアウトや完成度の高いフォントについて学びます。

第二回目アジェンダ
1.審美的フォントを見てみよう
2.時代で変わるかっこよさと永遠の美しさ
3.カーニングがデザインの基本
4.文字の無い商用サイトは無い
 

学生代表

  • 大木 しのぶ

    大木 しのぶ

    スクー放送部

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

再生位置挿入 資料挿入
筆記アシスト
ONOFF
    【チャプター機能】
    授業内容をピンポイントでおさえながら
    ご自身のペースで進めることができます
    【前半】授業
    自己紹介&アジェンダ
    03:30  (00:13 ~ )
    審美的フォントを見てみよう
    06:39  (03:43 ~ )
    コーポレートフォントを見てみよう!
    05:34  (10:22 ~ )
    企業ロゴの使用フォント
    01:47  (15:56 ~ )
    鈴木先生から聞く!フォントについて
    04:26  (17:43 ~ )
    中村先生から聞く!フォントについて
    02:34  (22:09 ~ )
    時代で変わるかっこよさと永遠の美しさ:江戸~大正時代
    02:05  (24:43 ~ )
    時代で変わるかっこよさと永遠の美しさ:昭和~80年代
    01:45  (26:48 ~ )
    写真植字の斜体はレンズを斜めにして作っていた!
    04:11  (28:33 ~ )
    カーニングがデザインの基本
    02:04  (32:44 ~ )
    文字サイズ30pxの字間と行間の関係
    03:29  (34:48 ~ )
    画像で文字を作る時はカーニングをする
    03:01  (38:17 ~ )
    文字の無い商用サイトは無い:可読性の低い字間例
    01:11  (41:18 ~ )
    文字の無い商用サイトは無い:高い文字組み例
    05:18  (42:29 ~ )
    【後半】質疑応答
    Q:PC用とスマホ用のWEBサイトでフォントの見え方が違う場合などあると思いますが、先生方は制作段階で、どのように確認作業をしていますか?
    00:57  (47:47 ~ )
    Q:綺麗な文字組みができるようになるには、どのような練習をすれば良いのでしょうか?
    00:20  (48:44 ~ )
    Q:和文フォントでの字詰めのコツを教えて下さい。
    01:10  (49:04 ~ )
    Q:エッジを立てる方法を詳しく教えて下さい。
    01:15  (50:14 ~ )
    Q:男性の先生方は、コーディングをする時に、何を使っていますか?
    01:15  (51:29 ~ )
    Q:エッジを立てるためにカーニングをすると字間のバランスが崩れることがあるかと思いますが、どちらを優先しますか?
    00:49  (52:44 ~ )
    Q:画像でフォントを置いた後に、細部を加工することはあるんでしょうか?
    00:21  (53:33 ~ )
    Q:「カーニング」と「字送り」はどちらを優先させると良いのでしょうか?
    01:02  (53:54 ~ )
    Q:Photoshopの文字のアンチエイリアス方法は、シャープ、鮮明などありますが、画像で文字を出す場合どのように選んだらよいのでしょうか?
      (54:56 ~ )