diff --git a/lib/domain/align/model.dart b/lib/domain/align/model.dart
new file mode 100644
index 0000000..5d24d6a
--- /dev/null
+++ b/lib/domain/align/model.dart
@@ -0,0 +1,20 @@
+import 'package:flutter/material.dart';
+
+enum AlignDirection {
+  start,
+  center,
+  end,
+}
+
+MainAxisAlignment toMainAxisAlignment(AlignDirection ad) {
+  switch (ad) {
+    case AlignDirection.start:
+      return MainAxisAlignment.start;
+    case AlignDirection.center:
+      return MainAxisAlignment.center;
+    case AlignDirection.end:
+      return MainAxisAlignment.end;
+    default:
+      throw Error();
+  }
+}
diff --git a/lib/main.dart b/lib/main.dart
index 63a8666..92088ca 100644
--- a/lib/main.dart
+++ b/lib/main.dart
@@ -1,4 +1,6 @@
 import 'package:flutter/material.dart';
+import 'package:flutter_training_2023/domain/align/model.dart';
+import 'package:flutter_training_2023/widgets/my_colored_box_list.dart';
 
 void main() {
   runApp(const MyApp());
@@ -95,16 +97,6 @@ class _MyHomePageState extends State<MyHomePage> {
           // horizontal).
           mainAxisAlignment: MainAxisAlignment.center,
           children: <Widget>[
-            const SizedBox(
-              width: 50,
-              height: 50,
-              child: ColoredBox(color: Color(0xFFFFFF00)),
-            ),
-            const SizedBox(
-              width: 100,
-              height: 100,
-              child: ColoredBox(color: Color(0xFFFF0000)),
-            ),
             const Text(
               'You have pushed the button this many times:',
             ),
@@ -112,6 +104,27 @@ class _MyHomePageState extends State<MyHomePage> {
               '$_counter',
               style: Theme.of(context).textTheme.headline4,
             ),
+            const MyColoredBoxList(
+              width: 40,
+              height: 40,
+              align: AlignDirection.start,
+              amount: 2,
+              color: Color(0xFF0000FF),
+            ),
+            const MyColoredBoxList(
+              width: 60,
+              height: 60,
+              align: AlignDirection.center,
+              amount: 3,
+              color: Color(0xFFFF0000),
+            ),
+            const MyColoredBoxList(
+              width: 80,
+              height: 80,
+              align: AlignDirection.end,
+              amount: 2,
+              color: Color(0xFF00FF00),
+            ),
           ],
         ),
       ),
diff --git a/lib/widgets/my_colored_box.dart b/lib/widgets/my_colored_box.dart
new file mode 100644
index 0000000..792870f
--- /dev/null
+++ b/lib/widgets/my_colored_box.dart
@@ -0,0 +1,24 @@
+import 'package:flutter/material.dart';
+
+class MyColoredBox extends StatelessWidget {
+  final Color color;
+  final int width;
+  final int height;
+  const MyColoredBox(
+      {Key? key,
+      required this.color,
+      required this.width,
+      required this.height})
+      : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return SizedBox(
+      width: width.toDouble(),
+      height: height.toDouble(),
+      child: ColoredBox(
+        color: color,
+      ),
+    );
+  }
+}
diff --git a/lib/widgets/my_colored_box_list.dart b/lib/widgets/my_colored_box_list.dart
new file mode 100644
index 0000000..1f4cbc6
--- /dev/null
+++ b/lib/widgets/my_colored_box_list.dart
@@ -0,0 +1,42 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_training_2023/domain/align/model.dart';
+import 'package:flutter_training_2023/widgets/my_colored_box.dart';
+
+class MyColoredBoxList extends StatelessWidget {
+  final int width;
+  final int height;
+  final AlignDirection align;
+  final int amount;
+  final Color color;
+  const MyColoredBoxList({
+    Key? key,
+    required this.width,
+    required this.height,
+    required this.align,
+    required this.amount,
+    required this.color,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    MainAxisAlignment mainAxisAlignment = toMainAxisAlignment(align);
+
+    List<Widget> children = List.filled(
+      amount,
+      [
+        MyColoredBox(
+          color: color,
+          width: width,
+          height: height,
+        ),
+        const SizedBox(width: 10),
+      ],
+    ).expand((e) => e).toList();
+    children = children.sublist(0, children.length - 1); // 末尾のSizedBoxを取り除く
+
+    return Row(
+      mainAxisAlignment: mainAxisAlignment,
+      children: children,
+    );
+  }
+}