{"componentChunkName":"component---src-modules-datocms-post-page-page-tsx","path":"/posts/82","result":{"data":{"post":{"title":"画面スケッチの作成","author":{"name":"reoring","images":{"r32":{"src":"https://www.datocms-assets.com/29850/1591833154-735890.jpg?auto=format&fm=png&h=32&mask=ellipse&w=32","srcSet":"https://www.datocms-assets.com/29850/1591833154-735890.jpg?auto=format&dpr=1&fm=png&h=32&mask=ellipse&w=32 1x,\nhttps://www.datocms-assets.com/29850/1591833154-735890.jpg?auto=format&dpr=1.5&fm=png&h=32&mask=ellipse&w=32 1.5x,\nhttps://www.datocms-assets.com/29850/1591833154-735890.jpg?auto=format&dpr=2&fm=png&h=32&mask=ellipse&w=32 2x,\nhttps://www.datocms-assets.com/29850/1591833154-735890.jpg?auto=format&dpr=3&fm=png&h=32&mask=ellipse&w=32 3x"},"r48":{"src":"https://www.datocms-assets.com/29850/1591833154-735890.jpg?auto=format&fm=png&h=48&mask=ellipse&w=48","srcSet":"https://www.datocms-assets.com/29850/1591833154-735890.jpg?auto=format&dpr=1&fm=png&h=48&mask=ellipse&w=48 1x,\nhttps://www.datocms-assets.com/29850/1591833154-735890.jpg?auto=format&dpr=1.5&fm=png&h=48&mask=ellipse&w=48 1.5x,\nhttps://www.datocms-assets.com/29850/1591833154-735890.jpg?auto=format&dpr=2&fm=png&h=48&mask=ellipse&w=48 2x,\nhttps://www.datocms-assets.com/29850/1591833154-735890.jpg?auto=format&dpr=3&fm=png&h=48&mask=ellipse&w=48 3x"}},"bio":"株式会社クラフトマンソフトウェア代表 | Schoo講師 | 分報発祥の会社 | YYPHP主催 | マンガでわかるDocker監修 | 実践ドメイン駆動設計レビュア | 自動受け入れテスト ShouldBee http://shouldbee.at/"},"date":"2017年6月5日","tags":[],"category":"すごい開発チーム育成ハンドブック","body":"<p data-sourcepos=\"1:1-1:100\">Day2ではビジネスサイドと技術サイドが共同で画面スケッチを作っていく。</p>\n<p data-sourcepos=\"3:1-3:63\">画面スケッチ作成で得たいことを下記に示す。</p>\n<ul data-sourcepos=\"5:1-9:0\">\n<li data-sourcepos=\"5:1-5:62\">作ろうとしているプロダクトの理解を深める</li>\n<li data-sourcepos=\"6:1-6:53\">これまで見落していた事柄を発見する</li>\n<li data-sourcepos=\"7:1-9:0\">ビジネスサイドと技術サイドの共通認識を作る</li>\n</ul>\n<h2 data-sourcepos=\"10:1-10:39\" id=\"0-1-0\" name=\"0-1-0\">\n<a class=\"anchor\" id=\"準備する道具・使うツール\" name=\"%E6%BA%96%E5%82%99%E3%81%99%E3%82%8B%E9%81%93%E5%85%B7%E3%83%BB%E4%BD%BF%E3%81%86%E3%83%84%E3%83%BC%E3%83%AB\" href=\"#%E6%BA%96%E5%82%99%E3%81%99%E3%82%8B%E9%81%93%E5%85%B7%E3%83%BB%E4%BD%BF%E3%81%86%E3%83%84%E3%83%BC%E3%83%AB\" data-position=\"0-1-0\"><i class=\"fa fa-link\"></i><span class=\"hidden\" data-text=\"準備する道具・使うツール\"> &gt; 準備する道具・使うツール</span></a>準備する道具・使うツール</h2>\n<ul data-sourcepos=\"12:1-16:0\">\n<li data-sourcepos=\"12:1-12:25\">たくさんのA4用紙</li>\n<li data-sourcepos=\"13:1-13:50\">インクが切れていない人数分のペン</li>\n<li data-sourcepos=\"14:1-16:0\">参加者全員が十分にスペースを取れる広い部屋</li>\n</ul>\n<h2 data-sourcepos=\"17:1-17:12\" id=\"0-2-0\" name=\"0-2-0\">\n<a class=\"anchor\" id=\"描き方\" name=\"%E6%8F%8F%E3%81%8D%E6%96%B9\" href=\"#%E6%8F%8F%E3%81%8D%E6%96%B9\" data-position=\"0-2-0\"><i class=\"fa fa-link\"></i><span class=\"hidden\" data-text=\"描き方\"> &gt; 描き方</span></a>描き方</h2>\n<p data-sourcepos=\"19:1-19:224\">A4用紙にユーザが使う画面を書いていく。このときレイアウトやデザインやボタンの配置などは気にしない。ユーザに価値を提供する機能に専念して描き進めていく。</p>\n<h3 data-sourcepos=\"22:1-22:7\" id=\"0-2-1\" name=\"0-2-1\">\n<a class=\"anchor\" id=\"例\" name=\"%E4%BE%8B\" href=\"#%E4%BE%8B\" data-position=\"0-2-1\"><i class=\"fa fa-link\"></i><span class=\"hidden\" data-text=\"例\"> &gt; 例</span></a>例</h3>\n<a href=\"https://c16e-esa-io-public-files.s3-ap-northeast-1.amazonaws.com/uploads/production/attachments/15637/2020/05/28/18740/8702a7e8-a2eb-4b89-9b20-7f303f59e843.jpg\" target=\"_blank\" rel=\"noopener noreferrer\"><img width=\"595.8994974874372\" alt=\"1.jpg (273.7 kB)\" src=\"https://c16e-esa-io-public-files.s3-ap-northeast-1.amazonaws.com/uploads/production/attachments/15637/2020/05/28/18740/8702a7e8-a2eb-4b89-9b20-7f303f59e843.jpg\"></a>\n<h2 data-sourcepos=\"26:1-26:18\" id=\"0-3-0\" name=\"0-3-0\">\n<a class=\"anchor\" id=\"作業の流れ\" name=\"%E4%BD%9C%E6%A5%AD%E3%81%AE%E6%B5%81%E3%82%8C\" href=\"#%E4%BD%9C%E6%A5%AD%E3%81%AE%E6%B5%81%E3%82%8C\" data-position=\"0-3-0\"><i class=\"fa fa-link\"></i><span class=\"hidden\" data-text=\"作業の流れ\"> &gt; 作業の流れ</span></a>作業の流れ</h2>\n<ol data-sourcepos=\"28:1-32:0\">\n<li data-sourcepos=\"28:1-28:81\">どの画面のスケッチを作成するかをディスカッションする</li>\n<li data-sourcepos=\"29:1-29:93\">画面についてのディスカッションしながら画面スケッチを作成する</li>\n<li data-sourcepos=\"30:1-30:60\">次に画面スケッチを作成する画面を決める</li>\n<li data-sourcepos=\"31:1-32:0\">2から繰り返す</li>\n</ol>\n<p data-sourcepos=\"33:1-33:254\">画面スケッチを作成していくときに注意しなければならないのは、詳細まで完全に決めきろうとしないことだ。1画面5分というルールを決めて、サクサクと進むことを重視するようにする。</p>\n"}},"pageContext":{"id":"DatoCmsPost-5148560-ja","description":"Day2ではビジネスサイドと技術サイドが共同で画面スケッチを作っていく。 画面スケッチ作成で得たいことを下記に示す。 作ろうとしているプロダクトの理解を深める これまで見落していた事柄を発見する ビジネスサイドと技術サイドの共通認識を作る 準備する道具・使うツール たくさんのA4用紙 インクが切れていない人数分のペン 参加者全員が十分にスペースを取れる広い部屋 描き方 A4用紙にユーザが使う画面を書いていく。このときレイアウトやデザインやボタンの配置などは気にしない。ユーザに価値を提供する機能に専念して描き進めていく。 例 作業の流れ どの画面のスケッチを作成するかをディスカッションする 画面","toc":[{"tag":"h2","depth":2,"href":"#%E6%BA%96%E5%82%99%E3%81%99%E3%82%8B%E9%81%93%E5%85%B7%E3%83%BB%E4%BD%BF%E3%81%86%E3%83%84%E3%83%BC%E3%83%AB","text":"準備する道具・使うツール","html":"準備する道具・使うツール"},{"tag":"h2","depth":2,"href":"#%E6%8F%8F%E3%81%8D%E6%96%B9","text":"描き方","html":"描き方"},{"tag":"h3","depth":3,"href":"#%E4%BE%8B","text":"例","html":"例"},{"tag":"h2","depth":2,"href":"#%E4%BD%9C%E6%A5%AD%E3%81%AE%E6%B5%81%E3%82%8C","text":"作業の流れ","html":"作業の流れ"}],"ogpImageUrl":"https://www.datocms-assets.com/29850/1593190022-pastedimage20200627146.png?fm=png&mark64=aHR0cHM6Ly93d3cuZGF0b2Ntcy1hc3NldHMuY29tLzI5ODUwLzE1OTMxNTQ2MzYtdHJhbnNwYXJlbnQtcGl4ZWwucG5nP3c9NDAwJmg9NjQmZml0PWNyb3AmYmxlbmQ2ND1hSFIwY0hNNkx5OTNkM2N1WkdGMGIyTnRjeTFoYzNObGRITXVZMjl0THpJNU9EVXdMekUxT1RFNE16TXhOVFF0TnpNMU9Ea3dMbXB3Wno5dFlYTnJQV1ZzYkdsd2MyVW1abTA5Y0c1bkpuYzlNalUySm1nOU1qVTImYmxlbmQtaD02NCZibGVuZC14PTAmYmxlbmQteT0wJmJsZW5kLW1vZGU9bm9ybWFsJm1hcms2ND1hSFIwY0hNNkx5OWhjM05sZEhNdWFXMW5hWGd1Ym1WMEwzNTBaWGgwUDNSNGRDMWhiR2xuYmoxdGFXUmtiR1VsTWtOc1pXWjBKblI0ZEMxbWIyNTBQWE5oYm5NdGMyVnlhV1lsTWtOaWIyeGtKblI0ZEMxamIyeHZjajB5TWpFNE1UWW1kSGgwTmpROVkyMVdkbU50YkhWYWR5WjBlSFF0YzJsNlpUMHpNQ1pvUFRZMCZtYXJrLXg9NjQmbWFyay1hbGlnbj1taWRkbGUlMkNsZWZ0&mark-align=bottom%2Cleft&mark-x=100&mark-y=496&blend64=aHR0cHM6Ly93d3cuZGF0b2Ntcy1hc3NldHMuY29tLzI5ODUwLzE1OTMxNTQ2MzYtdHJhbnNwYXJlbnQtcGl4ZWwucG5nP3c9MTIwMCZoPTYzMCZmaXQ9Y3JvcCZtYXJrNjQ9YUhSMGNITTZMeTkzZDNjdVpHRjBiMk50Y3kxaGMzTmxkSE11WTI5dEx6STVPRFV3THpFMU9UTXhOVEE1TkRBdFkzSmhablJ6YldGdUxUQXhMbkJ1WncmbWFyay1hbGlnbj10b3AlMkNjZW50ZXImbWFyay13PTI1MCZtYXJrLXk9ODAmYmxlbmQ2ND1hSFIwY0hNNkx5OWhjM05sZEhNdWFXMW5hWGd1Ym1WMEwzNTBaWGgwUDNSNGRDMWhiR2xuYmoxdGFXUmtiR1VsTWtOalpXNTBaWEltZEhoMExXWnZiblE5YzJGdWN5MXpaWEpwWmlVeVEySnZiR1FtZEhoMExYQmhaRDB4TURBbWRIaDBMV052Ykc5eVBUSXlNVGd4TmlaMGVIUTJORDAxTlZNM05sb3lhVFEwU3pVME5FdDRORFJQUkRRMFQwSTBORWQxTlV3eVl6VnZhVkVtZEhoMExYTnBlbVU5TlRVbWR6MHhNakF3Sm1nOU5qTXcmYmxlbmQtbW9kZT1ub3JtYWw&blend-mode=normal"}}}