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.8k
ノベルティの勘所 / Communication DesignNight vol.01
transit_kix
0
1.1k
デザインスプリントの組織導入と活用について
transit_kix
5
4.4k
情緒の設計
transit_kix
25
22k
デザイン落とし穴 - 抜け出すための傾向と対策 -
transit_kix
10
25k
日常から学ぶデザイン(道具と体験の関係性)
transit_kix
6
2.2k
Featured
See All Featured
Mobile First: as difficult as doing things right
swwweet
222
8.9k
Faster Mobile Websites
deanohume
305
30k
Producing Creativity
orderedlist
PRO
341
39k
The Art of Programming - Codeland 2020
erikaheidi
52
13k
Why Our Code Smells
bkeepers
PRO
334
57k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
42
9.2k
Testing 201, or: Great Expectations
jmmastey
38
7.1k
Measuring & Analyzing Core Web Vitals
bluesmoon
4
120
Side Projects
sachag
452
42k
Agile that works and the tools we love
rasmusluckow
327
21k
How To Stay Up To Date on Web Technology
chriscoyier
788
250k
Speed Design
sergeychernyshev
25
620
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