redesign-existing-projects

[[design-foundation]] を土台にします — hallmark の 6 つの規律と slop-test は共通の「床」（交渉不可）です。このスキルはその上に flavour を加えるものであり、床を置き換えるものではありません。

再設計スキル

仕組み

既存のプロジェクトに適用する場合は、次の順序で進めます。

1. スキャン — コードベースを読みます。フレームワーク、スタイリング方法（Tailwind、vanilla CSS、styled-components など）、現在のデザインパターンを特定します。
2. 診断 — 以下の監査項目を確認します。見つかった汎用的なパターン、弱点、不足している状態をすべてリストアップします。
3. 修正 — 既存のスタックを活用しながら、的を絞って改善します。ゼロから書き直してはいけません。既存のものを改善してください。

デザイン監査

タイポグラフィ

以下の問題がないか確認し、修正します。

• ブラウザーのデフォルトフォント、またはどこでも Inter を使用している。 個性のあるフォントに置き換えます。おすすめの選択肢：Geist、Outfit、Cabinet Grotesk、Satoshi。エディトリアル系やクリエイティブ系のプロジェクトでは、見出しにセリフ体、本文にサンセリフ体を組み合わせます。
• 見出しの存在感が足りない。 ディスプレイテキストを大きくし、文字間隔を詰め、行間を狭めます。見出しには力強さと意図が感じられるようにします。
• 本文の幅が広すぎる。 段落の幅をおよそ 65 文字に制限します。読みやすさを高めるため、行間を広げます。
• Regular（400）と Bold（700）しか使っていない。 Medium（500）と SemiBold（600）を取り入れ、より繊細な階層を作ります。
• 数値にプロポーショナルフォントを使っている。 データの多いインターフェースでは、等幅フォントを使うか、font-variant-numeric: tabular-nums を有効にします。
• 文字間隔が調整されていない。 大きな見出しでは負のトラッキング、小型英大文字やラベルでは正のトラッキングを使います。
• 小見出しがどこでもすべて大文字になっている。 小文字のイタリック、文頭のみ大文字にする表記、小型英大文字などを試します。
• 文末に単語だけが取り残されている。 最終行に単語が 1 つだけ残らないようにします。text-wrap: balance または text-wrap: pretty で修正します。

色とサーフェス

• 背景に純粋な #000000 を使っている。 オフブラック、ダークチャコール、または色味のあるダークカラー（#0a0a0a、#121212、ダークネイビーなど）に置き換えます。
• アクセントカラーが鮮やかすぎる。 彩度を 80% 未満に保ちます。アクセントの彩度を落とし、叫ぶような印象ではなくニュートラルカラーに溶け込ませます。
• アクセントカラーが複数ある。 1 色に絞り、残りは取り除きます。多様さより一貫性を優先します。
• 暖色系と寒色系のグレーが混在している。 どちらか一方のグレー系統に統一します。すべてのグレーに一貫した色味（暖色系または寒色系のどちらか一方）を加えます。
• 紫や青の「AI グラデーション」風のデザインになっている。 これは最もよく見られる AI デザインの特徴です。ニュートラルなベースカラーと、よく考えられた単一のアクセントカラーに置き換えます。
• 汎用的な box-shadow を使っている。 背景の色味に合わせて影に色を付けます。不透明度の低い純粋な黒ではなく、色付きの背景には色付きの影（たとえば青い背景には濃い青の影）を使います。
• テクスチャのない平坦なデザインになっている。 背景に控えめなノイズ、粒子感、または細かなパターンを加えます。完全に平坦なベクターは無機質な印象になります。
• グラデーションが均一すぎる。 標準的な 45 度のグラデーションではなく、ラジアルグラデーション、ノイズのオーバーレイ、メッシュグラデーションを使って均一さを崩します。
• ライティングの方向に一貫性がない。 すべての影を確認し、光源が一貫した方向にあるように見せます。
• ライトモードのページに、唐突に暗いセクションがある（またはその逆）。 ほかは明るいページの中に暗い背景のセクションが 1 つだけあると、コピー＆ペーストのミスのように見えます。ページ全体をダークモードにするか、背景のトーンを一貫させます。コントラストが必要な場合は、クリーム色のページの途中で突然 #111 にするのではなく、同じパレットの少し濃い色を使います。
• 視覚的な奥行きのない、空疎で平坦なセクションがある。 無地の背景にテキストだけを置いたセクションは未完成に見えます。高品質な背景画像（ぼかし、オーバーレイ、またはマスクを適用したもの）、控えめなパターン、アンビエントグラデーションなどを加えます。実際のアセットがない場合は、https://picsum.photos/seed/{name}/1920/1080 のような信頼できるプレースホルダーのソースを使います。ヒーローセクション、機能紹介ブロック、CTA の背後に背景画像を配置して試します。不透明度を下げて全幅の写真を控えめに使うだけでも、存在感が増します。

レイアウト

• すべてを中央揃えにして対称にする。 余白に変化をつけたり、縦横比を混在させたり、中央揃えのコンテンツの上に左揃えの見出しを配置したりして、対称性を崩します。
• 機能紹介の行に、同じ幅のカードを3列並べる。 これは最もありふれたAIレイアウトです。2列のジグザグ配置、非対称グリッド、横スクロール、またはメイソンリーレイアウトに置き換えます。
• 全画面セクションに height: 100vh を使う。 モバイルブラウザーでのレイアウトの跳ねを防ぐため、min-height: 100dvh に置き換えます（iOS Safari のビューポートの不具合）。
• 複雑なフレックスボックスのパーセンテージ計算。 信頼性の高い複数列構造には、CSS Grid に置き換えます。
• 最大幅の制約がないコンテナ。 コンテンツが広い画面で端から端まで広がらないよう、左右の余白を自動調整したコンテナの幅制約（約1200～1440px）を追加します。
• フレックスボックスで高さを揃えたカード。 コンテンツの長さにばらつきがある場合は、高さを変えたり、メイソンリーレイアウトを使ったりします。
• すべてに同じ角丸を適用する。 内側の要素は角をより小さく、コンテナはより柔らかくするなど、角丸に変化をつけます。
• 重なりや奥行きがない。 要素が平面的に横並びになっています。負のマージンを使ってレイヤーと視覚的な奥行きを作ります。
• 上下のパディングが対称。 上下のパディングが常に同じです。見た目に合わせて調整します。下のパディングは、やや大きくする必要があることがよくあります。
• ダッシュボードには常に左サイドバーがある。 代わりに、上部ナビゲーション、フローティングコマンドメニュー、折りたたみ可能なパネルを試します。
• 余白が足りない。 余白を2倍にします。デザインにゆとりを持たせましょう。密度の高いレイアウトが適しているのはデータダッシュボードであり、マーケティングページではありません。
• 長いテキスト（ファイル名、タイトル、メールアドレス）が制限なく折り返され、同じ行の他の行より高くなるテーブルやリスト。 table-layout: fixed と実際の（プレースホルダーではない）データを使う場合に、特に目立ちます。コンパクトなページ分割テーブルが、スクロール量を何千ピクセルにも膨らませることがあります。white-space: nowrap; overflow: hidden; text-overflow: ellipsis; を指定して、セルを1行に収めます（table-layout: fixed で省略表示が機能しない場合は max-width: 0 を追加します）。情報そのものではなくレイアウトだけを保護できるよう、完全な値は title 属性またはツールチップに入れます。
• カードグループ内でボタンの下端が揃っていない。 カードごとにコンテンツの長さが違うと、CTAの高さが不規則になります。各カードのボタンを下端に固定し、その上のコンテンツの長さにかかわらず、きれいな水平線を作ります。
• 機能リストの開始位置が縦方向に揃っていない。 料金表や比較カードでは、すべての列で機能リストの開始位置を同じY座標にします。リストの上に一貫した余白を設けるか、タイトルや価格のブロックの高さを固定します。
• 横並びの要素で縦方向のリズムが一貫していない。 カード、列、パネルを横に並べるときは、タイトル、説明、価格、ボタンなどの共通要素をすべての項目で揃えます。ベースラインが揃っていないと、レイアウトが崩れて見えます。
• 数学的には整列していても、見た目には不自然な配置。 数値上の中央揃えが、目で見ても中央に見えるとは限りません。テキストの横のアイコン、円の中の再生ボタン、ボタン内のテキストなどは、見た目を整えるために1～2pxの微調整が必要なことがあります。

インタラクションと状態

• ボタンにホバー状態がありません。 ホバー時に背景色を変化させるか、わずかに拡大または移動させてください。
• アクティブ／押下時のフィードバックがありません。 クリック時に scale(0.98) または translateY(1px) を控えめに適用し、物理的なクリックを再現してください。
• トランジションが即時で、継続時間がゼロです。 すべてのインタラクティブ要素に滑らかなトランジション（200～300ms）を追加してください。
• フォーカスリングがありません。 キーボード操作時に視認できるフォーカスインジケーターを設定してください。これは任意ではなく、アクセシビリティの要件です。
• ローディング状態がありません。 汎用的な円形スピナーを、レイアウトの形状に合ったスケルトンローダーに置き換えてください。
• 空の状態がありません。 何も表示されないダッシュボードは、機会を逃しています。構成を整えた「利用開始」ビューをデザインしてください。
• エラー状態がありません。 フォームには明確なインラインエラーメッセージを追加してください。window.alert() は使用しないでください。
• リンク切れがあります。 # にリンクするボタンは、実際のリンク先に変更するか、見た目で無効だと分かるようにしてください。
• ナビゲーションに現在のページが表示されていません。 アクティブなナビゲーションリンクのスタイルを変え、ユーザーが現在のページを把握できるようにしてください。
• スクロール時に画面が瞬時に移動します。 アンカーをクリックすると瞬時に移動します。scroll-behavior: smooth を追加してください。
• top、left、width、height を使ったアニメーション。 GPU で高速化された滑らかなアニメーションを実現するため、transform と opacity に切り替えてください。

コンテンツ

• 「John Doe」や「Jane Smith」のようなありきたりな名前。 多様で、現実にいそうな名前を使ってください。
• 99.99%、50%、$100.00 のような不自然な切りのよい数値。 47.2%、$99.00、+1 (312) 847-1928 のような、自然で端数のあるデータを使ってください。
• 「Acme Corp」「Nexus」「SmartFlow」のような仮の企業名。 文脈に合った、信頼感のあるブランド名を考えてください。
• AI コピーライティングでよくある決まり文句。 「Elevate」「Seamless」「Unleash」「Next-Gen」「Game-changer」「Delve」「Tapestry」「In the world of...」は使わないでください。平易で具体的な言葉を使ってください。
• 成功メッセージの感嘆符。 感嘆符を削除してください。大げさにせず、自信のある表現にしてください。
• 「Oops!」というエラーメッセージ。 「接続に失敗しました。もう一度お試しください。」のように、率直に伝えてください。
• 受動態。 能動態を使ってください。「変更を保存できませんでした」とし、「変更は保存されませんでした」とはしないでください。
• ブログ記事の日付がすべて同じ。 日付をばらつかせて、実際の日付のように見せてください。
• 複数のユーザーに同じアバター画像を使用。 人物ごとに異なるアセットを使ってください。
• Lorem Ipsum。 プレースホルダーのラテン語テキストは使わないでください。実際に使える下書きの文章を書いてください。
• すべての見出しでタイトルケースを使用。 文頭のみを大文字にする形式を使ってください。

コンポーネントのパターン

• 汎用的なカードの見た目（枠線＋影＋白い背景）。 枠線をなくすか、背景色だけを使うか、余白だけで表現します。カードを使うのは、立体感によって階層を伝える場合に限ります。
• カードの左端に色付きのアクセントバー（border-left: 3-4px solid または ::before のストライプ）。 これは使い古された AI／Bootstrap の「アラート／コールアウト」らしさを感じさせます。ステータス表示のように見え、カードの角丸とぶつかる硬い縦線を加え、すべてのカードに繰り返し使うと、ページ全体がログビューアーのようになります。アクセントカラーやブランドカラーは、アバターやアイコン、小さなドットやチップ、見出しの色、または全体に広がる柔らかな色合いなど、それ自体になじむ場所に使います。側面の背骨のような線には使いません。すべてのカードに一律に適用する上部のアクセントバーも同様です。
• 塗りつぶしボタンが常に1つと、ゴーストボタンが1つ。 テキストリンクや第3のスタイルを加えて、視覚的なノイズを減らします。
• ピル型の「New」や「Beta」バッジ。 四角いバッジや旗、またはシンプルなテキストラベルを試します。
• アコーディオン形式の FAQ セクション。 横並びのリスト、検索可能なヘルプ、またはインラインの段階的開示を使います。
• ドット付きの3枚カード式カルーセルの推薦コメント。 石積みレイアウトの一覧、埋め込みのソーシャル投稿、または1つの引用を切り替えて表示する形式に置き換えます。
• 3つの塔が並ぶ料金表。 推奨プランは、単に高さを足すのではなく、色や強調で目立たせます。
• あらゆる操作にモーダルを使う。 簡単な操作には、ポップアップではなくインライン編集、スライドオーバーパネル、または展開可能なセクションを使います。
• アバターを円形だけにする。 汎用的な印象を抑えるため、スクアクルや角丸の四角形を試します。
• ライト／ダーク切り替えを常に太陽／月のスイッチにする。 ドロップダウンやシステム設定の検出を使うか、設定に組み込みます。
• 4列のフッターリンクの羅列。 シンプルにします。主要なナビゲーション経路と、法的に必要なリンクに絞ります。

アイコン

• Lucide または Feather のアイコンのみを使う。 これらは AI で「定番」とされるアイコンです。他との差別化には、Phosphor、Heroicons、またはカスタムのアイコンセットを使います。
• 「起動」にロケット、「セキュリティ」に盾を使う。 ありきたりな比喩は、より意外性のあるアイコン（稲妻、指紋、きらめき、金庫）に置き換えます。
• アイコンごとに線の太さが異なる。 すべてのアイコンを確認し、線の太さを統一します。
• ファビコンがない。 必ずブランドを反映したファビコンを含めます。
• ストック素材の「多様性に富んだチーム」の写真。 不自然なストック画像ではなく、実際のチーム写真、自然なスナップ写真、または一貫したイラストスタイルを使います。

コード品質

• div だらけの構成。 <nav>、<main>、<article>、<aside>、<section> などのセマンティック HTML を使います。
• インラインスタイルと CSS クラスの混在。 すべてのスタイルをプロジェクトのスタイリングシステムに移します。
• ピクセル単位の固定幅。 柔軟なレイアウトには、相対単位（%、rem、em、max-width）を使います。
• 画像に代替テキストがない。 スクリーンリーダー向けに画像の内容を説明します。意味のある画像で alt="" や alt="image" をそのまま使ってはいけません。
• 9999 のような恣意的な z-index 値。 テーマや変数に一貫した z-index のスケールを定義します。
• コメントアウトされた不要なコード。 リリース前にデバッグ用の残骸をすべて削除します。
• 存在しないインポート。 すべてのインポートが package.json またはプロジェクトの依存関係に実際に存在することを確認します。
• メタタグがない。 適切な <title>、description、og:image、ソーシャル共有用のメタタグを追加します。

戦略的な見落とし（AI が見落としがちな点）

• 法的情報へのリンクがない。 フッターにプライバシーポリシーと利用規約へのリンクを追加します。
• 「戻る」ナビゲーションがない。 ユーザーフローが行き止まりになります。すべてのページに戻る方法を用意します。
• カスタムの404ページがない。 親切でブランドに合った「ページが見つかりません」という画面をデザインします。
• フォームのバリデーションがない。 メールアドレス、必須項目、形式のチェックに対してクライアント側のバリデーションを追加します。
• 「コンテンツへスキップ」リンクがない。 キーボード利用者に不可欠です。非表示のスキップリンクを追加します。
• Cookie への同意がない。 法域の要件に該当する場合は、規則に準拠した同意バナーを追加します。

アップグレードのテクニック

プロジェクトをアップグレードする際は、汎用的なパターンを置き換えるために、効果の高い次のテクニックを取り入れます：

タイポグラフィの強化

• 可変フォントのアニメーション。 スクロールやホバーに合わせてウェイトや幅を補間し、生き生きとしたテキストを表現します。
• アウトラインから塗りつぶしへのトランジション。 テキストを輪郭線のみの状態から始め、スクロールで表示されたときや操作に応じて色で塗りつぶします。
• テキストマスクによる表示。 大きなタイポグラフィを窓のように使い、その背後に動画やアニメーション画像を見せます。

レイアウトの強化

• 崩したグリッド／非対称レイアウト。 要素を重ねたり、画面外にはみ出させたり、計算されたランダム性を持たせてずらしたりして、意図的にカラム構造を無視します。
• 余白の最大化。 ネガティブスペースを大胆に使い、単一の要素に注目を集めます。
• 視差効果のあるカードスタック。 スクロール中にセクションが固定され、互いの上に物理的に積み重なるようにします。
• 分割画面スクロール。 画面の左右の領域を反対方向にスライドさせます。

モーションの強化

• 慣性のあるスムーズスクロール。 スクロールをブラウザーのデフォルト動作から切り離し、重厚で映画のような感覚を生み出します。
• 時間差をつけた表示。 Y軸方向への移動と不透明度のフェードを組み合わせ、わずかな遅延をつけて要素を連鎖的に表示します。すべての要素を一度に表示してはいけません。
• スプリング物理。 すべてのインタラクティブ要素で、線形イージングをスプリングベースのモーションに置き換え、自然で重みのある動きを実現します。
• スクロール連動の表示。 スクロールの進行度に合わせて、拡大するマスク、ワイプ、描画されるSVGパスを使ってコンテンツを表示します。

表面表現の強化

• 本格的なグラスモーフィズム。 backdrop-filter: blur だけにとどめず、内側に1pxの境界線と控えめな内側の影を加え、エッジでの屈折を表現します。
• スポットライトボーダー。 カーソルの下で動的に光るカードの境界線です。
• 粒子感とノイズのオーバーレイ。 目立たないノイズを持つ固定の pointer-events-none オーバーレイを使い、デジタル特有の平坦さを和らげます。
• 色付きの影。 汎用的な黒ではなく、背景の色相を反映した影を使います。

修正の優先順位

視覚的なインパクトを最大化し、リスクを最小限に抑えるため、次の順に変更を適用してください。

1. フォントの変更 — 即座に最大の改善が得られ、リスクも最小です
2. カラーパレットの整理 — 色の衝突や彩度が高すぎる色を取り除きます
3. ホバー状態とアクティブ状態 — インターフェースに生き生きとした印象を与えます
4. レイアウトと間隔 — 適切なグリッド、最大幅、一貫したパディングを設定します
5. 汎用コンポーネントの置き換え — 使い古されたパターンを現代的な代替案に置き換えます
6. 読み込み状態、空の状態、エラー状態の追加 — 仕上がった印象を与えます
7. タイポグラフィのスケールと間隔の調整 — 上質な仕上がりにする最後のひと手間です

ルール

• 既存の技術スタックを使用してください。フレームワークやスタイリングライブラリを移行してはいけません。
• 既存の機能を壊してはいけません。変更のたびにテストしてください。
• 新しいライブラリをインポートする前に、プロジェクトの依存関係ファイルを確認してください。
• プロジェクトでTailwindを使用している場合、設定を変更する前にバージョン（v3かv4か）を確認してください。
• プロジェクトにフレームワークがない場合は、素のCSSを使用してください。
• レビューしやすく、対象を絞った変更にしてください。大規模な書き換えより、小規模で的を絞った改善を優先してください。

---

出力レポート

メインのスキルタスクをすべて完了したら、Wikiに下書きを作成してください。

手順

1. ファイル名を作成します：

• 形式：DDMMYY-<ten>.md
• DDMMYY = 今日の日付（例：2026年6月2日の場合は020626）
• <ten> = 実施内容を要約する2〜4語のケバブケース（例：landing-page-coteccons、brand-kit-fintech、ingest-auth-spec）

2. llmwiki/wiki/draft/uiux/DDMMYY-<ten>.md に書き込みます：

# DDMMYY-<ten>
**Type:** draft
**Status:** proposed
**Tags:** <skill-name>, output-report
**Proposed:** YYYY-MM-DD

## What
<One sentence — what this skill invocation produced or decided>

## Output
<Key artefacts, files created/modified, or decisions made>

## Files
| File | Action |
|------|--------|
| `path/to/file` | created / modified |

## Notes
- Invoked via: `/<skill-name>` skill

## Origin
- **Draft:** `wiki/draft/uiux/DDMMYY-<ten>.md`
- **Commit:** _(filled by verify-before-commit)_
- **Date promoted:** _(filled by verify-before-commit)_

3. Wikiのインデックスとログを更新します：

• llmwiki/wiki/index.md — 次の行を1行追記します：| [DDMMYY-<ten>](draft/uiux/DDMMYY-<ten>.md) | draft | YYYY-MM-DD |
• llmwiki/wiki/log.md — 次を追記します：## YYYY-MM-DD — <skill-name> — <ten>

このスキルで成果物も決定事項も一切生じない場合（例：/caveman-statsのような表示専用モード）のみ、スキップしてください。