プロジェクトをなめらかに進めるのにAdobe XDが役立ってる話

by あげうどん

Slide 1

Slide 1 text

プロジェクトをなめらかに進めるのにが役立ってる話 Adobe XD 名古屋 Adobe XD Meeting #01 by @rokuzeudon 2019.2.23

Slide 2

Slide 2 text

ろくぜうどん @rokuzeudon "より良く"するのが好きなWebデザイナー㈱カルテットコミュニケーションズ開発部所属 Webデザイナー歴７年（2018年7月入社）・・・

Slide 3

Slide 3 text

Lisket - https://lisket.jp/ リスティング広告運用支援ツール・自社サービス・ Symfony + Angular ・

Slide 4

Slide 4 text

本日話おしすることデザイナー１人の環境で XDをどう使ってるか 1. ランディングページ改善 2. サービスUIプチ改善

Slide 5

Slide 5 text

Part 1 / 2 ランディングページを改善するぞ!!

Slide 6

Slide 6 text

2014年より前からデザインほぼ同じ。機能追加・変更に伴う表記の更新が中心。・ランディングページ ( Before )

Slide 7

Slide 7 text

インサイドセールスプロジェクト発足リーダーデザイナーメンバーメンバーある日もっと多くの人に Lisketを使ってほしい!!

Slide 8

Slide 8 text

やると決まったこと (一例) 料金改定好きなツールだけ選んで個別に契約・課金する仕組みから、プラン（パック）契約へ・ランディングページの刷新料金体系含め、訪問者に訴求するようリデザイン・

Slide 9

Slide 9 text

デザイナーとしてやったこと案をSlackで共有 → フィードバックもらって反映 → Slackで共有 ... のサイクル・ XDを中心にラフ、デザイン、コーディング(部分改修) まで実施・ XD ⌘+C & Slack ⌘+V だけで済んだ

Slide 10

Slide 10 text

実際のXDデータ1/2 とりあえず叩き台をざっくりつくって共有、意見もらう・ DEMO ラフ

Slide 11

Slide 11 text

そこそこビジュアル詰めて共有、意見もらう・一部Photoshop利用・ DEMO 実際のXDデータ2/2 デザイン

Slide 12

Slide 12 text

画像化したいレイヤーを１箇所にまとめ、レイヤー名変え・カラーコードはシンボル名を参照・１人でやってるとデザインスペックは逆に面倒に感じ… DEMO 実際のXDデータ2/2 コーディング

Slide 13

Slide 13 text

作って終わり、ではない!! GoogleAnalyticsで取得した数値を元に施策を考える(今のところ他のメンバー中心）・私はその内容を素早くデザインに落とし込み、共有・実装する・早い・ラク

Slide 14

Slide 14 text

サービスのUIを少しずつ改善するぞ!! Part 2 / 2

Slide 15

Slide 15 text

Bootstrapベース・ GitHub上での WIP‒PR駆動開発・ Lisket

Slide 16

Slide 16 text

文言・アイコン・配置などバラツキの統一・機能追加に伴うレイアウトの調整・ツールリニューアルに伴う画面構成刷新・デザイナーとしてやってること (一例)

Slide 17

Slide 17 text

具体的なXD活用例 UI変更のちょっとしたイメージをサクッと作成 1. Githubのissue/PullRequestで使うスクショ作る 3. UI変更に伴う新しい画面構成案を共有 2.

Slide 18

Slide 18 text

1/3 UI変更のイメージをサクッと作成ちょっとした何かしら作業する毎に作成＆溜めた UIパーツを組み合わせる DEMO

Slide 19

Slide 19 text

2/3 UI変更に伴う新しい画面構成案を共有画面遷移図が簡単につくれる・ XD用プラグインがありワンタッチで同期・ Overflow側で認証付の共有リンク発行可・ DEMO Overﬂow.io

Slide 20

Slide 20 text

3/3 Githubで使うスクショ作る Pull Request フロントの変更前後のスクショ必要 Review Merge

Slide 21

Slide 21 text

スクショバシバシ撮る XDにバシバシ放込 ⌘+Eでバシバシ書出 D&D、自動マスクが超ラク DEMO 3/3 Githubで使うスクショ作る

Slide 22

Slide 22 text

圧倒的に軽い・早い・ラク XDの良いところ

Slide 23

Slide 23 text

デザイン共有/決定までのプロセスをなめらかにするコミュニケーションツールまとめ