Webのためのグラフィックデザイン

  • このエントリーをはてなブックマークに追加
Webデザインに必要なグラフィックデザイン
第1回:2015年3月7日公開 01:00:00

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

受講する

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

授業一覧
Webデザインに必要なグラフィックデザイン
2015年3月7日公開
01:00:00

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

Webサイトという平面を構成するのはグラフィックデザインです。
極限までシンプルに機能美を追求するフラット化が加速する中、見た目を装飾で補うことができなくなってきました。フラットデザインなサイトではデザインの良し悪しが浮き彫りになります。
また、cssでほとんどのグラフィカルな表現が可能になった今写真やイラストの力を借りて見栄えを良くするのではなく、デザインそのもののクオリティを上げることが必要になってきました。

このシリーズでは、Webのためのグラフィックデザインを学んでいきます。

第一回目アジェンダ
1.グラフィックデザインとは視覚伝達
2.デザイン力とは伝える力。伝わらなければそこにはデザインは無い!?
3.刺さるターゲットにあえて絞り込んだデザイン手法
4.デザイナーシップとデザインリテラシーの違い
 

  • 自己紹介&アジェンダ
  • 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

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

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

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

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

  • 自己紹介&アジェンダ
  • 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の文字のアンチエイリアス方法は、シャープ、鮮明などありますが、画像で文字を出す場合どのように選んだらよいのでしょうか?
SVGでWebフォント制作
2015年3月21日公開
01:00:00

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

Webサイトという平面を構成するのはグラフィックデザインです。
高解像度のRatinaディスプレイのスマホが一般化するなか、gifやjpgなどの荒い画像の代わりにSVGでベクター画像をコードにして指定したり、SVGフォントをアイコンの代わりに指定したり、自作のマークでSVGフォントを制作することが多くなりました。

この授業ではベクター画像からSVGフォントを制作する手法を学んでいきます。

第三回目アジェンダ
1.どんなロゴにも元になるフォントがある
2.フォントは優れたグラフィックデザインの宝庫
3.マッシュアップでイカすマークを作ろう
4.どんなマークでもフォントにする事ができる

印象に残るポートフォリオサイト制作
2015年3月28日公開
01:00:00

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

未経験者がデザイナー候補として採用される場合、採用基準はポートフォリオが100%と言っても過言ではないでしょう。
もちろん、採用当初はパーツ制作やオペレーティング作業からが一般的ですが、採用担当者はいずれは一人前のデザイナーとしてサイトを任せられる人材になるかどうかをポートフォリオを見て判断します。

この授業はそんなWebデザイナー志望の方のために送るポートフォリオ制作のコツを伝授します。

第四回目アジェンダ
1.第一線で活躍するデザイナーに認められるデザイン基準を作ろう
2.デザイナー専業希望でもコーディングを知っておく意味
3.商用サイトとポートフォリオサイトの違いはココ
4.印象に残るポートフォリオの作り方

  • 自己紹介&アジェンダ
  • 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デザインを学びたい方・基礎からデザインを学びたい方

タグ
担当の先生
受講生代表
  • 鈴木 顕照

    鈴木 顕照

    スクー放送部

  • 大木 しのぶ

    大木 しのぶ

    スクー放送部

この授業を受けたい(3088人)
その他 3010人

受けたい授業ランキング

もっと見る

新着の生放送授業

もっと見る

関連授業

生放送授業への参加は無料です
Schooの会員登録および生放送授業への参加は無料です。生放送授業では先生に質問したり他のユーザーと一緒に楽しく学ぶことができます。
×