PREMIUM
第3回
ワイヤーフレーム・デザインカンプ入門 -デザインカンプの作り方-
2015年9月17日 60min
スライド資料
授業の概要
こんな人にオススメ
WEB制作入門者の方・Webデザイナーを目指す方
担当の先生／パーソナリティ
-
岡本 紳吾
株式会社hatte代表・プロデューサー・開発担当
大阪市出身、千葉県浦安市在住。 コードをバリバリ書くよりは、アイデアを出してプロトタイピングすることが好き。海外の変なガジェットや製品を勝手に輸入してきては青山を困らせている。コード書きからハンダ付けまでだいたいこなしますが、最近ミシンを買ってきて、裁縫もやるようになりました。 エクストリーム系スポーツを好み、登山を通じて日本の観光業を盛り上げたいという思いから、海外へ日本の登山カルチャーを紹介しようとがんばってます。 株式会社hatte WEBサイトのプロデュースと制作、運用 スマホゲームの画面設計やアニメーション制作 をやっています。メンバーは２名。 社名の由来は登山用語の「（ロープを）張ってください」から。
-
青山 益美
ディレクター・デザイン担当
群馬県出身、東京都在住。 30歳からWEB業界に入った遅咲きディレクター兼デザイナー。 ディレクションがメインですが、デザインしている方が好きなため、ここ数年はデザイン仕事が多め。 運動音痴のインドア派だったのに、岡本にそそのかされて、冬山登山やアイスクライミング、沢登りなどに手を染め始め、ガチ装備がやたら揃っています。 最近はingressにはまり、リアル課金（自転車購入）してしまいました。
-
江川 みどり
スクー放送部
チャプター
-
自己紹介＆アジェンダ
02:27 -
前回のおさらい：ワイヤーフレームとデザインカンプの違い
01:25 -
デザインカンプ制作時のポイントと作成方法
01:49 -
使うツールの環境設定を整える
03:49 -
html・cssコーディングしやすいようデザインルールを決めながら作る
03:34 -
サイト全体の横幅サイズから各ブロックのサイズを決めよう
05:15 -
マージン（各要素の周りの余白）等の数値を決めよう
01:17 -
フォントの種類やテキストの行間、サイズを決めよう
01:35 -
矩形の形状（角丸など）の数値を決めよう
04:02 -
使用するカラーやレイヤースタイルを決めよう
03:56 -
誰でもいじれるようわかりやすいデザインファイルを作る
02:48 -
レイヤーにわかりやすい名前を付けよう
01:17 -
要素別にレイヤーをグループ化しよう
03:04 -
共通の要素はスマートオブジェクトを使うと便利
03:43 -
完成したカンプを使ってコーディング
04:15 -
Brackets+Extractを使ってコードを書きながら画像を書き出しする
09:14 -
デザインカンプを作るツールについて
01:29 -
まとめ
00:43