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

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

Transcript

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide