diff --git a/src/app/(withAuth)/courses/[courseId]/[languageId]/[programId]/BoardEditor.tsx b/src/app/(withAuth)/courses/[courseId]/[languageId]/[programId]/BoardEditor.tsx
index 347e81d5..6e3a7cf1 100644
--- a/src/app/(withAuth)/courses/[courseId]/[languageId]/[programId]/BoardEditor.tsx
+++ b/src/app/(withAuth)/courses/[courseId]/[languageId]/[programId]/BoardEditor.tsx
@@ -267,7 +267,7 @@ export const BoardEditor = forwardRef<TurtleGraphicsHandle, TurtleGraphicsProps>
                   <div>y = {selectedPosition.y}</div>
                 </>
               ) : (
-                <div>なし</div>
+                <Box color="gray.600">なし</Box>
               )}
             </HStack>
           </VStack>
@@ -331,12 +331,13 @@ export const BoardEditor = forwardRef<TurtleGraphicsHandle, TurtleGraphicsProps>
                   </Button>
                 </HStack>
               </>
-            ) : selectedPosition ? (
+            ) : (
+              <Box color="gray.600">なし</Box>
+            )}
+            {!selectedCharacter && selectedPosition && (
               <Button colorScheme="brand" size="sm" variant="outline" onClick={() => void handleAddCharacterButton()}>
                 タートルを追加
               </Button>
-            ) : (
-              <div>なし</div>
             )}
           </VStack>
 
diff --git a/src/app/(withAuth)/courses/[courseId]/[languageId]/[programId]/BoardViewer.tsx b/src/app/(withAuth)/courses/[courseId]/[languageId]/[programId]/BoardViewer.tsx
index a122abc3..25bdf277 100644
--- a/src/app/(withAuth)/courses/[courseId]/[languageId]/[programId]/BoardViewer.tsx
+++ b/src/app/(withAuth)/courses/[courseId]/[languageId]/[programId]/BoardViewer.tsx
@@ -10,7 +10,7 @@ import {
   TURTLE_GRAPHICS_BOARD_GAP_PX as GAP_PX,
   TURTLE_GRAPHICS_BOARD_PADDING_PX as PADDING_PX,
 } from '../../../../../../constants';
-import { Box, Grid, GridItem, Img } from '../../../../../../infrastructures/useClient/chakra';
+import { Box, Grid, GridItem, Img, keyframes } from '../../../../../../infrastructures/useClient/chakra';
 import { charToColor } from '../../../../../../problems/traceProgram';
 import type { CharacterTrace, TraceItemVar } from '../../../../../../problems/traceProgram';
 
@@ -41,6 +41,15 @@ const DIR_TO_TRANSFORM_FUNCTION = {
   E: 'rotate(270deg)',
 } as const;
 
+const focusRingKeyframes = keyframes({
+  '0%': {
+    borderColor: '#d69e2e' /* yellow.500 */,
+  },
+  '100%': {
+    borderColor: '#f6e05e' /* yellow.300 */,
+  },
+});
+
 type Props = BoxProps & {
   board: string | undefined;
   vars: TraceItemVar | undefined;
@@ -147,8 +156,8 @@ export const BoardViewer: React.FC<Props> = ({
 
       {focusedCell && (
         <Box
-          borderColor="yellow.500"
           borderWidth="4px"
+          css={{ animation: `${focusRingKeyframes} 0.5s linear infinite alternate both` }}
           h={`${CELL_SIZE_PX + 12}px`}
           left={`${PADDING_PX}px`}
           pointerEvents="none"
diff --git a/src/infrastructures/useClient/chakra.ts b/src/infrastructures/useClient/chakra.ts
index 0b05b8c8..78ea9b45 100644
--- a/src/infrastructures/useClient/chakra.ts
+++ b/src/infrastructures/useClient/chakra.ts
@@ -62,6 +62,7 @@ export {
   InputGroup,
   InputLeftElement,
   InputRightElement,
+  keyframes,
   Link,
   LinkBox,
   LinkOverlay,