diff --git a/app/announcements/[slug]/page.tsx b/app/announcements/[slug]/page.tsx
index d93fde0..22811ba 100644
--- a/app/announcements/[slug]/page.tsx
+++ b/app/announcements/[slug]/page.tsx
@@ -43,7 +43,7 @@ export default async function AnnouncementDetailPage({ params }: PageProps) {
 
   return (
     <article className="mx-auto flex w-full max-w-4xl flex-1 flex-col gap-6 px-4 py-8 sm:px-8 sm:py-12">
-      <header className="rounded-3xl border bg-card/70 p-6 shadow-sm backdrop-blur sm:p-8">
+      <header className="rounded-3xl border bg-card/70 p-6 shadow-sm backdrop-blur motion-safe:animate-in motion-safe:fade-in motion-safe:slide-in-from-bottom-3 motion-safe:duration-700 sm:p-8">
         <Badge variant="outline" className="mb-3">
           お知らせ詳細
         </Badge>
@@ -51,14 +51,14 @@ export default async function AnnouncementDetailPage({ params }: PageProps) {
         <h1 className="mt-2 text-2xl font-semibold tracking-tight sm:text-4xl">{announcement.title}</h1>
       </header>
 
-      <section className="rounded-3xl border bg-card p-6 shadow-sm sm:p-8">
+      <section className="rounded-3xl border bg-card p-6 shadow-sm motion-safe:animate-in motion-safe:fade-in motion-safe:slide-in-from-bottom-2 motion-safe:duration-700 sm:p-8">
         <div
           className="markdown-body space-y-4 text-sm leading-7 sm:text-base [&_a]:text-primary [&_a]:underline [&_a]:underline-offset-4 [&_blockquote]:border-l-2 [&_blockquote]:pl-3 [&_code]:rounded [&_code]:bg-muted [&_code]:px-1.5 [&_code]:py-0.5 [&_h1]:text-2xl [&_h1]:font-semibold [&_h2]:text-xl [&_h2]:font-semibold [&_h3]:text-lg [&_h3]:font-semibold [&_li]:ml-5 [&_ol]:list-decimal [&_pre]:overflow-x-auto [&_pre]:rounded-lg [&_pre]:bg-muted [&_pre]:p-3 [&_ul]:list-disc"
           dangerouslySetInnerHTML={{ __html: announcement.contentHtml }}
         />
       </section>
 
-      <Link href="/announcements" className="text-sm text-primary underline underline-offset-4">
+      <Link href="/announcements" className="text-sm text-primary underline underline-offset-4 transition-transform duration-200 hover:-translate-y-0.5">
         お知らせ一覧へ戻る
       </Link>
     </article>
diff --git a/app/announcements/page.tsx b/app/announcements/page.tsx
index c32c8e1..ec10217 100644
--- a/app/announcements/page.tsx
+++ b/app/announcements/page.tsx
@@ -13,7 +13,7 @@ export default async function AnnouncementsPage() {
 
   return (
     <div className="mx-auto flex w-full max-w-5xl flex-1 flex-col gap-6 px-4 py-8 sm:px-8 sm:py-12">
-      <header className="rounded-3xl border bg-card/70 p-6 shadow-sm backdrop-blur sm:p-8">
+      <header className="rounded-3xl border bg-card/70 p-6 shadow-sm backdrop-blur motion-safe:animate-in motion-safe:fade-in motion-safe:slide-in-from-bottom-3 motion-safe:duration-700 sm:p-8">
         <Badge variant="outline" className="mb-3">
           お知らせ
         </Badge>
@@ -25,13 +25,13 @@ export default async function AnnouncementsPage() {
 
       <section className="grid gap-4">
         {announcements.map((item) => (
-          <article key={item.slug} className="rounded-2xl border border-foreground/10 bg-card p-5 shadow-xs sm:p-6">
+          <article className="rounded-2xl border border-foreground/10 bg-card p-5 shadow-xs transition-all duration-300 motion-safe:animate-in motion-safe:fade-in motion-safe:slide-in-from-bottom-4 hover:-translate-y-1 hover:shadow-md sm:p-6" key={item.slug}>
             <header>
               <p className="text-xs text-muted-foreground">{item.date}</p>
               <h2 className="mt-1 text-xl font-semibold">
                 <Link
                   href={`/announcements/${item.slug}`}
-                  className="underline-offset-4 hover:underline"
+                  className="underline-offset-4 transition-colors duration-200 hover:text-primary hover:underline"
                 >
                   {item.title}
                 </Link>
diff --git a/app/layout.tsx b/app/layout.tsx
index df132b1..ae381a0 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -32,16 +32,16 @@ export default function RootLayout({
       className={cn("h-full", "antialiased", geistSans.variable, geistMono.variable, "font-sans", inter.variable)}
     >
       <body className="min-h-full flex flex-col">
-        <header className="sticky top-0 z-40 border-b bg-background/85 backdrop-blur">
+        <header className="sticky top-0 z-40 border-b bg-background/85 backdrop-blur motion-safe:animate-in motion-safe:fade-in motion-safe:slide-in-from-top-2 motion-safe:duration-500">
           <div className="mx-auto flex w-full max-w-6xl items-center justify-between px-4 py-3 sm:px-8">
-            <Link href="/" className="text-sm font-semibold tracking-tight sm:text-base">
+            <Link href="/" className="text-sm font-semibold tracking-tight transition-colors duration-200 hover:text-primary sm:text-base">
               Takasumi-Neodyマイクラサーバプロジェクト
             </Link>
             <nav className="flex items-center gap-4 text-sm">
-              <Link href="/" className="underline-offset-4 hover:underline">
+              <Link href="/" className="underline-offset-4 transition-colors duration-200 hover:text-primary hover:underline">
                 メインページ
               </Link>
-              <Link href="/announcements" className="underline-offset-4 hover:underline">
+              <Link href="/announcements" className="underline-offset-4 transition-colors duration-200 hover:text-primary hover:underline">
                 お知らせ
               </Link>
             </nav>
diff --git a/app/page.tsx b/app/page.tsx
index e4e206c..26bf12d 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -30,7 +30,7 @@ export default function Home() {
     <div className="relative flex min-h-full flex-1 flex-col overflow-x-clip bg-background">
       <div className="pointer-events-none absolute inset-x-0 top-0 -z-10 h-[380px] bg-gradient-to-b from-emerald-200/40 via-sky-200/25 to-transparent blur-3xl dark:from-emerald-500/20 dark:via-sky-500/20" />
       <main className="mx-auto flex w-full max-w-6xl flex-1 flex-col gap-8 px-4 py-8 sm:gap-10 sm:px-8 sm:py-14">
-        <section className="rounded-3xl border bg-card/70 p-6 shadow-sm backdrop-blur sm:p-10">
+        <section className="rounded-3xl border bg-card/70 p-6 shadow-sm backdrop-blur motion-safe:animate-in motion-safe:fade-in motion-safe:slide-in-from-bottom-3 motion-safe:duration-700 sm:p-10">
           <Badge variant="outline" className="mb-4 max-w-full text-[11px] sm:text-xs">
             Takasumi-Neodyマイクラサーバプロジェクト接続ガイド
           </Badge>
@@ -42,7 +42,13 @@ export default function Home() {
             統合版のどちらにも対応しています。
           </p>
           <div className="mt-6">
-            <Link href="/announcements" className={cn(buttonVariants({ variant: "outline" }))}>
+            <Link
+              href="/announcements"
+              className={cn(
+                buttonVariants({ variant: "outline" }),
+                "transition-transform duration-200 hover:-translate-y-0.5"
+              )}
+            >
               お知らせを見る
             </Link>
           </div>
@@ -54,7 +60,7 @@ export default function Home() {
             return (
               <article
                 key={server.name}
-                className="rounded-2xl border border-foreground/10 bg-card p-5 shadow-xs sm:p-6"
+                className="rounded-2xl border border-foreground/10 bg-card p-5 shadow-xs transition-all duration-300 motion-safe:animate-in motion-safe:fade-in motion-safe:slide-in-from-bottom-4 hover:-translate-y-1 hover:shadow-md sm:p-6"
               >
                 <header>
                   <div className="mb-2 flex flex-col items-start gap-2 sm:flex-row sm:items-center sm:justify-between sm:gap-3">
@@ -90,7 +96,7 @@ export default function Home() {
           })}
         </section>
 
-        <section className="rounded-3xl border bg-card p-6 shadow-sm sm:p-8">
+        <section className="rounded-3xl border bg-card p-6 shadow-sm motion-safe:animate-in motion-safe:fade-in motion-safe:slide-in-from-bottom-2 motion-safe:duration-700 sm:p-8">
           <h2 className="text-xl font-semibold">接続手順</h2>
           <Separator className="my-4" />
           <ol className="space-y-3 text-sm leading-7 sm:text-base">