diff --git a/components/駅名表/Sign.js b/components/駅名表/Sign.js
index 5fc113e..a6fae50 100644
--- a/components/駅名表/Sign.js
+++ b/components/駅名表/Sign.js
@@ -290,24 +290,7 @@ const StationNumberMaker = (props) => {
     });
 };
 
-const StationNameArea = (props) => {
-  const { currentStation } = props;
-  return (
-    <View style={styleSheet.stationNameAreaOverWrap}>
-      <View style={{ flex: 1 }} />
-      <View style={{ alignItems: "center" }}>
-        {/* <Text style={{fontWeight:"bold",fontSize:parseInt("15%"),color:"#005170"}}>{stationName.今.LineName}</Text>  */}
-        <Text style={styleSheet.Station_JP}>
-          {currentStation[0].Station_JP}
-        </Text>
-        <Text style={styleSheet.Station_EN}>
-          {currentStation[0].Station_EN}
-        </Text>
-      </View>
-      <View style={{ flex: 1 }} />
-    </View>
-  );
-};
+
 
 
 
@@ -335,22 +318,6 @@ const styleSheet = {
     fontSize: parseInt("30%"),
     color: "#2E94BB",
   },
-  stationNameAreaOverWrap: {
-    position: "absolute",
-    top: "10%",
-    alignContent: "center",
-    flexDirection: "row",
-  },
-  Station_JP: {
-    fontWeight: "bold",
-    fontSize: parseInt("40%"),
-    color: "#005170",
-  },
-  Station_EN: {
-    fontWeight: "bold",
-    fontSize: parseInt("15%"),
-    color: "#005170",
-  },
   下帯内容: {
     position: "absolute",
     bottom: "0%",
diff --git a/components/駅名表/StationNameArea.tsx b/components/駅名表/StationNameArea.tsx
new file mode 100644
index 0000000..c56ba98
--- /dev/null
+++ b/components/駅名表/StationNameArea.tsx
@@ -0,0 +1,33 @@
+import React, { CSSProperties } from "react";
+import { Text, TextStyle, View, ViewStyle } from "react-native";
+
+export const StationNameArea = (props) => {
+  const { currentStation } = props;
+  return (
+    <View style={stationNameAreaOverWrap}>
+      <View style={{ flex: 1 }} />
+      <View style={{ alignItems: "center" }}>
+        {/* <Text style={{fontWeight:"bold",fontSize:parseInt("15%"),color:"#005170"}}>{stationName.今.LineName}</Text>  */}
+        <Text style={Station_JP}>{currentStation[0].Station_JP}</Text>
+        <Text style={Station_EN}>{currentStation[0].Station_EN}</Text>
+      </View>
+      <View style={{ flex: 1 }} />
+    </View>
+  );
+};
+const stationNameAreaOverWrap: ViewStyle = {
+  position: "absolute",
+  top: "10%",
+  alignContent: "center",
+  flexDirection: "row",
+};
+const Station_JP: TextStyle = {
+  fontWeight: "bold",
+  fontSize: parseInt("40%"),
+  color: "#005170",
+};
+const Station_EN: TextStyle = {
+  fontWeight: "bold",
+  fontSize: parseInt("15%"),
+  color: "#005170",
+};