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

「#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デザインアイデア」の膨らませ術