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
32
デザイナー不在だった開発チームの中でデザイナーとして何ができるのか by @rokuzeudon
60d
5
930
わたしのオススメのタスク管理ツール by @rokuzeudon
60d
1
220
BootstrapベースなツールのデザインフェーズでのAdobe XD活用チャレンジ
60d
3
2.6k
Webサイト制作が快適になるAdobeXDの導入活用Tips
60d
1
330
「稼ぐ」以外でブログ発信を楽しむ視点あれこれ
60d
0
430
オンラインスクール DelightU EX 課題発表資料 @rokuzeudon
60d
0
650
Other Decks in Design
See All in Design
Speed Design
sergeychernyshev
22
430
Breaking News on the Web
souvikdg
0
660
JBUG京都#1登壇資料_「考える」をマネジメントする_ビーワークス高濱
webnaut
1
450
Tataki Ryu
olgastoryboard
0
120
丸井グループが取り組むエンタープライズアジャイルと プロダクトマネージャーの役割
muture
3
1.4k
ふわっとはじめるSSOT – SSOT for Communication Design
sekiguchiy
0
960
デザインの専門性を活かしたナレッジマネジメント活動の実践と研究
chiemitaki
0
180
202409_会社概要資料_Englishver.pdf
zakkerooni
0
160
🇫🇷 Design Leadership en eaux troubles
morganepeng
2
400
Памятка-раздатка по Карте процесса-опыта, А4
ashapiro
1
120
デザインスプリントを活かすチームの在り方
mixi_design
PRO
1
670
Emil Storyboards (2024)
abbsant
0
150
Featured
See All Featured
Learning to Love Humans: Emotional Interface Design
aarron
270
40k
How GitHub Uses GitHub to Build GitHub
holman
472
290k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
28
1.6k
BBQ
matthewcrist
83
9.2k
What the flash - Photography Introduction
edds
67
11k
[RailsConf 2023] Rails as a piece of cake
palkan
48
4.6k
Designing for Performance
lara
604
68k
Building Your Own Lightsaber
phodgson
101
6k
Design by the Numbers
sachag
277
19k
Optimizing for Happiness
mojombo
375
69k
Principles of Awesome APIs and How to Build Them.
keavy
125
16k
Scaling GitHub
holman
458
140k
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の良いところ
デザイン共有/決定までの プロセスをなめらかにする コミュニケーションツール まとめ