Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

F126c62320c208faf9abbeda8a6343dc?s=47 Miwa Kuramitsu
June 15, 2022
2.6k

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

プロダクト開発のデザインプロセス [DESIGN WAVE vol.04]
https://connpass.com/event/250536/
の資料です。

F126c62320c208faf9abbeda8a6343dc?s=128

Miwa Kuramitsu

June 15, 2022
Tweet

Transcript

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

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

  3. None
  4. None
  5. CRAFT VINEGAR DRINK

  6. None
  7. None
  8. #ProductDesign #CoDesign #DesignManagement

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

  10. ・・・

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

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

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

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

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

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

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

  19. たとえば

  20.           アイデアの有効性を        

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

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

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

  25.           表現したい情報に        

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

  27. 特徴 きほんのレイアウト 1920x1080px、16:9、6カラムで基 本レイアウト6パターンを用意しま した。画像の有り無しを選択できま す。 誰もが利用できる書体 Googleの配布しているオープンソー スのフォントファミリー「Noto Fonts」を利用しています。ダウン

    ロードすれば、誰でもすぐに利用開 始できます。 レイアウトが崩れにくい 各要素はAutoLayoutで配置してい るので、不要な要素は非表示にする だけでレイアウトは自動で補正され ます。
  28. 04 How to use 基本操作 書体をダウンロードして インストールする テキストを編集するには、「Noto Sans」のインストールが必要です。 以下からダウンロードしてくださ

    い。 Noto Sansをダウンロード スライドタイプ/画像の有 無を切り替えたい 各 ス ラ イ ド の コ ン ポ ー ネ ン ト で、「Type」「WithImage」のプ ロパティを切り替えてください。 画像を差し替えたい コンポーネント内に設置された画 像「img area」に、任意の画像を上 書きしてください。
  29. 情報のデザインに集中できる ・都度、スライドテンプレートづくりに煩わされること がない ・overrideのしやすさ(色、設定) ・途中でページの継ぎ足しをしても、左上からスライド ショーしてくれる ・チームメンバーからレビューがもらいやすい ・デザインチーム資産にもなる このしくみのポイント

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

  31. さいごに

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

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

  34. しくみ化したその先は?

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

  36. Thank you. @transitkix