4/1(Wed)

今日の生放送

Web特性を理解したデザイン術

コーダーさんに苦笑されないための「Web特性を理解した」デザイン術

第1回:2014年11月1日公開

60min

コーダーさんに苦笑されないための「Web特性を理解した」デザイン術

おためし受講する(5分)

コース概要

この授業では、実際にサイトのデザインが仕上がり、コーダーやマークアップエンジニアに回す時にどのような事を気をつけなければならないかを細かく学んでいきます。


WEBデザイナー学部では、Webフロント開発全般のスキルを学べる授業が多く解説されています。
Webフロント開発の仕事はグラフィックを扱う「WEBデザイナー」html+cssを扱う「コーダー(マークアップエンジニア)」JavaScriptを扱う「フロントエンドプログラマ」に分かれます。
「#5 Webサイトでよく使うビジュアルデザインの作り方」では本来のWebデザイナーのロールに特化した授業を行ってきました。

アートディレクション講座vol1アートディレクション講座vol2ではアートディレクターや先輩デザイナーから仕事を振られた時のワークフローについて、
押せる感のあるナビゲーションボタン/テイスト別ナビゲーションボタン/サイトトップ画像/ランディングページ]の作り方では各パーツ制作のスキルを実践で学びました。

デザイン倒れにならないWebデザイン術をこのシリーズの締めくくりに学びましょう。

仕上がり見本であるカンプと実際にできあがったサイトに違いがでてしまうのはプロの仕事とはいえません。フリーランスや少数精鋭の制作会社なら自身でコーディングする場合もあります。

コーディングする時になって、困ってコッソリデザインを変えてしまう事にならないようにWebデザインの特性をしっかり学んでいきましょう。

こんな人にオススメ

Photoshopの使い方は一通り覚えたので更に専門的にWebデザインを学びたい方

担当の先生

パーソナリティ

  • 塩原 桜

    塩原 桜

    スクー放送部

参加したい受講生 : 2351

カテゴリー

タグ

月額980円で、4,600本以上の授業が見放題

授業リスト

コーダーさんに苦笑されないための「Web特性を理解した」デザイン術

2014年11月1日公開

60min.

この授業では、実際にサイトのデザインが仕上がり、コーダーやマークアップエンジニアに回す時にどのような事を気をつけなければならないかを細かく学んでいきます。


WEBデザイナー学部では、Webフロント開発全般のスキルを学べる授業が多く解説されています。
Webフロント開発の仕事はグラフィックを扱う「WEBデザイナー」html+cssを扱う「コーダー(マークアップエンジニア)」JavaScriptを扱う「フロントエンドプログラマ」に分かれます。
「#5 Webサイトでよく使うビジュアルデザインの作り方」では本来のWebデザイナーのロールに特化した授業を行ってきました。

アートディレクション講座vol1アートディレクション講座vol2ではアートディレクターや先輩デザイナーから仕事を振られた時のワークフローについて、
押せる感のあるナビゲーションボタン/テイスト別ナビゲーションボタン/サイトトップ画像/ランディングページ]の作り方では各パーツ制作のスキルを実践で学びました。

デザイン倒れにならないWebデザイン術をこのシリーズの締めくくりに学びましょう。

仕上がり見本であるカンプと実際にできあがったサイトに違いがでてしまうのはプロの仕事とはいえません。フリーランスや少数精鋭の制作会社なら自身でコーディングする場合もあります。

コーディングする時になって、困ってコッソリデザインを変えてしまう事にならないようにWebデザインの特性をしっかり学んでいきましょう。

更に、このシリーズの応用編として、サイトをマルッと任された場合のサイトデザイン法の授業が2回続きますので、お楽しみに!

 

スライド資料

デザインガイドラインの設定と基本となるデザイン構築

2014年11月22日公開

60min.

「#5 Webサイトでよく使うビジュアルデザインの作り方」で一通りWebデザインの手法を学んできました。
次はいよいよサイトデザインをまるごと任せられた時に、何からどう進めるのかです。

「まるごとサイトデザインを任せられるデザイナーになる(全2回)」の授業ではサイト全体のデザインを構築できるフロントエンド開発のメインデザイナーを目指すスキルを身に付けていきます。

1回目はサイトのデザインガイドラインの設定から基本デザインの構築までを学びます。
サイトのタイプ別にデザインの起こし方も違うので、それぞれサイトのターゲットや趣旨に合ったのにしていく必要になります。


■受講にあたって準備するもの

Adobe Photoshop (ヴァージョンは問いません)

・お持ちでない方は、下記のサイトに従って、30日間無料お試し版をダウンロードしてください。
https://creative.adobe.com/ja/products/download/photoshop

・WindowsでもMacでもインストールできますが、メモリ(Ram)は2GM以上入って
いる事が望ましいです。

・初めてに触れる人は、以下のトレーニングサイトでチュートリアルやビデオを全て見て、Photoshopの基本操作を知っておいてください。動画の通りにできるようになる必要はありません。Photoshopではどんな事ができるか知っておきましょう。
https://helpx.adobe.com/jp/photoshop.html     

▼「#5 Webサイトでよく使うビジュアルデザインの作り方」の全8回授業を事前に受講しておくと、より理解が深まります。

5-1 とんちんかんなデザインにしないためのアートディレクション講座vol1
5-2 とんちんかんなデザインにしないためのアートディレクション講座vol2
5-3 【パーツ制作実践】押せる感のあるナビゲーションボタンの作り方
5-4 【パーツ制作実践】テイスト別ナビゲーションボタンの作り方
5-5 【パーツ制作実践】テイスト別サイトトップ画像の作り方
5-6 【パーツ制作実践】パーツを組み立てる!ランディングページの作り方
5-7 デザイン脳は作れる!感覚ではなく、理論を伝えるデザインの話
5-8 書体や色のイメージで表現!「Webデザインアイデア」の膨らませ術

 

スライド資料

コーディングでのトラブルを無くすカンプの作り方

2014年11月29日公開

60min.

「#5 Webサイトでよく使うビジュアルデザインの作り方」で一通りWebデザインの手法を学んできました。
次はいよいよサイトデザインをまるごと任せられた時に、何からどう進めるのかです。

「まるごとサイトデザインを任せられるデザイナーになる(全2回)」の授業ではサイト全体のデザインを構築できるフロントエンド開発のメインデザイナーを目指すスキルを身に付けていきます。

第1回で学んだサイトの全体デザインから、各パーツのデザイン設定をし、各ページのデザインのカンプ作りを学びます。
その際に大事なポイントは、コーディングに落とし込めるカンプになっているかです。
コーディングしやすい、スライスしやすいPSDになっているのかを意識しながらつくることで最終カンプのイメージが違ってきます。

■受講にあたって準備するもの

Adobe Photoshop (ヴァージョンは問いません)

・お持ちでない方は、下記のサイトに従って、30日間無料お試し版をダウンロードしてください。
https://creative.adobe.com/ja/products/download/photoshop

・WindowsでもMacでもインストールできますが、メモリ(Ram)は2GM以上入って
いる事が望ましいです。

・初めてに触れる人は、以下のトレーニングサイトでチュートリアルやビデオを全て見て、Photoshopの基本操作を知っておいてください。動画の通りにできるようになる必要はありません。Photoshopではどんな事ができるか知っておきましょう。
https://helpx.adobe.com/jp/photoshop.html     

▼「#5 Webサイトでよく使うビジュアルデザインの作り方」の全8回授業を事前に受講しておくと、より理解が深まります。

5-1 とんちんかんなデザインにしないためのアートディレクション講座vol1
5-2 とんちんかんなデザインにしないためのアートディレクション講座vol2
5-3 【パーツ制作実践】押せる感のあるナビゲーションボタンの作り方
5-4 【パーツ制作実践】テイスト別ナビゲーションボタンの作り方
5-5 【パーツ制作実践】テイスト別サイトトップ画像の作り方
5-6 【パーツ制作実践】パーツを組み立てる!ランディングページの作り方
5-7 デザイン脳は作れる!感覚ではなく、理論を伝えるデザインの話
5-8 書体や色のイメージで表現!「Webデザインアイデア」の膨らませ術

 

スライド資料

プレミアム生放送

関連授業

人気の生放送授業

もっと見る

新着の生放送授業

もっと見る

アクティビティ