diff --git a/contents/articles/2019/11-03_utcode-lectures-04/index.mdx b/contents/articles/2019/11-03_utcode-lectures-04/index.mdx
index 88550468..2c13fe60 100644
--- a/contents/articles/2019/11-03_utcode-lectures-04/index.mdx
+++ b/contents/articles/2019/11-03_utcode-lectures-04/index.mdx
@@ -155,7 +155,9 @@ CSS セレクタは、ブラウザが CSS を適用する際、どの HTML 要
 
 疑似クラスを用いると、CSS を用いたインタラクティブな表現が簡単に実装できます。以下の文字列にカーソルを合わせてみてください。
 
-<div class="hover:text-red hover:text-lg" />
+<div class="hover:text-[red] hover:text-lg">
+Hello World!
+</div>
 
 これは、以下のようにして実装されています。
 
@@ -166,7 +168,7 @@ CSS セレクタは、ブラウザが CSS を適用する際、どの HTML 要
 ```
 #message:hover {
   color: red;
-  font-size: 30px;
+  font-size: 18px;
 }
 ```
 
diff --git a/contents/projects/cobuilder/index.mdx b/contents/projects/cobuilder/index.mdx
index 4b74d51c..694c0ac6 100644
--- a/contents/projects/cobuilder/index.mdx
+++ b/contents/projects/cobuilder/index.mdx
@@ -3,7 +3,8 @@ title: cobuilder
 slug: cobuilder
 date: 2023-04-04
 description: 仮想空間を参加者全員で作り上げ、自分たちだけの世界を作るメタバースを作ります
-image: ./image.png
+image:
+  src: ./image.png
 tags: [C#, Unity]
 github: https://github.com/ut-code/cobuilder
 ---
diff --git a/contents/projects/create-cpu/index.mdx b/contents/projects/create-cpu/index.mdx
index 1bff9871..fa824010 100644
--- a/contents/projects/create-cpu/index.mdx
+++ b/contents/projects/create-cpu/index.mdx
@@ -2,7 +2,8 @@
 title: CreateCPU
 slug: create-cpu
 date: 2023-04-01
-image: ./image.png
+image:
+  src: ./image.png
 description: 現代コンピュータの頭脳である CPU は、単純な論理回路を大量に組み合わせた巨大なシステムです。CreateCPU を使うと、最も単純な回路素子をつなぎ合わせて自分だけの CPU を作り上げることができます。
 tags: [TypeScript, React]
 github: https://github.com/ut-code/create-cpu
diff --git a/contents/projects/dull-meshi/index.mdx b/contents/projects/dull-meshi/index.mdx
index 0cd81d39..578a5b82 100644
--- a/contents/projects/dull-meshi/index.mdx
+++ b/contents/projects/dull-meshi/index.mdx
@@ -1,7 +1,10 @@
 ---
 title: だるめし
 slug: dull-meshi
-image: ./dull-meshi.jpg
+image:
+  src: ./dull-meshi.jpg
+  fit: contain
+  bg: "#E6E0DB"
 date: 2023-04-05
 description: 質問に答えていくだけで献立を提案してくれるアプリ
 tags: [TypeScript, React]
diff --git a/contents/projects/learn-braille/index.mdx b/contents/projects/learn-braille/index.mdx
index 8f38d69f..d2ab8b53 100644
--- a/contents/projects/learn-braille/index.mdx
+++ b/contents/projects/learn-braille/index.mdx
@@ -1,7 +1,9 @@
 ---
 title: Dot Tutor Learn
 slug: dot-tutor-learn
-image: ./image.png
+image:
+  src: ./image.png
+  fit: contain
 date: 2023-01-28
 description: 体験型点字学習サイト Dot Tutor Learn です。
 tags: [TypeScript, React]
diff --git a/contents/projects/nikochan/index.mdx b/contents/projects/nikochan/index.mdx
index e6776b82..c1bef5ed 100644
--- a/contents/projects/nikochan/index.mdx
+++ b/contents/projects/nikochan/index.mdx
@@ -1,7 +1,8 @@
 ---
 title: Falling Nikochan
 slug: nikochan
-image: ./image.jpg
+image:
+  src: ./image.jpg
 date: 2024-09-24
 description: シンプルでかわいい音ゲーです。誰でも譜面を作ってシェアできます。
 tags: [JavaScript, TypeScript, React, Next.js, Hono, MongoDB]
diff --git a/contents/projects/postput/index.mdx b/contents/projects/postput/index.mdx
index 8a45afd7..68eeba82 100644
--- a/contents/projects/postput/index.mdx
+++ b/contents/projects/postput/index.mdx
@@ -1,7 +1,8 @@
 ---
 title: PostPut
 slug: postput
-image: ./image.png
+image:
+  src: ./image.png
 date: 2023-04-03
 description: 送信したメッセージに後からタグ付けできるチャットツール
 tags: [JavaScript, React, Node.js, Express, Passport.js, Prisma, WebSocket]
diff --git a/contents/projects/syllabus/index.mdx b/contents/projects/syllabus/index.mdx
index b9f772a9..cfa476ae 100644
--- a/contents/projects/syllabus/index.mdx
+++ b/contents/projects/syllabus/index.mdx
@@ -2,7 +2,8 @@
 title: シ楽バス
 slug: syllabus
 order: 2
-image: ./image.jpg
+image:
+  src: ./image.jpg
 date: 2023-10-02
 description: 前期課程に特化した時間割サービス
 tags: [JavaScript]
diff --git a/contents/projects/th-beat/index.mdx b/contents/projects/th-beat/index.mdx
index 783ba570..2def2394 100644
--- a/contents/projects/th-beat/index.mdx
+++ b/contents/projects/th-beat/index.mdx
@@ -1,7 +1,8 @@
 ---
 title: 東方競争曲
 slug: touhoubeat
-image: ./image.png
+image:
+  src: ./image.png
 date: 2023-12-19
 description: 東方Projectのアレンジ曲で遊べるリズムゲーム
 tags: [C#, Unity, AWS, Go, TypeScript, React]
diff --git a/contents/projects/translate-braille/index.mdx b/contents/projects/translate-braille/index.mdx
index 12a8aa03..5e8754ef 100644
--- a/contents/projects/translate-braille/index.mdx
+++ b/contents/projects/translate-braille/index.mdx
@@ -1,7 +1,9 @@
 ---
 title: Dot Tutor Translate
 slug: dot-tutor-translate
-image: ./image.png
+image:
+  src: ./image.png
+  fit: contain
 date: 2023-01-28
 description: 点字翻訳サイト Dot Tutor Translate です。
 tags: [TypeScript, React, Python, FastAPI]
diff --git a/contents/projects/utcode-learn/index.mdx b/contents/projects/utcode-learn/index.mdx
index 9b9c43c9..4020cdac 100644
--- a/contents/projects/utcode-learn/index.mdx
+++ b/contents/projects/utcode-learn/index.mdx
@@ -2,7 +2,8 @@
 title: ut.code(); Learn
 slug: utcode-learn
 order: 1
-image: ./image.jpg
+image:
+  src: ./image.jpg
 date: 2022-04-01
 description: ut.code(); 公式の学習カリキュラムです。ut.code(); 外部の方でもご利用いただけます。
 tags: [JavaScript, TypeScript, React, Node.js, Docusaurus]
diff --git a/contents/projects/webcface/index.mdx b/contents/projects/webcface/index.mdx
index 480366f4..61b62510 100644
--- a/contents/projects/webcface/index.mdx
+++ b/contents/projects/webcface/index.mdx
@@ -1,7 +1,8 @@
 ---
 title: WebCFace
 slug: webcface
-image: ./image.png
+image:
+  src: ./image.png
 date: 2023-09-28
 description: プロセス間通信 & GUIを提供するライブラリ
 tags: [C++, Python, JavaScript, TypeScript, WebSocket, MessagePack, React]
diff --git a/src/components/ArticleList.astro b/src/components/ArticleList.astro
index f72be3e5..952e0cb3 100644
--- a/src/components/ArticleList.astro
+++ b/src/components/ArticleList.astro
@@ -7,7 +7,7 @@ import { markdownToTxt } from "markdown-to-txt";
 interface Props {
   articles: { id: string; data: Article; body?: string }[];
   enlarge?: boolean; // 11 記事ごとに大きくする
-  minify?: boolean; // (index.astro 用) 画面幅に合わせて短くする
+  truncate?: boolean; // (index.astro 用) 画面幅に合わせて短くする
   "max-cols"?: number | `${number}`;
   loading?: "eager" | "lazy";
   class?: string;
@@ -16,7 +16,7 @@ const props = Astro.props;
 const {
   articles,
   enlarge = false,
-  minify = false,
+  truncate = false,
   "max-cols": _maxCols = 4,
   loading = "lazy",
 } = props;
@@ -41,11 +41,11 @@ const articlesWithExcerpts = await Promise.all(
 
 <ul
   class:list={[
-    "grid grid-flow-dense gap-9",
+    "grid grid-flow-dense gap-5",
     maxCols >= 2 && "md:grid-cols-2",
     maxCols >= 3 && "lg:grid-cols-3",
     maxCols >= 4 && "xl:grid-cols-4",
-    minify && "minify",
+    truncate && "data-truncate",
     props.class,
   ]}
 >
@@ -62,12 +62,10 @@ const articlesWithExcerpts = await Promise.all(
       const additionalProps = isFeatured
         ? {
             cellClassName: "md:col-span-2 md:row-span-2",
-            imageClassName: "max-h-[32rem] md:max-h-[48rem]",
             excerpt: text.slice(0, 300),
           }
         : {
             cellClassName: "",
-            imageClassName: "max-h-[24rem]",
             excerpt: text.slice(0, 80),
           };
       return (
@@ -75,7 +73,7 @@ const articlesWithExcerpts = await Promise.all(
           <a
             href={`/articles/${article.id}`}
             class:list={[
-              "relative rounded-xl bg-gray-50 hover:brightness-110 active:top-0.5",
+              "relative rounded-xl bg-gray-50 p-2 hover:brightness-95",
               additionalProps.cellClassName,
             ]}
           >
@@ -91,16 +89,16 @@ const articlesWithExcerpts = await Promise.all(
               class:list={[
                 "min-h-0 w-full rounded-xl",
                 !article.data["bg_color"] && "skeleton",
-                additionalProps.imageClassName,
               ]}
-              style={`
-              aspect-ratio: 5 / 3;
-              object-fit: ${article.data.fit};
-              ${
-                article.data.bg_color
-                  ? `background-color: ${article.data.bg_color}`
-                  : ""
-              }`}
+              style={{
+                "aspect-ratio": "5 / 3",
+                "object-fit": article.data.fit,
+                ...(article.data.bg_color
+                  ? {
+                      "background-color": article.data.bg_color,
+                    }
+                  : {}),
+              }}
             />
             <div class="mt-4 p-1">
               <time class="block text-sm text-gray-500">
@@ -109,7 +107,7 @@ const articlesWithExcerpts = await Promise.all(
               <h3 class="text-lg font-bold">{article.data.title}</h3>
               <p
                 class:list={[
-                  "prose mt-2 line-clamp-3 max-w-none",
+                  "prose mt-2 line-clamp-3 max-w-none text-gray-500",
                   isFeatured && "md:line-clamp-6",
                 ]}
               >
@@ -124,8 +122,13 @@ const articlesWithExcerpts = await Promise.all(
 </ul>
 
 <style>
-  @container (width > 64rem) {
-    .minify.variant-compact :nth-child(n + 3) a {
+  @media (width < 48rem) {
+    .data-truncate > li:nth-child(n + 2) {
+      display: none;
+    }
+  }
+  @media (width < 64rem) {
+    .data-truncate > li:nth-child(n + 3) {
       display: none;
     }
   }
diff --git a/src/components/Header.astro b/src/components/Header.astro
index 21aa5639..eb93ad89 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -20,7 +20,7 @@ interface Props {
 const { focus } = Astro.props;
 ---
 
-<header class="sticky top-0 z-20 w-full bg-gray-50">
+<header class="sticky top-0 z-20 w-full">
   <!-- <ClientRouter transition:animate={fade({ duration: 30 })} /> -->
   {
     banner.shown && (
@@ -28,7 +28,7 @@ const { focus } = Astro.props;
         id="banner"
         class:list={[
           "flex items-center justify-center gap-4 px-1 py-2",
-          banner.kind === "error" ? "bg-red-300" : "bg-green-300",
+          banner.kind === "error" ? "bg-red-300/70" : "bg-green-300",
         ]}
       >
         <span class="hidden md:inline">{banner.long}</span>
@@ -51,7 +51,7 @@ const { focus } = Astro.props;
       </div>
     )
   }
-  <div class="flex h-16">
+  <div class="flex h-16 bg-gray-50/70 backdrop-blur-lg">
     <a href="/" class="flex items-center px-4" data-astro-prefetch="viewport">
       <Logo class="w-36 sm:ml-8" variant="default" />
     </a>
diff --git a/src/components/ProjectList.astro b/src/components/ProjectList.astro
index af00bddb..e55376d7 100644
--- a/src/components/ProjectList.astro
+++ b/src/components/ProjectList.astro
@@ -21,20 +21,33 @@ const { projects, variant = "full" } = props;
         ]}
       >
         <a
-          class="relative top-0 overflow-clip rounded-xl border border-gray-200 bg-gray-50 hover:brightness-95 active:top-0.25"
+          class="relative top-0 overflow-clip rounded-xl border border-gray-200 hover:brightness-95"
           href={`/projects/${project.id}`}
         >
           <Picture
             loading={i < 6 && variant === "full" ? "eager" : "lazy"}
             alt="プロジェクトのイメージ画像"
-            src={project.data.image}
-            class="skeleton max-h-[24rem] w-full object-contain"
+            src={project.data.image.src}
+            width="600"
+            height={(600 * 3) / 5}
+            class:list={[
+              "aspect-5/3 w-full",
+              !project.data.image.bg && "skeleton",
+            ]}
+            style={{
+              "object-fit": project.data.image.fit,
+              ...(project.data.image.bg
+                ? {
+                    "background-color": project.data.image.bg,
+                  }
+                : {}),
+            }}
           />
           <div class="p-4">
             <h3 class="text-xl font-bold text-gray-800">
               {project.data.title}
             </h3>
-            <p class="prose mt-2">
+            <p class="prose mt-2 text-gray-500">
               {project.data.description.length < 120
                 ? project.data.description
                 : project.data.description.slice(0, 120) + "..."}
@@ -47,7 +60,7 @@ const { projects, variant = "full" } = props;
 </ul>
 
 <style>
-  @media (max-width: 64rem) {
+  @media (max-width: 48rem) {
     li.variant-short:nth-child(n + 3) {
       display: none;
     }
diff --git a/src/islands/svelte/hamburger-button.svelte b/src/islands/svelte/hamburger-button.svelte
index 35c9f543..4cf857f5 100644
--- a/src/islands/svelte/hamburger-button.svelte
+++ b/src/islands/svelte/hamburger-button.svelte
@@ -15,11 +15,11 @@
   <Popover.Content align="end" side="bottom" strategy="fixed">
     <div
       transition:fade|global={{ duration: 70 }}
-      class="w-[100vw] bg-gray-50 transition-opacity duration-300 lg:hidden"
+      class="w-[100vw] bg-gray-50/70 backdrop-blur-lg transition-opacity duration-300 lg:hidden"
     >
       <ul>
         {#each links as link}
-          <li class="hover:bg-gray-200">
+          <li class="hover:bg-gray-100">
             <a
               href={link.href}
               class="block px-4 py-2"
diff --git a/src/pages/articles/[...id].astro b/src/pages/articles/[...id].astro
index b82993d0..3760c8fe 100644
--- a/src/pages/articles/[...id].astro
+++ b/src/pages/articles/[...id].astro
@@ -39,7 +39,7 @@ if (article.data.author && !author)
           height="800"
           quality="80"
           formats={["avif", "webp"]}
-          class="skeleton mx-auto md:max-w-xl md:rounded-2xl"
+          class="skeleton mx-auto rounded-none md:max-w-3xl md:rounded-2xl"
           alt="イメージ画像"
           src={article.data.image}
         />
@@ -56,19 +56,17 @@ if (article.data.author && !author)
           href={`/members/${author.id}`}
           class="flex max-w-sm min-w-75 items-center gap-4 rounded-lg px-4 py-2 hover:bg-gray-200"
         >
-          <div class="h-14 w-14 overflow-clip rounded-full bg-gray-200">
-            <Picture
-              alt="著者"
-              formats={["avif", "webp"]}
-              width="56"
-              height="56"
-              src={author.data.faceImage}
-              class="h-full w-full"
-            />
-          </div>
+          <Picture
+            alt="著者"
+            formats={["avif", "webp"]}
+            width="64"
+            height="64"
+            src={author.data.faceImage}
+            class="overflow-clip rounded-full bg-gray-200"
+          />
           <div class="flex-1">
-            <div class="text-lg">{author.data.nameJa}</div>
-            <div class="text-sm text-gray-800">{author.data.description}</div>
+            <div class="text-lg text-gray-800">{author.data.nameJa}</div>
+            <div class="text-sm text-gray-500">{author.data.description}</div>
           </div>
         </a>
       )
@@ -77,11 +75,11 @@ if (article.data.author && !author)
       {format(article.data.date, "yyyy-MM-dd")}
     </time>
   </div>
-  <main class="mx-auto">
-    <h1 class="mx-auto my-8 max-w-2xl px-8 text-center text-2xl lg:text-3xl">
+  <main class="mx-auto max-w-xl px-4 2xl:max-w-4xl">
+    <h1 class="my-8 w-full text-center text-2xl lg:text-3xl">
       {article.data.title}
     </h1>
-    <article class="prose mx-auto max-w-xl px-8">
+    <article class="prose w-full max-w-none">
       <Content />
     </article>
   </main>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index f72ce2fc..3eaeaacf 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -36,7 +36,7 @@ articles.splice(3);
     formats={["avif", "webp"]}
     alt=""
     loading="lazy"
-    class="skeleton fixed bottom-0 -z-10 h-[100lvh] max-w-full object-cover object-center select-none"
+    class="skeleton fixed top-0 -z-10 h-[100lvh] max-w-full object-cover object-center select-none"
     src={Hero}
   />
   <div class="absolute top-[40%] left-10 mr-10 max-w-lg bg-gray-50 p-8 pb-24">
@@ -209,7 +209,7 @@ articles.splice(3);
   <section class="bg-gray-50">
     <div class="container mx-auto px-4 py-12">
       <SectionHeader title="News" subtitle="最新情報" />
-      <ArticleList minify {articles} max-cols="3" class="mt-10" />
+      <ArticleList truncate {articles} max-cols="3" class="mt-10" />
       <ActionButton to="/articles" class="mt-8 ml-auto">
         すべての記事
       </ActionButton>
@@ -276,6 +276,9 @@ articles.splice(3);
     #text-future-software {
       text-decoration: underline white;
       text-underline-offset: 12px;
+      @media (max-width: 40rem) {
+        text-underline-offset: 6px;
+      }
       --bg-left: 0%;
       background: linear-gradient(white 0 0) bottom left/var(--bg-left, 0%) 100%
         no-repeat;
diff --git a/src/pages/members.astro b/src/pages/members.astro
index 4c158ad0..822d1ffa 100644
--- a/src/pages/members.astro
+++ b/src/pages/members.astro
@@ -21,7 +21,7 @@ const members = (await getCollection("members")).sort(
     loading="eager"
     alt=""
     src={Header}
-    class="fixed bottom-0 -z-100 h-[100vh] bg-neutral-400 object-cover"
+    class="fixed top-0 -z-100 h-[100lvh] bg-neutral-400 object-cover"
     style="object-position: 75% 20%;"
     aria-hidden
   />
@@ -39,7 +39,7 @@ const members = (await getCollection("members")).sort(
           <li>
             <a
               href={`/members/${member.id}`}
-              class="relative block w-fit drop-shadow-lg transition-colors duration-150 hover:brightness-110 active:top-0.5"
+              class="relative block w-fit drop-shadow-lg transition-colors duration-150"
               data-astro-prefetch="hover"
             >
               <Picture
@@ -51,7 +51,7 @@ const members = (await getCollection("members")).sort(
                 height="400"
                 class="skeleton rounded-none"
               />
-              <div class="absolute bottom-0 w-full min-w-45 bg-gradient-to-b from-transparent to-black px-6 pt-12 pb-6 text-white">
+              <div class="absolute bottom-0 w-full min-w-45 bg-gradient-to-b from-transparent to-black px-6 pt-12 pb-6 text-white transition-all">
                 <h2 class="text-3xl">{member.data.nameJa}</h2>
                 <p class="text-md">{member.data.nameEn}</p>
                 <p class="mt-2 text-xs leading-normal">
diff --git a/src/pages/projects/[project].astro b/src/pages/projects/[project].astro
index 8a062e0b..d0428674 100644
--- a/src/pages/projects/[project].astro
+++ b/src/pages/projects/[project].astro
@@ -24,7 +24,7 @@ const { Content } = await render(project);
   title={project.data.title}
   description={project.data.description}
   focus={Focus.projects}
-  image={project.data.image}
+  image={project.data.image.src}
 >
   <main class="mt-36">
     <div
@@ -33,11 +33,9 @@ const { Content } = await render(project);
       <Picture
         loading="eager"
         formats={["avif", "webp"]}
-        width="1200"
-        height="600"
-        class="skeleton w-full lg:w-150 lg:rounded-2xl"
+        class="skeleton w-full object-cover lg:w-150 lg:rounded-2xl"
         alt="プロジェクト画像"
-        src={project.data.image}
+        src={project.data.image.src}
       />
       <div class="container mx-auto mt-8 px-4 lg:mx-0 lg:flex-1">
         <p class="flex items-center gap-1 text-gray-600">
@@ -77,7 +75,7 @@ const { Content } = await render(project);
                   <a
                     href={link.href}
                     target="_blank"
-                    class="-m-1 mt-6 rounded-xl p-1 hover:bg-gray-100"
+                    class="-m-1 mt-6 rounded-xl p-1 hover:brightness-95"
                     rel="noreferrer"
                     aria-label={`${link.label}を見る`}
                   >
diff --git a/src/schema.ts b/src/schema.ts
index 40d354a1..d275575b 100644
--- a/src/schema.ts
+++ b/src/schema.ts
@@ -38,7 +38,11 @@ export const CreateProjectSchema = ({ image }: { image: ImageFunction }) =>
     title: z.string(),
     order: z.number().optional(),
     date: z.date(),
-    image: image(),
+    image: z.object({
+      src: image(),
+      fit: z.enum(["cover", "contain", "fill"]).optional().default("cover"),
+      bg: z.string().optional().default("whitesmoke"),
+    }),
     description: z.string(),
     tags: z.array(z.string()),
     github: z.string().url().optional(),