真似して学ぶUIデザイン入門(事前展開資料)

 真似して学ぶUIデザイン入門(事前展開資料)

Efe3b32c678d6071ea1f06478fd2156b?s=128

Noriaki Kawanishi

June 29, 2020
Tweet

Transcript

  1. @DMM.com 真似して学ぶUIデザイン入門 〜身近なあのサイトを模倣してみよう〜 事前共有資料

  2. @DMM.com 講師紹介 @norinity1103 紀明 紀明

  3. @DMM.com ・WSの目的とゴールの共有 ・チェックイン ・利用ツールの説明・導入 ・ワークショ導入 / ショートセッション ・振り返りとアクションプランの作成 当日のアジェンダ

  4. @DMM.com WSの目的とゴールの共有 研修ではこんなことをやります

  5. @DMM.com いつでもはじめられる「発見・観察・設計」 研修の目的とゴールの共有 身近なサービスを模倣し デザインツールの利用を通して UIデザインの楽しさと修練方法を知る

  6. @DMM.com 目的 ゴール 身近なサービスを模倣し、現場で実際に使われているモダンなデザイン ツールの利用を通してUIデザインの楽しさと修練方法を知ってもらう このWSでの気づきを通して、ビジネス素養として大切な「発見・観察・ 設計」に関する視点を身につける(ツールの習得は重要ではない) 研修の目的とゴールの共有

  7. @DMM.com Figmaのアカウント作成 できれば当日までに作っておいてください

  8. Figma 当日利用するツールの説明 Figma のできること ・同時にたくさんの人が一緒にデザインできる ・一つのデータで2名まで無料で編集できる ・ブラウザ・アプリ両方で使える(win/mac) ・リンクを知っている人は誰でも見れてコメントできる ・いろんなデータがコピペで使い回せる

  9. アカウントのFigmaアカウントの作成手順 アカウント作成方法 Figma+デザインで検索、公式サイト の「Sign Up」をクリック Googleもしくは任意のメールでアカウント を作成します 運営側が案内するURLにアクセスしてください。リンクを踏 むとログインもしくはアカウント作成を求められます。 公式サイトからアカウント作成

    アカウント情報を登録 招待リンクにアクセス ここから スタートでも OK
  10. WS講習用の招待リンクにアクセス https://www.figma.com/file/9rrjtmlWGV8cNJo0h3oU Jp/members_ws_20200630?node-id=11%3A995 アプリインストールのほうが動作が軽いです ↓演習用の招待リンク

  11. 講習用データ:members_ws_20200630 アクセスできましたか? アカウント作成してから入れるまで1~2分で終わります!

  12. 講習用データ:members_ws_20200630 講習用データの使いどころ ↑でのデータで出来ること ・説明用のスライドショーです ・これから皆さんがおこなうワークショップのサンプル展示 ・わからなくなったときのリファレンス(コメント自由)

  13. あなただけのデザインファイルを作ってみましょう 「+」アイコンをクリック

  14. ファイル名を変えましょう

  15. あなたのファイルをシェアしましょう ① ②共有リンクをコピー Shareボタンをクリック

  16. 当日のZoomチャンネルなどにリンクをシェア シェアしたリンクを知る人があなたのデータを閲覧できるようになります

  17. @DMM.com 当日はどうぞ よろしくお願いします。 @norinity1103 紀明 紀明