OGP画像: 3行スローガンをメインビジュアルにした新デザイン

- スローガン「だれもが/しあわせに/暮らせるまちへ」を
  46px太字3行で中央に、グラデーションカラー
- ページタイトルは26pxで控えめに
- 背景を濃紺→紫の3色グラデーションに
- 顔写真を180pxに縮小

1 files changed, 72 insertions, 20 deletions

diff --git a/src/pages/og/[slug].png.ts b/src/pages/og/[slug].png.ts
index 063c22e..0481681 100644
--- a/src/pages/og/[slug].png.ts
+++ b/src/pages/og/[slug].png.ts
@@ -42,23 +42,24 @@ export async function GET({ params }: { params: { slug: string } }) {
           display: "flex",
           width: "1200px",
           height: "630px",
-          background: "linear-gradient(135deg, #3730a3 0%, #4f46e5 100%)",
+          background:
+            "linear-gradient(135deg, #1e1b4b 0%, #3730a3 50%, #4f46e5 100%)",
           color: "#ffffff",
           fontFamily: "sans-serif",
-          padding: "60px 80px",
+          padding: "64px 80px",
           alignItems: "center",
-          gap: "48px",
+          gap: "56px",
         },
         children: [
           {
             type: "img",
             props: {
               src: faceiconBase64,
-              width: 200,
-              height: 200,
+              width: 180,
+              height: 180,
               style: {
                 borderRadius: "50%",
-                border: "4px solid rgba(255,255,255,0.3)",
+                border: "3px solid rgba(255,255,255,0.25)",
                 flexShrink: "0",
               },
             },
@@ -69,44 +70,95 @@ export async function GET({ params }: { params: { slug: string } }) {
               style: {
                 display: "flex",
                 flexDirection: "column",
-                gap: "16px",
+                gap: "20px",
                 flex: "1",
               },
               children: [
+                // 3-line slogan as the main element
                 {
                   type: "div",
                   props: {
                     style: {
-                      fontSize: "52px",
-                      fontWeight: "700",
-                      lineHeight: "1.2",
-                      letterSpacing: "-0.02em",
+                      display: "flex",
+                      flexDirection: "column",
+                      gap: "4px",
                     },
-                    children: title,
+                    children: [
+                      {
+                        type: "div",
+                        props: {
+                          style: {
+                            fontSize: "46px",
+                            fontWeight: "800",
+                            lineHeight: "1.15",
+                            color: "#ffffff",
+                          },
+                          children: "だれもが",
+                        },
+                      },
+                      {
+                        type: "div",
+                        props: {
+                          style: {
+                            fontSize: "46px",
+                            fontWeight: "800",
+                            lineHeight: "1.15",
+                            color: "#c7d2fe",
+                          },
+                          children: "しあわせに",
+                        },
+                      },
+                      {
+                        type: "div",
+                        props: {
+                          style: {
+                            fontSize: "46px",
+                            fontWeight: "800",
+                            lineHeight: "1.15",
+                            color: "#a5b4fc",
+                          },
+                          children: "暮らせるまちへ",
+                        },
+                      },
+                    ],
                   },
                 },
+                // Page title
                 {
                   type: "div",
                   props: {
                     style: {
-                      fontSize: "36px",
-                      fontWeight: "600",
+                      fontSize: "26px",
+                      fontWeight: "500",
+                      lineHeight: "1.3",
                       color: "#e0e7ff",
+                      paddingTop: "8px",
+                      borderTop: "1px solid rgba(255,255,255,0.15)",
                     },
-                    children: "小平市議 安竹洋平",
+                    children: title,
                   },
                 },
+                // Name + domain
                 {
                   type: "div",
                   props: {
                     style: {
-                      fontSize: "24px",
+                      display: "flex",
+                      gap: "16px",
+                      fontSize: "20px",
                       fontWeight: "400",
-                      opacity: "0.6",
-                      color: "#e0e7ff",
-                      marginTop: "4px",
+                      color: "rgba(255,255,255,0.55)",
                     },
-                    children: "yasutakeyohei.com",
+                    children: [
+                      { type: "div", props: { children: "小平市議 安竹洋平" } },
+                      {
+                        type: "div",
+                        props: {
+                          children: "yasutakeyohei.com",
+                          style: { opacity: "0.6" },
+                        },
+                      },
+                    ],
                   },
                 },
               ],