redesign-existing-projects

デザイン再設計スキル

仕組み

既存のプロジェクトに適用する場合は、次の手順に従います。

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

デザイン監査

タイポグラフィ

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

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

色とサーフェス

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

レイアウト

• すべてを中央揃えにした対称的なデザイン。 余白をずらしたり、縦横比を混在させたり、中央揃えのコンテンツの上に左揃えの見出しを配置したりして、対称性を崩しましょう。
• 機能紹介に同じ幅のカードを3列並べる。 これは最もありふれたAI向けレイアウトです。2列のジグザグ配置、非対称グリッド、横スクロール、またはメイソンリーレイアウトに置き換えましょう。
• 全画面セクションに height: 100vh を使用する。 モバイルブラウザーでのレイアウトのずれ（iOS Safariのビューポートの不具合）を防ぐため、min-height: 100dvh に置き換えましょう。
• 複雑なFlexboxのパーセンテージ計算。 信頼性の高い複数列構造にはCSS Gridを使いましょう。
• 最大幅の制約がないコンテナー。 コンテンツが幅の広い画面で端から端まで広がらないよう、コンテナーに制約（およそ1200～1440px）を設け、左右の余白を自動にしましょう。
• Flexboxでカードの高さを無理に揃える。 高さにばらつきを持たせるか、コンテンツの長さが異なる場合はメイソンリーレイアウトを使いましょう。
• すべてに同じ角丸を設定する。 半径に変化をつけ、内側の要素は小さめに、コンテナーは柔らかな角丸にしましょう。
• 重なりや奥行きがない。 要素が平面的に並んでいます。負のマージンを使ってレイヤーを作り、視覚的な奥行きを出しましょう。
• 上下のパディングが対称的。 上下のパディングが常に同じです。見た目のバランスに合わせて調整しましょう。多くの場合、下側のパディングをやや大きくする必要があります。
• ダッシュボードには常に左サイドバーがある。 代わりに上部ナビゲーション、フローティングのコマンドメニュー、折りたたみ式パネルを試しましょう。
• 余白が足りない。 間隔を2倍にしましょう。デザインにゆとりを持たせます。密度の高いレイアウトはデータダッシュボードには適していますが、マーケティングページには向きません。
• カード群でボタンの位置が下端に揃っていない。 カードごとにコンテンツの長さが異なると、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。 ラテン語のプレースホルダーテキストは使いません。実際に使える文章を下書きします。
• すべての見出しをタイトルケースにすること。 文頭のみ大文字にします。

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

• 汎用的なカードの見た目（枠線＋シャドウ＋白い背景）。 枠線をなくすか、背景色だけを使うか、余白だけで表現します。カードは、階層を伝えるために浮き上がりが必要な場合にだけ使います。
• 常に塗りつぶしボタンを1つ、ゴーストボタンを1つ配置すること。 テキストリンクや第3のスタイルも取り入れて、視覚的なノイズを減らします。
• 「New」や「Beta」のピル型バッジ。 四角いバッジや旗、または通常のテキストラベルを試します。
• アコーディオン形式のFAQセクション。 横並びのリスト、検索可能なヘルプ、またはインラインで段階的に情報を開示する方法を使います。
• ドット付きの3枚カード式お客様の声カルーセル。 石積みレイアウト、埋め込みソーシャル投稿、または1つの引用を切り替えて表示する形式に置き換えます。
• 3段構成の料金表。 高さを増すだけでなく、色や強調表示で推奨プランを目立たせます。
• あらゆる操作にモーダルを使うこと。 単純な操作では、ポップアップではなくインライン編集、スライドオーバーパネル、または展開可能なセクションを使います。
• アバターをすべて円形にすること。 ありきたりな印象を避けるため、スクワークルや角丸の四角形を試します。
• 常に太陽／月の切り替えスイッチでライト／ダークモードを切り替えること。 ドロップダウン、システム設定の検出、または設定への統合を使います。
• 4列に並んだフッターリンクの羅列。 シンプルにし、主要なナビゲーションと法的に必要なリンクに絞ります。

アイコン

• Lucide または Feather のアイコンだけを使うこと。 これらはAIでよく使われる既定のアイコンです。差別化のために、Phosphor、Heroicons、または独自のアイコンセットを使います。
• 「Launch」にロケット、「Security」に盾を使うこと。 ありきたりな比喩を、より意外性のあるアイコン（稲妻、指紋、きらめき、金庫）に置き換えます。
• アイコンごとに線幅が異なること。 すべてのアイコンを確認し、線の太さを統一します。
• ファビコンがないこと。 ブランドを表すファビコンを必ず用意します。
• ストック素材の「多様なチーム」の写真。 不自然なストック画像ではなく、実際のチーム写真、自然なスナップ写真、または統一感のあるイラストを使います。

コード品質

• divだらけのマークアップ。 <nav>、<main>、<article>、<aside>、<section>などのセマンティックHTMLを使います。
• インラインスタイルとCSSクラスの混在。 すべてのスタイルをプロジェクトのスタイリングシステムに移します。
• ピクセル単位で固定された幅。 柔軟なレイアウトには、相対単位（%、rem、em、max-width）を使います。
• 画像のaltテキストがないこと。 スクリーンリーダー向けに画像の内容を説明します。意味のある画像に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 を使用します。
• レビューしやすく、焦点を絞った変更にします。大規模な書き換えよりも、小さく的を絞った改善を優先します。