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
しくみで考え、しくみで動かす / DESIGNWAVEvol.04
Search
Miwa Kuramitsu
June 15, 2022
7
3.5k
しくみで考え、しくみで動かす / DESIGNWAVEvol.04
プロダクト開発のデザインプロセス [DESIGN WAVE vol.04]
https://connpass.com/event/250536/
の資料です。
Miwa Kuramitsu
June 15, 2022
Tweet
Share
More Decks by Miwa Kuramitsu
See All by Miwa Kuramitsu
意志と、デザインと、ときどきお金
transit_kix
3
2.9k
ノベルティの勘所 / Communication DesignNight vol.01
transit_kix
0
1.2k
デザインスプリントの組織導入と活用について
transit_kix
5
4.5k
情緒の設計
transit_kix
25
22k
デザイン落とし穴 - 抜け出すための傾向と対策 -
transit_kix
10
25k
日常から学ぶデザイン(道具と体験の関係性)
transit_kix
6
2.2k
Featured
See All Featured
Optimizing for Happiness
mojombo
376
70k
Automating Front-end Workflow
addyosmani
1366
200k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
169
50k
The Language of Interfaces
destraynor
154
24k
Measuring & Analyzing Core Web Vitals
bluesmoon
4
170
Designing on Purpose - Digital PM Summit 2013
jponch
116
7k
Adopting Sorbet at Scale
ufuk
73
9.1k
Making the Leap to Tech Lead
cromwellryan
133
9k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
7k
Faster Mobile Websites
deanohume
305
30k
Into the Great Unknown - MozCon
thekraken
33
1.5k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Transcript
しくみで考え、 しくみで動かす KRAFTS&Co. 倉光美和
倉光 美和 KRAFTS&Co.代表・デザインストラテジスト 家庭用ゲーム業界でさまざまなゲームタイトルのUIデザ インを担当。その後クックパッドにてiOS/Androidアプリ の新機能開発、デザインシステム構築、デザイン戦略部 部長などを経て、2022年4月に独立。 自己紹介
None
None
CRAFT VINEGAR DRINK
None
None
#ProductDesign #CoDesign #DesignManagement
本日のイベントテーマ プロダクト開発の デザインプロセス
・・・
わたしの大好きなしくみの話をします
引用元: 国語辞典オンライン「仕組み・仕組」 しくみ 機械や組織などの全体をなしている各部分の組み合わせ。構造。
UIデザイン ユーザーが機械を操作するための しくみを設計する
UIデザイン 組織デザイン 製品を開発する集団の 活動のしくみを設計する
UIデザイン 組織デザイン デザインマネジメント デザインの問題を定義し、解決するしくみを設計する
None
ユーザー・事業会社・社会・自分…みんなにとって「やったー」な瞬間 それまでの道のりをいろんなしくみで舗装する仕事
それすなわち 再現性の低そうなことに 再現手順を与えること
たとえば
アイデアの有効性を
早期に検証するしくみ 1
note「主観と客観を切り替える鍛錬」 https://note.com/hebereke/n/n56f6fe99740e ユーザーがプロダクトを使う瞬間を切り取ったショート ストーリーを、5行の文章で書いてみる…というもの。 「これつくりたい!」というアイデアをひらめいた際に 使います。 デザインする時の思考の補助輪のようなものです。 ユーザーストーリーシート
None
誰が プロダクトのつくり手は 場面 新しいアイデアをひらめいた時に 欲求 アイデアと出会ったユーザーがどう変化するかを予測したいと思い 行動 ユーザーストーリーシートを書いてみることで 変化 ユーザー/開発者双方の視点からアイデアの有効性を
初期検証でできるようになる
習慣として取り入れやすい ・テキストしか利用しないので、特別なツールは不要 ・チームメンバーに、簡潔にアイデアのねらいを文章で 伝えることができるようになる ・マーケティングの施策であっても、社内のオペレー ションのしくみであっても使える このしくみのポイント
表現したい情報に
集中できるしくみ 2
note「Figma製スライドテンプレ集「わぶんスライド」を公開しました」 https://note.com/hebereke/n/nd1503802a008 Text Text 日本語でいい感じに見えるFigmaスライドテンプレ集。 Figma Communityで配布しているので良かったら使って みてくださいね。 わぶんスライド
特徴 きほんのレイアウト 1920x1080px、16:9、6カラムで基 本レイアウト6パターンを用意しま した。画像の有り無しを選択できま す。 誰もが利用できる書体 Googleの配布しているオープンソー スのフォントファミリー「Noto Fonts」を利用しています。ダウン
ロードすれば、誰でもすぐに利用開 始できます。 レイアウトが崩れにくい 各要素はAutoLayoutで配置してい るので、不要な要素は非表示にする だけでレイアウトは自動で補正され ます。
04 How to use 基本操作 書体をダウンロードして インストールする テキストを編集するには、「Noto Sans」のインストールが必要です。 以下からダウンロードしてくださ
い。 Noto Sansをダウンロード スライドタイプ/画像の有 無を切り替えたい 各 ス ラ イ ド の コ ン ポ ー ネ ン ト で、「Type」「WithImage」のプ ロパティを切り替えてください。 画像を差し替えたい コンポーネント内に設置された画 像「img area」に、任意の画像を上 書きしてください。
情報のデザインに集中できる ・都度、スライドテンプレートづくりに煩わされること がない ・overrideのしやすさ(色、設定) ・途中でページの継ぎ足しをしても、左上からスライド ショーしてくれる ・チームメンバーからレビューがもらいやすい ・デザインチーム資産にもなる このしくみのポイント
実は今回の発表も「わぶんスライド」製でした
さいごに
組織にうまくハマらず 消えていったしくみも 数知れず…
良いしくみの共通点 口コミで、ユーザー自身が広めてくれる。 設計者が気にかけずとも、よく稼働してくれる。 次第に、コミュニティのカルチャーとなっていく。
しくみ化したその先は?
Create. しくみ化で生まれた時間で、再現性のない 自分しかできないものをつくろう。ためそう。
Thank you. @transitkix