リデザインスキル
動作方法
既存のプロジェクトに適用する場合、以下の順序に従います。
- スキャン — コードベースを読み取ります。フレームワーク、スタイリング方法（Tailwind、バニラCSS、styled-componentsなど）、および現在のデザインパターンを特定します。
- 診断 — 以下の監査を実行します。見つけたすべての一般的なパターン、弱点、欠落している状態をリストアップします。
- 修正 — 既存のスタックを使用して、対象を絞ったアップグレードを適用します。ゼロから書き直さないでください。あるものを改善します。
デザイン監査
タイポグラフィ
以下の問題を確認し、修正します。
- ブラウザデフォルトフォントまたは全体的にInterを使用。 個性のあるフォントに置き換えます。良い選択肢:
Geist、Outfit、Cabinet Grotesk、Satoshi。編集/クリエイティブプロジェクトの場合は、セリフの見出しとサンセリフの本文を組み合わせます。 - 見出しに存在感がない。 ディスプレイテキストのサイズを大きくし、文字間隔を詰め、行間を狭くします。見出しは重く、意図的に感じられるべきです。
- 本文が広すぎる。 段落の幅を約65文字に制限します。読みやすさのために行間を広げます。
- Regular（400）とBold（700）のウェイトのみ使用。 Medium（500）とSemiBold（600）を導入して、より微妙な階層を作成します。
- 数字にプロポーショナルフォントを使用。 データ重視のインターフェースには、等幅フォントを使用するか、tabular figures（
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に置き換えます。 - 複雑なフレックスボックスのパーセンテージ計算。 信頼性の高いマルチカラム構造にはCSS Gridを使用します。
- 最大幅コンテナがない。 コンテナ制約（約1200〜1440px）を追加し、自動マージンを使用して、コンテンツがワイドスクリーンで端から端まで伸びないようにします。
- フレックスボックスによって強制された等しい高さのカード。 コンテンツの長さが異なる場合は、可変高さを許可するか、メーソンリーレイアウトを使用します。
- すべてに均一なborder-radius。 半径を変えます。内側の要素はよりきつく、コンテナはより柔らかくします。
- オーバーラップや奥行きがない。 要素が互いに平らに隣接しています。ネガティブマージンを使用して、レイヤーと視覚的な奥行きを作成します。
- 対称的な垂直パディング。 上部と下部のパディングが常に同一。光学的に調整します。下部パディングは多くの場合、わずかに大きくする必要があります。
- ダッシュボードには常に左サイドバーがある。 代わりに、上部ナビゲーション、フローティングコマンドメニュー、または折りたたみ可能なパネルを試してください。
- ホワイトスペースの不足。 間隔を2倍にします。デザインに呼吸する余地を与えます。密集したレイアウトはデータダッシュボードには適していますが、マーケティングページには適していません。
- カードグループ内でボタンが下部に揃っていない。 カードのコンテンツの長さが異なる場合、CTAがランダムな高さになってしまいます。各カードの下部にボタンを固定し、コンテンツの有無にかかわらず、きれいな水平線を形成するようにします。
- フィーチャーリストが異なる垂直位置から始まっている。 価格表や比較カードでは、フィーチャーのリストはすべての列で同じY位置から始まる必要があります。リストの上に一貫した間隔を置くか、固定高さのタイトル/価格ブロックを使用します。
- 横並びの要素における一貫性のない垂直リズム。 カード、列、またはパネルを隣り合わせに配置する場合、共有要素（タイトル、説明、価格、ボタン）をすべてのアイテム間で揃えます。ベースラインがずれていると、レイアウトが壊れているように見えます。
- 数学的には正しいが、光学的に間違って見える配置。 数学的に中央揃えにしても、目には中央に見えないことがよくあります。テキストの横にあるアイコン、円の中の再生ボタン、ボタン内のテキストは、正しく感じられるようにするために、多くの場合1〜2pxの光学的調整が必要です。
インタラクティビティと状態
- ボタンにホバー状態がない。 ホバー時に背景の変化、わずかなスケール、またはトランスレートを追加します。
- アクティブ/押下時のフィードバックがない。 押下時に微妙な
scale(0.98)またはtranslateY(1px)を追加して、物理的なクリックをシミュレートします。 - 持続時間ゼロの即時トランジション。 すべてのインタラクティブ要素にスムーズなトランジション（200〜300ms）を追加します。
- フォーカスリングの欠如。 キーボードナビゲーションのための可視フォーカスインジケーターを確保します。これはオプションではなく、アクセシビリティ要件です。
- ローディング状態がない。 汎用的な円形スピナーを、レイアウト形状に一致するスケルトンローダーに置き換えます。
- 空の状態がない。 何も表示されていない空のダッシュボードは機会損失です。構成された「はじめに」ビューをデザインします。
- エラー状態がない。 フォームに明確なインラインエラーメッセージを追加します。
window.alert()は使用しないでください。 - デッドリンク。
#にリンクするボタン。実際のリンク先にリンクするか、視覚的に無効にします。 - ナビゲーションに現在のページの表示がない。 アクティブなナビゲーションリンクを異なるスタイルにして、ユーザーが現在地を認識できるようにします。
- スクロールジャンプ。 アンカークリックが瞬時にジャンプします。
scroll-behavior: smoothを追加します。 top、left、width、heightを使用したアニメーション。 GPUアクセラレーションによるスムーズなアニメーションのために、transformとopacityに切り替えます。
コンテンツ
- 「山田太郎」や「田中花子」のような汎用的な名前。 多様で現実的な名前を使用します。
99.99%、50%、$100.00のような偽の丸い数字。 有機的で乱雑なデータを使用します:47.2%、¥9,900、03-1234-5678。- 「株式会社サンプル」、「ネクサス」、「スマートフロー」のようなプレースホルダー会社名。 文脈に合った、信頼できるブランド名を考案します。
- AIコピーライティングの決まり文句。 「革新」、「シームレス」、「解き放つ」、「次世代」、「ゲームチェンジャー」、「探求」、「タペストリー」、「～の世界では」は決して使用しないでください。平易で具体的な言葉を書きましょう。
- 成功メッセージでの感嘆符。 削除します。自信を持って、うるさくなく。
- 「おっと！」エラーメッセージ。 直接的に: 「接続に失敗しました。もう一度お試しください。」
- 受動態。 能動態を使用します: 「変更を保存できませんでした」（「間違いが発生しました」ではなく）。
- すべてのブログ投稿の日付が同一。 実際に見えるように日付をランダム化します。
- 複数のユーザーに同じアバター画像。 個別の人物ごとにユニークなアセットを使用します。
- Lorem Ipsum。 プレースホルダーのラテン語テキストは決して使用しないでください。実際の下書きを書きましょう。
- すべてのヘッダーがタイトルケース。 代わりにセンテンスケースを使用します。
コンポーネントパターン
- 汎用的なカードの外観（ボーダー＋シャドウ＋白背景）。 ボーダーを削除するか、背景色のみを使用するか、間隔のみを使用します。カードは、浮揚が階層を伝える場合にのみ存在するべきです。
- 常に1つの塗りつぶしボタン＋1つのゴーストボタン。 テキストリンクまたは三次スタイルを追加して、視覚的なノイズを減らします。
- ピル型の「New」および「Beta」バッジ。 正方形のバッジ、フラグ、またはプレーンテキストラベルを試してください。
- アコーディオンFAQセクション。 横並びのリスト、検索可能なヘルプ、またはインラインの段階的開示を使用します。
- ドット付きの3カードカルーセル testimonial。 メーソンリーウォール、埋め込みソーシャル投稿、または単一の回転引用に置き換えます。
- 3段の価格表。 推奨ティアを色と強調でハイライトし、単に高さを増やすだけではありません。
- すべてにモーダルを使用。 単純なアクションには、ポップアップの代わりにインライン編集、スライドオーバーパネル、または展開可能なセクションを使用します。
- アバターは常に円形。 より汎用的でない外観にするために、スクアークルまたは角丸四角形を試してください。
- ライト/ダークトグルは常に太陽/月のスイッチ。 ドロップダウン、システム環境設定の検出を使用するか、設定に統合します。
- 4列のフッターリンクファーム。 簡素化します。主要なナビゲーションパスと法的に必要なリンクに焦点を当てます。
アイコノグラフィ
- LucideまたはFeatherアイコンのみ。 これらは「デフォルト」のAIアイコンの選択肢です。差別化のために、Phosphor、Heroicons、またはカスタムセットを使用します。
- 「起動」にロケット船、「セキュリティ」に盾。 ありきたりなメタファーを、よりわかりにくいアイコン（稲妻、指紋、火花、金庫）に置き換えます。
- アイコン間で一貫性のないストローク幅。 すべてのアイコンを監査し、1つのストロークウェイトに標準化します。
- ファビコンの欠如。 常にブランド化されたファビコンを含めます。
- ストックの「多様性のあるチーム」写真。 不気味なストックイメージの代わりに、実際のチーム写真、自然なショット、または一貫したイラストスタイルを使用します。
コード品質
- Divスープ。 セマンティックHTMLを使用します:
<nav>、<main>、<article>、<aside>、<section>。 - インラインスタイルとCSSクラスの混在。 すべてのスタイリングをプロジェクトのスタイリングシステムに移動します。
- ハードコードされたピクセル幅。 柔軟なレイアウトのために相対単位（
%、rem、em、max-width）を使用します。 - 画像のaltテキストの欠如。 スクリーンリーダーのために画像コンテンツを説明します。意味のある画像に
alt=""またはalt="image"を決して残さないでください。 9999のような恣意的なz-index値。 テーマ/変数にきれいなz-indexスケールを確立します。- コメントアウトされたデッドコード。 出荷前にすべてのデバッグアーティファクトを削除します。
- インポートの幻覚。 すべてのインポートが
package.jsonまたはプロジェクトの依存関係に実際に存在することを確認します。 - メタタグの欠如。 適切な
<title>、description、og:image、およびソーシャルシェアリングメタタグを追加します。
戦略的欠落（AIが通常忘れるもの）
- 法的リンクがない。 フッターにプライバシーポリシーと利用規約へのリンクを追加します。
- 「戻る」ナビゲーションがない。 ユーザーフローの行き止まり。すべてのページに戻る方法が必要です。
- カスタム404ページがない。 役立つ、ブランド化された「ページが見つかりません」エクスペリエンスをデザインします。
- フォームバリデーションがない。 メール、必須フィールド、およびフォーマットチェックのためのクライアントサイドバリデーションを追加します。
- 「スキップしてコンテンツへ」リンクがない。 キーボードユーザーにとって必須。非表示のスキップリンクを追加します。
- クッキー同意がない。 管轄区域で必要な場合は、準拠した同意バナーを追加します。
アップグレードテクニック
プロジェクトをアップグレードする際は、以下の影響の大きいテクニックを使用して、一般的なパターンを置き換えます。
タイポグラフィのアップグレード
- 可変フォントアニメーション。 スクロールやホバー時にウェイトや幅を補間し、生き生きとしたテキストを実現します。
- アウトラインから塗りつぶしへのトランジション。 テキストがストロークのアウトラインとして始まり、スクロールエントリーまたはインタラクション時に色で塗りつぶされます。
- テキストマスクのリビール。 大きなタイポグラフィが、背後にあるビデオやアニメーション画像への窓として機能します。
レイアウトのアップグレード
- 崩れたグリッド / 非対称性。 意図的にカラム構造を無視する要素 — オーバーラップ、画面からはみ出す、または計算されたランダム性でオフセット。
- ホワイトスペースの最大化。 ネガティブスペースを積極的に使用して、単一の要素に焦点を強制します。
- パララックスカードスタック。 スクロール中に固定され、物理的に積み重なるセクション。
- 分割画面スクロール。 画面の2つの半分が反対方向にスライドします。
モーションのアップグレード
- 慣性のあるスムーズスクロール。 ブラウザのデフォルトからスクロールを切り離し、より重く、映画のような感触を実現します。
- 千鳥状エントリー。 要素がわずかな遅延でカスケードしながら現れ、Y軸のトランスレーションと不透明度フェードを組み合わせます。すべてを一度にマウントしないでください。
- スプリング物理。 線形イージングをスプリングベースのモーションに置き換え、すべてのインタラクティブ要素に自然で重みのある感触をもたらします。
- スクロール駆動のリビール。 スクロール進行に結び付けられた、拡大マスク、ワイプ、またはSVGパス上への描画を通じてコンテンツが現れます。
サーフェスのアップグレード
- 本物のグラスモーフィズム。
backdrop-filter: blurを超えます。1pxの内側ボーダーと微妙な内側シャドウを追加して、エッジの屈折をシミュレートします。 - スポットライトボーダー。 カーソルの下で動的に光るカードのボーダー。
- グレインとノイズオーバーレイ。 デジタルの平らさを打ち破るために、固定された、pointer-events-noneの微妙なノイズオーバーレイ。
- 色付き、色調のシャドウ。 汎用的な黒ではなく、背景の色相を帯びたシャドウ。
修正の優先順位
最小限のリスクで最大の視覚的インパクトを得るために、次の順序で変更を適用します。
- フォントの変更 — 最大の即時改善、最小のリスク
- カラーパレットのクリーンアップ — 競合する、または彩度が高すぎる色を削除
- ホバーとアクティブ状態 — 最大の効果、最小のコード変更
- レイアウトの非対称性 — 空白と構造を改善
- 影と表面処理 — 奥行きと質感を追加
- インタラクションアニメーション — トランジションとマイクロインタラクションを追加
- コンテンツとコピーライティング — テキストを現実的で具体的なものに置き換える
- コンポーネントのリファクタリング — カード、テーブル、FAQを置き換える（最もリスクが高いため最後）