Webデザインに必要なグラフィックデザイン

この授業では、Webサイトという平面を構成するグラフィックデザインについて、その言葉の意味、タイポグラフィ、SVGを使ったロゴやフォントの作り方、ポートフォリオサイトの制作方法まで学べます。

詳細を開く
Webデザインに必要なグラフィックデザイン
2015年3月7日公開
01:00:00
  • 自己紹介&アジェンダ
  • 02:05
  • ゲスト先生のデザインを見てみる
  • 02:50
  • 「デザインって何でしょう?」を考えてみる
  • 05:43
  • デザインを日本語にすると「意匠、図案」
  • 02:31
  • 日本にもグラフィックデザインはあった
  • 01:53
  • デザイン力とは伝える力
  • 00:56
  • どこからがデザイン?
  • 06:30
  • 優れたCIやブランディングをする佐藤可士和さんについて
  • 06:19
  • 刺さるターゲットにあえて絞り込んだデザイン手法
  • 03:37
  • すずき先生のサイトを作るときの考え方について
  • 04:57
  • インタラクションデザインについて
  • 01:44
  • デザイナーシップとデザインリテラシーについて
  • 06:50
  • Q:デザイナーにセンスは必要ですか?
  • 02:32
  • Q:グラフィックデザインのセンスや引き出しを磨く、増やすのに役立つサイトや書籍があったら教えて下さい。
  • 01:13
  • Q:海外と日本のサイトデザインの流行の違いが生まれる理由は、何だとお考えでしょうか?
  • 02:03
  • Q:デザインは真似することが上達になるといわれますが、どんどん真似することが必要でしょうか?
  • 02:06
  • Q:秒速でしっかり伝わるデザインが、よくあるデザインにならないようにするポイントってありますか?
  • 02:26
  • Q:今回いる先生方はWebデザインの勉強は独学ですか?
  • 01:42
  • Q:オライリー本はプログラミング系が多いですが、デザイン系でオススメはありますか?
開く
Webデザインの基本タイポグラフィ
2015年3月14日公開
01:00:00
  • 自己紹介&アジェンダ
  • 03:30
  • 審美的フォントを見てみよう
  • 06:39
  • コーポレートフォントを見てみよう!
  • 05:34
  • 企業ロゴの使用フォント
  • 01:47
  • 鈴木先生から聞く!フォントについて
  • 04:26
  • 中村先生から聞く!フォントについて
  • 02:34
  • 時代で変わるかっこよさと永遠の美しさ:江戸~大正時代
  • 02:05
  • 時代で変わるかっこよさと永遠の美しさ:昭和~80年代
  • 01:45
  • 写真植字の斜体はレンズを斜めにして作っていた!
  • 04:11
  • カーニングがデザインの基本
  • 02:04
  • 文字サイズ30pxの字間と行間の関係
  • 03:29
  • 画像で文字を作る時はカーニングをする
  • 03:01
  • 文字の無い商用サイトは無い:可読性の低い字間例
  • 01:11
  • 文字の無い商用サイトは無い:高い文字組み例
  • 05:18
  • Q:PC用とスマホ用のWEBサイトでフォントの見え方が違う場合などあると思いますが、先生方は制作段階で、どのように確認作業をしていますか?
  • 00:57
  • Q:綺麗な文字組みができるようになるには、どのような練習をすれば良いのでしょうか?
  • 00:20
  • Q:和文フォントでの字詰めのコツを教えて下さい。
  • 01:10
  • Q:エッジを立てる方法を詳しく教えて下さい。
  • 01:15
  • Q:男性の先生方は、コーディングをする時に、何を使っていますか?
  • 01:15
  • Q:エッジを立てるためにカーニングをすると字間のバランスが崩れることがあるかと思いますが、どちらを優先しますか?
  • 00:49
  • Q:画像でフォントを置いた後に、細部を加工することはあるんでしょうか?
  • 00:21
  • Q:「カーニング」と「字送り」はどちらを優先させると良いのでしょうか?
  • 01:02
  • Q:Photoshopの文字のアンチエイリアス方法は、シャープ、鮮明などありますが、画像で文字を出す場合どのように選んだらよいのでしょうか?
開く
印象に残るポートフォリオサイト制作
2015年3月28日公開
01:00:00
  • 自己紹介&アジェンダ
  • 05:12
  • ポートフォリオサイトはどんな構成がいい?(プロフィール)
  • 04:00
  • ポートフォリオサイトはどんな構成がいい?(習得スキル)
  • 00:52
  • ポートフォリオサイトはどんな構成がいい?(作品)
  • 02:31
  • ポートフォリオサイトはどんな構成がいい?(テックノート)
  • 02:13
  • デザイナー専業希望でもコーディングを知っておく意味
  • 04:09
  • Webサイトの構造を知らなければWebデザインは作れない!
  • 03:03
  • 商用サイトとポートフォリオサイトの違いはココ
  • 07:11
  • 印象に残るポートフォリオの作り方
  • 05:27
  • パララックスポートフォリオ例
  • 06:39
  • 中村先生のポートフォリオサイトを見てみよう
  • 05:33
  • Q:WordPressでブログとポートフォリオサイトを一緒にしようと思ってますが、ポートフォリオサイトとテックノートは別サイトにした方がいいですか?
  • 01:11
  • Q:勉強ノートをWebに公開することは、勉強元の書籍などのの著作権などが気になって公開できずにいたのですがあまり気にしなくても良いものなのでしょうか…?
  • 01:19
  • Q:コーディングだけではダメダメでしょうか?
  • 00:18
  • Q:フロントエンドエンジニアを目指す人は、最低限どの程度デザインを学べば良いでしょうか?
  • 01:29
  • Q:実務では、納期などの制約などがあってやるべきこと全部はできないと思うので、重要度に応じて取捨選択も必要な気がするんですが、どうなんでしょうか?
  • 00:59
  • Q:勉強ノートで、スクーの授業で学んだことを載せたいと思っていますが、先生の作られたスライドのスクリーンショットを載せても良いでしょうか?
  • 00:49
  • Q:真似したいサイトをどのように見つけますか?
  • 02:55
  • Q:Webで公開するポートフォリオに掲載する実績は、クライアントに確認を取ったほうがいいですか
開く
こんな人にオススメ
WEBデザイナー(初心者)

Webデザインを学びたい方・基礎からデザインを学びたい方

スライド資料
担当の先生
受講生代表
  • 鈴木 顕照

    鈴木 顕照

    スクー放送部

  • 大木 しのぶ

    大木 しのぶ

    スクー放送部

受けたいランキング
新着の生放送授業
関連授業