おためし受講中

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

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

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

■ 事前準備

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

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

学生代表

  • 江川 みどり

    江川 みどり

    スクー放送部

【ノート機能】
授業内容や覚えておきたいポイントなど、ノートに自由に残せます

再生位置挿入 資料挿入
筆記アシスト
ONOFF
    【チャプター機能】
    授業内容をピンポイントでおさえながら
    ご自身のペースで進めることができます
    【前半】授業
    自己紹介&アジェンダ
    02:27  (00:14 ~ )
    前回のおさらい:ワイヤーフレームとデザインカンプの違い
    01:25  (02:41 ~ )
    デザインカンプ制作時のポイントと作成方法
    01:49  (04:06 ~ )
    使うツールの環境設定を整える
    03:49  (05:55 ~ )
    html・cssコーディングしやすいようデザインルールを決めながら作る
    03:34  (09:44 ~ )
    サイト全体の横幅サイズから各ブロックのサイズを決めよう
    05:15  (13:18 ~ )
    マージン(各要素の周りの余白)等の数値を決めよう
    01:17  (18:33 ~ )
    フォントの種類やテキストの行間、サイズを決めよう
    01:35  (19:50 ~ )
    矩形の形状(角丸など)の数値を決めよう
    04:02  (21:25 ~ )
    使用するカラーやレイヤースタイルを決めよう
    03:56  (25:27 ~ )
    誰でもいじれるようわかりやすいデザインファイルを作る
    02:48  (29:23 ~ )
    レイヤーにわかりやすい名前を付けよう
    01:17  (32:11 ~ )
    要素別にレイヤーをグループ化しよう
    03:04  (33:28 ~ )
    共通の要素はスマートオブジェクトを使うと便利
    03:43  (36:32 ~ )
    完成したカンプを使ってコーディング
    04:15  (40:15 ~ )
    Brackets+Extractを使ってコードを書きながら画像を書き出しする
    09:14  (44:30 ~ )
    デザインカンプを作るツールについて
    01:29  (53:44 ~ )
    まとめ
    00:43  (55:13 ~ )
    【後半】質疑応答
    Q:ドリームウィーバーではできないですか?
    00:32  (56:16 ~ )
    Q:Bracketsで、Dreamweaverのテンプレートでの一括修正のようなことはできないのでしょうか
    00:50  (56:48 ~ )
    Q:CCのライブラリ元が変わってしまうのでしょうか?
      (57:38 ~ )