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
3k
プロジェクトをなめらかに進めるのに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
78
カスタマーサポートメンバーが開発チーム年末大掃除大会で音頭をとった話
60d
0
35
デザイナー不在だった開発チームの中でデザイナーとして何ができるのか by @rokuzeudon
60d
5
950
わたしのオススメのタスク管理ツール by @rokuzeudon
60d
1
220
BootstrapベースなツールのデザインフェーズでのAdobe XD活用チャレンジ
60d
3
2.7k
Webサイト制作が快適になるAdobeXDの導入活用Tips
60d
1
330
「稼ぐ」以外でブログ発信を楽しむ視点あれこれ
60d
0
470
オンラインスクール DelightU EX 課題発表資料 @rokuzeudon
60d
0
680
Other Decks in Design
See All in Design
富山デザイン勉強会_デザイントレンド2025.pdf
keita_yoshikawa
0
150
ビジョン実現を加速させるデザインプログラムマネージャーの視座とキャリア/ Designship2024_Sato
root_recruit
0
250
藤本佳子・ポートフォリオ・2025/01
yoshi_designer
0
3.3k
パンくずリストかわいい(breadcrumb so cute)
ysuda
0
160
Illustrator2025がやってきた!私が好きな新機能
hamko1114
0
110
Goodpatch Tour💙 / We are hiring!
goodpatch
31
790k
ユーザーに向き合うデザインが介護・福祉の現場を変える / User-facing design changes the field of care and welfare
sms_tech
0
230
エンタメ業界からDX領域に飛び込んだデザイナーが今立ち向かっている壁とは / applibot-dx-designer
cyberagentdevelopers
PRO
1
190
(第1回) アーキテクト・テックリード育成講座
masakaya
0
160
急成長中のWINTICKETにおける ちいさくはじめるライティング改善 / winticket-writing
cyberagentdevelopers
PRO
1
270
Figma Code Connect を使ってエンジニアの新しい体験をデリバリする
junkifurukawa
0
620
Design Your Own App Using Figma by Medha Muppala
gdgmontreal
0
1.6k
Featured
See All Featured
GitHub's CSS Performance
jonrohan
1030
460k
4 Signs Your Business is Dying
shpigford
182
22k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
12
950
Fireside Chat
paigeccino
34
3.2k
Producing Creativity
orderedlist
PRO
343
39k
Measuring & Analyzing Core Web Vitals
bluesmoon
6
240
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
8
270
Building a Scalable Design System with Sketch
lauravandoore
460
33k
[RailsConf 2023] Rails as a piece of cake
palkan
53
5.2k
KATA
mclloyd
29
14k
Thoughts on Productivity
jonyablonski
69
4.5k
For a Future-Friendly Web
brad_frost
176
9.5k
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の良いところ
デザイン共有/決定までの プロセスをなめらかにする コミュニケーションツール まとめ