UI/UX改善

アプリの見た目をプロっぽく改善する方法を学びます。

Skillsとは

Claude Codeには、UIデザインを改善するための「Skills」機能があります。

使い方

/ui-ux-pro-max このアプリのUIを改善して

このコマンドで、プロのデザイナーが作ったようなUIに改善できます。

デザイン改善のパターン

1. カラーパレットを変更

メインカラーを #3B82F6（青）にして、全体的なカラースキームを統一して

人気の配色

名前	メイン	サブ	用途
クール系	#3B82F6	#1E40AF	ビジネス、ツール
ウォーム系	#F59E0B	#D97706	親しみやすい
グリーン系	#10B981	#059669	環境、健康
ダーク	#1F2937	#111827	スタイリッシュ

2. 角丸とシャドウ

カードに角丸（12px）とシャドウを追加して、浮いているように見せて

3. タイポグラフィ

見出しのフォントサイズを大きくして、本文との差をつけて
行間を1.6にして読みやすくして

4. 余白の調整

要素間の余白を広げて、もっとゆとりのあるデザインにして

5. アニメーション

ボタンにホバーエフェクトを追加して
カードの追加・削除時にフェードアニメーションをつけて

改善例

Before / After

指示例

このアプリのUIを以下の方針で改善して：

1. 背景をうっすらグラデーションに
2. カードに角丸（16px）とシャドウ
3. ボタンにホバーエフェクト
4. 全体的な余白を広げる
5. フォントサイズのメリハリをつける

スタイル別の指示

ミニマリスト

シンプルでミニマルなデザインにして。
白ベースで、必要最小限の要素のみ表示。

ダークモード

ダークモードにして。
背景は #1F2937、テキストは #F9FAFB。
アクセントカラーは #3B82F6。

グラスモーフィズム

グラスモーフィズムスタイルにして。
半透明の背景にぼかしを入れて、ガラスのような質感に。

ネオンスタイル

ダーク背景にネオン風のアクセントをつけて。
ボタンや重要な要素に光彩エフェクト。

チェックリスト

改善後に確認：

• [ ] 見た目が統一されている
• [ ] 文字が読みやすい
• [ ] ボタンがクリックできそうに見える
• [ ] 余白が適切
• [ ] スマホでも見やすい

---

次は機能追加もチェック！