diff --git a/design/imgs/design-navigation.mmd b/design/imgs/design-navigation.mmd
new file mode 100644
index 0000000..9dc71e9
--- /dev/null
+++ b/design/imgs/design-navigation.mmd
@@ -0,0 +1,10 @@
+flowchart TD;
+
+subgraph ビューA
+コレクションA
+シングルA
+end
+
+ビューA --> コレクションB
+シングルB --> ビューA
+コレクションB --> シングルB
\ No newline at end of file
diff --git a/design/imgs/design-navigation.svg b/design/imgs/design-navigation.svg
new file mode 100644
index 0000000..2b8bbf6
--- /dev/null
+++ b/design/imgs/design-navigation.svg
@@ -0,0 +1 @@
+<svg aria-roledescription="flowchart-v2" role="graphics-document document" viewBox="-7.5 -8 343.921875 283" style="max-width: 343.922px; background-color: white;" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" width="100%" id="my-svg"><style>#my-svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#my-svg .error-icon{fill:#552222;}#my-svg .error-text{fill:#552222;stroke:#552222;}#my-svg .edge-thickness-normal{stroke-width:2px;}#my-svg .edge-thickness-thick{stroke-width:3.5px;}#my-svg .edge-pattern-solid{stroke-dasharray:0;}#my-svg .edge-pattern-dashed{stroke-dasharray:3;}#my-svg .edge-pattern-dotted{stroke-dasharray:2;}#my-svg .marker{fill:#333333;stroke:#333333;}#my-svg .marker.cross{stroke:#333333;}#my-svg svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#my-svg .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#my-svg .cluster-label text{fill:#333;}#my-svg .cluster-label span,#my-svg p{color:#333;}#my-svg .label text,#my-svg span,#my-svg p{fill:#333;color:#333;}#my-svg .node rect,#my-svg .node circle,#my-svg .node ellipse,#my-svg .node polygon,#my-svg .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#my-svg .flowchart-label text{text-anchor:middle;}#my-svg .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#my-svg .node .label{text-align:center;}#my-svg .node.clickable{cursor:pointer;}#my-svg .arrowheadPath{fill:#333333;}#my-svg .edgePath .path{stroke:#333333;stroke-width:2.0px;}#my-svg .flowchart-link{stroke:#333333;fill:none;}#my-svg .edgeLabel{background-color:#e8e8e8;text-align:center;}#my-svg .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#my-svg .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#my-svg .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#my-svg .cluster text{fill:#333;}#my-svg .cluster span,#my-svg p{color:#333;}#my-svg div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#my-svg .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#my-svg :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}</style><g><marker orient="auto" markerHeight="12" markerWidth="12" markerUnits="userSpaceOnUse" refY="5" refX="6" viewBox="0 0 10 10" class="marker flowchart" id="my-svg_flowchart-pointEnd"><path style="stroke-width: 1; stroke-dasharray: 1, 0;" class="arrowMarkerPath" d="M 0 0 L 10 5 L 0 10 z"/></marker><marker orient="auto" markerHeight="12" markerWidth="12" markerUnits="userSpaceOnUse" refY="5" refX="4.5" viewBox="0 0 10 10" class="marker flowchart" id="my-svg_flowchart-pointStart"><path style="stroke-width: 1; stroke-dasharray: 1, 0;" class="arrowMarkerPath" d="M 0 5 L 10 10 L 10 0 z"/></marker><marker orient="auto" markerHeight="11" markerWidth="11" markerUnits="userSpaceOnUse" refY="5" refX="11" viewBox="0 0 10 10" class="marker flowchart" id="my-svg_flowchart-circleEnd"><circle style="stroke-width: 1; stroke-dasharray: 1, 0;" class="arrowMarkerPath" r="5" cy="5" cx="5"/></marker><marker orient="auto" markerHeight="11" markerWidth="11" markerUnits="userSpaceOnUse" refY="5" refX="-1" viewBox="0 0 10 10" class="marker flowchart" id="my-svg_flowchart-circleStart"><circle style="stroke-width: 1; stroke-dasharray: 1, 0;" class="arrowMarkerPath" r="5" cy="5" cx="5"/></marker><marker orient="auto" markerHeight="11" markerWidth="11" markerUnits="userSpaceOnUse" refY="5.2" refX="12" viewBox="0 0 11 11" class="marker cross flowchart" id="my-svg_flowchart-crossEnd"><path style="stroke-width: 2; stroke-dasharray: 1, 0;" class="arrowMarkerPath" d="M 1,1 l 9,9 M 10,1 l -9,9"/></marker><marker orient="auto" markerHeight="11" markerWidth="11" markerUnits="userSpaceOnUse" refY="5.2" refX="-1" viewBox="0 0 11 11" class="marker cross flowchart" id="my-svg_flowchart-crossStart"><path style="stroke-width: 2; stroke-dasharray: 1, 0;" class="arrowMarkerPath" d="M 1,1 l 9,9 M 10,1 l -9,9"/></marker><g class="root"><g class="clusters"/><g class="edgePaths"><path marker-end="url(#my-svg_flowchart-pointEnd)" style="fill:none;" class="edge-thickness-normal edge-pattern-solid flowchart-link LS-コレクションB LE-シングルB" id="L-コレクションB-シングルB-0" d="M116.447,178L116.447,182.167C116.447,186.333,116.447,194.667,120.251,202.396C124.056,210.126,131.664,217.251,135.468,220.814L139.272,224.377"/><path marker-end="url(#my-svg_flowchart-pointEnd)" style="fill:none;" class="edge-thickness-normal edge-pattern-solid flowchart-link LS-ビューA LE-コレクションB" id="L-ビューA-コレクションB-0" d="M133.539,89L130.69,93.167C127.841,97.333,122.144,105.667,119.296,113.117C116.447,120.567,116.447,127.133,116.447,130.417L116.447,133.7"/><path marker-end="url(#my-svg_flowchart-pointEnd)" style="fill:none;" class="edge-thickness-normal edge-pattern-solid flowchart-link LS-シングルB LE-ビューA" id="L-シングルB-ビューA-0" d="M184.782,228L189.23,223.833C193.679,219.667,202.577,211.333,207.026,199.75C211.475,188.167,211.475,173.333,211.475,158.5C211.475,143.667,211.475,128.833,209.125,117.979C206.775,107.125,202.075,100.25,199.725,96.813L197.375,93.375"/></g><g class="edgeLabels"><g class="edgeLabel"><g transform="translate(0, 0)" class="label"><foreignObject height="0" width="0"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="edgeLabel"></span></div></foreignObject></g></g><g class="edgeLabel"><g transform="translate(0, 0)" class="label"><foreignObject height="0" width="0"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="edgeLabel"></span></div></foreignObject></g></g><g class="edgeLabel"><g transform="translate(0, 0)" class="label"><foreignObject height="0" width="0"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="edgeLabel"></span></div></foreignObject></g></g></g><g class="nodes"><g transform="translate(-7.5, -8)" class="root"><g class="clusters"><g id="ビューA" class="cluster default flowchart-label"><rect height="89" width="327.921875" y="8" x="8" ry="0" rx="0" style=""/><g transform="translate(143.48046875, 8)" class="cluster-label"><foreignObject height="24" width="56.9609375"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="nodeLabel">ビューA</span></div></foreignObject></g></g></g><g class="edgePaths"/><g class="edgeLabels"/><g class="nodes"><g transform="translate(103.21875, 52.5)" data-id="コレクションA" data-node="true" id="flowchart-コレクションA-0" class="node default default flowchart-label"><rect height="39" width="120.4375" y="-19.5" x="-60.21875" ry="0" rx="0" style="" class="basic label-container"/><g transform="translate(-52.71875, -12)" style="" class="label"><rect/><foreignObject height="24" width="105.4375"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="nodeLabel">コレクションA</span></div></foreignObject></g></g><g transform="translate(257.1796875, 52.5)" data-id="シングルA" data-node="true" id="flowchart-シングルA-1" class="node default default flowchart-label"><rect height="39" width="87.484375" y="-19.5" x="-43.7421875" ry="0" rx="0" style="" class="basic label-container"/><g transform="translate(-36.2421875, -12)" style="" class="label"><rect/><foreignObject height="24" width="72.484375"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="nodeLabel">シングルA</span></div></foreignObject></g></g></g></g><g transform="translate(116.447265625, 158.5)" data-id="コレクションB" data-node="true" id="flowchart-コレクションB-3" class="node default default flowchart-label"><rect height="39" width="120.0546875" y="-19.5" x="-60.02734375" ry="0" rx="0" style="" class="basic label-container"/><g transform="translate(-52.52734375, -12)" style="" class="label"><rect/><foreignObject height="24" width="105.0546875"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="nodeLabel">コレクションB</span></div></foreignObject></g></g><g transform="translate(163.9609375, 247.5)" data-id="シングルB" data-node="true" id="flowchart-シングルB-4" class="node default default flowchart-label"><rect height="39" width="87.1015625" y="-19.5" x="-43.55078125" ry="0" rx="0" style="" class="basic label-container"/><g transform="translate(-36.05078125, -12)" style="" class="label"><rect/><foreignObject height="24" width="72.1015625"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="nodeLabel">シングルB</span></div></foreignObject></g></g></g></g></g></svg>
\ No newline at end of file
diff --git a/design/imgs/design-ui-sample.png b/design/imgs/design-ui-sample.png
new file mode 100644
index 0000000..04cbe7a
Binary files /dev/null and b/design/imgs/design-ui-sample.png differ
diff --git a/design/imgs/design-view.mmd b/design/imgs/design-view.mmd
new file mode 100644
index 0000000..d2a7f6c
--- /dev/null
+++ b/design/imgs/design-view.mmd
@@ -0,0 +1,11 @@
+flowchart TD;
+
+subgraph A
+コレクションA --> シングルA
+シングルA --> コレクションA
+end
+subgraph B
+コレクションB --> シングルB
+end
+シングルB --> シングルA
+コレクションA --> コレクションB
\ No newline at end of file
diff --git a/design/imgs/design-view.svg b/design/imgs/design-view.svg
new file mode 100644
index 0000000..a1f2cd1
--- /dev/null
+++ b/design/imgs/design-view.svg
@@ -0,0 +1 @@
+<svg aria-roledescription="flowchart-v2" role="graphics-document document" viewBox="-8 -8 416.4921875 422" style="max-width: 416.492px; background-color: white;" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" width="100%" id="my-svg"><style>#my-svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#my-svg .error-icon{fill:#552222;}#my-svg .error-text{fill:#552222;stroke:#552222;}#my-svg .edge-thickness-normal{stroke-width:2px;}#my-svg .edge-thickness-thick{stroke-width:3.5px;}#my-svg .edge-pattern-solid{stroke-dasharray:0;}#my-svg .edge-pattern-dashed{stroke-dasharray:3;}#my-svg .edge-pattern-dotted{stroke-dasharray:2;}#my-svg .marker{fill:#333333;stroke:#333333;}#my-svg .marker.cross{stroke:#333333;}#my-svg svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#my-svg .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#my-svg .cluster-label text{fill:#333;}#my-svg .cluster-label span,#my-svg p{color:#333;}#my-svg .label text,#my-svg span,#my-svg p{fill:#333;color:#333;}#my-svg .node rect,#my-svg .node circle,#my-svg .node ellipse,#my-svg .node polygon,#my-svg .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#my-svg .flowchart-label text{text-anchor:middle;}#my-svg .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#my-svg .node .label{text-align:center;}#my-svg .node.clickable{cursor:pointer;}#my-svg .arrowheadPath{fill:#333333;}#my-svg .edgePath .path{stroke:#333333;stroke-width:2.0px;}#my-svg .flowchart-link{stroke:#333333;fill:none;}#my-svg .edgeLabel{background-color:#e8e8e8;text-align:center;}#my-svg .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#my-svg .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#my-svg .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#my-svg .cluster text{fill:#333;}#my-svg .cluster span,#my-svg p{color:#333;}#my-svg div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#my-svg .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#my-svg :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}</style><g><marker orient="auto" markerHeight="12" markerWidth="12" markerUnits="userSpaceOnUse" refY="5" refX="6" viewBox="0 0 10 10" class="marker flowchart" id="my-svg_flowchart-pointEnd"><path style="stroke-width: 1; stroke-dasharray: 1, 0;" class="arrowMarkerPath" d="M 0 0 L 10 5 L 0 10 z"/></marker><marker orient="auto" markerHeight="12" markerWidth="12" markerUnits="userSpaceOnUse" refY="5" refX="4.5" viewBox="0 0 10 10" class="marker flowchart" id="my-svg_flowchart-pointStart"><path style="stroke-width: 1; stroke-dasharray: 1, 0;" class="arrowMarkerPath" d="M 0 5 L 10 10 L 10 0 z"/></marker><marker orient="auto" markerHeight="11" markerWidth="11" markerUnits="userSpaceOnUse" refY="5" refX="11" viewBox="0 0 10 10" class="marker flowchart" id="my-svg_flowchart-circleEnd"><circle style="stroke-width: 1; stroke-dasharray: 1, 0;" class="arrowMarkerPath" r="5" cy="5" cx="5"/></marker><marker orient="auto" markerHeight="11" markerWidth="11" markerUnits="userSpaceOnUse" refY="5" refX="-1" viewBox="0 0 10 10" class="marker flowchart" id="my-svg_flowchart-circleStart"><circle style="stroke-width: 1; stroke-dasharray: 1, 0;" class="arrowMarkerPath" r="5" cy="5" cx="5"/></marker><marker orient="auto" markerHeight="11" markerWidth="11" markerUnits="userSpaceOnUse" refY="5.2" refX="12" viewBox="0 0 11 11" class="marker cross flowchart" id="my-svg_flowchart-crossEnd"><path style="stroke-width: 2; stroke-dasharray: 1, 0;" class="arrowMarkerPath" d="M 1,1 l 9,9 M 10,1 l -9,9"/></marker><marker orient="auto" markerHeight="11" markerWidth="11" markerUnits="userSpaceOnUse" refY="5.2" refX="-1" viewBox="0 0 11 11" class="marker cross flowchart" id="my-svg_flowchart-crossStart"><path style="stroke-width: 2; stroke-dasharray: 1, 0;" class="arrowMarkerPath" d="M 1,1 l 9,9 M 10,1 l -9,9"/></marker><g class="root"><g class="clusters"><g id="B" class="cluster default flowchart-label"><rect height="406" width="190.0546875" y="0" x="210.4375" ry="0" rx="0" style=""/><g transform="translate(300.9375, 0)" class="cluster-label"><foreignObject height="18.5" width="9.0546875"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="nodeLabel">B</span></div></foreignObject></g></g><g id="A" class="cluster default flowchart-label"><rect height="178" width="190.4375" y="114" x="0" ry="0" rx="0" style=""/><g transform="translate(90.5, 114)" class="cluster-label"><foreignObject height="18.5" width="9.4375"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="nodeLabel">A</span></div></foreignObject></g></g></g><g class="edgePaths"><path marker-end="url(#my-svg_flowchart-pointEnd)" style="fill:none;" class="edge-thickness-normal edge-pattern-solid flowchart-link LS-コレクションA LE-シングルA" id="L-コレクションA-シングルA-0" d="M111.699,228L115.221,223.833C118.742,219.667,125.785,211.333,126.355,203.675C126.926,196.016,121.023,189.032,118.072,185.54L115.12,182.048"/><path marker-end="url(#my-svg_flowchart-pointEnd)" style="fill:none;" class="edge-thickness-normal edge-pattern-solid flowchart-link LS-シングルA LE-コレクションA" id="L-シングルA-コレクションA-0" d="M78.738,178L75.217,182.167C71.695,186.333,64.652,194.667,64.082,202.325C63.512,209.984,69.415,216.968,72.366,220.46L75.317,223.952"/><path marker-end="url(#my-svg_flowchart-pointEnd)" style="fill:none;" class="edge-thickness-normal edge-pattern-solid flowchart-link LS-コレクションB LE-シングルB" id="L-コレクションB-シングルB-0" d="M321.903,342L325.416,337.833C328.928,333.667,335.953,325.333,339.466,317C342.979,308.667,342.979,300.333,342.979,288.75C342.979,277.167,342.979,262.333,342.979,247.5C342.979,232.667,342.979,217.833,342.979,203C342.979,188.167,342.979,173.333,342.979,158.5C342.979,143.667,342.979,128.833,342.979,117.25C342.979,105.667,342.979,97.333,340.723,89.738C338.467,82.143,333.956,75.285,331.7,71.856L329.445,68.428"/><path marker-end="url(#my-svg_flowchart-pointEnd)" style="fill:none;" class="edge-thickness-normal edge-pattern-solid flowchart-link LS-シングルB LE-シングルA" id="L-シングルB-シングルA-0" d="M297.265,64L293.752,68.167C290.24,72.333,283.214,80.667,279.702,89C276.189,97.333,276.189,105.667,254.176,115.246C232.162,124.826,188.135,135.652,166.121,141.065L144.108,146.478"/><path marker-end="url(#my-svg_flowchart-pointEnd)" style="fill:none;" class="edge-thickness-normal edge-pattern-solid flowchart-link LS-コレクションA LE-コレクションB" id="L-コレクションA-コレクションB-0" d="M95.219,267L95.219,271.167C95.219,275.333,95.219,283.667,124.007,292C152.796,300.333,210.374,308.667,242.106,316.325C273.838,323.983,279.724,330.965,282.667,334.456L285.61,337.948"/></g><g class="edgeLabels"><g class="edgeLabel"><g transform="translate(0, 0)" class="label"><foreignObject height="0" width="0"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="edgeLabel"></span></div></foreignObject></g></g><g class="edgeLabel"><g transform="translate(0, 0)" class="label"><foreignObject height="0" width="0"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="edgeLabel"></span></div></foreignObject></g></g><g class="edgeLabel"><g transform="translate(0, 0)" class="label"><foreignObject height="0" width="0"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="edgeLabel"></span></div></foreignObject></g></g><g class="edgeLabel"><g transform="translate(0, 0)" class="label"><foreignObject height="0" width="0"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="edgeLabel"></span></div></foreignObject></g></g><g class="edgeLabel"><g transform="translate(0, 0)" class="label"><foreignObject height="0" width="0"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="edgeLabel"></span></div></foreignObject></g></g></g><g class="nodes"><g transform="translate(313.703125, 44.5)" data-id="シングルB" data-node="true" id="flowchart-シングルB-5" class="node default default flowchart-label"><rect height="39" width="87.1015625" y="-19.5" x="-43.55078125" ry="0" rx="0" style="" class="basic label-container"/><g transform="translate(-36.05078125, -12)" style="" class="label"><rect/><foreignObject height="24" width="72.1015625"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="nodeLabel">シングルB</span></div></foreignObject></g></g><g transform="translate(305.46484375, 361.5)" data-id="コレクションB" data-node="true" id="flowchart-コレクションB-4" class="node default default flowchart-label"><rect height="39" width="120.0546875" y="-19.5" x="-60.02734375" ry="0" rx="0" style="" class="basic label-container"/><g transform="translate(-52.52734375, -12)" style="" class="label"><rect/><foreignObject height="24" width="105.0546875"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="nodeLabel">コレクションB</span></div></foreignObject></g></g><g transform="translate(95.21875, 158.5)" data-id="シングルA" data-node="true" id="flowchart-シングルA-1" class="node default default flowchart-label"><rect height="39" width="87.484375" y="-19.5" x="-43.7421875" ry="0" rx="0" style="" class="basic label-container"/><g transform="translate(-36.2421875, -12)" style="" class="label"><rect/><foreignObject height="24" width="72.484375"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="nodeLabel">シングルA</span></div></foreignObject></g></g><g transform="translate(95.21875, 247.5)" data-id="コレクションA" data-node="true" id="flowchart-コレクションA-0" class="node default default flowchart-label"><rect height="39" width="120.4375" y="-19.5" x="-60.21875" ry="0" rx="0" style="" class="basic label-container"/><g transform="translate(-52.71875, -12)" style="" class="label"><rect/><foreignObject height="24" width="105.4375"><div style="display: inline-block; white-space: nowrap;" xmlns="http://www.w3.org/1999/xhtml"><span class="nodeLabel">コレクションA</span></div></foreignObject></g></g></g></g></g></svg>
\ No newline at end of file
diff --git a/design/imgs/design01.jpg b/design/imgs/design01.jpg
deleted file mode 100644
index b4aa4c3..0000000
Binary files a/design/imgs/design01.jpg and /dev/null differ
diff --git a/design/imgs/design01.png b/design/imgs/design01.png
new file mode 100644
index 0000000..591bcc5
Binary files /dev/null and b/design/imgs/design01.png differ
diff --git a/design/imgs/design02.jpg b/design/imgs/design02.jpg
deleted file mode 100644
index 0f041df..0000000
Binary files a/design/imgs/design02.jpg and /dev/null differ
diff --git a/design/imgs/design02.png b/design/imgs/design02.png
new file mode 100644
index 0000000..4011213
Binary files /dev/null and b/design/imgs/design02.png differ
diff --git a/design/imgs/design03.png b/design/imgs/design03.png
new file mode 100644
index 0000000..de3d9a4
Binary files /dev/null and b/design/imgs/design03.png differ
diff --git a/design/imgs/design04.png b/design/imgs/design04.png
new file mode 100644
index 0000000..2e90f54
Binary files /dev/null and b/design/imgs/design04.png differ
diff --git a/design/imgs/design05.png b/design/imgs/design05.png
new file mode 100644
index 0000000..766252c
Binary files /dev/null and b/design/imgs/design05.png differ
diff --git a/design/slide.md b/design/slide.md
index 4204e3f..bb3ac9a 100644
--- a/design/slide.md
+++ b/design/slide.md
@@ -29,6 +29,8 @@ paginate: true
 
 UIは、ユーザーと情報の境界。情報をやり取りする
 
+![ui-sample](./imgs/design-ui-sample.png)
+
 ---
 
 ## UIは、情報の**表示**と**操作**を提供する
@@ -67,7 +69,7 @@ UIは、ユーザーと情報の境界。情報をやり取りする
 - ToDoがすぐ表示されない
 - 機能を選択してToDoが表示
 
-![bg contain right:40%](./imgs/design01.jpg)
+![bg contain right:40%](./imgs/design01.png)
 
 ---
 
@@ -75,7 +77,7 @@ UIは、ユーザーと情報の境界。情報をやり取りする
 
 ToDoという**オブジェクト**を抽出する
 
-![bg contain right:40%](./imgs/design02.jpg)
+![bg contain right:40%](./imgs/design02.png)
 
 ---
 
@@ -216,6 +218,8 @@ CRUDは、Create Read Update Delete
 1. **コレクション**から**シングル**へナビゲーション
 2. 別オブジェクトからのナビゲーション
 
+![bg contain right:40%](./imgs/design-view.svg)
+
 ---
 
 ## その後、ビュー・ナビゲーションを削る
@@ -223,6 +227,8 @@ CRUDは、Create Read Update Delete
 - 複数のビューを1つのビューにまとめる
 - 必要のないナビゲーションをなくす
 
+![bg contain right:40%](./imgs/design-navigation.svg)
+
 ---
 
 ## ToDoアプリで、ビュー
@@ -258,6 +264,8 @@ CRUDは、Create Read Update Delete
 - グリッド :hash:
 - マッピング :globe_with_meridians:
 
+![bg contain right:50%](./imgs/design05.png)
+
 ---
 
 ## シングルビューのレイアウト3種
@@ -266,6 +274,8 @@ CRUDは、Create Read Update Delete
 - 関連オブジェクトをプレビュー
 - 関連オブジェクトのコレクションビューを含む
 
+![bg contain right:40%](./imgs/design04.png)
+
 ---
 
 ## アクションは**オブジェクトの近く**にレイアウトする
@@ -285,7 +295,7 @@ CRUDは、Create Read Update Delete
 - ToDoリストが並ぶコレクションビュー
 - ToDoのタイトルと詳細があるシングルビュー
 
-![bg contain right](./imgs/design02.jpg)
+![bg contain right](./imgs/design03.png)
 
 ---
 
@@ -323,6 +333,8 @@ CRUDは、Create Read Update Delete
   - ビューやナビゲーション、ビジュアルデザインを体系立ててまとめたもの
   - アプリ全体で一貫したデザインにできる
 
+例えば、デジタル庁のデザインシステムやMaterialDesign
+
 ---
 
 ## まとめ
@@ -334,8 +346,9 @@ CRUDは、Create Read Update Delete
 
 ---
 
-## あわせて読みたい
+## 出典
 
+- デジタル庁デザインシステムウェブサイト <https://design.digital.go.jp/>
 - オブジェクト指向UIデザイン <https://amzn.asia/d/4vxk6h5>
 - ノンデザイナーズ・デザインブック <https://amzn.asia/d/6LvdOd9>
 - MaterialDesignGuidelines <https://m3.material.io/>