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

63948b792e99ef377435976719fa6f69?s=47 rokuzeudon
February 23, 2019

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

名古屋 Adobe XD Meeting #01 の発表資料です。
https://xdstudy-nagoya.connpass.com/event/116326/

63948b792e99ef377435976719fa6f69?s=128

rokuzeudon

February 23, 2019
Tweet

Transcript

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

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

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

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

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

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

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

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

  9. デザイナーとしてやったこと 案をSlackで共有 → フィードバックもらって反映 → Slackで共有 ... のサイクル ・ XDを中心にラフ、デザイン、コーディング(部分改修)

    まで実施 ・ XD ⌘+C & Slack ⌘+V だけで済んだ
  10. 実際のXDデータ1/2 とりあえず叩き台を ざっくりつくって共有、 意見もらう ・ DEMO ラフ

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

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

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

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

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

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

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

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

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

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

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

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

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