diff --git a/README.md b/README.md
index cc14d40..438dc96 100644
--- a/README.md
+++ b/README.md
@@ -29,7 +29,7 @@ Clone
 ```sh
 git clone https://github.com/CaseyNelson314/EFSim.git
 cd EFSim
-npm install --save-dev
+npm install
 ```
 
 ### Launch local server
diff --git a/app/index.html b/app/index.html
index 0857a42..f116c5f 100644
--- a/app/index.html
+++ b/app/index.html
@@ -11,7 +11,6 @@
 
 <body>
   <script type="module" src="script/main.ts"></script>
-
   <div class="app">
 
     <!-- 編集領域 -->
@@ -120,7 +119,7 @@
 
       <!-- その他パラメータ編集領域 -->
       <div class="parameter_editor">
-        <p class="title">その他</p>
+        <p class="title">パラメータ</p>
         <div class="editor">
           <div class="contents" id="detail_editor">
             <label for="charge_amount" hidden>
@@ -132,11 +131,11 @@
               <input type="number" id="charge_line_density" inputmode="decimal" step="0.1">
             </label>
             <label for="charge_surface_density" hidden>
-              面密度[C/m^2]
+              面密度[C/m²]
               <input type="number" id="charge_surface_density" inputmode="decimal">
             </label>
             <label for="charge_density" hidden>
-              体積密度[C/m^3]
+              体積密度[C/m³]
               <input type="number" id="charge_density" inputmode="decimal" step="0.1">
             </label>
             <label for="charge_radius" hidden>
@@ -151,10 +150,11 @@
         </div>
       </div>
 
+
       <!-- 表示非表示ボタン領域 -->
       <div class="display_control">
         <label class="checkbox">
-          <input type="checkbox" id="checkbox_auto_rotate" checked />
+          <input type="checkbox" id="checkbox_auto_rotate" />
           自動回転
         </label>
         <label class="checkbox">
diff --git a/app/script/charge.ts b/app/script/charge.ts
index 64dcd41..79e25cf 100644
--- a/app/script/charge.ts
+++ b/app/script/charge.ts
@@ -34,53 +34,52 @@ const GetMaterialFromChargeType = (chargeType: ChargeType) => {
 }
 
 // 電荷
-export abstract class Charge {
+export interface Charge {
 
-    mesh: THREE.Mesh;
+    /// @brief 座標の参照
     readonly position: THREE.Vector3;
-
-    /// @brief 電荷を構築する
-    constructor(mesh: THREE.Mesh) {
-        this.mesh = mesh;
-        this.position = mesh.position;
-    }
+    mesh : THREE.Mesh;
 
     /// @brief シーンにこの電荷を追加する
-    attachScene = (scene: THREE.Scene) => {
-        scene.add(this.mesh);
-        return this;
-    }
+    attachScene: (scene: THREE.Scene) => Charge;
 
     /// @brief 指定座標における、この電荷からの電界ベクトルを返す
-    abstract electricFieldVector: (position: THREE.Vector3) => THREE.Vector3;
+    electricFieldVector: (position: THREE.Vector3) => THREE.Vector3;
 
     /// @brief 電界ベクトルの描画開始座標の配列を返す
-    abstract electricFieldVectorBeginPositions: () => { vector: THREE.Vector3, opacity: number }[];
+    electricFieldVectorBeginPositions: () => { vector: THREE.Vector3, opacity: number }[];
 
     /// @brief 任意の座標における電荷との距離^2を返す
-    abstract distanceSqFrom: (position: THREE.Vector3) => number;
+    distanceSqFrom: (position: THREE.Vector3) => number;
 
     /// @brief 電気力線の始点、方向ベクトルの配列を返す
-    abstract electricForceLinesDirection: () => { begin: THREE.Vector3, direction: THREE.Vector3 }[];
+    electricForceLinesDirection: () => { begin: THREE.Vector3, direction: THREE.Vector3 }[];
 
     /// @brief 電荷の正負を取得する
-    abstract getChargeType: () => ChargeType;
+    getChargeType: () => ChargeType;
 };
 
 // 点電荷
-export class PointCharge extends Charge {
+export class PointCharge implements Charge {
 
-    private static readonly pointChargeGeometry = new THREE.SphereGeometry(2, 32, 32);
+    private static readonly pointChargeGeometry = new THREE.SphereGeometry(4, 32, 32);
+    readonly position: THREE.Vector3;
+    mesh: THREE.Mesh;
     charge: number;
 
     /// @brief 点電荷を構築する
     /// @param position 点電荷の座標
     /// @param charge 電荷量
     constructor(position: THREE.Vector3, charge: number) {
-        const mesh = new THREE.Mesh(PointCharge.pointChargeGeometry, GetMaterialFromChargeType(ChargeToChargeType(charge)));
-        super(mesh);
+        this.mesh = new THREE.Mesh(PointCharge.pointChargeGeometry, GetMaterialFromChargeType(ChargeToChargeType(charge)));
+        this.mesh.position.copy(position);
         this.charge = charge;
-        this.position.copy(position);
+        this.position = this.mesh.position;
+    }
+
+    attachScene: (scene: THREE.Scene) => Charge = (scene: THREE.Scene) => {
+        scene.add(this.mesh);
+        return this;
     }
 
     updateCharge = (charge: number) => {
@@ -90,7 +89,7 @@ export class PointCharge extends Charge {
 
     /// @brief 指定座標における、この点電荷からの電界ベクトルを返す
     /// @param position 観測点の座標
-    override electricFieldVector = (position: THREE.Vector3) => {
+    electricFieldVector = (position: THREE.Vector3) => {
 
         if (position.distanceToSquared(this.position) < Number.EPSILON) {
             return new THREE.Vector3();  // 観測点が点電荷と重なっている場合
@@ -106,7 +105,7 @@ export class PointCharge extends Charge {
     }
 
     /// @brief 電界ベクトルの描画開始座標の配列を返す
-    override electricFieldVectorBeginPositions = () => {
+    electricFieldVectorBeginPositions = () => {
         const result: { vector: THREE.Vector3, opacity: number }[] = [];
 
         const count = 4;
@@ -140,26 +139,28 @@ export class PointCharge extends Charge {
 
     /// @brief 任意の座標における電荷との距離を返す
     /// @param position 観測点の座標
-    override distanceSqFrom = (position: THREE.Vector3) => {
+    distanceSqFrom = (position: THREE.Vector3) => {
         return position.distanceToSquared(this.position);
     }
 
     /// @brief 電気力線の方向ベクトルの配列を返す
-    override electricForceLinesDirection = () => {
+    electricForceLinesDirection = () => {
         return GSS(25).map((vector) => { return { begin: this.position, direction: vector } });
     }
 
     /// @brief 電荷の正負を取得する
-    override getChargeType = () => {
+    getChargeType = () => {
         return ChargeToChargeType(this.charge);
     }
 
 }
 
 // 線電荷
-export class LineCharge extends Charge {
+export class LineCharge implements  Charge {
 
-    private lineChargeGeometry = new THREE.CylinderGeometry(1, 1, 400, 50);
+    private lineChargeGeometry;
+    readonly position: THREE.Vector3;
+    mesh: THREE.Mesh;
     lineDensity: number;
     length: number;
 
@@ -168,13 +169,18 @@ export class LineCharge extends Charge {
     /// @param end 線電荷の終点
     /// @param lineDensity 線電荷の線密度
     constructor(center: THREE.Vector3, rotate: THREE.Euler, length: number, lineDensity: number) {
-        const mesh = new THREE.Mesh(undefined, GetMaterialFromChargeType(ChargeToChargeType(lineDensity)));
-        super(mesh);
-        this.lineDensity = lineDensity;
-        this.position.copy(center);
+        this.lineChargeGeometry = new THREE.CylinderGeometry(1, 1, 400, 50)
+        this.mesh = new THREE.Mesh(this.lineChargeGeometry, GetMaterialFromChargeType(ChargeToChargeType(lineDensity)));
+        this.mesh.position.copy(center);
         this.mesh.rotation.copy(rotate);
+        this.position = this.mesh.position;
+        this.lineDensity = lineDensity;
         this.length = length;
-        mesh.geometry = this.lineChargeGeometry;
+    }
+
+    attachScene: (scene: THREE.Scene) => Charge = (scene: THREE.Scene) => {
+        scene.add(this.mesh);
+        return this;
     }
 
     updateLineDensity = (lineDensity: number) => {
@@ -184,7 +190,7 @@ export class LineCharge extends Charge {
 
     /// @brief 指定座標における、この線電荷からの電界ベクトルを返す
     /// @param position 観測点の座標
-    override electricFieldVector = (position: THREE.Vector3) => {
+    electricFieldVector = (position: THREE.Vector3) => {
 
         if (position.distanceToSquared(this.position) < Number.EPSILON) {
             return new THREE.Vector3();  // 観測点が点電荷と重なっている場合
@@ -200,7 +206,7 @@ export class LineCharge extends Charge {
 
 
     /// @brief 電界ベクトルの描画開始座標の配列を返す
-    override electricFieldVectorBeginPositions = () => {
+    electricFieldVectorBeginPositions = () => {
         
         // TODO
         return new Array<{ vector: THREE.Vector3, opacity: number }>();
@@ -209,7 +215,10 @@ export class LineCharge extends Charge {
 
     /// @brief 任意の座標における電荷との距離を返す
     /// @param position 観測点の座標
-    override distanceSqFrom = (position: THREE.Vector3) => {
+    distanceSqFrom = (position: THREE.Vector3) => {
+
+        // 計算を行いやすいように、線電荷がx=y=0に分布するよう観測点を変換する
+        
         const diff = new THREE.Vector3();
         diff.subVectors(position, this.position);    // 点電荷と観測点との差分
         diff.y = 0;
@@ -217,7 +226,7 @@ export class LineCharge extends Charge {
     }
 
     /// @brief 電気力線の方向ベクトルの配列を返す
-    override electricForceLinesDirection = () => {
+    electricForceLinesDirection = () => {
 
         const result: { begin: THREE.Vector3, direction: THREE.Vector3 }[] = [];
 
@@ -248,7 +257,7 @@ export class LineCharge extends Charge {
     }
 
     /// @brief 電荷の正負を取得する
-    override getChargeType = () => {
+    getChargeType = () => {
         return ChargeToChargeType(this.lineDensity);
     }
 
@@ -256,29 +265,49 @@ export class LineCharge extends Charge {
 
 
 // 球面上に電荷が分布している電荷
-export class SphereSurfaceCharge extends Charge {
+export class SphereSurfaceCharge implements Charge {
 
     private sphereSurfaceChargeGeometry;
+    readonly position: THREE.Vector3;
+    mesh: THREE.Mesh;
     radius: number;
     arealDensity: number;
 
+    private static readonly plusMaterial    = new THREE.MeshBasicMaterial({ color: 0xff0000, transparent: true, opacity: 0.5 });
+    private static readonly minusMaterial   = new THREE.MeshBasicMaterial({ color: 0x0000ff, transparent: true, opacity: 0.5 });
+    private static readonly neutralMaterial = new THREE.MeshBasicMaterial({ color: 0xffff00, transparent: true, opacity: 0.5 });
+
+    private getMaterialFromChargeType = (chargeType: number) => {
+        if (chargeType > 0)
+            return SphereSurfaceCharge.plusMaterial;
+        else if (chargeType < 0)
+            return SphereSurfaceCharge.minusMaterial;
+        else
+            return SphereSurfaceCharge.neutralMaterial;
+    }
+
+
     /// @brief 球面電荷を構築する
     /// @param position 球の中心座標
     /// @param radius 球の半径
     /// @param arealDensity 面電荷密度
     constructor(position: THREE.Vector3, radius: number, arealDensity: number) {
-        const mesh = new THREE.Mesh(undefined, GetMaterialFromChargeType(ChargeToChargeType(arealDensity)));
-        super(mesh);
         this.sphereSurfaceChargeGeometry = new THREE.SphereGeometry(radius, 32, 32);
-        this.position.copy(position);
+        this.mesh = new THREE.Mesh(this.sphereSurfaceChargeGeometry, this.getMaterialFromChargeType(arealDensity));
+        this.mesh.position.copy(position);
+        this.position = this.mesh.position;
         this.radius = radius;
         this.arealDensity = arealDensity;
-        mesh.geometry = this.sphereSurfaceChargeGeometry;
+    }
+
+    attachScene: (scene: THREE.Scene) => Charge = (scene: THREE.Scene) => {
+        scene.add(this.mesh);
+        return this;
     }
 
     updateArealDensity = (arealDensity: number) => {
         this.arealDensity = arealDensity;
-        this.mesh.material = GetMaterialFromChargeType(ChargeToChargeType(arealDensity));
+        this.mesh.material = this.getMaterialFromChargeType(arealDensity);
     }
 
     updateRadius = (radius: number) => {
@@ -290,7 +319,7 @@ export class SphereSurfaceCharge extends Charge {
 
     /// @brief 指定座標における、この線電荷からの電界ベクトルを返す
     /// @param position 観測点の座標
-    override electricFieldVector = (position: THREE.Vector3) => {
+    electricFieldVector = (position: THREE.Vector3) => {
 
         if (position.distanceToSquared(this.position) < Number.EPSILON) {
             return new THREE.Vector3();  // 観測点が点電荷と重なっている場合
@@ -311,7 +340,7 @@ export class SphereSurfaceCharge extends Charge {
     }
     
     /// @brief 電界ベクトルの描画開始座標の配列を返す
-    override electricFieldVectorBeginPositions = () => {
+    electricFieldVectorBeginPositions = () => {
         const result: { vector: THREE.Vector3, opacity: number }[] = [];
 
         const count = 4;
@@ -345,12 +374,12 @@ export class SphereSurfaceCharge extends Charge {
 
     /// @brief 任意の座標における電荷との距離を返す(外周との距離)
     /// @param position 観測点の座標
-    override distanceSqFrom = (position: THREE.Vector3) => {
+    distanceSqFrom = (position: THREE.Vector3) => {
         return position.distanceToSquared(this.position) - this.radius ** 2;
     }
 
     /// @brief 電気力線の方向ベクトルの配列を返す
-    override electricForceLinesDirection = () => {
+    electricForceLinesDirection = () => {
         return GSS(25).map((vector) => {
             return {
                 begin: this.position.clone().add(vector.clone().multiplyScalar(this.radius)),  // 始点は球の外周上
@@ -360,38 +389,58 @@ export class SphereSurfaceCharge extends Charge {
     }
 
     /// @brief 電荷の正負を取得する
-    override getChargeType = () => {
+    getChargeType = () => {
         return ChargeToChargeType(this.arealDensity);
     }
 
 }
 
 // 球内に体積電荷が分布している電荷
-export class SphereVolumeCharge extends Charge
+export class SphereVolumeCharge implements Charge
 {
     private sphereSurfaceChargeGeometry;
+    readonly position: THREE.Vector3;
+    mesh: THREE.Mesh;
     radius: number;
     volumeDensity: number;    
 
+    private static readonly plusMaterial    = new THREE.MeshBasicMaterial({ color: 0xff0000, transparent: true, opacity: 0.5 });
+    private static readonly minusMaterial   = new THREE.MeshBasicMaterial({ color: 0x0000ff, transparent: true, opacity: 0.5 });
+    private static readonly neutralMaterial = new THREE.MeshBasicMaterial({ color: 0xffff00, transparent: true, opacity: 0.5 });
+
+    private getMaterialFromChargeType = (chargeType: number) => {
+        if (chargeType > 0)
+            return SphereVolumeCharge.plusMaterial;
+        else if (chargeType < 0)
+            return SphereVolumeCharge.minusMaterial;
+        else
+            return SphereVolumeCharge.neutralMaterial;
+    }
+
     /// @brief 球体積電荷を構築する
     /// @param position 球の中心座標
     /// @param radius 球の半径
     /// @param volumeDensity 体積電荷密度
     constructor(position: THREE.Vector3, radius: number, volumeDensity: number) {
-        const mesh = new THREE.Mesh(undefined, GetMaterialFromChargeType(ChargeToChargeType(volumeDensity)));
-        super(mesh);
         this.sphereSurfaceChargeGeometry = new THREE.SphereGeometry(radius, 32, 32);
-        this.position.copy(position);
+        this.mesh = new THREE.Mesh(this.sphereSurfaceChargeGeometry, this.getMaterialFromChargeType(volumeDensity));
+        this.mesh.position.copy(position);
+        this.mesh.position.copy(position);
+        this.position = this.mesh.position;
         this.radius = radius;
         this.volumeDensity = volumeDensity;
-        mesh.geometry = this.sphereSurfaceChargeGeometry;
+    }
+
+    attachScene: (scene: THREE.Scene) => Charge = (scene: THREE.Scene) => {
+        scene.add(this.mesh);
+        return this;
     }
 
     updateVolumeDensity = (volumeDensity: number) => {
         this.volumeDensity = volumeDensity;
-        this.mesh.material = GetMaterialFromChargeType(ChargeToChargeType(volumeDensity));
+        this.mesh.material = this.getMaterialFromChargeType(volumeDensity);
     }
-
+    
     updateRadius = (radius: number) => {
         this.radius = radius;
         this.sphereSurfaceChargeGeometry.dispose();
@@ -401,7 +450,7 @@ export class SphereVolumeCharge extends Charge
 
     /// @brief 指定座標における、この線電荷からの電界ベクトルを返す
     /// @param position 観測点の座標
-    override electricFieldVector = (position: THREE.Vector3) => {
+    electricFieldVector = (position: THREE.Vector3) => {
 
         if (position.distanceToSquared(this.position) < Number.EPSILON) {
             return new THREE.Vector3();  // 観測点が点電荷と重なっている場合
@@ -420,12 +469,11 @@ export class SphereVolumeCharge extends Charge
             return diff.multiplyScalar((this.volumeDensity * this.radius ** 3) / (3 * permittivity * diffLengthSq));
         }
 
-
     }
 
     
     /// @brief 電界ベクトルの描画開始座標の配列を返す
-    override electricFieldVectorBeginPositions = () => {
+    electricFieldVectorBeginPositions = () => {
         const result: { vector: THREE.Vector3, opacity: number }[] = [];
 
         const count = 4;
@@ -460,12 +508,12 @@ export class SphereVolumeCharge extends Charge
 
     /// @brief 任意の座標における電荷との距離を返す(外周との距離)
     /// @param position 観測点の座標
-    override distanceSqFrom = (position: THREE.Vector3) => {
+    distanceSqFrom = (position: THREE.Vector3) => {
         return position.distanceToSquared(this.position) - this.radius ** 2;
     }
 
     /// @brief 電気力線の方向ベクトルの配列を返す
-    override electricForceLinesDirection = () => {
+    electricForceLinesDirection = () => {
         return GSS(25).map((vector) => {
             return {
                 begin: this.position.clone().add(vector.clone().multiplyScalar(this.radius)),  // 始点は球の外周上
@@ -475,7 +523,7 @@ export class SphereVolumeCharge extends Charge
     }
 
     /// @brief 電荷の正負を取得する
-    override getChargeType = () => {
+    getChargeType = () => {
         return ChargeToChargeType(this.volumeDensity);
     }
     
diff --git a/app/script/field3d.ts b/app/script/field3d.ts
index 2d6020a..8548d97 100644
--- a/app/script/field3d.ts
+++ b/app/script/field3d.ts
@@ -1,6 +1,6 @@
 import * as THREE from 'three';
 import { Charge, ChargeType } from './charge';
-
+import { MeshLineGeometry, MeshLineMaterial } from '@lume/three-meshline'
 
 // 指定座標における電場ベクトルを計算
 // @param pos 観測点の座標
@@ -74,17 +74,18 @@ const ElectricForceLinePoints = (
 class ElectricLines3D extends THREE.Object3D {
 
     private charges: Charge[];
-    private lineMaterial: THREE.LineBasicMaterial;
+    private lineMaterial: MeshLineMaterial;
     private coneGeometry: THREE.ConeGeometry;
     private coneMaterial: THREE.MeshBasicMaterial;
 
     constructor(charges: Charge[]) {
         super();
         this.charges = charges;
-        this.lineMaterial = new THREE.LineBasicMaterial({ color: 0xccccff });
 
-        this.coneGeometry = new THREE.ConeGeometry(1, 3, 10);
-        this.coneMaterial = new THREE.MeshBasicMaterial({ color: 0xaeaece, opacity: 1 });
+        this.lineMaterial = new MeshLineMaterial({ color: 0xffffff, lineWidth: 1 });
+
+        this.coneGeometry = new THREE.ConeGeometry(1.5, 4, 10);
+        this.coneMaterial = new THREE.MeshBasicMaterial({ color: 0xbbbbbb });
 
         this.createELines();
     }
@@ -101,10 +102,16 @@ class ElectricLines3D extends THREE.Object3D {
 
                 // 電気力線の連続点から線分ジオメトリを生成
                 const points = ElectricForceLinePoints(charge, this.charges, point.begin, point.direction, 300);
-                const geometry = new THREE.BufferGeometry().setFromPoints(points);
-                const line = new THREE.Line(geometry, this.lineMaterial);
+                if (points.length < 2) {
+                    // 2点以上ないと線分を生成できない
+                    continue;
+                }
+                const geometry = new MeshLineGeometry();
+                geometry.setPoints(points);
+                const line = new THREE.Mesh(geometry, this.lineMaterial);
                 this.add(line);
 
+
                 // 電気力線上に一定間隔で矢印を生成
                 const step = points.length / 3;
                 for (let i = step; i + 1 < points.length; i += step) {
@@ -131,7 +138,7 @@ class ElectricLines3D extends THREE.Object3D {
     update() {
         // ジオメトリをすべて破棄
         for (const child of this.children) {
-            if (child instanceof THREE.Line) {
+            if (child instanceof THREE.Mesh) {
                 child.geometry.dispose();
             }
             if (child instanceof THREE.Mesh) {
@@ -140,7 +147,6 @@ class ElectricLines3D extends THREE.Object3D {
         }
         this.children = [];
         this.createELines();
-        // Measure("createELines", () => this.createELines());
     }
 }
 
@@ -184,8 +190,7 @@ class ElectricFieldVectors3D extends THREE.Object3D {
             }
 
             const points = charge.electricFieldVectorBeginPositions();
-            for (const point of points)
-            {
+            for (const point of points) {
                 AddArrow(point.vector.add(charge.position), point.opacity);
             }
 
@@ -196,7 +201,6 @@ class ElectricFieldVectors3D extends THREE.Object3D {
     update() {
         this.children = [];
         this.createEFVectorGeometry();
-        // Measure("createEFVectorGeometry", () => this.createEFVectorGeometry());
     }
 }
 
diff --git a/app/script/init.ts b/app/script/init.ts
index b5eb59a..dd82c1c 100644
--- a/app/script/init.ts
+++ b/app/script/init.ts
@@ -11,7 +11,7 @@ export const CreateRenderer = (
 ) => {
 
     const renderer = new THREE.WebGLRenderer({
-        antialias: false,
+        antialias: true,
         alpha: true
     });
 
@@ -32,7 +32,7 @@ export const CreateCamera = (
     const aspect = dom.offsetWidth / dom.offsetHeight;
     const camera = new THREE.PerspectiveCamera(50, aspect);
 
-    camera.position.set(100, 100, 100);
+    camera.position.set(150, 150, 150);
 
     return camera;
 
diff --git a/app/script/main.ts b/app/script/main.ts
index 2c34bc3..f25ad18 100644
--- a/app/script/main.ts
+++ b/app/script/main.ts
@@ -21,14 +21,14 @@ const start = () => {
     {
         // charge.push(new PointCharge(new THREE.Vector3(0, 0, 0), 1).attachScene(scene));
         // charge.push(new PointCharge(new THREE.Vector3(0, 0, 100), -1).attachScene(scene));
-// charge.push(new PointCharge(new THREE.Vector3(0, 100, 0), 1).attachScene(scene));
+        // charge.push(new PointCharge(new THREE.Vector3(0, 100, 0), 1).attachScene(scene));
         charge.push(new PointCharge(new THREE.Vector3(0, 50, 0), -10).attachScene(scene));
 
         charge.push(new LineCharge(new THREE.Vector3(-100, 0, 0), new THREE.Euler(0, 0, 0), 200, 1).attachScene(scene));
         charge.push(new LineCharge(new THREE.Vector3(100, 0, 0), new THREE.Euler(0, 0, 0), 200, 1).attachScene(scene));
 
         // charge.push(new SphereSurfaceCharge(new THREE.Vector3(0, 0, 0), 10, 0.000000011).attachScene(scene));
-// charge.push(new SphereVolumeCharge(new THREE.Vector3(0, 0, 0), 1, -0.00000001).attachScene(scene));
+        // charge.push(new SphereVolumeCharge(new THREE.Vector3(0, 0, 0), 1, -0.00000001).attachScene(scene));
 
     }
 
@@ -38,8 +38,8 @@ const start = () => {
 
     const dragger = new Dragger(charge, camera, dom, controls, scene);
 
-    // 電荷が選択中であるときのフォームの更新
-    const ChargeSelectFormUpdate = (charge: Charge) => {
+    // オブジェクトを移動中であるときのフォームの更新
+    const onObjectDragging = (charge: Charge) => {
 
         // 全電荷は座標を変更できる
         (document.getElementById("charge_position_x") as HTMLInputElement).value = charge.position.x.toFixed(3);
@@ -100,18 +100,50 @@ const start = () => {
         }
     };
 
-    // 電荷の選択が解除されたときのイベント
-    const ChargeUnselectFormUpdate = () => {
-        // #detail_editor 内のすべてのlavelを非表示にする
-        const labels = document.getElementById("detail_editor")!.querySelectorAll("label");
-        for (const label of labels) {
-            label.style.display = "none";
+    {
+
+        // オブジェクトの選択が解除されたときのイベント
+        const onObjectUnselected = () => {
+
+            // #detail_editor 内のすべてのlavelを非表示にする
+            const labels = document.getElementById("detail_editor")!.querySelectorAll("label");
+            for (const label of labels) {
+                label.style.display = "none";
+            }
+
+            // .parameter_editorの要素を非表示にする
+            const editors = document.querySelectorAll('.parameter_editor');
+            for (const editor of editors) {
+                (editor as HTMLElement).style.display = "none";
+            }
+
+        };
+
+        onObjectUnselected();
+
+        const onObjectSelected = () => {
+            onObjectUnselected();
+
+            const editors = document.querySelectorAll('.parameter_editor');
+            for (const editor of editors) {
+                (editor as HTMLElement).style.display = "block";
+            }
+
+            onObjectDragging(dragger.getSelected()!);
         }
-    };
 
-    ChargeUnselectFormUpdate();
 
-    {
+        // 電荷移動時のイベント
+        {
+            dragger.addEventListener('object-change', throttle(50, (object: Charge) => {
+                onObjectDragging(object);
+                field3d.update();
+            }));
+
+            dragger.addEventListener('object-selected', onObjectSelected);
+            dragger.addEventListener('object-unselected', onObjectUnselected);
+        }
+
         // 座標編集
         {
             document.getElementById("position_editor")!.addEventListener("click", () => {
@@ -169,21 +201,6 @@ const start = () => {
             });
         }
 
-        // 電荷移動時のイベント
-        {
-            dragger.addEventListener('object-change', throttle(50, (object: Charge) => {
-                ChargeSelectFormUpdate(object);
-                field3d.update();
-            }));
-
-            dragger.addEventListener('object-selected', () => {
-                ChargeUnselectFormUpdate();
-                ChargeSelectFormUpdate(dragger.getSelected()!);
-            });
-            dragger.addEventListener('object-unselected', () => {
-                ChargeUnselectFormUpdate();
-            });
-        }
 
         // 点電荷編集
         {
@@ -263,8 +280,9 @@ const start = () => {
                 charge.push(newCharge);
                 dragger.attach(newCharge);
 
-                ChargeUnselectFormUpdate();
-                ChargeSelectFormUpdate(newCharge);
+                onObjectUnselected();
+                onObjectDragging(newCharge);
+                onObjectSelected();
 
                 field3d.update();
             }
@@ -328,7 +346,7 @@ const start = () => {
         {
             // デモとして最初の点電荷を選択
             // dragger.attach(charge[0]!);
-            // ChargeSelectFormUpdate(charge[0]!);
+            // onObjectDragging(charge[0]!);
             // PositionFormPositionUpdate(charge[0]!.mesh);
             // FormChargeUpdateEvent(charge[0]!);
         }
diff --git a/app/style/control.css b/app/style/control.css
index b6a1866..f3adf1a 100644
--- a/app/style/control.css
+++ b/app/style/control.css
@@ -18,7 +18,7 @@
   padding: 10px;
 }
 .control_button {
-  font-size: 20px;
+  font-size: 17px;
   display: flex;
   flex-direction: column;
 }
@@ -37,8 +37,8 @@ button {
 .control_img {
   border: 2px solid #4f4f4f;
   border-radius: 5px;
-  width: 80px;
-  height: 80px;
+  width: 70px;
+  height: 70px;
   transition: 0.2s;
   cursor: pointer;
 }
@@ -55,7 +55,7 @@ button {
 .checkbox {
   display: flex;
   margin: 2px;
-  font-size: 20px;
+  font-size: 17px;
   color: #e3e3e3;
   user-select: none;
 }
@@ -69,7 +69,7 @@ input[type="number"] {
   width: 80px;
   text-align: right;
   padding-right: 10px;
-  font-size: 17px;
+  font-size: 15px;
   color: #e3e3e3;
   background-color: #38393b;
   border: 2px solid #4f4f4f;
@@ -82,9 +82,6 @@ input[type="number"]::-webkit-inner-spin-button {
   -webkit-appearance: none;
   margin: 0;
 }
-input[type="number"] {
-  -moz-appearance: textfield;
-}
 
 .delete_button {
   margin-right: 30px;
@@ -100,7 +97,7 @@ input[type="number"] {
   flex-wrap: wrap;
   color: #e3e3e3;
   user-select: none;
-  font-size: 20px;
+  font-size: 17px;
   padding: 5px 10px 5px 10px;
   gap: 2px;
 }
diff --git a/package-lock.json b/package-lock.json
index b1c1487..482f048 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,8 @@
       "version": "1.0.0",
       "license": "MIT",
       "dependencies": {
+        "@lume/three-meshline": "^4.0.5",
+        "three.meshline": "^1.4.0",
         "throttle-debounce": "^5.0.0"
       },
       "devDependencies": {
@@ -550,6 +552,14 @@
         "node": ">=12"
       }
     },
+    "node_modules/@lume/three-meshline": {
+      "version": "4.0.5",
+      "resolved": "https://registry.npmjs.org/@lume/three-meshline/-/three-meshline-4.0.5.tgz",
+      "integrity": "sha512-1Gyl5yf9rXzwTtvOAsJg0Vc7AIOIIpf45H9+ZZDUstl/0TH5bDOefDSFC4OXQFgc7BQebBkGGzi+ffzaBgaovw==",
+      "peerDependencies": {
+        "three": "*"
+      }
+    },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -1495,8 +1505,12 @@
     "node_modules/three": {
       "version": "0.159.0",
       "resolved": "https://registry.npmjs.org/three/-/three-0.159.0.tgz",
-      "integrity": "sha512-eCmhlLGbBgucuo4VEA9IO3Qpc7dh8Bd4VKzr7WfW4+8hMcIfoAVi1ev0pJYN9PTTsCslbcKgBwr2wNZ1EvLInA==",
-      "dev": true
+      "integrity": "sha512-eCmhlLGbBgucuo4VEA9IO3Qpc7dh8Bd4VKzr7WfW4+8hMcIfoAVi1ev0pJYN9PTTsCslbcKgBwr2wNZ1EvLInA=="
+    },
+    "node_modules/three.meshline": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/three.meshline/-/three.meshline-1.4.0.tgz",
+      "integrity": "sha512-A8IsiMrWP8zmHisGDAJ76ZD7t/dOF/oCe/FUKNE6Bu01ZYEx8N6IlU/1Plb2aOZtAuWM2A8s8qS3hvY0OFuvOw=="
     },
     "node_modules/throttle-debounce": {
       "version": "5.0.0",
@@ -2086,6 +2100,12 @@
       "dev": true,
       "optional": true
     },
+    "@lume/three-meshline": {
+      "version": "4.0.5",
+      "resolved": "https://registry.npmjs.org/@lume/three-meshline/-/three-meshline-4.0.5.tgz",
+      "integrity": "sha512-1Gyl5yf9rXzwTtvOAsJg0Vc7AIOIIpf45H9+ZZDUstl/0TH5bDOefDSFC4OXQFgc7BQebBkGGzi+ffzaBgaovw==",
+      "requires": {}
+    },
     "@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -2730,8 +2750,12 @@
     "three": {
       "version": "0.159.0",
       "resolved": "https://registry.npmjs.org/three/-/three-0.159.0.tgz",
-      "integrity": "sha512-eCmhlLGbBgucuo4VEA9IO3Qpc7dh8Bd4VKzr7WfW4+8hMcIfoAVi1ev0pJYN9PTTsCslbcKgBwr2wNZ1EvLInA==",
-      "dev": true
+      "integrity": "sha512-eCmhlLGbBgucuo4VEA9IO3Qpc7dh8Bd4VKzr7WfW4+8hMcIfoAVi1ev0pJYN9PTTsCslbcKgBwr2wNZ1EvLInA=="
+    },
+    "three.meshline": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/three.meshline/-/three.meshline-1.4.0.tgz",
+      "integrity": "sha512-A8IsiMrWP8zmHisGDAJ76ZD7t/dOF/oCe/FUKNE6Bu01ZYEx8N6IlU/1Plb2aOZtAuWM2A8s8qS3hvY0OFuvOw=="
     },
     "throttle-debounce": {
       "version": "5.0.0",
diff --git a/package.json b/package.json
index a561bcc..cb5d8f7 100644
--- a/package.json
+++ b/package.json
@@ -28,6 +28,8 @@
   },
   "type": "module",
   "dependencies": {
+    "@lume/three-meshline": "^4.0.5",
+    "three.meshline": "^1.4.0",
     "throttle-debounce": "^5.0.0"
   }
 }
diff --git a/tsconfig.json b/tsconfig.json
index 83c8330..bf67f87 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,7 +1,6 @@
 {
   "compilerOptions": {
     /* Visit https://aka.ms/tsconfig to read more about this file */
-
     /* Projects */
     // "incremental": true,                              /* Save .tsbuildinfo files to allow for incremental compilation of projects. */
     // "composite": true,                                /* Enable constraints that allow a TypeScript project to be used with project references. */
@@ -9,9 +8,8 @@
     // "disableSourceOfProjectReferenceRedirect": true,  /* Disable preferring source files instead of declaration files when referencing composite projects. */
     // "disableSolutionSearching": true,                 /* Opt a project out of multi-project reference checking when editing. */
     // "disableReferencedProjectLoad": true,             /* Reduce the number of projects loaded automatically by TypeScript. */
-
     /* Language and Environment */
-    "target": "es2016",                                  /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
+    "target": "es2016", /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
     // "lib": [],                                        /* Specify a set of bundled library declaration files that describe the target runtime environment. */
     // "jsx": "preserve",                                /* Specify what JSX code is generated. */
     // "experimentalDecorators": true,                   /* Enable experimental support for legacy experimental decorators. */
@@ -23,15 +21,18 @@
     // "noLib": true,                                    /* Disable including any library files, including the default lib.d.ts. */
     // "useDefineForClassFields": true,                  /* Emit ECMAScript-standard-compliant class fields. */
     // "moduleDetection": "auto",                        /* Control what method is used to detect module-format JS files. */
-
     /* Modules */
-    "module": "commonjs",                                /* Specify what module code is generated. */
+    "module": "commonjs", /* Specify what module code is generated. */
     // "rootDir": "./",                                  /* Specify the root folder within your source files. */
     // "moduleResolution": "node10",                     /* Specify how TypeScript looks up a file from a given module specifier. */
-    // "baseUrl": "./",                                  /* Specify the base directory to resolve non-relative module names. */
-    // "paths": {},                                      /* Specify a set of entries that re-map imports to additional lookup locations. */
+    // "baseUrl": "", /* Specify the base directory to resolve non-relative module names. */
+    // "paths": {
+    //   "*": [
+    //     "./app/script/@types/*"
+    //   ]
+    // }, /* Specify a set of entries that re-map imports to additional lookup locations. */
     // "rootDirs": [],                                   /* Allow multiple folders to be treated as one when resolving modules. */
-    // "typeRoots": [],                                  /* Specify multiple folders that act like './node_modules/@types'. */
+    // "typeRoots": [ "./app/script/@type"],                                  /* Specify multiple folders that act like './node_modules/@types'. */
     // "types": [],                                      /* Specify type package names to be included without being referenced in a source file. */
     // "allowUmdGlobalAccess": true,                     /* Allow accessing UMD globals from modules. */
     // "moduleSuffixes": [],                             /* List of file name suffixes to search when resolving a module. */
@@ -42,12 +43,10 @@
     // "resolveJsonModule": true,                        /* Enable importing .json files. */
     // "allowArbitraryExtensions": true,                 /* Enable importing files with any extension, provided a declaration file is present. */
     // "noResolve": true,                                /* Disallow 'import's, 'require's or '<reference>'s from expanding the number of files TypeScript should add to a project. */
-
     /* JavaScript Support */
     // "allowJs": true,                                  /* Allow JavaScript files to be a part of your program. Use the 'checkJS' option to get errors from these files. */
     // "checkJs": true,                                  /* Enable error reporting in type-checked JavaScript files. */
     // "maxNodeModuleJsDepth": 1,                        /* Specify the maximum folder depth used for checking JavaScript files from 'node_modules'. Only applicable with 'allowJs'. */
-
     /* Emit */
     // "declaration": true,                              /* Generate .d.ts files from TypeScript and JavaScript files in your project. */
     // "declarationMap": true,                           /* Create sourcemaps for d.ts files. */
@@ -72,39 +71,36 @@
     // "preserveConstEnums": true,                       /* Disable erasing 'const enum' declarations in generated code. */
     // "declarationDir": "./",                           /* Specify the output directory for generated declaration files. */
     // "preserveValueImports": true,                     /* Preserve unused imported values in the JavaScript output that would otherwise be removed. */
-
     /* Interop Constraints */
-    "isolatedModules": true,                          /* Ensure that each file can be safely transpiled without relying on other imports. */
+    "isolatedModules": true, /* Ensure that each file can be safely transpiled without relying on other imports. */
     // "verbatimModuleSyntax": true,                     /* Do not transform or elide any imports or exports not marked as type-only, ensuring they are written in the output file's format based on the 'module' setting. */
     // "allowSyntheticDefaultImports": true,             /* Allow 'import x from y' when a module doesn't have a default export. */
-    "esModuleInterop": true,                             /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */
+    "esModuleInterop": true, /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */
     // "preserveSymlinks": true,                         /* Disable resolving symlinks to their realpath. This correlates to the same flag in node. */
-    "forceConsistentCasingInFileNames": true,            /* Ensure that casing is correct in imports. */
-
+    "forceConsistentCasingInFileNames": true, /* Ensure that casing is correct in imports. */
     /* Type Checking */
-    "strict": true,                                      /* Enable all strict type-checking options. */
-    "noImplicitAny": true,                            /* Enable error reporting for expressions and declarations with an implied 'any' type. */
-    "strictNullChecks": true,                         /* When type checking, take into account 'null' and 'undefined'. */
-    "strictFunctionTypes": true,                      /* When assigning functions, check to ensure parameters and the return values are subtype-compatible. */
-    "strictBindCallApply": true,                      /* Check that the arguments for 'bind', 'call', and 'apply' methods match the original function. */
-    "strictPropertyInitialization": true,             /* Check for class properties that are declared but not set in the constructor. */
-    "noImplicitThis": true,                           /* Enable error reporting when 'this' is given the type 'any'. */
-    "useUnknownInCatchVariables": true,               /* Default catch clause variables as 'unknown' instead of 'any'. */
-    "alwaysStrict": true,                             /* Ensure 'use strict' is always emitted. */
-    "noUnusedLocals": true,                           /* Enable error reporting when local variables aren't read. */
-    "noUnusedParameters": true,                       /* Raise an error when a function parameter isn't read. */
-    "exactOptionalPropertyTypes": true,               /* Interpret optional property types as written, rather than adding 'undefined'. */
-    "noImplicitReturns": true,                        /* Enable error reporting for codepaths that do not explicitly return in a function. */
-    "noFallthroughCasesInSwitch": true,               /* Enable error reporting for fallthrough cases in switch statements. */
-    "noUncheckedIndexedAccess": true,                 /* Add 'undefined' to a type when accessed using an index. */
-    "noImplicitOverride": true,                       /* Ensure overriding members in derived classes are marked with an override modifier. */
-    "noPropertyAccessFromIndexSignature": true,       /* Enforces using indexed accessors for keys declared using an indexed type. */
-    "allowUnusedLabels": true,                        /* Disable error reporting for unused labels. */
-    "allowUnreachableCode": true,                     /* Disable error reporting for unreachable code. */
-
+    "strict": true, /* Enable all strict type-checking options. */
+    "noImplicitAny": true, /* Enable error reporting for expressions and declarations with an implied 'any' type. */
+    "strictNullChecks": true, /* When type checking, take into account 'null' and 'undefined'. */
+    "strictFunctionTypes": true, /* When assigning functions, check to ensure parameters and the return values are subtype-compatible. */
+    "strictBindCallApply": true, /* Check that the arguments for 'bind', 'call', and 'apply' methods match the original function. */
+    "strictPropertyInitialization": true, /* Check for class properties that are declared but not set in the constructor. */
+    "noImplicitThis": true, /* Enable error reporting when 'this' is given the type 'any'. */
+    "useUnknownInCatchVariables": true, /* Default catch clause variables as 'unknown' instead of 'any'. */
+    "alwaysStrict": true, /* Ensure 'use strict' is always emitted. */
+    "noUnusedLocals": true, /* Enable error reporting when local variables aren't read. */
+    "noUnusedParameters": true, /* Raise an error when a function parameter isn't read. */
+    "exactOptionalPropertyTypes": true, /* Interpret optional property types as written, rather than adding 'undefined'. */
+    "noImplicitReturns": true, /* Enable error reporting for codepaths that do not explicitly return in a function. */
+    "noFallthroughCasesInSwitch": true, /* Enable error reporting for fallthrough cases in switch statements. */
+    "noUncheckedIndexedAccess": true, /* Add 'undefined' to a type when accessed using an index. */
+    "noImplicitOverride": true, /* Ensure overriding members in derived classes are marked with an override modifier. */
+    "noPropertyAccessFromIndexSignature": true, /* Enforces using indexed accessors for keys declared using an indexed type. */
+    "allowUnusedLabels": true, /* Disable error reporting for unused labels. */
+    "allowUnreachableCode": true, /* Disable error reporting for unreachable code. */
     /* Completeness */
     // "skipDefaultLibCheck": true,                      /* Skip type checking .d.ts files that are included with TypeScript. */
-    "skipLibCheck": true                                 /* Skip type checking all .d.ts files. */
+    "skipLibCheck": true /* Skip type checking all .d.ts files. */
   },
   "include": [
     "./app/script/*"
@@ -112,4 +108,4 @@
   "exclude": [
     "node_modules/**",
   ]
-}
+}
\ No newline at end of file
