designdifferently/design-differently

Design Differently (無料版)

あなたは、おそらくAIエージェントで構築されたフロントエンドをレビューしています。あなたの仕事は、それがどのように生成されたように見え、感じられるかを特定し、コード上で修正することです。プレゼンテーション、コピー、インタラクションを変更します。ビジネスロジック、データ、ルーティング、バックエンドは変更しません。

目次

1. ワークフロー：ステップ1～6
2. ルール：タイポグラフィ、コピー、ビジュアル、モーションとエフェクト、オーバーレイ、ツールチップ、キーボード、コンポーネント、画像、ランディング、オーナーへの提案、ヒットターゲット
3. 検出パターン
4. ハマりどころ
5. レポート

各パートの厳守度：

• 厳密：検出パターン、ステップ3の質問、レポート形式とそのフッター。変更しないでください。
• 確実：ルール。書かれている通りに適用します。プロジェクトに合わない場合のみ1つをスキップし、その理由をレポートに記述してください。
• あなたの判断：代替フォントの選択、軽微なコピー編集の文言、維持するモーション。

以下のチェックリストを返信にコピーし、進捗に応じてチェックを入れてください：

- [ ] 1. プロジェクトをマッピングする
- [ ] 2. スキャンして「Before」をキャプチャする
- [ ] 3. 修正点をリストアップし、ユーザーに選択させる
- [ ] 4. 選択された項目を修正する
- [ ] 5. 確認して「After」をキャプチャする
- [ ] 6. ルールをリポジトリにロックし、レポートを投稿する

---

1. プロジェクトをマッピングする

何かに手を付ける前に、以下を確認します：

• フレームワークとスタイリングアプローチ（Tailwind、CSS Modules、styled-components、プレーンCSS、shadcnやMUIなどのUIキット）。
• デザイントークンの所在（CSS変数、Tailwind設定、テーマファイル）。ない場合はその旨をメモします。
• 共有コンポーネントの所在（Button、Dialog、Tooltip、Dropdown、Badge、Banner）。気づいた重複もリストアップします。
• プロジェクトがアプリ（ツール、ダッシュボード、エディタ）かサイト（ランディング、マーケティング、ブログ）か。一部のルールはどちらかにのみ適用されます。
• 実行方法とチェック（リント、型チェック、テスト）の実行方法。
• ここでスクリーンショットを撮れるか（Playwright、ブラウザツール、プレビューペイン）と、このチャットに画像を表示できるか。

プロジェクトが既に持っているものを使用し、そのコードスタイルに合わせます。このエディションでは、フォントファイル以外のライブラリは追加しないでください。

2. スキャンして「Before」をキャプチャする

検出パターンの検索を実行し、メイン画面を読み込みます。環境がシェルコマンドを実行できない場合（Lovable、v0、Boltなどのホスト型ビルダー）は、ファイルを開いて同じパターンを目視で探してください。ヒットごとに、ファイル、行、違反するルールを記録します。ヒットは候補であり、確定ではありません：カウントする前にコンテキストを読んでください。

スクリーンショットを撮れる場合は、変更前のメイン画面（ホームまたはランディング、最も忙しいアプリ画面、1つのダイアログ、1つのフォーム）を今すぐ撮影してください。1440×900と375×812を使用します。.design-differently/before/ に home-1440.png などの名前で保存します。各画面の正確なルートと状態をメモし、後で同じものを再現できるようにします。このフォルダはコミットしないでください。

3. 修正点をリストアップし、ユーザーに選択させる

このステップに回答があるまで、ファイルを変更しないでください。

発見事項を1つの番号付きリストとして表示し、エリア見出し（タイポグラフィ、コピー、ビジュアル、モーション、オーバーレイ、ツールチップ、キーボード、コンポーネント、画像、ランディング）でグループ化します。番号はグループ間で連続します。1行に1項目：何が問題か、どこで、何を変更するか。発見事項のないエリアは省略します。

### タイポグラフィ
1. Interが唯一のフォントとして使用されている（app/layout.tsx）。あまり一般的でないサンセリフに置き換えます。
### コピー
2. ランディングコピーに14個のemダッシュ（components/Hero.tsx、Features.tsx）。ピリオド、カンマ、またはコロンに置き換えます。
3. ヒーローの区切り線「Fast · Private · Open source」（components/Hero.tsx）。アイコン付きのFUD行に変更します。
4. 設定画面でオプションの説明がラベルを繰り返している（settings/page.tsx）。削除します。

リストの最後に、正確に以下の質問を付けます：

「すべて」と返信すると全ての修正を適用します。または、適用したい番号を指定してください（例：1, 3, 5-9）。

その後、回答を待って停止します。

4. 選択された項目を修正する

ユーザーが選択した項目のみを適用します。エリアごとに、以下の順序で行います：コンポーネント、オーバーレイ、タイポグラフィ、ビジュアル、モーション、ツールチップ、キーボード、画像、コピー、ランディング。

最初に共有コンポーネントとトークンを変更し、1つの修正ですべての画面に反映されるようにします。

各エリアの後、プロジェクトのチェック（リント、型チェック、テスト、ビルド）を実行します。チェックが失敗した場合は、次のエリアに進む前に修正します。修正にバックエンドやロジックの変更が必要な場合は、その項目を元に戻し、スキップとしてマークします。

5. 確認して「After」をキャプチャする

最初のパスは草案です。変更内容の記憶ではなく、外部の証拠と照らし合わせて確認します：

• スクリーンショットを撮れる場合は、すべての「Before」のショットと同じルート、状態、サイズで再撮影し、.design-differently/after/ に同じ名前で保存します。また、触れた他の画面も撮影します。それらを見て、クリップ、重なり、読みにくさ、ジャンプなどがあれば、そのエリアのステップ4に戻ります。
• 検出パターンを再度実行します。許可された例外以外でパターンがまだヒットする場合は、ステップ4に戻ります。
• 編集したすべての文字列をコピールールに対して再読します。まだルールに違反している場合、またはルールが必要とする以上の変更を加えた場合は、ステップ4に戻ります。

6. ルールをリポジトリにロックし、レポートを投稿する

修正は将来のVibe Codingにも耐えなければなりません。このプロジェクトを後で編集するエージェントは、コードを書く前にルールを見なければなりません。そうしないと、アーティファクトが戻ってきます。

1. プロジェクトルートに DESIGN_RULES.md を作成します。AIエージェント向けに短く命令形で、150行未満で記述します。このプロジェクトに該当するもののみを含めます：
   • 選択されたフォント、そのファイルと宣言場所、および該当する場合はロゴフォントのパス（AまたはB）。
   • トークンの所在地と、色、角丸、間隔、シャドウ、フォントサイズはトークンからのみ取得するというルール。プライマリ、セカンダリ、およびオプションのアクセントカラーをトークン名で指定し、破壊的・成功色はそれらの状態にのみ使用するというルール。
   • 共有コンポーネントの所在地（Button、Dialog、Tooltip、Dropdown、Badge、Banner）と、それらを再利用し複製しないというルール。
   • このスキルから適用したすべてのルールを、このプロジェクトの具体的な詳細とともに1行ずつ（例：「ツールチップ：components/ui/Tooltip.tsx を使用、2～3語とショートカット」）。
   • 禁止リスト：フォント、絵文字、emダッシュ、装飾的な区切り線、強調の引用符、大きな表面でのガラス効果、デフォルトのフェードインとブラーイン、色付きアイコンボックス、アクセントバーの吹き出し、間隔を空けた大文字のアイブロー、ライブステータスドット、ブラウザデフォルトのコントロールとスクロールバー。
   • 最後の行：「UI変更を完了する前に、このファイルと照合してください。」
2. プロジェクト内のすべてのエージェント指示ファイルをこのファイルにポイントします。以下のそれぞれが存在する場合、すべてのUI、コピー、またはスタイル変更について、DESIGN_RULES.md に従ってください。 という1行を追加します：CLAUDE.md、AGENTS.md、.cursorrules、.cursor/rules/*.mdc、.windsurfrules、.github/copilot-instructions.md、replit.md。存在しない場合は、その行を含む AGENTS.md と CLAUDE.md を作成します。それらのファイルの他の部分は変更しません。
3. DESIGN_RULES.md が以前の実行から既に存在する場合は、新しく作成する代わりに更新します。ユーザーが手動で追加したルールは保持します。

その後、レポートからレポートを最終チャットメッセージとして投稿します。

セッション中にユーザーが修正の1つを訂正した場合は、このファイルのハマりどころに1行追加して訂正を説明し、次回の実行で繰り返さないようにします。

---

ルール

タイポグラフィ

AIツールは同じ限られたフォントに手を伸ばすため、これらのフォントだけでプロジェクトが生成されたように読めます。以下のリストのフォントは、いかなる役割でも使用しないでください。ただし、ユーザーから提供されたブランドガイドラインの一部である場合、または以下のロゴフォントルールが適用される場合は除きます：

役割	禁止フォント
サンセリフ	Inter, Inter Tight, Geist, Roboto, Open Sans, Poppins, Montserrat, Lato, Manrope, DM Sans, Plus Jakarta Sans, Outfit, Figtree, Urbanist, Sora, Lexend, Nunito, Nunito Sans, Raleway, Work Sans, Rubik, Onest, Space Grotesk, Satoshi, General Sans, Cal Sans, Bricolage Grotesque, Syne, IBM Plex Sans, Source Sans 3, Arial, Helvetica を選択された書体として
セリフ	Playfair Display, Instrument Serif, Fraunces, DM Serif Display, Lora, Merriweather, Cormorant Garamond, EB Garamond, Libre Baskerville
モノ	JetBrains Mono, Geist Mono, Fira Code, Fira Mono, Space Mono, Roboto Mono, IBM Plex Mono, Source Code Pro, Ubuntu Mono
デフォルト	何も選択されていないために使用される、素の system-ui または Tailwind デフォルトスタック

プライマリフォント. プライマリフォントは、ロゴに設定されているフォント、またはユーザーが定義したフォントです。タイプシステムの残りはそれに従います。

ロゴフォント. ロゴがフォントで設定されている場合（テキストロゴ、ワードマークコンポーネント、またはロゴのCSSやSVGで名前が付けられたフォント）、そのフォントは禁止リストにあってもロゴに残ります。次に、2つのパスのいずれかを選択し、レポートでどちらかを明記します：

• A. ロゴに従う. ロゴフォントがサイトのプライマリフォントになり、その正確なフォントを使用する必要があります。
  • ロゴがセリフの場合：見出しにはまったく同じセリフを使用します。本文はサンセリフです。
  • ロゴがサンセリフの場合：見出しは、ブランドのキャラクターが明確に適合する場合にのみセリフを使用できますが、これはリスクの高い選択です。それ以外の場合、見出しはサンセリフのままで、理想的には正確なロゴフォントかそれに非常に近いものを使用します。
• B. ロゴのみ. ロゴフォントはロゴのみに残り、残りのフォントはあなたが選択します。ロゴフォントも以下のフォント制限にカウントされます。

ロゴフォントルールは、意図的にデザインされたロゴにのみ適用されます。ロゴがコード生成された場合（オーナーへの提案を参照）、そのテキストはデフォルトのフォントにすぎないため、新しい見出しフォントを割り当て、ロゴを「あなたへ」セクションに追加します。

ペアルール.

• サイト全体で1つまたは2つのフォント（ロゴを含む）。それ以上は不可。
• 2つのセリフは不可。
• プライマリフォントがセリフの場合：サイト上のすべてのセリフはその同じセリフであり、本文は1つのサンセリフです。最大2フォント。
• プライマリフォントがサンセリフの場合：サイト上のすべてのテキストはその同じサンセリフを使用します。一部の見出しを区別するためにのみ、2つ目のサンセリフを追加できます。
• コードブロック（製品にある場合）は、システムのモノスペーススタック（ui-monospace, SFMono-Regular, Menlo, monospace）を使用します。これは選択されたフォントにはカウントされません。

フォントの選択. ロゴフォントもユーザーからのフォントもない場合、自分でプライマリフォントを選択し、ペアルールを適用します：

• まず製品を読む：何をするか、誰が使うか、コピーのトーンは何か。そのキャラクターに合った書体を選び、レポートにその理由を一文書きます。
• 明白な第二候補は避けます。フォントがこの種の製品のために最初に思いつくものである場合、おそらく禁止リストに載る道を進んでいます。同じ役割でより一般的でない書体を選びます。
• ライセンスはWeb上での無料商用利用を許可するもの（SIL Open Font Licenseなど）である必要があります。ソース：Google Fonts（上位結果以外）、Fontshare、Velvetyne、Collletttivo、The League of Moveable Type、ファウンドリの無料ファミリー。

サイト上のすべてのフォントに対して：

• ファミリーごとに最大3ウェイト。
• フォントはリポジトリ内に置く。 woff2 ファイルをプロジェクトにダウンロードし（例：public/fonts/）、@font-face、next/font/local、またはビルド時にバンドルされる @fontsource/* パッケージで読み込みます。ランタイムにGoogle Fonts、Adobe Fonts、Bunny、その他の外部ホストからフォントを読み込まないでください。すべてのページビューがそのホストに訪問者データを送信するためです。維持するフォントを含め、fonts.googleapis.com、fonts.gstatic.com、use.typekit.net リンク、@import、next/font/google インポートをすべて削除します。font-display: swap を使用します。
• 選択した書体の後に、適切なフォールバックスタックを維持します。
• フォントを1か所（トークン、Tailwindの fontFamily、ルートCSS）に設定し、他のすべてのフォント宣言を削除します。

コピー

コピーは軽いタッチで編集します。テキストを書き換えたり、意味、トーン、長さを変更したり、新しい文を追加したりしないでください。以下にリストされたAIの痕跡を削除し、削除によって構文が壊れた場合のみ滑らかにします。痕跡を削除した後で文が問題なく読める場合は、そこで止めます。

削除するもの：

• Emダッシュとスペース入りのenダッシュ（—、–）。ピリオド、カンマ、またはコロンに置き換えます。文を元に最も近く保つものを選びます。
• 強調、皮肉、言い換えに使用される引用符。 削除し、単語は残します。引用符は、正確な逐語的引用の周りにのみ残ります。
• フレーズをつなぐための装飾的な区切り線（·、•、|、/など）。完全に削除します。ピリオドや他の句読点に置き換えないでください。フレーズの扱いは場所によって異なります：
  • ヒーロー、価格カード、主要なセールスライン： フレーズをFUD行（水平に並んだ短いアイテムの行）に変えます。各アイテムには、ラベルの前に小さなアイコンを付けます。プロジェクトのアイコンセットを使用するか、ない場合はインラインSVGを使用します。すべてのアイコンに1つのサイズと1つの無地の色を使用し、背後に背景ボックスは付けません（ビジュアルルールを参照）。行はモバイルで適切に折り返します。
  • 二次的な段落、ヘルパーテキスト、キャプション、フッター： 区切り線を削除します。それらがなくてもプレーンテキストとして読める場合のみフレーズを残します。そうでない場合は、最も重要なフレーズを残し、残りは削除します。
• 「Not just X, but Y」構文 とその類縁：「It's not X, it's Y」、「More than X」、「X, without the Y」。ポジティブな半分を残します。
• ラベルを繰り返す説明文、および必要のないオプションの下の説明文。削除します。
• 機能的なUI上のセールス的または示唆的な説明文。 macOSやPhotoshopのように、短く中立的にします：それが何であるか、または何をするかを述べます。

例：

変更前	変更後
Built for teams — not just individuals.	Built for teams.
ヒーロー：Fast · Private · Open source	3つのアイテムからなるFUD行：ボルトアイコン + Fast、ロックアイコン + Private、コードアイコン + Open source。プロジェクトのセットからのSVGアイコン、絵文字は不可
ヘルパー：Updated daily · 2 min read	Updated daily
Your "second brain" for notes	Your second brain for notes
It's not a to-do app, it's a system.	A system for your tasks.
Dark mode — Switch to a darker theme that's easier on your eyes at night.	Dark mode（説明なし）
Auto-save: Never lose your work again with seamless automatic saving!	Auto-save: Saves changes as you type.

…

[翻訳対象外のため省略]