Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
真似して学ぶUIデザイン入門(事前展開資料)
Search
Noriaki Kawanishi
June 29, 2020
Design
1
160
真似して学ぶUIデザイン入門(事前展開資料)
Noriaki Kawanishi
June 29, 2020
Tweet
Share
More Decks by Noriaki Kawanishi
See All by Noriaki Kawanishi
Design for disaster preparedness
norinity1103
0
91
オンラインホワイトボードで組織の成長を促進する方法
norinity1103
1
39
地域に変革を起こすデザイン経営のススメ
norinity1103
0
66
Social Business Talk_in akabane hall
norinity1103
0
72
愉しみながら成長できる仕組みづくり
norinity1103
0
420
夢中になる仕組み 「ゲームフロー理論」を紐解く_DIST41 「ゲームから学ぶUI_UX」
norinity1103
0
140
古民家ゲストハウスで挑戦できる田舎づくり
norinity1103
0
140
地域と民泊と田舎の体験づくり
norinity1103
0
220
複業でデザインするライフスタイル
norinity1103
0
200
Other Decks in Design
See All in Design
みてね デザイン組織の変遷とデザインマネージャーの振り返り
naoyawatanabe
3
600
成果が出ないユーザーインタビューは何がダメだったのか? ~「誰に聞くか」の探り方 ~
jouykw
10
13k
UIをもたらすコンテクストの考察
securecat
9
2.5k
デザインテクノロジストが先導する プロダクト開発の世界
degudegu2510
1
350
noteのアクセシビリティ これまでのプロダクト・組織へのアプローチとこれからのこと
tatsuyasawanobori
1
1k
実務のための マイクロ インタラクション入門
shingo2000
0
350
社内のコミュニケーション課題に対して個人的に行っているデザイン以外の草の根活動
sugiyama_sukedachi
0
140
社内管理画面のデザインもプロダクトデザイン
takanorip
4
730
良いアプリケーションをデザインするための感覚の持ち方 / Cultivating a Sense for Designing Great Applications
usagimaru
22
7.7k
ダークテーマとアクセシビリティ の融合したカラートークンの設計
degudegu2510
0
280
新しい資産運用サービスALTERNA(オルタナ)の伝え方の工夫
layerx
PRO
0
910
PRDがデザインプロセスを高速化した話
tooomo
1
260
Featured
See All Featured
A Philosophy of Restraint
colly
196
16k
Embracing the Ebb and Flow
colly
79
4.1k
Building a Scalable Design System with Sketch
lauravandoore
455
32k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
119
38k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
352
28k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
13
1.5k
Why Our Code Smells
bkeepers
PRO
331
56k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
6
990
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
321
20k
In The Pink: A Labor of Love
frogandcode
138
21k
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
18
1.7k
Transcript
@DMM.com 真似して学ぶUIデザイン入門 〜身近なあのサイトを模倣してみよう〜 事前共有資料
@DMM.com 講師紹介 @norinity1103 紀明 紀明
@DMM.com ・WSの目的とゴールの共有 ・チェックイン ・利用ツールの説明・導入 ・ワークショ導入 / ショートセッション ・振り返りとアクションプランの作成 当日のアジェンダ
@DMM.com WSの目的とゴールの共有 研修ではこんなことをやります
@DMM.com いつでもはじめられる「発見・観察・設計」 研修の目的とゴールの共有 身近なサービスを模倣し デザインツールの利用を通して UIデザインの楽しさと修練方法を知る
@DMM.com 目的 ゴール 身近なサービスを模倣し、現場で実際に使われているモダンなデザイン ツールの利用を通してUIデザインの楽しさと修練方法を知ってもらう このWSでの気づきを通して、ビジネス素養として大切な「発見・観察・ 設計」に関する視点を身につける(ツールの習得は重要ではない) 研修の目的とゴールの共有
@DMM.com Figmaのアカウント作成 できれば当日までに作っておいてください
Figma 当日利用するツールの説明 Figma のできること ・同時にたくさんの人が一緒にデザインできる ・一つのデータで2名まで無料で編集できる ・ブラウザ・アプリ両方で使える(win/mac) ・リンクを知っている人は誰でも見れてコメントできる ・いろんなデータがコピペで使い回せる
アカウントのFigmaアカウントの作成手順 アカウント作成方法 Figma+デザインで検索、公式サイト の「Sign Up」をクリック Googleもしくは任意のメールでアカウント を作成します 運営側が案内するURLにアクセスしてください。リンクを踏 むとログインもしくはアカウント作成を求められます。 公式サイトからアカウント作成
アカウント情報を登録 招待リンクにアクセス ここから スタートでも OK
WS講習用の招待リンクにアクセス https://www.figma.com/file/9rrjtmlWGV8cNJo0h3oU Jp/members_ws_20200630?node-id=11%3A995 アプリインストールのほうが動作が軽いです ↓演習用の招待リンク
講習用データ:members_ws_20200630 アクセスできましたか? アカウント作成してから入れるまで1~2分で終わります!
講習用データ:members_ws_20200630 講習用データの使いどころ ↑でのデータで出来ること ・説明用のスライドショーです ・これから皆さんがおこなうワークショップのサンプル展示 ・わからなくなったときのリファレンス(コメント自由)
あなただけのデザインファイルを作ってみましょう 「+」アイコンをクリック
ファイル名を変えましょう
あなたのファイルをシェアしましょう ① ②共有リンクをコピー Shareボタンをクリック
当日のZoomチャンネルなどにリンクをシェア シェアしたリンクを知る人があなたのデータを閲覧できるようになります
@DMM.com 当日はどうぞ よろしくお願いします。 @norinity1103 紀明 紀明