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
150
カスタマーサポートメンバーが開発チーム年末大掃除大会で音頭をとった話
60d
0
39
デザイナー不在だった開発チームの中でデザイナーとして何ができるのか by @rokuzeudon
60d
5
990
わたしのオススメのタスク管理ツール by @rokuzeudon
60d
1
230
BootstrapベースなツールのデザインフェーズでのAdobe XD活用チャレンジ
60d
3
2.7k
Webサイト制作が快適になるAdobeXDの導入活用Tips
60d
1
340
「稼ぐ」以外でブログ発信を楽しむ視点あれこれ
60d
0
530
オンラインスクール DelightU EX 課題発表資料 @rokuzeudon
60d
0
710
Other Decks in Design
See All in Design
Hatena Engineer Seminar #33 チームと開発するためのモック
takuwolog
0
390
組織で取り組むアクセシビリティのはじめ方
masakiohsumi
0
160
共通認識のためのユーザビリティテスト by AIエージェント - Accelerating Value Delivery
gakuoya
1
690
真・altはつけるだけじゃなくて -alt属性の考察 2025年版-
securecat
5
1.6k
Storyboard Honey
rocioparronrubio
0
290
ランドマークが光る!季節を彩るナビ体験 - Mobility Night #3 -
kitau
0
100
サービスリブランディングにおけるイラストレーションシステムの構築と活用事例 / Building and Utilizing an Illustration System in Service Rebranding
lycorptech_jp
PRO
0
440
サービスデザインにおける、 映像活用の可能性(Spectrum Tokyo Meetup #18)
ka71
0
150
A brief & incomplete history of UX Design for the World Wide Web: 1989–2019
jct
1
210
数理的アプローチで挑むスマホUIのデザイン改善:タップ成功率推定ツール「Tappy」の社内活用事例 / Improving Smartphone UI Design with a Mathematical Approach: In-house Use Case of the Tap Success Rate Estimation Tool "Tappy"
lycorptech_jp
PRO
0
640
Goodpatch Tour💙 / We are hiring!
goodpatch
31
870k
Tools for Design Engineers other than LLM in the LLM era
takanorip
1
370
Featured
See All Featured
A Modern Web Designer's Workflow
chriscoyier
695
190k
Rails Girls Zürich Keynote
gr2m
95
14k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.5k
Producing Creativity
orderedlist
PRO
346
40k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.5k
Code Reviewing Like a Champion
maltzj
524
40k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
How STYLIGHT went responsive
nonsquared
100
5.6k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
990
Faster Mobile Websites
deanohume
308
31k
How GitHub (no longer) Works
holman
314
140k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
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の良いところ
デザイン共有/決定までの プロセスをなめらかにする コミュニケーションツール まとめ