redesign-existing-projects

既存プロジェクトの再設計

このスキルは診断を行います。既存のインターフェースの問題を特定し、その場で修正します。

デザインの価値基準

具体的な値（フォント、背景色、間隔、角丸、アイコンセット、モーションのタイミング）は、すべてこのファイルの末尾にあるデザイン値セクションに記載されています。このセクションが唯一の信頼できる情報源です。以下の監査では確認すべき点を示し、デザイン値では何に置き換えるかを示します。

デザイン値にないフォント、16進数カラー値、間隔の数値、角丸、イージング曲線を独自に設定しないでください。該当する状況が記載されていない場合は、推測せずに確認してください。

このスキルを別のデザインシステムに適応させるには、デザイン値セクションだけを編集してください。監査全体に自動的に反映されます。

仕組み

1. スキャン — コードベースを読みます。フレームワーク、スタイル設定方法（Tailwind、vanilla CSS、styled-components、CSS modules）、現在のデザインパターンを特定します。
2. 診断 — 以下の監査をすべて実施します。見つかった汎用的なパターン、弱点、欠けている状態をすべて列挙します。修正前に報告してください。
3. 修正 — 既存のスタック内で、修正優先度の順に対象を絞って改善します。ゼロから書き直さず、現状を改善してください。

デザイン監査

タイポグラフィ

• ブラウザーのデフォルトフォント、または Inter／Roboto／Arial／Open Sans／Helvetica。 デザイン値セクションで承認されているフォントに置き換えてください。
• 1つのサイトで2種類の書体を使用している。 プロジェクトの要件で明示的に2種類が求められている場合を除き、1種類に統一してください。
• どこかで斜体を使用している。 斜体を取り除き、代わりにウェイト、サイズ、色で強調してください。
• 極太のウェイト（800、900、black）。 semiboldまたはboldを上限にしてください。
• Regular（400）とBold（700）しか使っていない。 より細かな階層を設けるため、Medium（500）とSemiBold（600）を取り入れてください。
• 見出しに存在感がない。 ディスプレイサイズを大きくし、文字間隔を詰めて、見出しに重厚感と意図が感じられるようにしてください。トラッキングの調整は、タイプスケールで既に設定されている行の高さの範囲内に限ってください。
• 本文の幅が広すぎる。 段落の行長をおよそ65文字に制限してください。
• 比例フォントの数字。 データ量の多いインターフェースでは、font-variant-numeric: tabular-numsを有効にしてください。
• 文字間隔の調整が不足している。 大きな見出しでは文字間隔を詰め、小さなラベルや大文字表記では広げてください。
• 小見出しがすべて大文字。 文頭のみ大文字にする表記またはスモールキャピタルに変更してください。斜体には変更しないでください。
• 孤立した単語。 最終行に単語が1つだけ残っている状態です。見出しにはtext-wrap: balance、本文にはtext-wrap: prettyを適用して修正してください。
• 本文中のハイフン。 見出し、本文、ラベルに-を使わないでください。表現を書き換えてください。
• 任意の値やスケール外のフォントサイズ。 すべてのサイズをTailwindのタイプスケールに合わせてください。text-[19px]、font-size: 22px、1.4remをそのまま残さないでください。サイズがスケールの段階に一致しない場合は、最も近い下の段階に合わせ、それに対応する行の高さを適用してください。上記2つの修正で行の高さを個別に設定することと併用しないでください。ルール同士が干渉しないよう、対応する段階の値の範囲内でのみ調整してください。
• スケール外の文字サイズを使ったボタン。 メインボタンはtext-baseのsemibold、ヘッダーボタンはtext-smのsemiboldにしてください。

色とサーフェス

• 承認済みパレット以外の背景色。 すべての暗いサーフェスを承認済みの暗色に合わせます。#0a0a0a、#121212、色味のあるネイビーで代用しないでください。
• あらゆる種類のグラデーション背景。 背景はフラットにします。線形、放射状、メッシュの背景グラデーションはすべて削除してください。許可されるグラデーションは、ヒーロー見出しのテキストのみです。
• テキスト色がフラットなヒーロー見出し。 現在のテーマに合わせて、承認済みの左から右へのテキストグラデーションを適用します。
• 紫と青の「AIグラデーション」風デザイン。 最もよくあるAIらしさの特徴です。ニュートラルな単色ベースと、吟味したアクセントカラー1色に置き換えます。
• 彩度が高すぎるアクセントカラー。 彩度を80％未満に抑え、アクセントカラーがニュートラルカラーになじむようにします。強く主張しすぎないようにしてください。
• アクセントカラーが複数ある。 1色を選び、残りは削除します。
• 暖色系と寒色系のグレーを混在させる。 グレーの系統を1つに決め、一貫した色味にします。
• 汎用的なbox-shadow。 不透明度を低くした純粋な黒ではなく、背景色に近い色味で影を付けます。
• テクスチャがまったくないフラットなサーフェス。 控えめなノイズや粒子のオーバーレイを加えます。フラットさの解消にグラデーションを使わないでください。
• 照明方向に一貫性がない。 すべての影を確認し、光源が1つに見えるようにします。
• 明るいページ内に唐突に暗いセクションがある、またはその逆。 コピペのミスに見えます。背景のトーンを統一するか、クリーム色のページの途中で#111に飛ぶのではなく、隣接する承認済みの色合いに切り替えます。
• 奥行きのない空のセクション。 高品質な背景画像をマスクまたは低不透明度で重ねるか、控えめなパターンを加えます。実際のアセットがない場合は、https://picsum.photos/seed/{name}/1920/1080を使います。これをアンビエントグラデーションで解決しないでください。

レイアウト

• すべてが中央揃えで左右対称。 マージンをずらす、アスペクト比を混在させる、中央揃えのコンテンツの上に左揃えのヘッダーを置くなどして、対称性を崩します。
• 特徴を並べた行に、同じ幅のカードが3列ある。 これは最もありふれたAIレイアウトです。メリットはコンテンツとして3〜5個が適切ですが、レイアウトは2列のジグザグ、非対称グリッド、横スクロール、またはメイソンリーにします。
• 全画面セクションでheight: 100vhを使用している。 iOS Safariでのレイアウトの跳ねを防ぐため、min-height: 100dvhに置き換えます。
• 複雑なFlexboxの割合計算。 CSS Gridに置き換えます。
• 最大幅のコンテナがない。 自動マージンを使い、幅を約1200〜1440pxに制限します。ヒーロー見出しとサブ見出しの幅は680px以下にします。
• Flexboxでカードの高さを無理に揃えている。 高さに変化を持たせるか、コンテンツの長さにばらつきがある場合はメイソンリーを使います。
• 感覚で決めた角丸。 すべての角丸はTailwindのスケールから選びます。図形が別の図形の内側にあり、その間隔が32px未満の場合、内側の角丸は外側の角丸から間隔を引いた値にします。ただし、結果が2を超える場合に限ります。
• その場しのぎで決めた余白の値。 すべてのマージン、パディング、間隔を承認済みのスペーシングスケールに合わせます。
• 重なりや奥行きがない。 要素が横に並ぶだけで平坦になっています。負のマージンを使って重ねます。
• 上下対称のパディング。 見た目に合わせて調整します。通常、下側のパディングは少し大きくします。
• ダッシュボードに必ず左サイドバーがある。 上部ナビゲーション、フローティングコマンドメニュー、または折りたたみ可能なパネルを試します。
• 余白が足りない。 スペーシングスケールを1段階上げ、ゆとりを持たせます。密度の高いレイアウトはデータダッシュボードには適していますが、マーケティングページには向きません。
• カードグループ内でボタンの下端が揃っていない。 CTAを各カードの下端に固定し、すっきりとした水平線上に揃えます。
• 特徴リストの開始位置が縦方向にずれている。 料金表や比較表では、各列のリストを同じY位置から開始します。タイトルと価格のブロックに固定の高さを設定します。
• 横に並ぶ要素の縦方向のリズムが一貫していない。 すべての項目で、タイトル、説明、価格、ボタンを揃えます。ベースラインがずれていると、壊れているように見えます。
• 数学的には揃っていても、見た目にはずれている。 テキストの横にあるアイコン、円の中の再生ボタン、ボタン内のテキストなどは、見た目を整えるために1〜2ピクセルの補正が必要なことがあります。

インタラクションと状態

• デフォルトのイージングカーブ。 ease、linear、ease-in-out は動きを機械的に感じさせます。Design Values のベースカーブに切り替え、移動には duration-500、色や不透明度には duration-300 を使い、200ms 未満にはしないでください。
• スクロールしても何も起きないコンテンツ。 セクションがビューポートに入ったとき、600〜800ms かけて一度だけ、少し上昇しながらフェードインするようにしてください。
• スクロールリスナーでアニメーションを制御。 window.addEventListener('scroll') を IntersectionObserver または Framer Motion の whileInView に置き換えてください。フレームごとに実行されるリスナーは、モバイルで実際にパフォーマンスを低下させます。
• 上端にぴったり固定されたナビゲーションバー。 コンテンツに合わせたサイズにし、端から少し浮かせて、半透明のぼかし面の上に配置してください。
• 瞬時に切り替わるメニューアイコン。 開いた状態と閉じた状態の切り替えを、ベースカーブでアニメーションさせてください。
• 窮屈なモバイルドロップダウン。 高さいっぱいのパネルを使い、リンクを読み順に沿って順番に表示してください（約60ms間隔、全体で400ms未満）。
• モーションの軽減設定に未対応。 prefers-reduced-motion が指定されている場合は、動きを通常のフェードに置き換えてください。
• ボタンにホバー状態がない。 背景色の変化、わずかな拡大、または移動を加えてください。
• アクティブ時や押下時のフィードバックがない。 押下時に scale(0.98) または translateY(1px) を加えてください。
• フォーカスリングがない。 視認できるフォーカスインジケーターは、スタイル上の選択肢ではなく、アクセシビリティ要件です。
• 読み込み状態がない。 円形のスピナーを、実際のレイアウトに沿ったスケルトンローダーに置き換えてください。
• 空の状態がない。 空白のパネルではなく、まとまりのある「利用開始」画面をデザインしてください。
• エラー状態がない。 フォーム内に具体的なエラーを表示してください。window.alert() は使わないでください。
• リンク切れ。 # を指すボタンは、リンク先を設定するか、視覚的に無効化してください。
• ナビゲーションに現在のページを示す表示がない。 アクティブなリンクを、ほかと区別してスタイル設定してください。
• スクロール時に位置が飛ぶ。 アンカーナビゲーションには scroll-behavior: smooth を追加してください。
• top、left、width、height のアニメーション。 GPU アクセラレーションのため、transform と opacity に切り替えてください。

コンテンツ

• 仮の人物。 ありふれた名前や同じ顔の繰り返しは、作り物のように感じられます。対象ユーザーに合う、具体的なフルネームを使い、一人ひとり異なる顔写真を使ってください。
• 不自然にキリのよい数字。 実際の指標には小数や端数があり、実際の価格にはリアルな価格設定が反映されます。リスト内の日付にも変化をつけてください。
• ありきたりなブランド名。 顧客のロゴや会社名は、その製品の業界にふさわしいものにしてください。
• 中身のないマーケティング用語。 「革新的」「大幅に強化」「最先端」「手間いらず」「ワークフローを変革」「次のレベルへ」「力を活用」「世界クラス」は削除してください。製品が実際に何をするのかを伝えてください。
• 曖昧な価値提案。 「効率化」や「最適化」では何も伝わりません。「週次レポートの作成時間を4時間から15分に短縮」のように、測定可能な成果に置き換えてください。
• 成果の説明がない機能一覧。 機能ごとに、ユーザーにとってどのような意味があるのかを明記してください。
• 弱いCTA。 「詳しく見る」や「送信」は使わないでください。「無料トライアルを始める」「デモを予約する」のように、動詞と得られるものを組み合わせてください。
• ファーストビューにCTAが競合。 ページごとに主要なアクションを1つにしてください。
• ページの下部に埋もれた実績。 お客様の声、ロゴ、数値は、それらが裏付ける主張の近くに配置してください。
• リスクを軽減する要素がない。 無料トライアル、無料プラン、クレジットカード不要、いつでも解約可能、返金保証のうち、少なくとも1つを追加してください。
• 大げさなシステムメッセージや、軽すぎるシステムメッセージ。 確認メッセージは落ち着いた具体的な表現にしてください（「Dana に請求書を送信しました」）。エラーには、失敗した内容と次の手順を示してください（「アップロードに失敗しました。ファイルが20 MBを超えています。」）。感嘆符や感嘆詞は使わないでください。
• 受け身の表現。 誰が何をしたのかを明記してください。「下書きを保存できませんでした。」
• 仮のテキスト。 「ここに見出し」やラテン語の埋め草などは、公開を妨げる要因です。実際に使える原稿を書いてください。
• あらゆる箇所のタイトルケース。 見出しやボタンには文頭のみ大文字にする表記を使ってください。

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

• 汎用的なカードの見た目：枠線、シャドウ、白い背景。 背景色のみ、または余白のみの表現に切り替えます。カードは、重なりによって階層を示す必要がある場合にのみ使用します。
• カードの片側だけに枠線を付ける。 使用しません。枠線は全周に付けるか、まったく付けないかのどちらかにします。
• 常に塗りつぶしボタンを1つ、ゴーストボタンを1つ配置する。 テキストリンクや第3のスタイルを取り入れて、視覚的なノイズを減らします。
• ピル型の「New」や「Beta」バッジ。 四角いバッジ、旗型、またはプレーンテキストのラベルを試します。
• アコーディオン形式のFAQ。 FAQ セクション自体は残し、質問数は6〜12個にします。パターンを変更しましょう。横並びのリスト、検索可能なヘルプ、またはインラインで段階的に内容を表示する形式のほうが、シェブロンが縦に並ぶ形式より見やすくなります。
• ドット付きの3枚のカード型カルーセルの推薦コメント。 石積み状のレイアウト、埋め込みのソーシャル投稿、または1件ずつ切り替わる引用に置き換えます。
• 3つの塔が並ぶ料金表。 高さを増やすのではなく、色や文字の太さで推奨プランを強調します。
• あらゆる操作にモーダルを使う。 単純な操作には、インライン編集、スライドオーバーパネル、または展開可能なセクションを使います。
• アバターは円形のみ。 スクワークル型や角丸の四角形も試します。
• 太陽と月の切り替えボタンによるライト／ダーク切り替え。 ドロップダウン、システム設定の検出、または設定項目を使います。
• 4列のフッターリンク集。 主要な導線と、法的に必要なリンクに絞ります。

アイコンと画像

• Lucide、Feather、Material Icons、Material Symbols。 これらは AI による選択でよく使われる既定のアイコンです。Design Values セクションで承認されたセットに置き換えます。
• 「Launch」にロケット、「Security」に盾。 使い古された比喩は避け、稲妻、指紋、きらめき、金庫などに置き換えます。
• アイコンの線幅が不統一。 すべてのアイコンの線幅を統一します。
• ファビコンがない。 ブランドを反映したファビコンを必ず用意します。
• ストック素材の「多様性に富んだチーム」の写真。 実際の写真、自然なスナップ写真、または一貫したスタイルのイラストを使います。

コード品質

• div だらけの構造。 <nav>、<main>、<article>、<aside>、<section> を使います。
• インラインスタイルとクラスの混在。 すべてプロジェクトのスタイリングシステムにまとめます。
• ピクセル単位で固定された幅。 %、rem、em、max-width を使います。
• alt テキストがない。 コンテンツを説明します。意味のある画像に alt="image" をそのまま使わないでください。
• 9999 のような任意の z-index。 テーマ内でスケールを定めます。
• コメントアウトされた不要なコード。 デバッグ用の残骸をすべて削除します。
• 存在しない import。 すべての import がプロジェクトの依存関係に存在することを確認します。
• meta タグがない。 <title>、description、og:image、ソーシャル共有用タグを追加します。

戦略上の見落とし

AI が構築するものに、一般的にまったく含まれていない要素：

• 法的リンクがない。 フッターにプライバシーポリシーと利用規約を追加します。
• 戻る導線がない。 すべてのページに、前のページへ戻る方法を用意します。
• カスタム404ページがない。 ブランドに合った、役立つページをデザインします。
• フォームの検証がない。 メールアドレスの形式と必須項目をクライアント側でチェックします。
• コンテンツへスキップするリンクがない。 キーボードユーザーに不可欠です。
• Cookie の同意がない。 管轄地域の規制で必要な場合は、準拠したバナーを追加します。
• ランディングページのインデックス登録が考慮されていない。 広告のみを目的とする期間限定オファーには noindex を設定します。長期間掲載するページには、適切なタイトル、メタディスクリプション、内部リンク、および AEO 向けの簡潔な質疑応答形式のFAQが必要です。

修正の優先順位

視覚的な効果が最大で、リスクが最小になる順：

1. フォントの変更 — 最も即効性があり、リスクも最小
2. カラーとサーフェスの整理 — 承認済みのパレットに合わせ、背景グラデーションを削除
3. ホバー、アクティブ、フォーカス状態 — インターフェースに活気を与える
4. レイアウトと余白 — グリッド、最大幅、余白のスケール、入れ子になった角丸の計算式
5. モーションの調整 — 基本のイージング曲線、IntersectionObserver によるスクロール時の表示、フローティングナビゲーション、モバイルメニュー
6. 汎用的なコンポーネントの置き換え — 使い古されたパターンを、上記の代替案に切り替える
7. 読み込み中、空、エラーの状態 — 仕上がった印象を与える
8. コピーの調整 — 使い古された表現を削除し、具体性を加え、CTA を修正
9. 文字サイズのスケールの仕上げ — 最後に加える上質な仕上げ

ルール

• 既存の技術スタックを使用してください。フレームワークやスタイリングライブラリを移行しないでください。
• 既存の機能を損なわないでください。変更のたびにテストしてください。
• 修正を適用する前に、診断結果を報告してください。各項目について、ユーザーが拒否できるようにしてください。
• 新しいライブラリをインポートする前に、プロジェクトの依存関係ファイルを確認してください。
• プロジェクトで Tailwind を使用している場合は、設定に触れる前にバージョンが v3 か v4 かを確認してください。
• フレームワークがない場合は、バニラ CSS を使用してください。
• レビューしやすく、対象を絞った変更にしてください。大規模な書き換えより、小規模で的を絞った改善を優先してください。
• Design Values に記載されていないデザイン値を決して作り出さないでください。該当する値がない場合は、確認してください。

Design values

このスキルにおける唯一の信頼できる情報源です。独自のデザインシステムに合わせるには、このセクションを編集してください。

フォント： Geist、Manrope、Geist Mono、Poppins。Inter、Roboto、Arial、Open Sans、Helvetica は使用しないでください。イタリック体は使用しないでください。太字を超えるウェイトは使用しないでください。

暗い背景： #000000 · #181818 · #1F1F1F · #272727 · #313131 · #131209

ヒーロー見出しのグラデーション： ダークテーマは #FFFFFF → #9B9B9B、ライトテーマは #000000 → #666666。左から右へ、テキストのみに適用します。

間隔： 0、2、4、8、12、16、24、32、40、48、64、80、96px。メインボタンは上下 8px、左右 12px です。

角丸： Tailwind の値のみ使用してください。32px のギャップ内にある入れ子の形状では、inner = outer − gap とし、計算結果が 2 を超える場合にのみ適用してください。

アイコン： Phosphor、Solar、Iconamoon。

モーション： 基本のイージングは ease-[cubic-bezier(0.22,1,0.36,1)]、移動には duration-500、色と不透明度には duration-300 を使用してください。スクロール時の表示には IntersectionObserver を使い、600〜800ms に設定してください。prefers-reduced-motion を尊重してください。

文字サイズ： Tailwind のデフォルト。

クレジット

このスキルの一部は、MIT ライセンスのもとで公開されている Leon Lin（@LexnLin）による taste-skill を参考にしています。同プロジェクトの再デザイン監査の構成、コンテンツのリアリティチェック、モーションやナビゲーションに関するアイデアが、ここにある対応セクションの参考になりました。これらのセクションはその後、書き直されています。

MIT License

Copyright (c) 2026 Leonxlnx

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.