しくみで考え、しくみで動かす / DESIGNWAVEvol.04

Slide 1

Slide 1 text

しくみで考え、しくみで動かす KRAFTS&Co. 倉光美和

Slide 2

Slide 2 text

倉光美和 KRAFTS&Co.代表・デザインストラテジスト家庭用ゲーム業界でさまざまなゲームタイトルのUIデザインを担当。その後クックパッドにてiOS/Androidアプリの新機能開発、デザインシステム構築、デザイン戦略部部長などを経て、2022年4月に独立。自己紹介

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

CRAFT VINEGAR DRINK

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

#ProductDesign #CoDesign #DesignManagement

Slide 9

Slide 9 text

本日のイベントテーマプロダクト開発のデザインプロセス

Slide 10

Slide 10 text

・・・

Slide 11

Slide 11 text

わたしの大好きなしくみの話をします

Slide 12

Slide 12 text

引用元：国語辞典オンライン「仕組み・仕組」しくみ機械や組織などの全体をなしている各部分の組み合わせ。構造。

Slide 13

Slide 13 text

UIデザインユーザーが機械を操作するためのしくみを設計する

Slide 14

Slide 14 text

UIデザイン組織デザイン製品を開発する集団の活動のしくみを設計する

Slide 15

Slide 15 text

UIデザイン組織デザインデザインマネジメントデザインの問題を定義し、解決するしくみを設計する

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

ユーザー・事業会社・社会・自分…みんなにとって「やったー」な瞬間それまでの道のりをいろんなしくみで舗装する仕事

Slide 18

Slide 18 text

それすなわち再現性の低そうなことに再現手順を与えること

Slide 19

Slide 19 text

たとえば

Slide 20

Slide 20 text

　　　　　アイデアの有効性を　　　　　早期に検証するしくみ 1

Slide 21

Slide 21 text

note「主観と客観を切り替える鍛錬」 https://note.com/hebereke/n/n56f6fe99740e ユーザーがプロダクトを使う瞬間を切り取ったショートストーリーを、5行の文章で書いてみる…というもの。「これつくりたい！」というアイデアをひらめいた際に使います。デザインする時の思考の補助輪のようなものです。ユーザーストーリーシート

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

誰が　プロダクトのつくり手は場面　新しいアイデアをひらめいた時に欲求　アイデアと出会ったユーザーがどう変化するかを予測したいと思い行動　ユーザーストーリーシートを書いてみることで変化　ユーザー/開発者双方の視点からアイデアの有効性を　　　　初期検証でできるようになる

Slide 24

Slide 24 text

習慣として取り入れやすい・テキストしか利用しないので、特別なツールは不要・チームメンバーに、簡潔にアイデアのねらいを文章で伝えることができるようになる・マーケティングの施策であっても、社内のオペレーションのしくみであっても使えるこのしくみのポイント

Slide 25

Slide 25 text

　　　　　表現したい情報に　　　　　集中できるしくみ 2

Slide 26

Slide 26 text

note「Figma製スライドテンプレ集「わぶんスライド」を公開しました」 https://note.com/hebereke/n/nd1503802a008 Text Text 日本語でいい感じに見えるFigmaスライドテンプレ集。 Figma Communityで配布しているので良かったら使ってみてくださいね。わぶんスライド

Slide 27

Slide 27 text

特徴きほんのレイアウト 1920x1080px、16:9、6カラムで基本レイアウト6パターンを用意しました。画像の有り無しを選択できます。誰もが利用できる書体 Googleの配布しているオープンソースのフォントファミリー「Noto Fonts」を利用しています。ダウンロードすれば、誰でもすぐに利用開始できます。レイアウトが崩れにくい各要素はAutoLayoutで配置しているので、不要な要素は非表示にするだけでレイアウトは自動で補正されます。

Slide 28

Slide 28 text

04 How to use 基本操作書体をダウンロードしてインストールするテキストを編集するには、「Noto Sans」のインストールが必要です。以下からダウンロードしてください。 Noto Sansをダウンロードスライドタイプ/画像の有無を切り替えたい各スライドのコンポーネントで、「Type」「WithImage」のプロパティを切り替えてください。画像を差し替えたいコンポーネント内に設置された画像「img area」に、任意の画像を上書きしてください。

Slide 29

Slide 29 text

情報のデザインに集中できる・都度、スライドテンプレートづくりに煩わされることがない・overrideのしやすさ（色、設定）・途中でページの継ぎ足しをしても、左上からスライドショーしてくれる・チームメンバーからレビューがもらいやすい・デザインチーム資産にもなるこのしくみのポイント

Slide 30

Slide 30 text

実は今回の発表も「わぶんスライド」製でした

Slide 31

Slide 31 text

さいごに

Slide 32

Slide 32 text

組織にうまくハマらず消えていったしくみも数知れず…

Slide 33

Slide 33 text

良いしくみの共通点口コミで、ユーザー自身が広めてくれる。設計者が気にかけずとも、よく稼働してくれる。次第に、コミュニティのカルチャーとなっていく。

Slide 34

Slide 34 text

しくみ化したその先は？

Slide 35

Slide 35 text

Create. しくみ化で生まれた時間で、再現性のない自分しかできないものをつくろう。ためそう。

Slide 36

Slide 36 text

Thank you. ＠transitkix