Upgrade to Pro — share decks privately, control downloads, hide ads and more …

ノンデザイナーズ・デザインツール

 ノンデザイナーズ・デザインツール

【初参加歓迎】Webエンジニア勉強会inVR 第3回【YouTube Liveあり】
https://study-in-virtual.connpass.com/event/178491/
にて登壇

unotovive

June 21, 2020
Tweet

More Decks by unotovive

Other Decks in Technology

Transcript

  1. ノン・デザイナーズ

    デザインツール
    株式会社ゆめみ
    おとべ (@unotovive)

    View full-size slide

  2. 自己紹介します

    View full-size slide

  3. おとべです
    sonotamoromoro
    github
    instagram
    note
    twitter
    {

    ,

    ,

    ,

    ,

    ,

    } .com/unotovive

    View full-size slide

  4. おとべです
    ・ゆめみ20卒です

    ・フロントエンドのはず

    ・そのうちデザインチーム

    View full-size slide

  5. 本題
    Non

    Designers

    Design

    Tool

    View full-size slide

  6. デザインツールはすごいぞ
    今日は
    って話をします

    View full-size slide

  7. Figma
    UIデザインツール

    View full-size slide

  8. \ででん/

    View full-size slide

  9. Figmaって何
    んで結局

    View full-size slide

  10. 基本的にデザインするもの

    View full-size slide

  11. 本来の用途①
    ・アプリとかWebのデザイン

    View full-size slide

  12. 本来の用途②
    ・アプリとかWebの

     プロトタイピング

    View full-size slide

  13. デザイナーさん御用達

    ツール

    View full-size slide

  14. 最強便利ツールに化ける‼‼
    そんなFigmaだけど、使いようによっては

    View full-size slide

  15. 画像加工・編集
    最強Figma術・其の一

    View full-size slide

  16. 画像に文字を入れたり

    View full-size slide

  17. 線とか図形を入れたり

    View full-size slide

  18. 線とか図形を入れたり

    View full-size slide

  19. 軽いフィルターだったり

    View full-size slide

  20. 軽いフィルターだったり

    View full-size slide

  21. めっちゃ簡単に付けれます

    View full-size slide

  22. 書き出しも超めっちゃすごい簡単

    View full-size slide

  23. インフラ構成図とかの作成
    最強Figma術・其の二

    View full-size slide

  24. 画像はDevelopers.IOの記事の物です

    https://dev.classmethod.jp/articles/codepipeline-approval/
    こんなの

    View full-size slide

  25. よく使うやつ
    納品物
    設計書
    記事の挿絵

    View full-size slide

  26. draw.io ?

    powerpoint ?

    View full-size slide

  27. Figmaでも出来ます!!!
    \ででん/

    View full-size slide

  28. UIキットやテンプレートが
    用意されている
    \どや/

    View full-size slide

  29. AWSダイアグラムテンプレート
    \公式だよ/

    View full-size slide

  30. コピペして並べるだけ

    View full-size slide

  31. 書き出しもさっきと一緒

    View full-size slide

  32. SVGの調整
    最強Figma術・其の三

    View full-size slide

  33. 本当にあった怖い話

    ~拡大できないSVGの謎~

    View full-size slide

  34. どこにでもある

    ログアウトできそうな

    アイコン

    View full-size slide

  35. 縮小してみる

    View full-size slide

  36. つぶれた

    View full-size slide

  37. 自作したアイコンでLINEと
    Vectorが混ざってる

    View full-size slide

  38. SVGとして書き出したい部分
    全部選んでアウトライン化
    \変な図形は微調整/

    View full-size slide

  39. 登壇資料の作成
    超最強Figma術・其の四

    View full-size slide

  40. Figmaは

    プロトタイピングツール
    \そうだよ/

    View full-size slide

  41. 任意の順にページを

    再生できる
    \そ、そうだよ/

    View full-size slide

  42. というわけで

    スライドをつくって登壇も

    できる
    \!?/

    View full-size slide

  43. Frameを並べて再生するだけ
    \!?!?!??/

    View full-size slide

  44. いいところ
    ・自由度の高いデザイン

    ・ひな形さえ作っちゃえばスライドづくりは楽

    ・雑に図で説明できる

    ・PDF化も3秒

    ・Webで使える・作れる
    \敬え/

    View full-size slide

  45. デザイン視点 実装視点
    企画視点
    ・サービス企画
    ・仕様設計
    ・コンポーネント

     設計
    ・API設計
    ・UIデザイン ・DB設計
    ・ワイヤーフレーム

    View full-size slide

  46. デザイン視点 実装視点
    企画視点
    ペルソナ

    UXDコンセプト


    OO分析とコンセプトマップ


    UI設計


    コンポーネント設計

    DB設計等



    実装

    View full-size slide

  47. よくないところ
    ・最低限が保証されないデザイン


    ・アニメーションは結構無理

    View full-size slide

  48. でも、難しいんでしょう?
    わあすっごい便利

    View full-size slide

  49. 超簡単です
    \Webで使えるよ/

    View full-size slide

  50. ショートカットキー

    6個ぐらい覚えるだけ
    \80個ぐらいあるけど使わん/

    View full-size slide

  51. SPACE + ドラッグ =移動

    コマンド + スクロール =拡大縮小

    V = 選択

    T = テキストボックス

    R = しかく

    O = まる

    L = 線
    あああ

    View full-size slide

  52. でも、お高いんでしょう?
    わあすっごい便利

    View full-size slide

  53. 基本ただです
    \どんだけ作っても/

    View full-size slide

  54. バージョニングとかできる

    プレミアムプラン?
    \どっから入るのかも分からん/

    View full-size slide

  55. まとめ
    Figma術マスターになったので

    View full-size slide

  56. スライド公開しているので鉞でも質問でもあれば@unotoviveまで
    ご清聴ありがとうございました

    View full-size slide