Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
プロジェクトをなめらかに進めるのにAdobe XDが役立ってる話
Search
あげ
February 23, 2019
Design
3
2.9k
プロジェクトをなめらかに進めるのにAdobe XDが役立ってる話
名古屋 Adobe XD Meeting #01 の発表資料です。
https://xdstudy-nagoya.connpass.com/event/116326/
あげ
February 23, 2019
Tweet
Share
More Decks by あげ
See All by あげ
カスタマーサポートメンバーが開発チーム年末大掃除大会で音頭をとった話
60d
0
24
デザイナー不在だった開発チームの中でデザイナーとして何ができるのか by @rokuzeudon
60d
5
900
わたしのオススメのタスク管理ツール by @rokuzeudon
60d
1
210
BootstrapベースなツールのデザインフェーズでのAdobe XD活用チャレンジ
60d
3
2.5k
Webサイト制作が快適になるAdobeXDの導入活用Tips
60d
1
320
「稼ぐ」以外でブログ発信を楽しむ視点あれこれ
60d
0
390
オンラインスクール DelightU EX 課題発表資料 @rokuzeudon
60d
0
640
Other Decks in Design
See All in Design
Métricas de UX - Reflexões sobre o uso de dados numéricos no contexto de UX
videlvequio
0
160
顧客体験を作るデザイナーが 意思決定速度を上げるために使うAI
cremacrema
2
560
Design Leadership in Challenging Times
morganepeng
3
300
Information Architects: The Missing Link in Design Systems
soysaucechin
0
120
良いアプリケーションをデザインするための感覚の持ち方 / Cultivating a Sense for Designing Great Applications
usagimaru
23
8k
事業戦略と組織のビジョンデザイン〜デザイン的アプローチで事業・組織づくりにどう取り組んでいるかのリアル〜
jdesign_tokyo
1
390
リリース1ヶ月後で機能をなくした話
hinofu
1
710
間違った「問い」を乗り越え ノベルティをプチバズりさせた話
takaikanako
0
1.2k
コラボレーションを小さくはじめ、大きく広める - 相互理解のためのデザイン&開発交流会, Friends of Figma Tokyo by Yasuhiro Yokota
yasuhiroyokota
2
1.2k
フロントエンドエンジニアが知っておくべきUIUX心理学
yukiringo
1
300
新しい資産運用サービスALTERNA(オルタナ)の伝え方の工夫
layerx
PRO
0
970
ゲームクリエイター、事業会社のデザイナーになる
satomium1
0
190
Featured
See All Featured
The Brand Is Dead. Long Live the Brand.
mthomps
49
29k
It's Worth the Effort
3n
180
27k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
123
39k
Navigating Team Friction
lara
179
13k
GraphQLとの向き合い方2022年版
quramy
33
12k
A Tale of Four Properties
chriscoyier
152
22k
We Have a Design System, Now What?
morganepeng
44
6.8k
Visualization
eitanlees
137
14k
A Modern Web Designer's Workflow
chriscoyier
689
190k
Facilitating Awesome Meetings
lara
43
5.6k
The Straight Up "How To Draw Better" Workshop
denniskardys
228
130k
No one is an island. Learnings from fostering a developers community.
thoeni
16
2.1k
Transcript
プロジェクトをなめらかに進めるのに が役立ってる話 Adobe XD 名古屋 Adobe XD Meeting #01 by
@rokuzeudon 2019.2.23
ろくぜうどん @rokuzeudon "より良く"するのが好きなWebデザイナー ㈱カルテットコミュニケーションズ 開発部所属 Webデザイナー歴7年 (2018年7月入社) ・ ・ ・
Lisket - https://lisket.jp/ リスティング広告運用 支援ツール ・ 自社サービス ・ Symfony +
Angular ・
本日 話 お しすること デザイナー1人の環境で XDをどう使ってるか 1. ランディングページ改善 2. サービスUIプチ改善
Part 1 / 2 ランディングページを 改善するぞ!!
2014年より前から デザインほぼ同じ。 機能追加・変更に伴う 表記の更新が中心。 ・ ランディングページ ( Before )
インサイドセールス プロジェクト発足 リーダー デザイナー メンバー メンバー ある日 もっと多くの人に Lisketを使ってほしい!!
やると決まったこと (一例) 料金改定 好きなツールだけ選んで個別に契約・課金する 仕組みから、プラン(パック)契約へ ・ ランディングページの刷新 料金体系含め、訪問者に訴求するようリデザイン ・
デザイナーとしてやったこと 案をSlackで共有 → フィードバックもらって反映 → Slackで共有 ... のサイクル ・ XDを中心にラフ、デザイン、コーディング(部分改修)
まで実施 ・ XD ⌘+C & Slack ⌘+V だけで済んだ
実際のXDデータ1/2 とりあえず叩き台を ざっくりつくって共有、 意見もらう ・ DEMO ラフ
そこそこビジュアル 詰めて共有、意見 もらう ・ 一部Photoshop利用 ・ DEMO 実際のXDデータ2/2 デザイン
画像化したい レイヤーを1箇所に まとめ、レイヤー名変え ・ カラーコードは シンボル名を参照 ・ 1人でやってるとデザインスペックは 逆に面倒に感じ… DEMO
実際のXDデータ2/2 コーディング
作って終わり、ではない!! GoogleAnalyticsで取得した数値を元に 施策を考える(今のところ他のメンバー中心) ・ 私はその内容を素早くデザインに落とし込み、 共有・実装する ・ 早い・ラク
サービスのUIを 少しずつ改善するぞ!! Part 2 / 2
Bootstrapベース ・ GitHub上での WIP‒PR駆動開発 ・ Lisket
文言・アイコン・配置などバラツキの統一 ・ 機能追加に伴うレイアウトの調整 ・ ツールリニューアルに伴う画面構成刷新 ・ デザイナーとしてやってること (一例)
具体的なXD活用例 UI変更のちょっとしたイメージをサクッと作成 1. Githubのissue/PullRequestで使うスクショ作る 3. UI変更に伴う新しい画面構成案を共有 2.
1/3 UI変更のイメージをサクッと作成 ちょっとした 何かしら作業する毎に作成&溜めた UIパーツを組み合わせる DEMO
2/3 UI変更に伴う新しい画面構成案を共有 画面遷移図が簡単に つくれる ・ XD用プラグインがあり ワンタッチで同期 ・ Overflow側で認証付の 共有リンク発行可
・ DEMO Overflow.io
3/3 Githubで使うスクショ作る Pull Request フロントの変更前後 のスクショ必要 Review Merge
スクショ バシバシ撮る XDに バシバシ放込 ⌘+Eで バシバシ書出 D&D、自動マスクが超ラク DEMO 3/3 Githubで使うスクショ作る
圧倒的に軽い・早い・ラク XDの良いところ
デザイン共有/決定までの プロセスをなめらかにする コミュニケーションツール まとめ