joyeking/redesigned-portfolio

Redesign Skill

動作の仕組み

既存のプロジェクトに適用する場合、以下の流れに従って進めます。

1. スキャン — コードベースを読み取ります。フレームワーク、スタイリング方法（Tailwind、バニラCSS、styled-componentsなど）、現在のデザインパターンを特定します。
2. 診断 — 以下の監査を実行します。見つかったすべてのジェネリックパターン、弱点、不足している状態をリストアップします。
3. 修正 — 既存のスタックを使ってターゲットを絞ったアップグレードを適用します。ゼロから書き直さずに、既存のものを改善します。

デザイン監査

タイポグラフィ

以下の問題をチェックして修正します。

• ブラウザデフォルトのフォント、またはどこでもInterを使用している。 個性のあるフォントに置き換えます。良い選択肢：Geist、Outfit、Cabinet Grotesk、Satoshi。編集/クリエイティブプロジェクトでは、セリフ体の見出しとサンセリフ体の本文を組み合わせます。
• 見出しに存在感がない。 表示テキストのサイズを大きくし、文字間隔を詰め、行間を狭くします。見出しは重厚で意図的に感じられるべきです。
• 本文が広すぎる。 段落の幅を約65文字に制限します。読みやすさのために行間を広げます。
• Regular (400) と Bold (700) のウェイトしか使われていない。 Medium (500) と SemiBold (600) を導入して、より微妙な階層を作ります。
• 数字にプロポーショナルフォントを使用している。 データが多いインターフェースでは、等幅フォントを使用するか、tabular figures（font-variant-numeric: tabular-nums）を有効にします。
• 文字間隔の調整が不足している。 大きな見出しにはネガティブトラッキング、小文字やラベルにはポジティブトラッキングを使用します。
• すべて大文字の小見出しが多用されている。 代わりに小文字のイタリック、文の先頭だけ大文字（sentence case）、またはスモールキャップスを試します。
• オーファン（orphan）の単語。 最終行に一語だけが残っている状態。text-wrap: balance または text-wrap: pretty で修正します。

カラーとサーフェス

• 純粋な #000000 背景。 オフブラック、ダークチャコール、または色味のあるダーク（#0a0a0a、#121212、ダークネイビー）に置き換えます。
• 彩度が高すぎるアクセントカラー。 彩度は80%未満に抑えます。アクセントカラーを彩度を下げて（desaturate）ニュートラルカラーと調和させ、目立たないようにします。
• 複数のアクセントカラーがある。 一つを選び、他は削除します。一貫性は多様性に勝ります。
• 暖色系と寒色系のグレーが混在している。 一つのグレーファミリーに統一します。すべてのグレーに一貫した色味（暖色系または寒色系のどちらか、両方は不可）を加えます。
• パープル/ブルーの「AIグラデーション」風。 これは最も一般的なAIデザインの指紋です。ニュートラルなベースと、一つの厳選されたアクセントで置き換えます。
• 汎用的な box-shadow。 影の色を背景色に合わせます。低不透明度の純粋な黒の代わりに、色付きの影（例：青い背景に濃い青の影）を使用します。
• テクスチャのないフラットデザイン。 背景に微妙なノイズ、グレイン、マイクロパターンを追加します。純粋なフラットベクターは無機質に感じられます。
• 完全に均一なグラデーション。 標準的な45度のリニアフェードの代わりに、ラジアルグラデーション、ノイズオーバーレイ、メッシュグラデーションを使用して均一性を壊します。
• 照明の方向が一貫していない。 すべての影を監査して、単一の一貫した光源を示していることを確認します。
• ライトモードページ内にランダムなダークセクションがある（またはその逆）。 ライトページの中に一箇所だけダーク背景のセクションがあると、コピペのミスのように見えます。完全なダークモードにするか、ページ全体で一貫した背景トーンを維持します。コントラストが必要な場合は、同じパレットのやや濃い色合いを使用します。クリーム色のページの途中で突然 #111 にジャンプしないでください。
• 視覚的な奥行きのない、空白でフラットなセクション。 プレーンな背景にテキストだけのセクションは未完成に見えます。高品質の背景画像（ぼかし、オーバーレイ、マスク処理）、繊細なパターン、アンビエントグラデーションを追加します。実際のアセットがない場合は、https://picsum.photos/seed/{name}/1920/1080 などの信頼できるプレースホルダーソースを使用します。ヒーローセクション、特徴ブロック、CTAなどの背後に背景画像を試してみてください。低不透明度の微妙な全幅写真でも存在感が増します。

レイアウト

• すべてが中央揃えで対称的。 オフセットマージン、異なるアスペクト比、中央寄せコンテンツの上に左寄せのヘッダーなどを使用して対称性を破ります。
• 特徴行として3つの等しいカード列。 これは最も一般的なAIレイアウトです。2列のジグザグ、非対称グリッド、水平スクロール、メイソンリーレイアウトに置き換えます。
• 全画面セクションに height: 100vh を使用している。 min-height: 100dvh に置き換えて、モバイルブラウザ（iOS Safariのビューポートバグ）でのレイアウトジャンプを防ぎます。
• 複雑なフレックスボックスのパーセンテージ計算。 信頼性の高いマルチカラム構造にはCSS Gridを使用します。
• max-widthコンテナがない。 コンテナの制約（約1200-1440px）を自動マージンとともに追加して、ワイド画面でコンテンツが端から端まで引き伸ばされないようにします。
• フレックスボックスで強制的にカードの高さを揃えている。 コンテンツの長さが異なる場合は、可変高さを許可するか、メイソンリーレイアウトを使用します。
• すべてに均一なborder-radius。 半径を変えます。内側の要素はより小さく、コンテナはより柔らかくします。
• 重なりや奥行きがない。 要素が平らに隣り合って配置されています。ネガティブマージンを使用してレイヤリングと視覚的な奥行きを生み出します。
• 上下のパディングが対称的。 上下のパディングが常に同一です。光学的に調整します。下部のパディングはしばしば少し大きくする必要があります。
• ダッシュボードには常に左サイドバーがある。 代わりにトップナビゲーション、フローティングコマンドメニュー、または折りたたみ可能なパネルを試してみてください。
• 余白が不足している。 スペーシングを2倍にします。デザインに呼吸する余地を与えます。密度の高いレイアウトはデータダッシュボードには有効ですが、マーケティングページには向きません。
• カードグループ内でボタンが下部に揃っていない。 カードごとにコンテンツの長さが異なると、CTA（コールトゥアクション）がランダムな高さになります。各カードの下部にボタンを固定し、コンテンツに関係なくきれいな水平ラインを形成するようにします。
• 特徴リストの開始位置が異なる。 価格表や比較カードでは、特徴のリストはすべての列で同じY位置から始まる必要があります。リストの上に一貫したスペースを設けるか、タイトル/価格ブロックの高さを固定します。
• 横に並べた要素間の垂直リズムが一貫していない。 カード、列、パネルを隣り合わせに配置する場合、共有要素（タイトル、説明、価格、ボタン）をすべてのアイテムで揃えます。ベースラインが揃っていないと、レイアウトが壊れて見えます。
• 数学的には正しいが、光学的に間違って見える配置。 数学的に中央揃えしても、目で見て中央に見えないことがあります。テキストの横のアイコン、丸の中の再生ボタン、ボタン内のテキストは、正しく見えるように1～2ピクセルの光学的調整が必要になることがよくあります。

インタラクティビティとステート

• ボタンにホバーステートがない。 ホバー時に背景のシフト、わずかなスケール、またはトランスレートを追加します。
• アクティブ/押下時のフィードバックがない。 押下時に微妙な 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コピーライティングの決まり文句。 「昇華」「シームレス」「解き放つ」「次世代」「ゲームチェンジャー」「深掘り」「タペストリー」「～の世界で」は絶対に使わないでください。プレーンで具体的な言葉で書きます。
• 成功メッセージの感嘆符。 削除します。自信を持ち、うるさくしないでください。
• 「おっと！」的なエラーメッセージ。 直接的で簡潔に述べます：「接続に失敗しました。もう一度お試しください。」
• 受動態。 能動態を使用します：「変更を保存できませんでした」（「変更の保存に失敗しました」的な受動態は避ける）。
• すべてのブログ記事の日付が同一。 実際の投稿のようにランダムな日付にします。
• 複数のユーザーに同じアバター画像を使用している。 各個人にユニークなアセットを使用します。
• Lorem Ipsum。 プレースホルダーのラテン語テキストは絶対に使わないでください。実際のドラフトコピーを書きましょう。
• すべてのヘッダーがタイトルケース。 代わりにセンテンスケースを使用します。

コンポーネントパターン

• 汎用的なカード（ボーダー＋シャドウ＋白背景）。 ボーダーを削除するか、背景色のみを使用するか、スペーシングのみを使用します。カードは、階層を伝えるために浮き彫り（elevation）が必要な場合にのみ存在するべきです。
• 常に1つの塗りつぶしボタン＋1つのゴーストボタン。 テキストリンクや第三のスタイルを追加して、視覚的なノイズを減らします。
• ピル型の「New」や「Beta」バッジ。 四角いバッジ、フラグ、またはプレーンテキストラベルを試してください。
• アコーディオン型FAQセクション。 横並びのリスト、検索可能なヘルプ、またはインラインの段階的開示を使用します。
• ドット付き3枚のカルーセル testimonial。 メイソンリーウォール、埋め込みソーシャル投稿、または単一の回転引用に置き換えます。
• 3段の価格表。 推奨プランを色と強調でハイライトします。単に高くするだけではありません。
• 何でもモーダルにする。 単純なアクションには、インライン編集、スライドオーバーパネル、または展開可能なセクションをポップアップの代わりに使用します。
• アバターは常に円形。 より一般的でない見た目にするために、スクワークル（角丸四角）や角丸の正方形を試してください。
• ライト/ダーク切り替えは常に太陽/月スイッチ。 ドロップダウン、システム設定の自動検出、または設定内に統合します。
• 4列のフッターリンクファーム。 簡素化します。主要なナビゲーションパスと法的に必要なリンクに焦点を当てます。

アイコン

• LucideまたはFeatherアイコンだけを使用している。 これらは「デフォルト」のAIアイコンの選択です。差別化のためにPhosphor、Heroicons、またはカスタムセットを使用します。
• 「ローンチ」にロケット船、「セキュリティ」に盾。 決まりきった比喩を、あまり明白でないアイコン（雷、指紋、火花、金庫）に置き換えます。
• アイコン間でストローク幅が一貫していない。 すべてのアイコンを監査し、一つのストロークウェイトに標準化します。
• ファビコンがない。 ブランド化されたファビコンを常に含めます。
• ストックフォトの「多様性のあるチーム」写真。 実際のチーム写真、カジュアルなスナップ写真、または一貫したイラストスタイルを、不気味なストック画像の代わりに使用します。

コード品質

• 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ページがない。 役立つ、ブランディングされた「ページが見つかりません」エクスペリエンスをデザインします。
• フォームバリデーションがない。 メール、必須フィールド、フォーマットチェックのためにクライアントサイドのバリデーションを追加します。
• 「スキップしてコンテンツへ」リンクがない。 キーボードユーザーにとって必須です。隠しスキップリンクを追加します。
• Cookie同意がない。 管轄区域で必要な場合は、準拠した同意バナーを追加します。

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

プロジェクトをアップグレードする際は、これらの効果の高いテクニックを使用してジェネリックパターンを置き換えてください。

タイポグラフィのアップグレード

• 可変フォントアニメーション。 スクロールやホバーに応じてウェイトや幅を補間し、テキストに生命力を与えます。
• アウトラインから塗りつぶしへのトランジション。 テキストがストロークアウトラインで始まり、スクロールエントリやインタラクションに応じて色で塗りつぶされます。
• テキストマスクのリビール。 大きなタイポグラフィが、背後にあるビデオやアニメーション画像への窓の役割を果たします。

レイアウトのアップグレード

• 壊れたグリッド / 非対称性。 意図的にカラム構造を無視する要素—重なり、画面外にはみ出し、計算されたランダム性でオフセット。
• 余白の最大化。 ネガティブスペースを積極的に使用して、単一の要素に焦点を強制します。
• パララックスカードスタック。 スクロール中に粘着し、物理的に積み重なるセクション。
• 分割画面スクロール。 画面の2つの半分が反対方向にスライドします。

モーションのアップグレード

• 慣性付きスムーズスクロール。 ブラウザのデフォルトからスクロールを切り離し、より重厚で映画的な感触にします。
• 段階的エントリー。 要素がわずかな遅延でカスケードインし、Y軸翻訳と不透明度フェードを組み合わせます。すべてを一度にマウントしないでください。
• スプリング物理。 線形イージングをスプリングベースのモーションに置き換え、すべてのインタラクティブ要素に自然で重量感のある感触を与えます。
• スクロール駆動のリビール。 スクロール進行に連動した、拡張マスク、ワイプ、描画オンSVGパスを通じてコンテンツが現れます。

サーフェスのアップグレード

• 真のグラスモーフィズム。 backdrop-filter: blur を超える。1pxの内側ボーダーと、微妙な内側の影を追加して、エッジの屈折をシミュレートします。
• スポットライトボーダー。 カーソルの下で動的に照らされるカードのボーダー。
• グレインとノイズのオーバーレイ。 固定された、pointer-events-noneのオーバーレイで微妙なノイズを加え、デジタル的なフラットさを打ち破ります。
• 色付きの影。 汎用的な黒ではなく、背景の色味を帯びた影。

修正優先順位

最大の視覚的インパクトと最小のリスクを得るために、この順序で変更を適用します。

1. フォント変更 — 最大の即時改善、最小のリスク
2. カラーパレットのクリーンアップ — 衝突する色や彩度が高すぎる色を削除
3. ホバーとアクティブステート — ほんの少しのコードで大きなインタラクションの質の向上
4. アニメーションとトランジション — transformsとopacityへの切り替え、spring physicsの追加
5. レイアウトの非対称化 — グリッドパターンを破り、奥行きを追加
6. コンテンツの人間化 — プレースホルダーデータ、Lorem Ipsum、テンプレートコピーを置き換え
7. コンポーネントの多様化 — カード、ボタン、フォームをユニークに
8. コードクリーンアップ — セマンティックHTML、アクセシビリティ、パフォーマンス
9. エッジケース — エラーステート、空のステート、404ページ、戻るナビゲーション

一度にすべてを行う必要はありません。優先順位1〜3は低リスクで大きな影響を与えるため、ほとんどすべてのプロジェクトで実行する価値があります。