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
Sponsored
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
Noriaki Kawanishi
June 29, 2020
Design
260
1
Share
真似して学ぶUIデザイン入門（事前展開資料）
Noriaki Kawanishi
June 29, 2020
More Decks by Noriaki Kawanishi
See All by Noriaki Kawanishi
minpaku-community-scrum-patterns
norinity1103
1
610
SSoT for Design
norinity1103
0
360
Design for disaster preparedness
norinity1103
0
310
オンラインホワイトボードで組織の成長を促進する方法
norinity1103
1
180
地域に変革を起こすデザイン経営のススメ
norinity1103
0
200
Social Business Talk_in akabane hall
norinity1103
0
240
愉しみながら成長できる仕組みづくり
norinity1103
0
620
夢中になる仕組み 「ゲームフロー理論」を紐解く_DIST41 「ゲームから学ぶUI_UX」
norinity1103
0
960
古民家ゲストハウスで挑戦できる田舎づくり
norinity1103
0
360
Other Decks in Design
See All in Design
新規AIプロダクトで、事前に知るべきだった3つの壁 〜医療AIを1年間作って、従来の開発が通用しなかった話〜 / Three Walls in Building AI Products
shikichee
2
4.1k
Drawing_for_Anim_Final_PDF.pdf
lynteo
2
140
Mandalyn_DT5001_FinalAssignment.pdf
lynteo
0
210
2026の目標「もっと定量的に事業、会社へ貢献する！」
yuri_ohashi
0
790
CULTURE DECK／Marketing Director
mhand01
0
1.2k
爆速開発でAIプロダクトが40万インプレッションになった話
tsubura
0
230
Diverse Design Team Deck
diverse
0
1.4k
AI時代に求められるUXデザインのアプローチ
xtone
0
2.8k
Crisp Code inc.｜ブランドガイドライン - Brand guidelines
so_kotani
1
350
hicard_credential_202601
hicard
0
220
CULTURE DECK／Creative Director
mhand01
0
1.1k
Storyboard Assignment: Storyboard from Comic Strip
lynteo
3
260
Featured
See All Featured
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.9k
Automating Front-end Workflow
addyosmani
1370
200k
VelocityConf: Rendering Performance Case Studies
addyosmani
333
25k
Lightning talk: Run Django tests with GitHub Actions
sabderemane
0
170
Future Trends and Review - Lecture 12 - Web Technologies (1019888BNR)
signer
PRO
0
3.5k
Highjacked: Video Game Concept Design
rkendrick25
PRO
1
340
Measuring & Analyzing Core Web Vitals
bluesmoon
9
810
Building a A Zero-Code AI SEO Workflow
portentint
PRO
0
450
How to make the Groovebox
asonas
2
2.1k
From π to Pie charts
rasagy
0
160
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
25
1.9k
A Modern Web Designer's Workflow
chriscoyier
698
190k
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 紀明 紀明
norinity1103
shikichee
lynteo
yuri_ohashi
mhand01
tsubura
diverse
xtone
so_kotani
hicard
reverentgeek
addyosmani
sabderemane
signer
rkendrick25
bluesmoon
portentint
asonas
rasagy
honnibal
chriscoyier
