デキるWebデザイナーを目指せ!
本当に現場で使えるCC活用テクニック
Adobe MAX Japan 2016
株式会社タガス 浅野 桜crema design 黒野 明子
私たちは、
です。
くれま &さくら
Adobe Creative Stationで連載中
Webデザイナーの実体験に
基づいたワークフロー!
架空のクライアント 家事代行会社
の、Webサイトを制作
資料のダウンロード
bit.ly/maxjapan
Webデザインのプロセス?
アイディア出し/モック制作
デザイン作業前の準備
カンプ作り込み
アセット書き出し
曖昧な要望に対して素早くイメージ共有
プロジェクトの要件に合った制作環境を整える
新機能を活用して手早く作り、直しに強いデータ
コーディング担当者に分かりやすいデータを作成
アイディア出し/モック制作
デザイン作業前の準備
カンプ作り込み
アセット書き出し
こんなことないですか?
持ち帰って、寝かせてからカンプ提出
先日の打ち合わせ
を元に、カンプを
作ってきました!
あれ?
こんなイメージ
でしたっけ��?
デキるポイント!
その場でイメージを具体化して
共有できるのが、デキるデザイナー!
ジェスチャでさくっとカンプ作成
簡単にストックフォトを挿入
画面遷移の情報も含んだモックを
気軽に作成&共有
アイディア出し/モック制作
デザイン作業前の準備
カンプ作り込み
アセット書き出し
こんなことないですか?
ガイドがずれたページを量産した><
このデータって
全部ガイドが
ずれてますけど��
よし!
全ページのカンプが
完成しました^^
design
適切な設定でミスを防ぐのが、
デキるデザイナー!
デキるポイント!
o r
チートシート
配布します
bit.ly/maxjapan
ユーザーが多い=デファクトスタンダード
写真を加工しながら、レイアウトもできる
アセットの書き出しが非常に便利
Photoshopのメリット
新規ガイドレイアウト
複数のアートボード作成
Illustratorのメリット
非ピクセルパーフェクトな時流の中で、
Aiでのカンプ作成が求められている
フラットな色面メインのデザインをしやすい
オブジェクトの管理を数字で行いやすい
アセット書き出しも便利になりました
段組設定機能でグリッド作成
両方使えるのがデキるデザイナー!
&
アイディア出し/モック制作
デザイン作業前の準備
カンプ作り込み
アセット書き出し
ゆっくり&手癖で仕事して、時間単価があがらない
こんなことないですか?
働けど働けど
なお、我が暮らし
楽にならざり��
デキるポイント!
なおしに強いデータを
手早く作るのが、デキるデザイナー!
コンテンツに応じた切り抜き
複数アートボード
スマートオブジェクト
の新機能を徹底活用!
Photoshopのアートボードを
iPhoneに表示させ、実機確認
ライブシェイプ
ダイナミックシンボル
Capture CCとの連携
の新機能を徹底活用!
アイディア出し/モック制作
デザイン作業前の準備
カンプ作り込み
アセット書き出し
こんなことないですか?
こんな面倒そうなデータ、コーディングしたくない�
うちのデザイナーが
作ったデータ
後はよろしく!
ひー><
レイヤーもグループも
ぐちゃぐちゃ��!
デキるポイント!
コーダーに優しいデータを
作るのが、デキるデザイナー!
便利になった画像書き出し
アセット書き出し機能搭載!
まとめ
アイディア出し/モック制作
デザイン作業前の準備
カンプ作り込み
アセット書き出し
曖昧な要望に対して素早くイメージ共有
プロジェクトの要件に合った制作環境を整える
新機能を活用して手早く作り、直しに強いデータ
コーディング担当者に分かりやすいデータを作成
資料のダウンロード
bit.ly/maxjapan
ありがとうございました!
が、お送りしました!
くれま &さくら
連載もよろしくね!

デキるWebデザイナーを目指せ!本当に現場で使えるCC活用テクニック