🤖

個人開発でClaude Codeを使ってUIリファクタリングしてみた

2025/06/22に公開

はじめに

個人店向けECサイトを開発中で、UIの改善を進める中で『Claude Codeにリファクタリングを任せたらどうなるだろう？』という疑問が湧きました。

最近話題のClaude Codeがどれくらいすごいのかを試す意味でも使ってみようと思い導入しました。

Claude Codeとは

Claude Codeは、Anthropic社が提供するコマンドライン上で動作するAIアシスタントです。開発環境から直接Claudeにアクセスできるため、コードの修正やリファクタリングがスムーズに進められます。

https://claude.ai/code

コード生成や分析、UI改善など幅広い開発タスクに対応しており、自然言語での指示を通じて様々な作業を自動化できます。WebブラウザでのClaude利用とは異なり、プロジェクトファイルに直接アクセスして作業を行えるのが特徴です。

技術スタック

今回のプロジェクトで使用した技術：

フロントエンド: Vue 3 + Nuxt 3
UIフレームワーク: Vuetify 3
言語: TypeScript
スタイリング: SCSS + CSS Variables

Claude Codeで実際にやってみた

最初に投げたプロンプト

最初は比較的シンプルなプロンプトから始めました：

ホームページのUIリファクタリングについて、
お問い合わせ画面(/contact)まで修正完了してると思うんだけど、
次に、カテゴリ詳細画面(/category/id)のUI修正もお願いしたい。

レスポンシブ対応の課題発見

最初の修正後、問題が発生したため、再度修正をお願いしました：

概ねOKだけど、PC画面では縦並びだと違和感なのと、
スマホ画面だとカードの画像のサイズが合っていなくて商品が隠れて見えてなさそう

Claude Codeの対応：

PC画面を3列の横並びに変更
スマホ画面の画像サイズを調整（200px → 160px）

// PC画面を3列の横並びに変更
&__grid {
  grid-template-columns: repeat(3, 1fr);
  gap: calc(var(--spacing-2xl) * 1.5);
  max-width: 1200px;
}

// スマホ画面の画像サイズ調整
&__item {
  &--image img {
    height: 160px; // 200px → 160px
  }
}

細かいUI調整

さらに詳細な調整をお願いしました：

めちゃめちゃいい。画像がヘッダーとくっついてるから、全体要素の上部分に少し余白が欲しいのと、
背景をぼかした要素の上に文字を置いているのはめちゃめちゃいいんだけど、
一枚目の写真だと商品かぶっちゃって見えないんだよね

Claude Codeの対応：

カルーセルに上部余白を追加
テキストの位置を商品と重ならない位置に調整

.v-carousel {
  margin: var(--spacing-2xl) var(--spacing-2xl) 0; // 上部余白追加
}

&__textDiv {
  position: absolute;
  top: var(--spacing-2xl);    // bottom → top
  right: var(--spacing-2xl);  // left → right
  max-width: 500px;           // 600px → 500px
}

デザイン参考サイトの活用

参考にしたいデザインがあったので、直接URLを伝えました：

このページのスマホ画面でのサイドバーみたいにして欲しい
https://xxx.com

Claude Codeの対応：
参考サイトのシンプルで美しいデザインを汲み取って実装

<v-navigation-drawer class="sidebar-menu">
  <div class="sidebar-menu__content">
    <nav class="sidebar-menu__nav">
      <a href="#" class="sidebar-menu__item">
        <span class="sidebar-menu__item--en">Top</span>
        <span class="sidebar-menu__item--ja">トップ</span>
      </a>
    </nav>
  </div>
</v-navigation-drawer>

アニメーション効果の追加

最後に、よりリッチなUXを求めて：

PC画面のヘッダーもUI微調整お願いしたい。
ホバーした時のグレー背景の範囲とか、
ホバーしたら下線が左から右に表示されたりみたいなアニメーションが欲しいかも

Claude Codeの対応：

.header_menuDiv .v-list-item {
  // 背景のホバー効果
  &::before {
    content: '';
    position: absolute;
    background: var(--background-accent);
    opacity: 0;
    transition: var(--transition-smooth);
  }
  
  // 左から右への下線アニメーション
  &::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--accent-primary);
    transition: width 0.3s ease-out;
  }
  
  &:hover::after {
    width: 100%;
  }
}

Claude Codeの特徴で驚いたこと

TODOリスト機能が秀逸
プロンプトを投げると、Claude Codeが自分でやるべきことをTODOリスト化してから作業を行っていました。内容も明確で、事前に何をやっていくのかが分かるので安心感がありました。
自発的な改善
UI改善だけでなく、コード内でタイポしている箇所も自分から見つけて修正してくれました。指示していないのに気づいて直してくれるのは本当にすごいと思いました。

効果と課題

良かった点

迅速な対応: 簡単なUI修正やロジック修正については、本当にすぐに対応
コード品質: 生成されるコードの質も決して悪くない
学習効果: 知らなかったCSS技術や手法を教えてもらえる

学んだこと

正直なところ、ジュニアエンジニアがやるような簡単なUI修正・リファクタリングは、かなりの精度で自動化できると感じました。

ただし、最大の学びは「プロンプトの投げ方次第で効果は絶大に変わる」ということ。

効果的なプロンプトの書き方

具体的な問題を指摘する
- ❌ 「なんか変です」
- ✅ 「スマホ画面だとカードの画像のサイズが合っていなくて商品が隠れて見えてない」
参考資料を提示する
- URLや画像を見せることで、目指すデザインを共有できる
段階的に進める
- 一度に全部を修正依頼するより、一つずつ確認しながら進める方が効率的

今後の改善点

次回はCLAUDE.mdで具体的なルールやガイドラインを明示して、より精度の高いリファクタリングを試してみたいと思っています。

まとめ

Claude Codeを使ったUI改善体験から得られた学び：

プロンプトが具体的であるほど、精度は上がる
指示していない改善にも気づいて対応してくれるのは非常に助かる
基礎知識がないと、AIの出力の良し悪しが判断できない
開発者として「AIを使いこなす」スキルが今後ますます重要になる

もちろん、設計力や文脈理解などAIにできない部分も多くありますが、初期実装や調整作業は今後どんどん自動化が進みそうです。

最後まで読んでいただきありがとうございました。

はじめに

Claude Codeとは

技術スタック

Claude Codeで実際にやってみた

最初に投げたプロンプト

レスポンシブ対応の課題発見

細かいUI調整

デザイン参考サイトの活用

アニメーション効果の追加

Claude Codeの特徴で驚いたこと

効果と課題

良かった点

学んだこと

効果的なプロンプトの書き方

今後の改善点

まとめ

Discussion