chevron_left ワイヤーフレーム・デザインカンプ入門

ワイヤーフレーム・デザインカンプ入門

PREMIUM
第3回

ワイヤーフレーム・デザインカンプ入門 -デザインカンプの作り方-

2015年9月17日 60min

会員登録して、全てのスライドを見よう

1 / 25

授業の概要

WEB制作で仕事をしたい人に向けた、ワイヤーフレームとデザインカンプ入門の授業です。ワイヤーフレームはサイトの設計図、デザインカンプは完成イメージに相当するものであり、クライアントやチームと制作をする際に無くてはならない知識です。制作方法はもちろん、その活用方法を、現場のデザイナーを交えながら学びます。

3限目の今回は、デザインカンプの作り方を学習します。

■ 事前準備

Photoshop(講習ではCC2015で解説)
※インストールされたPCをご用意いただくか、下記URLから無料体験版をインストールしてください。
https://creative.adobe.com/ja/products/download/photoshop

Brackets (テキストエディタ 無料)
http://brackets.io/

こんな人にオススメ

WEB制作入門者の方・Webデザイナーを目指す方

担当の先生/パーソナリティ

授業で使用する教材

※授業以外での使用は禁止します

チャプター

play_arrow
自己紹介&アジェンダ
02:27
play_arrow
前回のおさらい:ワイヤーフレームとデザインカンプの違い
01:25
play_arrow
デザインカンプ制作時のポイントと作成方法
01:49
play_arrow
使うツールの環境設定を整える
03:49
play_arrow
html・cssコーディングしやすいようデザインルールを決めながら作る
03:34
play_arrow
サイト全体の横幅サイズから各ブロックのサイズを決めよう
05:15
play_arrow
マージン(各要素の周りの余白)等の数値を決めよう
01:17
play_arrow
フォントの種類やテキストの行間、サイズを決めよう
01:35
play_arrow
矩形の形状(角丸など)の数値を決めよう
04:02
play_arrow
使用するカラーやレイヤースタイルを決めよう
03:56
play_arrow
誰でもいじれるようわかりやすいデザインファイルを作る
02:48
play_arrow
レイヤーにわかりやすい名前を付けよう
01:17
play_arrow
要素別にレイヤーをグループ化しよう
03:04
play_arrow
共通の要素はスマートオブジェクトを使うと便利
03:43
play_arrow
完成したカンプを使ってコーディング
04:15
play_arrow
Brackets+Extractを使ってコードを書きながら画像を書き出しする
09:14
play_arrow
デザインカンプを作るツールについて
01:29
play_arrow
まとめ
00:43
play_arrow
Q:ドリームウィーバーではできないですか?
00:32
play_arrow
Q:Bracketsで、Dreamweaverのテンプレートでの一括修正のようなことはできないのでしょうか
00:50
play_arrow
Q:CCのライブラリ元が変わってしまうのでしょうか?