diff --git a/frontend/src/components/Header.stories.tsx b/frontend/src/components/Header.stories.tsx
index c872bfe..679bdb6 100644
--- a/frontend/src/components/Header.stories.tsx
+++ b/frontend/src/components/Header.stories.tsx
@@ -61,6 +61,11 @@ const meta = {
     ),
   ],
   argTypes: {
+    variant: {
+      control: { type: 'radio' },
+      options: ['full', 'logoOnly'],
+      description: '表示バリアント（full: 全機能表示 / logoOnly: ロゴのみ）',
+    },
     mode: {
       control: { type: 'radio' },
       options: ['view', 'edit'],
@@ -85,10 +90,24 @@ const meta = {
 } satisfies Meta<typeof Header>;
 
 export default meta;
-type Story = StoryObj<typeof meta>;
+type Story = StoryObj<typeof Header>;
+
+export const LogoOnly: Story = {
+  args: {
+    variant: 'logoOnly',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'ロゴのみを表示するシンプルなヘッダー。ホーム画面などで使用されます。',
+      },
+    },
+  },
+};
 
 export const Default: Story = {
   args: {
+    variant: 'full',
     trip: demoTrip,
     pages: demoPages,
     mode: 'view',
@@ -110,6 +129,7 @@ export const Default: Story = {
 
 export const EditMode: Story = {
   args: {
+    variant: 'full',
     trip: demoTrip,
     pages: demoPages,
     mode: 'edit',
@@ -131,6 +151,7 @@ export const EditMode: Story = {
 
 export const SinglePage: Story = {
   args: {
+    variant: 'full',
     trip: {
       id: 1,
       title: '日帰り温泉ツアー',
@@ -155,6 +176,7 @@ export const SinglePage: Story = {
 
 export const EmptyPages: Story = {
   args: {
+    variant: 'full',
     trip: {
       id: 1,
       title: '新しい旅行計画',
@@ -179,6 +201,7 @@ export const EmptyPages: Story = {
 
 export const WithCustomClass: Story = {
   args: {
+    variant: 'full',
     trip: demoTrip,
     pages: demoPages,
     mode: 'view',
@@ -201,6 +224,7 @@ export const WithCustomClass: Story = {
 
 export const ScrolledState: Story = {
   args: {
+    variant: 'full',
     trip: demoTrip,
     pages: demoPages,
     mode: 'view',
@@ -225,7 +249,7 @@ export const ScrolledState: Story = {
       const scrollContainerRef = useRef<HTMLDivElement>(null);
       return (
         <div ref={scrollContainerRef} style={{ height: '200vh', overflow: 'auto' }}>
-          <Story args={{ ...context.args, scrollContainerRef }} />
+          <Story args={{ ...context.args, variant: 'full', scrollContainerRef }} />
           <div style={{ padding: '2rem', marginTop: '2rem' }}>
             <h2>スクロールしてヘッダーの変化を確認</h2>
             <p>
diff --git a/frontend/src/components/Header.tsx b/frontend/src/components/Header.tsx
index 9c746c5..ca2e119 100644
--- a/frontend/src/components/Header.tsx
+++ b/frontend/src/components/Header.tsx
@@ -1,4 +1,4 @@
-import { type Dispatch, type SetStateAction, useCallback, useEffect, useRef, useState } from 'react';
+import React, { type Dispatch, type SetStateAction, useCallback, useEffect, useRef, useState } from 'react';
 import editScheduleIcon from '@/assets/icons/edit-schedule-white.svg';
 import eyeSolidIcon from '@/assets/icons/eye-solid-white.svg';
 import penToSquareSolidIcon from '@/assets/icons/pen-to-square-solid-white.svg';
@@ -12,7 +12,14 @@ import { Badge } from './ui/badge';
 import { Button } from './ui/button';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from './ui/select';
 
-type HeaderProps = {
+type HeaderBaseProps = React.ComponentProps<'div'>;
+
+type HeaderLogoOnlyProps = HeaderBaseProps & {
+  variant: 'logoOnly';
+};
+
+type HeaderFullProps = HeaderBaseProps & {
+  variant: 'full';
   trip: Trip;
   pages: Page[];
   mode?: 'view' | 'edit';
@@ -20,12 +27,28 @@ type HeaderProps = {
   onSelectPage: (pageId: Page['id']) => void;
   scrollContainerRef: React.RefObject<HTMLDivElement | null>;
   setMode: Dispatch<SetStateAction<'view' | 'edit'>>;
-  className?: string;
 };
 
+type HeaderProps = HeaderLogoOnlyProps | HeaderFullProps;
+
 const transitionClassNames = 'duration-300 ease-in-out';
 
-export function Header({
+function HeaderLogoOnly({ className, ...props }: HeaderLogoOnlyProps) {
+  return (
+    <div
+      data-component='header'
+      className={cn(
+        'sticky top-0 right-0 left-0 z-10 flex w-full flex-col items-center justify-center bg-teal-50/80 px-6 py-3 backdrop-blur-sm',
+        className
+      )}
+      {...props}
+    >
+      <Logo size='medium' className='mx-auto' />
+    </div>
+  );
+}
+
+function HeaderFull({
   pages,
   trip,
   mode = 'view',
@@ -34,7 +57,8 @@ export function Header({
   setMode,
   className,
   scrollContainerRef,
-}: HeaderProps) {
+  ...props
+}: Omit<HeaderFullProps, 'variant'>) {
   const [isScrolled, setIsScrolled] = useState(false);
   const [editPageDialogOpen, setEditPageDialogOpen] = useState(false);
   const [addPageDialogOpen, setAddPageDialogOpen] = useState(false);
@@ -89,8 +113,11 @@ export function Header({
         'sticky top-0 right-0 left-0 z-10 flex w-full flex-col justify-center gap-1 bg-teal-50/80 px-6 py-2 backdrop-blur-sm',
         className
       )}
+      {...props}
     >
-      <Logo size={isScrolled ? 'small' : 'medium'} />
+      <div className='flex w-full flex-row justify-center'>
+        <Logo size={isScrolled ? 'small' : 'medium'} />
+      </div>
       <div className='grid grid-cols-[1fr_auto_1fr] items-center gap-4'>
         {/* 左カラム */}
         <div
@@ -180,6 +207,13 @@ export function Header({
   );
 }
 
+export function Header(props: HeaderProps) {
+  if (props.variant === 'logoOnly') {
+    return <HeaderLogoOnly {...props} />;
+  }
+  return <HeaderFull {...props} />;
+}
+
 type HeaderButtonBaseProps = React.ComponentProps<typeof Button> & {
   isScrolled: boolean;
   iconSrc: string;
diff --git a/frontend/src/components/HeaderSkeleton.tsx b/frontend/src/components/HeaderSkeleton.tsx
index b9ecb99..a5b7852 100644
--- a/frontend/src/components/HeaderSkeleton.tsx
+++ b/frontend/src/components/HeaderSkeleton.tsx
@@ -16,7 +16,7 @@ export function HeaderSkeleton({ className }: HeaderSkeletonProps) {
       )}
     >
       {/* Logo */}
-      <div className='pointer-events-none'>
+      <div className='pointer-events-none flex w-full flex-row justify-center'>
         <Logo size='medium' />
       </div>
 
diff --git a/frontend/src/components/Logo.tsx b/frontend/src/components/Logo.tsx
index 5c01d6a..068a1a1 100644
--- a/frontend/src/components/Logo.tsx
+++ b/frontend/src/components/Logo.tsx
@@ -9,7 +9,11 @@ interface LogoProps {
 
 export function Logo({ size = 'medium', className }: LogoProps) {
   return (
-    <Link to='/' data-component='Logo' className={cn('flex flex-row items-center justify-center gap-1', className)}>
+    <Link
+      to='/'
+      data-component='Logo'
+      className={cn('flex w-fit flex-row items-center justify-center gap-1', className)}
+    >
       <img
         src={paperPlaneIcon}
         alt=''
diff --git a/frontend/src/dialogs/AddTripDialog.tsx b/frontend/src/dialogs/AddTripDialog.tsx
new file mode 100644
index 0000000..3c8e3b0
--- /dev/null
+++ b/frontend/src/dialogs/AddTripDialog.tsx
@@ -0,0 +1,106 @@
+import { useState } from 'react';
+import { Button } from '@/components/ui/button';
+import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Textarea } from '@/components/ui/textarea';
+import { useCreateTrip } from '@/hooks/useTrips';
+import type { Trip } from '@/types/trip';
+
+interface AddTripDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onCreated?: (trip: Trip) => void;
+}
+
+export const AddTripDialog = ({ open, onOpenChange, onCreated }: AddTripDialogProps) => {
+  const [title, setTitle] = useState('');
+  const [detail, setDetail] = useState('');
+  const [peopleNum, setPeopleNum] = useState<number | undefined>(undefined);
+  const { createTrip } = useCreateTrip();
+
+  const handleSubmit = async () => {
+    if (!title.trim()) {
+      return;
+    }
+
+    const newTrip = await createTrip({
+      title: title.trim(),
+      detail: detail.trim() || undefined,
+      peopleNum: peopleNum,
+    });
+
+    if (newTrip) {
+      onCreated?.(newTrip);
+      onOpenChange(false);
+    }
+  };
+
+  const handleOpenChange = (open: boolean) => {
+    if (!open) {
+      setTitle('');
+      setDetail('');
+      setPeopleNum(undefined);
+    }
+    onOpenChange(open);
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={handleOpenChange}>
+      <DialogContent className='max-w-md'>
+        <DialogHeader>
+          <DialogTitle>旅程を追加</DialogTitle>
+        </DialogHeader>
+
+        <div className='space-y-4'>
+          <div className='space-y-2'>
+            <Label htmlFor='add-trip-title'>
+              タイトル<span className='text-red-500'>*</span>
+            </Label>
+            <Input
+              id='add-trip-title'
+              value={title}
+              onChange={e => setTitle(e.target.value)}
+              placeholder='例: 箱根温泉旅行'
+            />
+          </div>
+
+          <div className='space-y-2'>
+            <Label htmlFor='add-trip-detail'>詳細</Label>
+            <Textarea
+              id='add-trip-detail'
+              value={detail}
+              onChange={e => setDetail(e.target.value)}
+              placeholder='旅程の詳細や目的など'
+              rows={3}
+            />
+          </div>
+
+          <div className='space-y-2'>
+            <Label htmlFor='add-trip-people-num'>人数</Label>
+            <Input
+              id='add-trip-people-num'
+              type='number'
+              min='1'
+              value={peopleNum ?? ''}
+              onChange={e => {
+                const parsed = parseInt(e.target.value, 10);
+                setPeopleNum(!Number.isNaN(parsed) && parsed >= 1 ? parsed : undefined);
+              }}
+              placeholder='例: 4'
+            />
+          </div>
+        </div>
+
+        <DialogFooter>
+          <Button variant='outline' onClick={() => handleOpenChange(false)}>
+            キャンセル
+          </Button>
+          <Button onClick={handleSubmit} disabled={!title.trim()}>
+            追加
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};
diff --git a/frontend/src/hooks/useTrips.ts b/frontend/src/hooks/useTrips.ts
index 82e3308..32b57b9 100644
--- a/frontend/src/hooks/useTrips.ts
+++ b/frontend/src/hooks/useTrips.ts
@@ -4,7 +4,13 @@ import useSWR, { useSWRConfig } from 'swr';
 import useSWRMutation from 'swr/mutation';
 import z from 'zod';
 import { apiClient, fetcher } from '@/lib/apiClient';
-import { AppRequestTripSchema, AppResponseTripSchema, type Trip, TripSchema } from '@/types/trip';
+import {
+  AppRequestTripMutationSchema,
+  AppResponseTripSchema,
+  type Trip,
+  type TripMutation,
+  TripMutationSchema,
+} from '@/types/trip';
 
 const TRIPS_BASE_PATH = '/trips';
 
@@ -80,19 +86,16 @@ export const useTrip = (id: Trip['id'] | null) => {
   };
 };
 
-type CreateTripArg = Omit<Trip, 'id'>;
-const CreateTripSchema = TripSchema.omit({ id: true });
+type CreateTripArg = TripMutation;
 
 /**
  * 新しいTripを作成する
  */
 export const useCreateTrip = () => {
   const createTrip = useCallback(async (url: string, { arg: tripData }: { arg: CreateTripArg }) => {
-    CreateTripSchema.parse(tripData);
-    // アプリ層→API層に変換してからバリデーション・送信
-    const apiData = AppRequestTripSchema.parse({ ...tripData, id: 0 }); // idは仮値
-    const { id: _, ...payload } = apiData; // idを除外
-    const response = await apiClient.post(url, payload);
+    TripMutationSchema.parse(tripData);
+    const apiData = AppRequestTripMutationSchema.parse(tripData);
+    const response = await apiClient.post(url, apiData);
     return AppResponseTripSchema.parse(response.data);
   }, []);
 
@@ -109,8 +112,7 @@ export const useCreateTrip = () => {
   };
 };
 
-type UpdateTripArg = { id: Trip['id']; data: Omit<Trip, 'id'> };
-const UpdateTripSchema = TripSchema.omit({ id: true });
+type UpdateTripArg = { id: Trip['id']; data: TripMutation };
 
 /**
  * Tripを更新するためのフック
@@ -120,11 +122,9 @@ export const useUpdateTrip = () => {
 
   const updateTripFetcher = useCallback(async (_key: string | null, { arg }: { arg: UpdateTripArg }) => {
     const { id, data } = arg;
-    UpdateTripSchema.parse(data);
-    // アプリ層→API層に変換してからバリデーション・送信
-    const apiData = AppRequestTripSchema.parse({ ...data, id });
-    const { id: _, ...payload } = apiData; // idを除外（URLパスで指定）
-    const response = await apiClient.put(`${TRIPS_BASE_PATH}/${id}`, payload);
+    TripMutationSchema.parse(data);
+    const apiData = AppRequestTripMutationSchema.parse(data);
+    const response = await apiClient.put(`${TRIPS_BASE_PATH}/${id}`, apiData);
     return AppResponseTripSchema.parse(response.data);
   }, []);
 
@@ -159,7 +159,6 @@ export const useUpdateTrip = () => {
 };
 
 type DeleteTripArg = Trip['id'];
-const DeleteTripSchema = TripSchema.shape.id;
 
 /**
  * Tripを削除する
@@ -168,7 +167,7 @@ export const useDeleteTrip = () => {
   const { mutate } = useSWRConfig();
 
   const deleteTripFetcher = useCallback(async (_: string | null, { arg: id }: { arg: DeleteTripArg }) => {
-    DeleteTripSchema.parse(id);
+    z.number().parse(id);
     await apiClient.delete(`${TRIPS_BASE_PATH}/${id}`);
     return undefined;
   }, []);
diff --git a/frontend/src/hooks/useVisitedTrips.ts b/frontend/src/hooks/useVisitedTrips.ts
new file mode 100644
index 0000000..1f23335
--- /dev/null
+++ b/frontend/src/hooks/useVisitedTrips.ts
@@ -0,0 +1,81 @@
+import { useCallback, useEffect, useState } from 'react';
+import useSWR from 'swr';
+import { fetcher } from '@/lib/apiClient';
+import { AppResponseTripSchema, type Trip } from '@/types/trip';
+
+const VISITED_TRIPS_KEY = 'visitedTripUrlIds';
+
+/**
+ * localStorageから訪問済みTripのurlIdリストを取得
+ */
+const getVisitedTripUrlIds = (): string[] => {
+  try {
+    const stored = localStorage.getItem(VISITED_TRIPS_KEY);
+    if (!stored) return [];
+    return JSON.parse(stored);
+  } catch {
+    return [];
+  }
+};
+
+/**
+ * localStorageに訪問済みTripのurlIdリストを保存
+ */
+const saveVisitedTripUrlIds = (urlIds: string[]) => {
+  try {
+    localStorage.setItem(VISITED_TRIPS_KEY, JSON.stringify(urlIds));
+  } catch {
+    // localStorage書き込みエラーは無視
+  }
+};
+
+/**
+ * 訪問済みTripを管理するフック
+ */
+export const useVisitedTrips = () => {
+  const [urlIds, setUrlIds] = useState<string[]>([]);
+
+  // 初回マウント時にlocalStorageから読み込み
+  useEffect(() => {
+    setUrlIds(getVisitedTripUrlIds());
+  }, []);
+
+  // urlIdを訪問済みリストに追加
+  const addVisitedTrip = useCallback((urlId: string) => {
+    setUrlIds(prev => {
+      // 重複チェック
+      if (prev.includes(urlId)) return prev;
+      const updated = [...prev, urlId];
+      saveVisitedTripUrlIds(updated);
+      return updated;
+    });
+  }, []);
+
+  // SWRで各urlIdからTripを取得
+  const { data, error, isLoading } = useSWR<Trip[]>(
+    urlIds.length > 0 ? ['visitedTrips', ...urlIds] : null,
+    async () => {
+      // Promise.allで並列取得
+      const results = await Promise.all(
+        urlIds.map(async urlId => {
+          try {
+            const res = await fetcher(`/trips/url/${urlId}`);
+            return AppResponseTripSchema.parse(res);
+          } catch {
+            // 取得失敗時はnullを返す
+            return null;
+          }
+        })
+      );
+      // nullを除外して返す
+      return results.filter((trip): trip is Trip => trip !== null);
+    }
+  );
+
+  return {
+    trips: data,
+    isLoading,
+    error,
+    addVisitedTrip,
+  };
+};
diff --git a/frontend/src/pages/HomePage.tsx b/frontend/src/pages/HomePage.tsx
index 7b90bfe..7c3afb8 100644
--- a/frontend/src/pages/HomePage.tsx
+++ b/frontend/src/pages/HomePage.tsx
@@ -1,38 +1,113 @@
-import { Link } from 'react-router-dom';
-import { useTrips } from '@/hooks/useTrips';
+import type React from 'react';
+import { useId, useState } from 'react';
+import { Link, useNavigate } from 'react-router-dom';
+import { Header } from '@/components/Header';
+import { Button } from '@/components/ui/button';
+import { AddTripDialog } from '@/dialogs/AddTripDialog';
+import { useVisitedTrips } from '@/hooks/useVisitedTrips';
+import { cn } from '@/lib/utils';
 
 const HomePage = () => {
-  const { trips } = useTrips();
+  const { trips } = useVisitedTrips();
+  const navigate = useNavigate();
+  const [addTripDialogOpen, setAddTripDialogOpen] = useState(false);
+
   return (
-    <div className='flex min-h-screen flex-col items-center bg-gradient-to-br from-blue-50 to-cyan-50 p-4'>
-      <div className='w-full max-w-2xl'>
-        <header className='mb-8 text-center'>
-          <h1 className='mb-4 font-bold text-4xl text-gray-800'>🚗 TabiShare</h1>
-          <p className='text-gray-600 text-lg'>車旅行計画アプリ</p>
-        </header>
-
-        <main>
-          <h2 className='mb-4 text-center font-bold text-2xl text-gray-700'>旅程一覧(仮実装)</h2>
+    <div className='flex h-screen w-full flex-col overflow-auto bg-teal-50'>
+      <Header variant='logoOnly' />
+
+      <div className='flex flex-1 flex-col items-center p-4'>
+        <div className='relative w-full max-w-2xl'>
+          {/* ヘッダー行 */}
+          <div className='mb-6 flex items-center justify-between'>
+            <h2 className='font-bold text-2xl text-gray-800'>最近見た旅程一覧</h2>
+            <Button onClick={() => setAddTripDialogOpen(true)} size='sm'>
+              + 新しく旅に出る
+            </Button>
+          </div>
+
+          {/* Trip一覧 */}
           {trips != null && trips.length > 0 ? (
-            <ul className='space-y-4'>
+            <div className='space-y-3'>
               {trips.map(trip => (
-                <li key={trip.id} className='rounded-lg bg-white p-4 shadow transition hover:bg-gray-50'>
-                  <Link
-                    to={`/trip/${trip.urlId}`}
-                    className='block font-semibold text-blue-600 text-lg hover:underline'
-                  >
-                    {trip.title}
-                  </Link>
-                </li>
+                <Link
+                  key={trip.id}
+                  to={`/trip/${trip.urlId}`}
+                  className='block rounded-lg bg-white p-4 shadow-sm transition hover:shadow-md'
+                >
+                  <h3 className='mb-1 font-semibold text-gray-900 text-lg'>{trip.title}</h3>
+                  {trip.detail && <p className='line-clamp-2 text-gray-600 text-sm'>{trip.detail}</p>}
+                  {trip.peopleNum && <p className='mt-2 text-gray-500 text-xs'>参加人数: {trip.peopleNum}人</p>}
+                </Link>
               ))}
-            </ul>
+            </div>
           ) : (
-            <p className='text-center text-gray-500'>旅程がありません。</p>
+            <div className='relative flex flex-col items-center px-24 sm:px-0'>
+              <p className='relative mt-8 w-full text-center text-gray-500'>
+                旅程がまだありません。
+                <br />
+                共有してもらうか新しく作りましょう！
+              </p>
+              {/* テキストから右上ボタンへの点線カーブ矢印 */}
+              <CurvedArrow className='-top-6 absolute right-4 h-24 text-gray-400 sm:right-16' />
+            </div>
           )}
-        </main>
+        </div>
       </div>
+
+      {/* 旅程追加ダイアログ */}
+      <AddTripDialog
+        open={addTripDialogOpen}
+        onOpenChange={setAddTripDialogOpen}
+        onCreated={trip => {
+          navigate(`/trip/${trip.urlId}`);
+        }}
+      />
     </div>
   );
 };
 
+const CurvedArrow = ({ className, ...props }: React.ComponentProps<'svg'>) => {
+  const markerId = useId();
+  const ARROW_HEAD_SIZE = 30;
+  const ARROW_LINE_SIZE = 150;
+  const ARROW_CP = Math.round((ARROW_LINE_SIZE * 4) / 7);
+
+  return (
+    <svg
+      className={cn('pointer-events-none text-gray-400', className)}
+      viewBox={`${-ARROW_HEAD_SIZE} ${-ARROW_HEAD_SIZE} ${ARROW_LINE_SIZE + ARROW_HEAD_SIZE * 2} ${ARROW_LINE_SIZE + ARROW_HEAD_SIZE * 2}`}
+      role='img'
+      aria-label='ボタンへの誘導矢印'
+      {...props}
+    >
+      <defs>
+        <marker
+          id={markerId}
+          markerUnits='userSpaceOnUse'
+          markerWidth={ARROW_HEAD_SIZE}
+          markerHeight={ARROW_HEAD_SIZE}
+          refX={ARROW_HEAD_SIZE}
+          refY={ARROW_HEAD_SIZE / 2}
+          orient='auto'
+        >
+          <polygon
+            points={`0 0, ${ARROW_HEAD_SIZE} ${ARROW_HEAD_SIZE / 2}, 0 ${ARROW_HEAD_SIZE}`}
+            fill='currentColor'
+          />
+        </marker>
+      </defs>
+      <path
+        d={`M0,${ARROW_LINE_SIZE} C${ARROW_CP},${ARROW_LINE_SIZE} ${ARROW_LINE_SIZE},${ARROW_CP} ${ARROW_LINE_SIZE},0`}
+        fill='none'
+        stroke='currentColor'
+        strokeWidth='3'
+        strokeDasharray='20 10'
+        strokeLinecap='round'
+        markerEnd={`url(#${markerId})`}
+      />
+    </svg>
+  );
+};
+
 export { HomePage };
diff --git a/frontend/src/pages/TripPage.tsx b/frontend/src/pages/TripPage.tsx
index bea92db..1054afd 100644
--- a/frontend/src/pages/TripPage.tsx
+++ b/frontend/src/pages/TripPage.tsx
@@ -5,6 +5,7 @@ import { HeaderSkeleton } from '@/components/HeaderSkeleton';
 import { TimelineSkeleton } from '@/components/timeline';
 import { usePages } from '@/hooks/usePages';
 import { useTripByUrlId } from '@/hooks/useTrips';
+import { useVisitedTrips } from '@/hooks/useVisitedTrips';
 import type { Page } from '@/types';
 import { EditTripLayout } from './TripPage/EditTripLayout';
 import { ViewTripLayout } from './TripPage/ViewTripLayout';
@@ -18,6 +19,7 @@ const TripPage = () => {
 
   const { trip, error: tripError, isLoading: isTripLoading } = useTripByUrlId(urlId ?? null);
   const { pages, error: pagesError, isLoading: isPagesLoading } = usePages(trip?.id ?? null);
+  const { addVisitedTrip } = useVisitedTrips();
 
   const isLoading = isTripLoading || isPagesLoading || trip == null || pages == null || !minLoadingComplete;
   const isError = tripError || pagesError;
@@ -42,6 +44,13 @@ const TripPage = () => {
     }
   }, [mode]);
 
+  // Tripが読み込まれたら訪問済みリストに追加
+  useEffect(() => {
+    if (trip) {
+      addVisitedTrip(trip.urlId);
+    }
+  }, [trip, addVisitedTrip]);
+
   if (isLoading) {
     return (
       <div className='flex h-screen w-full flex-col items-center overflow-auto'>
@@ -69,6 +78,7 @@ const TripPage = () => {
         >
           {selectedPageId != null && (
             <Header
+              variant='full'
               selectedPageId={selectedPageId}
               pages={pages}
               onSelectPage={setSelectedPageId}
diff --git a/frontend/src/types/trip.ts b/frontend/src/types/trip.ts
index 32ccf71..e599723 100644
--- a/frontend/src/types/trip.ts
+++ b/frontend/src/types/trip.ts
@@ -59,3 +59,29 @@ export const AppRequestTripSchema = TripSchema.transform(
     url_id: appData.urlId,
   })
 );
+
+// --- 作成/更新用のスキーマ ---
+
+/**
+ * 作成/更新リクエスト用のアプリケーション層スキーマ
+ * id, urlIdはサーバーで管理されるため除外
+ */
+export const TripMutationSchema = TripSchema.omit({ id: true, urlId: true });
+export type TripMutation = z.infer<typeof TripMutationSchema>;
+
+/**
+ * 作成/更新リクエスト用のAPI層スキーマ
+ */
+const ApiTripMutationSchema = ApiTripSchema.omit({ id: true, url_id: true });
+export type ApiTripMutation = z.infer<typeof ApiTripMutationSchema>;
+
+/**
+ * アプリケーション層の作成/更新データをAPI送信用に変換するスキーマ
+ */
+export const AppRequestTripMutationSchema = TripMutationSchema.transform(
+  (appData): ApiTripMutation => ({
+    title: appData.title,
+    detail: appData.detail,
+    people_num: appData.peopleNum,
+  })
+);