SlideShare a Scribd company logo
1 of 41
Download to read offline
デキる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
ありがとうございました!
が、お送りしました!
くれま &さくら
連載もよろしくね!

More Related Content

What's hot

優れたデザインの 定義と思考方法
優れたデザインの 定義と思考方法優れたデザインの 定義と思考方法
優れたデザインの 定義と思考方法
Junichi Izumi
 
ノンデザイナーのための配色理論
ノンデザイナーのための配色理論ノンデザイナーのための配色理論
ノンデザイナーのための配色理論
tsukasa obara
 
BASE_プレゼン用サービス説明資料
BASE_プレゼン用サービス説明資料BASE_プレゼン用サービス説明資料
BASE_プレゼン用サービス説明資料
Find Job Startup
 

What's hot (20)

流行に乗っていいの?フラットデザインの落とし穴
流行に乗っていいの?フラットデザインの落とし穴流行に乗っていいの?フラットデザインの落とし穴
流行に乗っていいの?フラットデザインの落とし穴
 
コーディングを考慮したWebデザインガイドライン
コーディングを考慮したWebデザインガイドラインコーディングを考慮したWebデザインガイドライン
コーディングを考慮したWebデザインガイドライン
 
優れたデザインの 定義と思考方法
優れたデザインの 定義と思考方法優れたデザインの 定義と思考方法
優れたデザインの 定義と思考方法
 
デザインのためのデザイン
デザインのためのデザインデザインのためのデザイン
デザインのためのデザイン
 
デザイナーがクライアントワークをうまく進める方法 先生:中野 由貴
デザイナーがクライアントワークをうまく進める方法 先生:中野 由貴デザイナーがクライアントワークをうまく進める方法 先生:中野 由貴
デザイナーがクライアントワークをうまく進める方法 先生:中野 由貴
 
Appleとgoogleのデザインガイドライン比較~スマートフォン向けwebデザインのポイント~
Appleとgoogleのデザインガイドライン比較~スマートフォン向けwebデザインのポイント~Appleとgoogleのデザインガイドライン比較~スマートフォン向けwebデザインのポイント~
Appleとgoogleのデザインガイドライン比較~スマートフォン向けwebデザインのポイント~
 
デザインの要件定義
デザインの要件定義デザインの要件定義
デザインの要件定義
 
分かりやすく、使いやすいデザインを生み出す工夫 先生:池田 拓司
分かりやすく、使いやすいデザインを生み出す工夫 先生:池田 拓司分かりやすく、使いやすいデザインを生み出す工夫 先生:池田 拓司
分かりやすく、使いやすいデザインを生み出す工夫 先生:池田 拓司
 
サービスにおけるビジュアルデザインの役割
サービスにおけるビジュアルデザインの役割サービスにおけるビジュアルデザインの役割
サービスにおけるビジュアルデザインの役割
 
UIデザインの基本
UIデザインの基本UIデザインの基本
UIデザインの基本
 
デザイン提案の参考資料
デザイン提案の参考資料デザイン提案の参考資料
デザイン提案の参考資料
 
0528 kanntigai ui_ux
0528 kanntigai ui_ux0528 kanntigai ui_ux
0528 kanntigai ui_ux
 
アイデア収束からプロトタイピング
アイデア収束からプロトタイピングアイデア収束からプロトタイピング
アイデア収束からプロトタイピング
 
UXデザインの資格ってどんなの? HCD-Net認定 人間中心設計スペシャリスト・人間中心設計専門家
UXデザインの資格ってどんなの? HCD-Net認定 人間中心設計スペシャリスト・人間中心設計専門家UXデザインの資格ってどんなの? HCD-Net認定 人間中心設計スペシャリスト・人間中心設計専門家
UXデザインの資格ってどんなの? HCD-Net認定 人間中心設計スペシャリスト・人間中心設計専門家
 
Product ManagerとProduct Ownerの役割の違いについて
Product ManagerとProduct Ownerの役割の違いについてProduct ManagerとProduct Ownerの役割の違いについて
Product ManagerとProduct Ownerの役割の違いについて
 
ノンデザイナーのための配色理論
ノンデザイナーのための配色理論ノンデザイナーのための配色理論
ノンデザイナーのための配色理論
 
9コマシナリオの使い方
9コマシナリオの使い方9コマシナリオの使い方
9コマシナリオの使い方
 
図解で学ぶ「Lean UX」
図解で学ぶ「Lean UX」図解で学ぶ「Lean UX」
図解で学ぶ「Lean UX」
 
 〜デザイン初心者向け〜
 デザイン時に気をつけると幸せになれる事
 〜デザイン初心者向け〜
 デザイン時に気をつけると幸せになれる事 〜デザイン初心者向け〜
 デザイン時に気をつけると幸せになれる事
 〜デザイン初心者向け〜
 デザイン時に気をつけると幸せになれる事
 
BASE_プレゼン用サービス説明資料
BASE_プレゼン用サービス説明資料BASE_プレゼン用サービス説明資料
BASE_プレゼン用サービス説明資料
 

Viewers also liked

スタートアップとデザインのいい関係。
スタートアップとデザインのいい関係。スタートアップとデザインのいい関係。
スタートアップとデザインのいい関係。
Matsumoto Takamasa
 

Viewers also liked (20)

いまさら訊けないWebフォント入門
いまさら訊けないWebフォント入門いまさら訊けないWebフォント入門
いまさら訊けないWebフォント入門
 
アクセシビリティとこれからのWebデザイン
アクセシビリティとこれからのWebデザインアクセシビリティとこれからのWebデザイン
アクセシビリティとこれからのWebデザイン
 
【第二回】デザイン初心者でも出来る!企業ロゴの作り方【案出し~デザイン作成編】
【第二回】デザイン初心者でも出来る!企業ロゴの作り方【案出し~デザイン作成編】【第二回】デザイン初心者でも出来る!企業ロゴの作り方【案出し~デザイン作成編】
【第二回】デザイン初心者でも出来る!企業ロゴの作り方【案出し~デザイン作成編】
 
イラスト制作のためのIllustrator〜ベクターでもっと自由に描いてみよう〜
イラスト制作のためのIllustrator〜ベクターでもっと自由に描いてみよう〜イラスト制作のためのIllustrator〜ベクターでもっと自由に描いてみよう〜
イラスト制作のためのIllustrator〜ベクターでもっと自由に描いてみよう〜
 
【デザイン・ノイズ論】~ Webデザインにおけるノイズ的手法を考える ~
【デザイン・ノイズ論】~ Webデザインにおけるノイズ的手法を考える ~【デザイン・ノイズ論】~ Webデザインにおけるノイズ的手法を考える ~
【デザイン・ノイズ論】~ Webデザインにおけるノイズ的手法を考える ~
 
コンバージョン心理学によるウェブ・デザイン
コンバージョン心理学によるウェブ・デザインコンバージョン心理学によるウェブ・デザイン
コンバージョン心理学によるウェブ・デザイン
 
WEBデザインにおける、Photoshopの作業速度向上テクニック 先生:黒葛原 道
WEBデザインにおける、Photoshopの作業速度向上テクニック 先生:黒葛原 道WEBデザインにおける、Photoshopの作業速度向上テクニック 先生:黒葛原 道
WEBデザインにおける、Photoshopの作業速度向上テクニック 先生:黒葛原 道
 
グッドパッチのデザインカルチャーの作り方
グッドパッチのデザインカルチャーの作り方グッドパッチのデザインカルチャーの作り方
グッドパッチのデザインカルチャーの作り方
 
SketchがAndroidのUIデザインに向いているワケ
SketchがAndroidのUIデザインに向いているワケSketchがAndroidのUIデザインに向いているワケ
SketchがAndroidのUIデザインに向いているワケ
 
CAMPFIRE DESIGN #1 「デザインの力」でビジネスにコミットする
CAMPFIRE DESIGN #1 「デザインの力」でビジネスにコミットするCAMPFIRE DESIGN #1 「デザインの力」でビジネスにコミットする
CAMPFIRE DESIGN #1 「デザインの力」でビジネスにコミットする
 
デザイナーこそ覚えておきたいCSS最新事情! あなたの知らないfont-familyのイマ
デザイナーこそ覚えておきたいCSS最新事情! あなたの知らないfont-familyのイマデザイナーこそ覚えておきたいCSS最新事情! あなたの知らないfont-familyのイマ
デザイナーこそ覚えておきたいCSS最新事情! あなたの知らないfont-familyのイマ
 
UXの考え方とアプローチ
UXの考え方とアプローチUXの考え方とアプローチ
UXの考え方とアプローチ
 
Adobe MAX Japan 2016「ベテランほど知らずに損してるIllustratorの新常識 あ、それ、今のIllustratorならこうします!...
Adobe MAX Japan 2016「ベテランほど知らずに損してるIllustratorの新常識 あ、それ、今のIllustratorならこうします!...Adobe MAX Japan 2016「ベテランほど知らずに損してるIllustratorの新常識 あ、それ、今のIllustratorならこうします!...
Adobe MAX Japan 2016「ベテランほど知らずに損してるIllustratorの新常識 あ、それ、今のIllustratorならこうします!...
 
快適にWebデザインするためのフリーランスの仕事の流れ【プロジェクトマネジメント編】夏本 健司
快適にWebデザインするためのフリーランスの仕事の流れ【プロジェクトマネジメント編】夏本 健司快適にWebデザインするためのフリーランスの仕事の流れ【プロジェクトマネジメント編】夏本 健司
快適にWebデザインするためのフリーランスの仕事の流れ【プロジェクトマネジメント編】夏本 健司
 
ノンデザイナーのための「デザインの判断」はとりあえずコレだけおさえよう
ノンデザイナーのための「デザインの判断」はとりあえずコレだけおさえようノンデザイナーのための「デザインの判断」はとりあえずコレだけおさえよう
ノンデザイナーのための「デザインの判断」はとりあえずコレだけおさえよう
 
Aさんが言うデザインとBさんの言うデザイン、結局どっちが正しいの?
Aさんが言うデザインとBさんの言うデザイン、結局どっちが正しいの?Aさんが言うデザインとBさんの言うデザイン、結局どっちが正しいの?
Aさんが言うデザインとBさんの言うデザイン、結局どっちが正しいの?
 
色彩センスのいらない配色講座
色彩センスのいらない配色講座色彩センスのいらない配色講座
色彩センスのいらない配色講座
 
イラレでWebデザインしても嫌われないデータ作成術
イラレでWebデザインしても嫌われないデータ作成術イラレでWebデザインしても嫌われないデータ作成術
イラレでWebデザインしても嫌われないデータ作成術
 
レスポンシブWebデザインの基礎
レスポンシブWebデザインの基礎レスポンシブWebデザインの基礎
レスポンシブWebデザインの基礎
 
スタートアップとデザインのいい関係。
スタートアップとデザインのいい関係。スタートアップとデザインのいい関係。
スタートアップとデザインのいい関係。
 

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

デザイナーとプログラマーの 仲良し大作戦
デザイナーとプログラマーの 仲良し大作戦デザイナーとプログラマーの 仲良し大作戦
デザイナーとプログラマーの 仲良し大作戦
sogawaminoru
 
[WordBench東京7月] レスポンシブWebデザインの基礎とWordPressを使った最適化の手法
[WordBench東京7月] レスポンシブWebデザインの基礎とWordPressを使った最適化の手法[WordBench東京7月] レスポンシブWebデザインの基礎とWordPressを使った最適化の手法
[WordBench東京7月] レスポンシブWebデザインの基礎とWordPressを使った最適化の手法
Hiroyuki Ogawa
 

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

工数削減! 印刷物デザイナーに知ってほしい コスパの良いWebデザイン.pdf
工数削減! 印刷物デザイナーに知ってほしい コスパの良いWebデザイン.pdf工数削減! 印刷物デザイナーに知ってほしい コスパの良いWebデザイン.pdf
工数削減! 印刷物デザイナーに知ってほしい コスパの良いWebデザイン.pdf
 
InDesign正規表現勉強会_名古屋_0727
InDesign正規表現勉強会_名古屋_0727InDesign正規表現勉強会_名古屋_0727
InDesign正規表現勉強会_名古屋_0727
 
Web Design Process for The Future
Web Design Process for The FutureWeb Design Process for The Future
Web Design Process for The Future
 
デザイナーとプログラマーの 仲良し大作戦
デザイナーとプログラマーの 仲良し大作戦デザイナーとプログラマーの 仲良し大作戦
デザイナーとプログラマーの 仲良し大作戦
 
【Edge Animate】スマホアプリのインタラクティブコンテンツ
【Edge Animate】スマホアプリのインタラクティブコンテンツ【Edge Animate】スマホアプリのインタラクティブコンテンツ
【Edge Animate】スマホアプリのインタラクティブコンテンツ
 
CSSフレームワークとCMS+RWDテンプレでレスポンシブWebデザインサイトを構築しよう
CSSフレームワークとCMS+RWDテンプレでレスポンシブWebデザインサイトを構築しようCSSフレームワークとCMS+RWDテンプレでレスポンシブWebデザインサイトを構築しよう
CSSフレームワークとCMS+RWDテンプレでレスポンシブWebデザインサイトを構築しよう
 
HTML5な今日この頃に贈る、Webデザイナーこれからの生きる道
HTML5な今日この頃に贈る、Webデザイナーこれからの生きる道HTML5な今日この頃に贈る、Webデザイナーこれからの生きる道
HTML5な今日この頃に贈る、Webデザイナーこれからの生きる道
 
息のながーいB2Bサービスで、デザイナーが価値を発揮するための取り組み
息のながーいB2Bサービスで、デザイナーが価値を発揮するための取り組み息のながーいB2Bサービスで、デザイナーが価値を発揮するための取り組み
息のながーいB2Bサービスで、デザイナーが価値を発揮するための取り組み
 
What's new of XPages in 2015 and beyond
What's new of XPages in 2015 and beyondWhat's new of XPages in 2015 and beyond
What's new of XPages in 2015 and beyond
 
Web Design Process for The Future
Web Design Process for The FutureWeb Design Process for The Future
Web Design Process for The Future
 
「コードを書かずにコードを産み出す?!」スマホ時代の最先端Web/アプリ制作
「コードを書かずにコードを産み出す?!」スマホ時代の最先端Web/アプリ制作「コードを書かずにコードを産み出す?!」スマホ時代の最先端Web/アプリ制作
「コードを書かずにコードを産み出す?!」スマホ時代の最先端Web/アプリ制作
 
[WordBench東京7月] レスポンシブWebデザインの基礎とWordPressを使った最適化の手法
[WordBench東京7月] レスポンシブWebデザインの基礎とWordPressを使った最適化の手法[WordBench東京7月] レスポンシブWebデザインの基礎とWordPressを使った最適化の手法
[WordBench東京7月] レスポンシブWebデザインの基礎とWordPressを使った最適化の手法
 
Cookpad Techconf@kimura 2016/01/23
Cookpad Techconf@kimura 2016/01/23Cookpad Techconf@kimura 2016/01/23
Cookpad Techconf@kimura 2016/01/23
 
Cloud Festa 2021 Winter 「デザイナー、データサイエンティスト、 クラウドエンジニア、で実現する共創の世界」
Cloud Festa 2021 Winter 「デザイナー、データサイエンティスト、 クラウドエンジニア、で実現する共創の世界」 Cloud Festa 2021 Winter 「デザイナー、データサイエンティスト、 クラウドエンジニア、で実現する共創の世界」
Cloud Festa 2021 Winter 「デザイナー、データサイエンティスト、 クラウドエンジニア、で実現する共創の世界」
 
(ロフトワーク テクニカルディレクターがこっそり教える)運営スタッフに喜ばれる CMSの選び方 超入門
(ロフトワーク テクニカルディレクターがこっそり教える)運営スタッフに喜ばれる CMSの選び方 超入門(ロフトワーク テクニカルディレクターがこっそり教える)運営スタッフに喜ばれる CMSの選び方 超入門
(ロフトワーク テクニカルディレクターがこっそり教える)運営スタッフに喜ばれる CMSの選び方 超入門
 
Re:Cre Vol.14 | Web design process for the future
Re:Cre Vol.14 | Web design process for the futureRe:Cre Vol.14 | Web design process for the future
Re:Cre Vol.14 | Web design process for the future
 
WEBアプリケーション開発におけるUX
WEBアプリケーション開発におけるUXWEBアプリケーション開発におけるUX
WEBアプリケーション開発におけるUX
 
Infrastructure as Code (IaC) 談義 2022
Infrastructure as Code (IaC) 談義 2022Infrastructure as Code (IaC) 談義 2022
Infrastructure as Code (IaC) 談義 2022
 
うちの開発におけるXD利用法
うちの開発におけるXD利用法うちの開発におけるXD利用法
うちの開発におけるXD利用法
 
デザイナーとしてのHTML5への向き合い方 | HTML5 Conference MIYAZAKI
デザイナーとしてのHTML5への向き合い方 | HTML5 Conference MIYAZAKIデザイナーとしてのHTML5への向き合い方 | HTML5 Conference MIYAZAKI
デザイナーとしてのHTML5への向き合い方 | HTML5 Conference MIYAZAKI
 

More from Akiko Kurono

More from Akiko Kurono (6)

速攻で価値検証して無駄なものを作らないプロダクトデザイン
速攻で価値検証して無駄なものを作らないプロダクトデザイン速攻で価値検証して無駄なものを作らないプロダクトデザイン
速攻で価値検証して無駄なものを作らないプロダクトデザイン
 
Effective Slide Designing Technique(効果的なスライドのデザイン)
Effective Slide Designing Technique(効果的なスライドのデザイン)Effective Slide Designing Technique(効果的なスライドのデザイン)
Effective Slide Designing Technique(効果的なスライドのデザイン)
 
組み合わせ利用でいいとこ取り! Adobe XD+Photoshop+Illustratorの長所を活かしたデザイン手法を学ぼう
組み合わせ利用でいいとこ取り! Adobe XD+Photoshop+Illustratorの長所を活かしたデザイン手法を学ぼう組み合わせ利用でいいとこ取り! Adobe XD+Photoshop+Illustratorの長所を活かしたデザイン手法を学ぼう
組み合わせ利用でいいとこ取り! Adobe XD+Photoshop+Illustratorの長所を活かしたデザイン手法を学ぼう
 
フリーランスが出会う“現場のタスク管理法あれこれ”
フリーランスが出会う“現場のタスク管理法あれこれ”フリーランスが出会う“現場のタスク管理法あれこれ”
フリーランスが出会う“現場のタスク管理法あれこれ”
 
レスポンシブサイト制作に効く デザインTipsあれこれ
レスポンシブサイト制作に効く デザインTipsあれこれレスポンシブサイト制作に効く デザインTipsあれこれ
レスポンシブサイト制作に効く デザインTipsあれこれ
 
CSS Nite in KansaiのMovable Typeスライド(黒野明子作成)
CSS Nite in KansaiのMovable Typeスライド(黒野明子作成)CSS Nite in KansaiのMovable Typeスライド(黒野明子作成)
CSS Nite in KansaiのMovable Typeスライド(黒野明子作成)
 

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