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
パンくずリストかわいい(breadcrumb so cute)
ysuda
0
160
生成AIを受け入れ共創できるデザイナーマインドへープロセス改革を想定したデザイナーの準備ー
takumasaito
1
1.7k
ENEOS社事例|アプリ事業を加速させるデザイナーの取り組み / dx-eneos-design
cyberagentdevelopers
PRO
1
820
Illustrator2025がやってきた!私が好きな新機能
hamko1114
0
110
How to go from research data to insights?
mastervicedesign
0
220
【Designship 2024|10.13】デザイン組織を進化させるための仕組み化の要諦
payatsusan213
1
780
Managing Design Systems (Antwerp 2024)
nathanacurtis
1
380
Fem tips om ux-text • WSA-dagen 29 jan 2025
jonas_blind_hen
PRO
0
130
20250129_DAST28_実空間にデジタル資源の接点をデザインする
majimasachi
0
210
HCDフォーラム2024 「HCDとHAI ~人間とAIが共存する世界の実現~」
kamechi7222222
0
280
ゲーム開発における、Figma活用事例の紹介 / applibot-figma
cyberagentdevelopers
PRO
2
620
241214_StackNagoya_プレイングマネージャーのプレイングの時間の使い方
kiyoshifuwa
0
210
Featured
See All Featured
Embracing the Ebb and Flow
colly
84
4.6k
BBQ
matthewcrist
86
9.5k
The Cost Of JavaScript in 2023
addyosmani
47
7.3k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.1k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
The Invisible Side of Design
smashingmag
299
50k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
114
50k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
45
2.3k
Building Flexible Design Systems
yeseniaperezcruz
328
38k
Automating Front-end Workflow
addyosmani
1367
200k
Building Adaptive Systems
keathley
40
2.4k
Git: the NoSQL Database
bkeepers
PRO
427
64k
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の良いところ
デザイン共有/決定までの プロセスをなめらかにする コミュニケーションツール まとめ