feat: サイト全体のデザインリニューアル by newt239 · Pull Request #24 · newt239/newt239.dev

newt239 · 2026-02-15T18:23:12Z

Summary

サイト全体のデザインを刷新し、各ページ（about, articles, works, privacy）のレイアウト・スタイルを更新
画像カルーセル（ImageCarousel.vue）とライトボックス（ImageLightbox.vue）コンポーネントを新規追加
作品ページに mmdash と omiya-fes を追加し、既存作品のメタデータ（images フィールド等）を更新
画像圧縮スクリプト（scripts/compress-images.ts）を追加

変更の詳細

スタイリング: assets/styles/main.css のCSS変数・グローバルスタイルを更新
コンポーネント: Header, Footer, Profile, Timeline, WorkItem, ArticleItem 等の既存コンポーネントをリデザイン
コンテンツスキーマ: content.config.ts のスキーマを変更（images フィールドの構造変更等）
ページ: 各ページでレイアウト・デザインを大幅に改善
依存関係: パッケージの更新（bun.lock の変更）

Test plan

bun dev でローカル開発サーバーが正常に起動すること
各ページ（/, /about, /works, /articles, /privacy）が正しく表示されること
作品詳細ページで画像カルーセル・ライトボックスが動作すること
レスポンシブデザインが各画面サイズで崩れないこと
bun run generate で静的サイト生成が成功すること

🤖 Generated with Claude Code

cloudflare-workers-and-pages · 2026-02-15T18:23:18Z

Deploying newt239 with Cloudflare Pages

Latest commit:	`80db332`
Status:	✅ Deploy successful!
Preview URL:	https://c2fadded.newt239-dev.pages.dev
Branch Preview URL:	https://feat-new-design.newt239-dev.pages.dev

View logs

Cloudflare Pages のビルドで eslint@10.0.0 と @nuxt/eslint@1.14.0 の peer dependency 競合が発生していたため、eslint@^10.0.0 に対応した @nuxt/eslint@1.15.1 にアップグレード。 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Copilot

Pull request overview

サイト全体のデザイン刷新に合わせて、作品・記事一覧の操作性向上（フィルタ/ソート）と、作品詳細の画像体験（カルーセル＋ライトボックス）を追加し、Nuxt Content の works スキーマを images[] ベースへ移行する PR です。

Changes:

works スキーマを thumbnail/alt から images: [{src, alt}] に変更し、既存作品メタデータを更新＋新規作品（mmdash/omiya-fes）を追加
作品詳細に ImageCarousel.vue / ImageLightbox.vue を追加し、OG/Twitter 画像参照も images[0] へ変更
画像圧縮スクリプト（sharp）と npm script を追加

Reviewed changes

Copilot reviewed 37 out of 42 changed files in this pull request and generated 11 comments.

Show a summary per file

File	Description
scripts/compress-images.ts	`public/images` を WebP 変換するユーティリティ追加
public/images/mmdash.webp	新規作品用画像追加
pages/works/index.vue	作品一覧におすすめフィルタ・並び順切替・空状態表示を追加
pages/works/[...slug].vue	作品詳細をカルーセル/ライトボックス対応、OG 画像を `images[0]` に変更
pages/privacy.vue	レイアウト再構成（セクションカード化）
pages/articles/index.vue	記事一覧にサイト別フィルタ・並び順切替・空状態表示を追加
pages/about.vue	About ページをセクション化＋リンクカード化
package.json	sharp/@types/node 追加、画像圧縮 script 追加、@nuxt/eslint 更新
content/works/sit-bus.md	`images[]` へ移行
content/works/ship-notify.md	`images[]` へ移行
content/works/sh309cafe.md	`images[]` へ移行
content/works/score-watcher.md	`images[]` へ移行（alt 文面も短縮）
content/works/roomkeeper.md	`images[]` へ移行
content/works/quiz-flasher.md	`images[]` へ移行
content/works/portfolio.md	`images[]` へ移行
content/works/omiya-fes.md	新規作品追加（PNG 画像参照含む）
content/works/mojimachi.md	`images[]` へ移行
content/works/mmdash.md	新規作品追加（複数画像）
content/works/lounge-books.md	`images[]` へ移行
content/works/look-inside-view.md	`images[]` へ移行
content/works/local-font-emulator.md	`images[]` へ移行
content/works/ginga-ui.md	`images[]` へ移行
content/works/gateway.md	`images[]` へ移行
content.config.ts	works スキーマを `images[]` 必須＋ `order/github` 任意に変更
components/WorkItem.vue	works カードを `images[0]` サムネ前提へ更新
components/Timeline.vue	タイムライン UI を再設計（リンク/非リンク統合）
components/ThemeChanger.vue	テーマ生成 API に requiredVariables を追加、ボタン/UI 更新
components/Profile.vue	プロフィールカード/UI 更新（導線文言変更）
components/MyTopTrackList.vue	トラック一覧 UI をカードグリッド化
components/LatestArticleList.vue	記事グリッドの列幅/配色を新トークンへ合わせ込み
components/ImageLightbox.vue	新規：ライトボックス（ズーム/パン/キーボード操作）
components/ImageCarousel.vue	新規：カルーセル（キーボード/タッチ操作）
components/Header.vue	ヘッダー配色・余白・ロゴサイズ更新
components/Footer.vue	フッターをサイトマップ形式へ刷新
components/FeaturedWorkList.vue	works グリッドの列幅/配色を新トークンへ合わせ込み
components/ArticleItem.vue	記事カード UI を刷新（time 要素導入など）
assets/styles/main.css	CSS 変数を新トークン体系へ刷新
AGENTS.md	works スキーマ説明を `images[]` 前提に更新

Comments suppressed due to low confidence (1)

pages/works/[...slug].vue:13

404 相当の SEO タイトルが Not Founded になっています。一般的には Not Found なので修正したほうがよいです（OG/Twitter 含む）。

Copilot · 2026-02-15T18:58:07Z

pages/about.vue

+            <a href="https://bento.me/newt" target="_blank" class="link-card">
+              Bento
+              <IconChevronRight :size="16" />
+            </a>
+            <a href="https://annict.com/@newt" target="_blank" class="link-card">
+              Annict
+              <IconChevronRight :size="16" />
+            </a>


target="_blank" の外部リンク（Bento/Annict）に rel="noopener noreferrer" がありません。外部リンクは rel="noopener noreferrer" を付けてください。

Copilot · 2026-02-15T18:58:08Z

components/Footer.vue

+              <a href="https://twitter.com/newt239" target="_blank">
+                <IconBrandTwitter :size="18" />
+                Twitter
+              </a>
+            </li>
+            <li>
+              <a href="https://github.com/newt239" target="_blank">


target="_blank" の外部リンクに rel="noopener noreferrer" がありません。Footer から外部サイトへ遷移するリンクには rel を付けてください。

Suggested change

<a href="https://twitter.com/newt239" target="_blank">

<IconBrandTwitter :size="18" />

Twitter

</a>

</li>

<li>

<a href="https://github.com/newt239" target="_blank">

<a href="https://twitter.com/newt239" target="_blank" rel="noopener noreferrer">

<IconBrandTwitter :size="18" />

Twitter

</a>

</li>

<li>

<a href="https://github.com/newt239" target="_blank" rel="noopener noreferrer">

Copilot · 2026-02-15T18:58:08Z

assets/styles/main.css

 .sub {
  font-size: 50%;
-  color: rgb(var(--color-text-secondary));
+  color: rgb(var(--text-secondary));


.sub の色指定で --text-secondary を参照していますが、:root では定義されていないため CSS 変数が解決できず意図しない色になります。--text-muted など既存トークンに合わせて修正してください。

Suggested change

color: rgb(var(--text-secondary));

color: rgb(var(--text-muted));

Copilot · 2026-02-15T18:58:08Z

components/ImageCarousel.vue

+function goTo(index: number) {
+  if (isTransitioning.value) return;
+  isTransitioning.value = true;
+  currentIndex.value = ((index % props.images.length) + props.images.length) % props.images.length;
+}
+
+function prev() {
+  goTo(currentIndex.value - 1);
+}
+
+function next() {
+  goTo(currentIndex.value + 1);
+}
+
+function onTransitionEnd() {
+  isTransitioning.value = false;
+}


prefers-reduced-motion: reduce で .carousel-track の transition が none になると transitionend が発火せず、isTransitioning が true のまま固定されて以後の操作が無効になります。Reduced motion 時は isTransitioning を使わない/即座に false に戻す、もしくは requestAnimationFrame/タイマーで解除する等の対応を入れてください。

Copilot · 2026-02-15T18:58:09Z

pages/works/index.vue

+const route = useRoute();
+const router = useRouter();
+
+const sortAsc = ref(route.query.dir === "asc");
+const featuredOnly = ref(route.query.featured === "1");
+


sortAsc / featuredOnly を route.query から初期化していますが、戻る/進む等でクエリだけが変わった場合に state が追従せず UI と URL が不整合になります。watch(() => route.query, ...) で ref を同期するか、クエリを source にした computed にして一貫性を保ってください。

Copilot · 2026-02-15T18:58:09Z

components/ArticleItem.vue

 <template>
-  <a :href="`${props.url}`" target="_blank" class="article-item">
-    <div class="article-item-body">
+  <a :href="`${props.url}`" target="_blank" class="article-card">


target="_blank" の外部リンクに rel="noopener noreferrer" がありません（記事リンク）。外部リンクには rel を付けてください。

Suggested change

<a :href="`${props.url}`" target="_blank" class="article-card">

<a :href="`${props.url}`" target="_blank" rel="noopener noreferrer" class="article-card">

Copilot · 2026-02-15T18:58:09Z

pages/works/[...slug].vue

+                <dt>GitHub</dt>
+                <dd>
+                  <a :href="`https://github.com/${data.github}`" target="_blank">{{ data.github }}</a>
+                </dd>


GitHub への外部リンクが target="_blank" ですが rel="noopener noreferrer" がありません。外部リンクには rel を付与してください。

Copilot · 2026-02-15T18:58:10Z

pages/articles/index.vue

+const route = useRoute();
+const router = useRouter();
+
+function parseSitesFromQuery(): Set<SiteName> {
+  const raw = route.query.sites;
+  if (!raw) return new Set();
+  const arr = (typeof raw === "string" ? raw : raw[0] || "").split(",").filter(Boolean);
+  return new Set(arr as SiteName[]);
+}
+
+const selectedSites = ref<Set<SiteName>>(parseSitesFromQuery());
+const sortAsc = ref(route.query.dir === "asc");
+
+function updateQuery() {
+  const query: Record<string, string> = {};
+  if (selectedSites.value.size > 0) query.sites = [...selectedSites.value].join(",");
+  if (sortAsc.value) query.dir = "asc";
+  router.replace({ query });
+}


selectedSites / sortAsc を route.query から初期化していますが、戻る/進む等でクエリが変わったときに state が追従せず表示がズレます。watch(() => route.query, ...) で同期するか、クエリを source にした computed/useRouteQuery 相当のパターンに寄せてください。

Copilot · 2026-02-15T18:58:10Z

components/WorkItem.vue

-        {{ props.work.description }}
-      </p>
+  <NuxtLink :to="`/works/${slug}`" class="work-card">
+    <NuxtImg class="work-card-thumbnail" :src="`images/${thumbnail?.src}`" :alt="thumbnail?.alt"


サムネイルの src が images/... になっており、現在のパスに対する相対 URL として解釈される可能性があります（例: /works/images/...）。/images/... のようにルート相対にして 404 を避けてください。

Suggested change

<NuxtImg class="work-card-thumbnail" :src="`images/${thumbnail?.src}`" :alt="thumbnail?.alt"

<NuxtImg class="work-card-thumbnail" :src="`/images/${thumbnail?.src}`" :alt="thumbnail?.alt"

Copilot · 2026-02-15T18:58:10Z

pages/about.vue

+                <ul>
+                  <li>
+                    <a href="https://discord.gg/rct5sx6rbZ" target="_blank">https://discord.gg/rct5sx6rbZ</a>
+                  </li>


target="_blank" の外部リンクに rel="noopener noreferrer" が無く、window.opener 経由のタブナビング等のリスクがあります。外部リンクには rel="noopener noreferrer" を付けてください。

- 外部リンクに rel="noopener noreferrer" を追加 (about, Footer, ArticleItem, MyTopTrackList, works/[...slug]) - CSS変数 --text-secondary を既存の --text-muted に修正 - ImageCarousel で prefers-reduced-motion 時に isTransitioning が固定される問題を修正 - works/index と articles/index で route.query の変更を watch で同期 - WorkItem のサムネイル src をルート相対パスに修正 - 404 ページの "Not Founded" を "Not Found" に修正 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

newt239 added 4 commits February 16, 2026 01:18

chore: add script of compressing images

672db20

feat: introduce new design

f1e8f41

feat: update works

c5527e5

feat: add omiya fes work and improve profile background

7fe15d8

newt239 self-assigned this Feb 15, 2026

newt239 and others added 2 commits February 16, 2026 03:32

fix: theme generation

fb4ed8f

newt239 requested a review from Copilot February 15, 2026 18:51

Copilot started reviewing on behalf of newt239 February 15, 2026 18:51 View session

Copilot AI reviewed Feb 15, 2026

View reviewed changes

newt239 merged commit e5ce0e8 into main Feb 15, 2026
3 checks passed

newt239 deleted the feat/new-design branch February 15, 2026 19:05

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: サイト全体のデザインリニューアル#24

feat: サイト全体のデザインリニューアル#24
newt239 merged 7 commits intomainfrom
feat/new-design

newt239 commented Feb 15, 2026

Uh oh!

cloudflare-workers-and-pages bot commented Feb 15, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Feb 15, 2026

Uh oh!

Copilot AI Feb 15, 2026

Uh oh!

Copilot AI Feb 15, 2026

Uh oh!

Copilot AI Feb 15, 2026

Uh oh!

Copilot AI Feb 15, 2026

Uh oh!

Copilot AI Feb 15, 2026

Uh oh!

Copilot AI Feb 15, 2026

Uh oh!

Copilot AI Feb 15, 2026

Uh oh!

Copilot AI Feb 15, 2026

Uh oh!

Copilot AI Feb 15, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

	color: rgb(var(--text-secondary));
	color: rgb(var(--text-muted));

	<a :href="`${props.url}`" target="_blank" class="article-card">
	<a :href="`${props.url}`" target="_blank" rel="noopener noreferrer" class="article-card">

	<NuxtImg class="work-card-thumbnail" :src="`images/${thumbnail?.src}`" :alt="thumbnail?.alt"
	<NuxtImg class="work-card-thumbnail" :src="`/images/${thumbnail?.src}`" :alt="thumbnail?.alt"

Conversation

newt239 commented Feb 15, 2026

Summary

変更の詳細

Test plan

Uh oh!

cloudflare-workers-and-pages bot commented Feb 15, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Deploying newt239 with Cloudflare Pages

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Feb 15, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 15, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 15, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 15, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 15, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 15, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 15, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 15, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 15, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 15, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

cloudflare-workers-and-pages bot commented Feb 15, 2026 •

edited

Loading