diff --git a/src/app/designs/rounded/_components/control-panel/control-panel.stories.tsx b/src/app/designs/rounded/_components/control-panel/control-panel.stories.tsx
new file mode 100644
index 00000000..6b928ff7
--- /dev/null
+++ b/src/app/designs/rounded/_components/control-panel/control-panel.stories.tsx
@@ -0,0 +1,12 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { ControlPanel } from './control-panel';
+
+const meta: Meta<typeof ControlPanel> = {
+  title: 'app/designs/rounded/control-panel',
+  component: ControlPanel,
+};
+
+export default meta;
+type Story = StoryObj<typeof ControlPanel>;
+
+export const Primary: Story = {};
diff --git a/src/app/designs/rounded/_components/control-panel/control-panel.tsx b/src/app/designs/rounded/_components/control-panel/control-panel.tsx
new file mode 100644
index 00000000..c81c3741
--- /dev/null
+++ b/src/app/designs/rounded/_components/control-panel/control-panel.tsx
@@ -0,0 +1,189 @@
+'use client';
+
+import { FC, KeyboardEvent, MouseEvent, TouchEvent } from 'react';
+import { useControlPanel } from './use-control-panel';
+import clsx from 'clsx';
+import { IconButton } from '@/components/icon-button';
+import { ClipboardPenLine } from 'lucide-react';
+import { useClipboard } from '@/hooks/clipboard';
+
+const OperateButton: FC<{
+  label: string;
+  position: {
+    top?: string;
+    right?: string;
+    bottom?: string;
+    left?: string;
+  };
+  variable: 'primary' | 'secondary' | 'quaternary' | 'tertiary';
+  onMouseDown: (e: MouseEvent) => void;
+  onTouchStart: (e: TouchEvent) => void;
+  onKeyDown: (e: KeyboardEvent) => void;
+  isActive: boolean;
+}> = ({
+  label,
+  position,
+  variable,
+  onMouseDown,
+  onTouchStart,
+  onKeyDown,
+  isActive,
+}) => {
+  return (
+    <button
+      aria-label={label}
+      className={clsx(
+        'absolute size-4 border border-borderPrimary',
+        variable === 'primary' && 'bg-groupPrimary',
+        variable === 'secondary' && 'bg-groupSecondary',
+        variable === 'quaternary' && 'bg-groupQuaternary',
+        variable === 'tertiary' && 'bg-groupTertiary',
+        isActive &&
+          'border-borderTransparent outline-none ring-4 ring-textDescription',
+        'hover:border-borderTransparent hover:outline-none hover:ring-4 hover:ring-textDescription',
+        'focus-visible:border-borderTransparent focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-textDescription',
+      )}
+      onMouseDown={onMouseDown}
+      onTouchStart={onTouchStart}
+      onKeyDown={onKeyDown}
+      style={position}
+    />
+  );
+};
+
+export const ControlPanel: FC = () => {
+  const {
+    activePosition,
+    containerRef,
+    mouseDownHandler,
+    touchStartHandler,
+    keyDownHandler,
+    borderRadius,
+    position,
+  } = useControlPanel();
+  const { writeClipboard } = useClipboard();
+
+  return (
+    <div className="flex flex-col items-center justify-center gap-8">
+      <div
+        ref={containerRef}
+        className="border-borderPrimar relative size-64 border-2 border-dashed sm:size-96"
+      >
+        <div
+          className="absolute size-full bg-textHighlight"
+          style={{
+            borderRadius,
+          }}
+        />
+        <OperateButton
+          label="左上の上側の丸みを調整する(左右キーで操作します)"
+          variable="primary"
+          isActive={activePosition === 'topLeftX'}
+          onMouseDown={(e) => mouseDownHandler(e, 'topLeftX')}
+          onTouchStart={(e) => touchStartHandler(e, 'topLeftX')}
+          onKeyDown={(e) => keyDownHandler(e, 'topLeftX')}
+          position={{
+            top: '-9px',
+            left: `calc(${position.topLeftX}% - 9px)`,
+          }}
+        />
+        <OperateButton
+          label="右上の上側の丸みを調整する(左右キーで操作します)"
+          variable="secondary"
+          isActive={activePosition === 'topRightX'}
+          onMouseDown={(e) => mouseDownHandler(e, 'topRightX')}
+          onTouchStart={(e) => touchStartHandler(e, 'topRightX')}
+          onKeyDown={(e) => keyDownHandler(e, 'topRightX')}
+          position={{
+            top: '-9px',
+            right: `calc(${position.topRightX}% - 9px)`,
+          }}
+        />
+        <OperateButton
+          label="左上の左側の丸みを調整する(上下キーで操作します)"
+          variable="primary"
+          isActive={activePosition === 'topLeftY'}
+          onMouseDown={(e) => mouseDownHandler(e, 'topLeftY')}
+          onTouchStart={(e) => touchStartHandler(e, 'topLeftY')}
+          onKeyDown={(e) => keyDownHandler(e, 'topLeftY')}
+          position={{
+            top: `calc(${position.topLeftY}% - 9px)`,
+            left: '-9px',
+          }}
+        />
+        <OperateButton
+          label="右上の右側の丸みを調整する(上下キーで操作します)"
+          variable="secondary"
+          isActive={activePosition === 'topRightY'}
+          onMouseDown={(e) => mouseDownHandler(e, 'topRightY')}
+          onTouchStart={(e) => touchStartHandler(e, 'topRightY')}
+          onKeyDown={(e) => keyDownHandler(e, 'topRightY')}
+          position={{
+            top: `calc(${position.topRightY}% - 9px)`,
+            right: '-9px',
+          }}
+        />
+        <OperateButton
+          label="左下の左側の丸みを調整する(上下キーで操作します)"
+          variable="quaternary"
+          isActive={activePosition === 'bottomLeftY'}
+          onMouseDown={(e) => mouseDownHandler(e, 'bottomLeftY')}
+          onTouchStart={(e) => touchStartHandler(e, 'bottomLeftY')}
+          onKeyDown={(e) => keyDownHandler(e, 'bottomLeftY')}
+          position={{
+            bottom: `calc(${position.bottomLeftY}% - 9px)`,
+            left: '-9px',
+          }}
+        />
+        <OperateButton
+          label="右下の右側の丸みを調整する(上下キーで操作します)"
+          variable="tertiary"
+          isActive={activePosition === 'bottomRightY'}
+          onMouseDown={(e) => mouseDownHandler(e, 'bottomRightY')}
+          onTouchStart={(e) => touchStartHandler(e, 'bottomRightY')}
+          onKeyDown={(e) => keyDownHandler(e, 'bottomRightY')}
+          position={{
+            bottom: `calc(${position.bottomRightY}% - 9px)`,
+            right: '-9px',
+          }}
+        />
+        <OperateButton
+          label="左下の下側の丸みを調整する(左右キーで操作します)"
+          variable="quaternary"
+          isActive={activePosition === 'bottomLeftX'}
+          onMouseDown={(e) => mouseDownHandler(e, 'bottomLeftX')}
+          onTouchStart={(e) => touchStartHandler(e, 'bottomLeftX')}
+          onKeyDown={(e) => keyDownHandler(e, 'bottomLeftX')}
+          position={{
+            bottom: '-9px',
+            left: `calc(${position.bottomLeftX}% - 9px)`,
+          }}
+        />
+        <OperateButton
+          label="右下の下側の丸みを調整する(左右キーで操作します)"
+          variable="tertiary"
+          isActive={activePosition === 'bottomRightX'}
+          onMouseDown={(e) => mouseDownHandler(e, 'bottomRightX')}
+          onTouchStart={(e) => touchStartHandler(e, 'bottomRightX')}
+          onKeyDown={(e) => keyDownHandler(e, 'bottomRightX')}
+          position={{
+            bottom: '-9px',
+            right: `calc(${position.bottomRightX}% - 9px)`,
+          }}
+        />
+      </div>
+      <div className="flex flex-wrap items-center justify-center gap-4">
+        <p className="text-2xl font-bold">{borderRadius}</p>
+        <IconButton
+          label="値をコピーする"
+          bg="base"
+          onClick={() =>
+            writeClipboard(`border-radius: ${borderRadius}`)
+          }
+        >
+          <ClipboardPenLine className="size-6" />
+        </IconButton>
+      </div>
+    </div>
+  );
+};
diff --git a/src/app/designs/rounded/_components/control-panel/index.ts b/src/app/designs/rounded/_components/control-panel/index.ts
new file mode 100644
index 00000000..25c87d9c
--- /dev/null
+++ b/src/app/designs/rounded/_components/control-panel/index.ts
@@ -0,0 +1 @@
+export * from './control-panel';
diff --git a/src/app/designs/rounded/_components/control-panel/use-control-panel.ts b/src/app/designs/rounded/_components/control-panel/use-control-panel.ts
new file mode 100644
index 00000000..5137ddd0
--- /dev/null
+++ b/src/app/designs/rounded/_components/control-panel/use-control-panel.ts
@@ -0,0 +1,226 @@
+import { between } from '@/utils/number/between';
+import {
+  useCallback,
+  useMemo,
+  useRef,
+  useState,
+  KeyboardEvent as ReactKeyboardEvent,
+  MouseEvent as ReactMouseEvent,
+  TouchEvent as ReactTouchEvent,
+} from 'react';
+
+type Position =
+  | 'topLeftX'
+  | 'topLeftY'
+  | 'topRightX'
+  | 'topRightY'
+  | 'bottomLeftX'
+  | 'bottomLeftY'
+  | 'bottomRightX'
+  | 'bottomRightY';
+
+export const useControlPanel = () => {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [position, setPosition] = useState<Record<Position, number>>({
+    topLeftX: 10,
+    topLeftY: 10,
+    topRightX: 10,
+    topRightY: 10,
+    bottomLeftX: 10,
+    bottomLeftY: 10,
+    bottomRightX: 10,
+    bottomRightY: 10,
+  });
+  const [activePosition, setActivePosition] =
+    useState<Position | null>(null);
+
+  const borderRadius = useMemo(() => {
+    return `${position.topLeftX}% ${position.topRightX}% ${position.bottomRightX}% ${position.bottomLeftX}% / ${position.topLeftY}% ${position.topRightY}% ${position.bottomRightY}% ${position.bottomLeftY}%`;
+  }, [position]);
+
+  const mouseDownHandler = useCallback(
+    (
+      e: ReactMouseEvent,
+      position:
+        | 'topLeftX'
+        | 'topLeftY'
+        | 'topRightX'
+        | 'topRightY'
+        | 'bottomRightX'
+        | 'bottomRightY'
+        | 'bottomLeftX'
+        | 'bottomLeftY',
+    ) => {
+      e.preventDefault();
+      setActivePosition(position);
+      const mouseUpHandler = (e: MouseEvent) => {
+        setPosition((prev) => {
+          if (!containerRef.current) {
+            return prev;
+          }
+          const rect = containerRef.current.getBoundingClientRect();
+          const newValue = Math.floor(
+            between(
+              position.endsWith('X')
+                ? ((e.clientX - rect.left) / rect.width) * 100
+                : ((e.clientY - rect.top) / rect.height) * 100,
+              0,
+              100,
+            ),
+          );
+          return {
+            ...prev,
+            [position]:
+              (position.startsWith('top') &&
+                position.endsWith('Y')) ||
+              (position.includes('Left') && position.endsWith('X'))
+                ? newValue
+                : 100 - newValue,
+          };
+        });
+      };
+      window.addEventListener('mouseup', () => {
+        setActivePosition(null);
+        window.removeEventListener('mousemove', mouseUpHandler);
+      });
+      window.addEventListener('mousemove', mouseUpHandler);
+    },
+    [],
+  );
+
+  const touchStartHandler = useCallback(
+    (
+      e: ReactTouchEvent,
+      position:
+        | 'topLeftX'
+        | 'topLeftY'
+        | 'topRightX'
+        | 'topRightY'
+        | 'bottomRightX'
+        | 'bottomRightY'
+        | 'bottomLeftX'
+        | 'bottomLeftY',
+    ) => {
+      e.preventDefault();
+      setActivePosition(position);
+      const touchMoveHandler = (e: TouchEvent) => {
+        setPosition((prev) => {
+          const changedTouches = e.changedTouches[0];
+          if (!containerRef.current || !changedTouches) {
+            return prev;
+          }
+          const rect = containerRef.current.getBoundingClientRect();
+          const newValue = Math.floor(
+            between(
+              position.endsWith('X')
+                ? ((changedTouches.clientX - rect.left) /
+                    rect.width) *
+                    100
+                : ((changedTouches.clientY - rect.top) /
+                    rect.height) *
+                    100,
+              0,
+              100,
+            ),
+          );
+          return {
+            ...prev,
+            [position]:
+              (position.startsWith('top') &&
+                position.endsWith('Y')) ||
+              (position.includes('Left') && position.endsWith('X'))
+                ? newValue
+                : 100 - newValue,
+          };
+        });
+      };
+      window.addEventListener('touchend', () => {
+        setActivePosition(null);
+        window.removeEventListener('touchmove', touchMoveHandler);
+      });
+      window.addEventListener('touchmove', touchMoveHandler);
+    },
+    [],
+  );
+
+  const keyDownHandler = useCallback(
+    (
+      e: ReactKeyboardEvent,
+      position:
+        | 'topLeftX'
+        | 'topLeftY'
+        | 'topRightX'
+        | 'topRightY'
+        | 'bottomRightX'
+        | 'bottomRightY'
+        | 'bottomLeftX'
+        | 'bottomLeftY',
+    ) => {
+      if (e.key === 'ArrowRight' || e.key === 'ArrowLeft') {
+        e.preventDefault();
+        if (position.endsWith('LeftX')) {
+          setPosition((prev) => {
+            return {
+              ...prev,
+              [position]: between(
+                prev[position] + (e.key === 'ArrowRight' ? 1 : -1),
+                0,
+                100,
+              ),
+            };
+          });
+        }
+        if (position.endsWith('RightX')) {
+          setPosition((prev) => {
+            return {
+              ...prev,
+              [position]: between(
+                prev[position] + (e.key === 'ArrowLeft' ? 1 : -1),
+                0,
+                100,
+              ),
+            };
+          });
+        }
+      }
+      if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
+        e.preventDefault();
+        if (position.startsWith('top') && position.endsWith('Y')) {
+          setPosition((prev) => {
+            return {
+              ...prev,
+              [position]: between(
+                prev[position] + (e.key === 'ArrowDown' ? 1 : -1),
+                0,
+                100,
+              ),
+            };
+          });
+        }
+        if (position.startsWith('bottom') && position.endsWith('Y')) {
+          setPosition((prev) => {
+            return {
+              ...prev,
+              [position]: between(
+                prev[position] + (e.key === 'ArrowUp' ? 1 : -1),
+                0,
+                100,
+              ),
+            };
+          });
+        }
+      }
+    },
+    [],
+  );
+
+  return {
+    activePosition,
+    containerRef,
+    mouseDownHandler,
+    touchStartHandler,
+    keyDownHandler,
+    borderRadius,
+    position,
+  };
+};
diff --git a/src/app/designs/rounded/page.tsx b/src/app/designs/rounded/page.tsx
index 5a273365..ca341d6d 100644
--- a/src/app/designs/rounded/page.tsx
+++ b/src/app/designs/rounded/page.tsx
@@ -1,5 +1,9 @@
+import { ControlPanel } from './_components/control-panel';
+
 export default function Page() {
   return (
-    <section className="flex h-full flex-col justify-between gap-6 rounded-lg bg-bgBase/55 p-10"></section>
+    <section className="flex h-full flex-col justify-between gap-6 rounded-lg bg-bgBase/55 p-10">
+      <ControlPanel />
+    </section>
   );
 }