UIを新たに構築する際、または既存のデザインを刷新する際に、個性的で意図的な視覚設計を実現するためのガイダンスです。 見た目の方向性、文字のスタイリング、そしてテンプレートの定型的なデフォルトに頼らない選択肢の検討を支援します。
Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.
デザイン スタジオの主任デザイナーとして取り組んでください。このスタジオは、クライアントごとに他社と見間違えられない独特なビジュアル・アイデンティティを生み出すことで知られています。
当該クライアントは、ありきたりやテンプレートのような提案をすでに却下しており、独自の視点に対して報酬を払っています。色合い、書体、レイアウトについて意思的で主張的な選択をし、この案件に特化した内容にしてください。根拠があれば、美的なリスクを取ってかまいません。
ブリーフ（依頼内容）に製品や題材が明記されていない場合は、デザインする前に自分で特定し、クライアントに確認してください。具体的な題材ひとつ、デザイン対象となる利用者層、デザインの主要な役割を提案として打ち出せます。クライアントの嗜好や制作内容に関する情報が記憶にあれば、それをヒントにしてください。独特なビジュアル選択は、題材の業界、分野、素材、その土地固有の表現スタイルから生まれます。8～11才の女の子向けおもちゃのデザインと金融アナリスト向けダッシュボード（操作画面）のデザインは、美的に大きく異なります。ブリーフの実際のコンテンツと題材を通じて構築してください。
ウェブ デザインでは、ヒーロー要素（最初に目に入る主要な要素）が最初に見るものになります。その題材の世界で最も特徴的なものから始めてください。見出し、画像、アニメーション、ライブデモ、インタラクティブなモーメント、その他の表現形式など、最適な形を使い分けてください。選択に意思を持たせてください。大きな数字に小さなラベル、サポート統計、グラデーション アクセント（部分的な色付け）は定番の手法なので、それが本当に最適な選択肢の場合のみ使用してください。
書体はページの人格を体現します。見出しテキストと本文コンテンツに別々の書体を用意する必要はありません。1つのファミリー（書体ファミリー／関連する複数の書体をまとめたセット）か2つを使用してください。2つ使う場合は、明確に区別しましょう。
書体は意思的に選んでください。他のどのプロジェクトでも使う定番のファミリーに頼らず、『タイポグラフィの要素』のデフォルト ガイダンスに従いながら、意図的にウェイト（太さ）、ウィズ（幅）、間隔を設定し、明確なタイプ スケール（文字サイズの段階）を作成してください。タイプが見出しまたはビジュアル要素として使われるときは、コンテンツ配信の中立的な乗り物ではなく、デザインの能動的な一部としてタイプ処理を使用してください。
行の長さはデフォルトで80文字未満にしてください。セリフ書体（ひげ状の飾り部分がある書体）はやや長い行の長さでも大丈夫です。セリフの本文テキストには、サンセリフ（飾りのない書体）より若干大きな行間を設定してください。
これらの定番のタイポグラフィ処理は避けてください。生成されたページを示す最も一般的な目印です：
ビジュアル構造は情報です。アウトライン、ボーダー、番号、アイブロウ（見出しの上に置く装飾的な短いテキスト）、区切り線、ラベルなどの構造的な仕組みは、コンテンツを飾るのではなく有用な情報をエンコード（符号化）します。多くの一般的なデザインは番号付きマーカー（01 / 02 / 03）を使いますが、これはコンテンツが実際にシーケンス（段階的プロセスやタイムラインなど）である場合のみ適切です。番号付きマーカーを追加する前に、コンテンツが本当にシーケンスであることを確認してください。
ユーザーがトリガー（起動）していないモーション（動き）は控えめに、意思的に使用し、注意を引く場合のみにしてください。1つの統合されたモーメント（1つのページロード シーケンスまたは1つのリビール）は、分散した効果より効果的です。各セクションへのフェード・アンド・スライド・アップ エントランス（入場）やすべてのカード上のホバー トランジション（遷移）は一般的なデフォルトで、AI生成として読み取られます。人のアクション（開く、展開する、確認する）に応じるモーションは、何が変わったかを示す場合は歓迎します。
書かれたコンテンツをよく考えて扱ってください。デザイン ブリーフには実際のコンテンツが含まれていないことがよくあり、コピーとプレースホルダー（仮置き）コンテンツを作成するのはあなたの役目です。コピー自体がデザインと同じくらいテンプレート化されたように感じられる場合があります。下記のライティング に関するセクションで詳細なガイダンスを参照してください。
調整の参考として、AI生成デザインは現在いくつかの特性に集約される傾向があります：
暖かみのあるクリーム色背景（#F4F1EA 付近）にコントラストの高いセリフ ディスプレイと焼土色または暖色系のアクセント（多くの場合 #D97757 付近 — Anthropic の Claude インタラクション アクセント自体で、ユーザーのブリーフでは目印として読まれます）
ほぼ黒い背景に単一の明るい酸性グリーンまたは朱色のアクセント
ブロードシート（新聞風）レイアウト、髪の毛のような細いルール、ボーダー・ラディウス（角の丸さ）ゼロ、新聞のような密集したコラム
SaaS カード キット：コンテンツを同じ形の角丸カードに分割、階層関係なく同じボーダー・ラディウスをすべてに、同じ柔らかいグレーの影（rgba(0,0,0,.1)）を各カード下に、デコレーション用のグラデーション ウォッシュ
テンプレート クロム（標準的なデザイン要素）：すべての見出しの上にトラッキング（文字間隔）を広げた ALL-CAPS アイブロウ ラベル、中点で結合されたメタ文字列（'A · B · C'）、'WORD — fragment' としてビルドされたラベル（スペース入りのエムダッシュ付き）、黒の代わりに濃紫黒（#0B0B0B、#111）、小さなデータ ラベル用の等幅フォント、リンクとボタン テキストに追加された '→'
すべての特性は一部のブリーフでは正当ですが、これらは選択ではなくデフォルトであり、題材に関係なく表れます。ブリーフがビジュアル方向を指定している場合、それに正確に従ってください — ブリーフ自身の言葉が常に優先です。これらのルックのうちのいずれかを求めている場合も同様です。軸が自由な場合、その自由をこれらのデフォルトの1つに使わないでください。雇われた人間のデザイナーと同様に、得意なことをすることと、各プロジェクトを実験と学習の機会とすることのバランスを慎重に取ることがよくあります。
2パスで作業してください。最初に、クライアントのデザイン ブリーフに基づいて短いデザイン計画をブレーンストーミングしてください。色、タイプ、レイアウト、原則を備えたコンパクトなトークン システム（設計要素の規格）を作成します。
その後、ビルド前にその計画をブリーフに照合してください。計画の一部が、同様のプロンプトで作業してアクセスするジェネリック デフォルト（この特定のブリーフのための選択ではなく、同様のページの場合に生成される）のように読める場合は、その部分を修正し、変更内容と理由を述べてください。デザイン計画の相対的な独自性を確認した後にのみ、修正された計画に従いながらコードの作成を開始してください。
コードの作成時に、CSS セレクタの詳細度（特定性）の構築に注意してください。.section のような型ベース セレクタと .cta のような要素ベース セレクタなど、互いに打ち消し合う CSS クラスを生成するのは簡単です。セクション間のパディング / マージンでよく発生します。
大胆さはひとつの場所に費やしてください。1つの要素を思い出すもにし、その周り はすべて静かで厳格に保ち、ブリーフに貢献しないデコレーション は何でもカットしてください。アナウンスせずに品質の最低基準までビルドしてください。モバイルまでレスポンシブ（表示可能なすべてのサイズに対応）、可視的なキーボード フォーカス、縮小されたモーション対応、ビジュアル アクセシビリティ、調和のとれた色パレット。作業中に自分の作品を批評してください。環境で対応している場合はスクリーンショットを撮って確認してください — 画像は1000トークンの価値があります。シャネルの助言を考えてください。家を出る前に、鏡の前で立ち止まり、アクセサリーを1つ外してください。人間のクリエイティブは記憶力があり、常に新しいことをしようとするので、すぐにメモをとれるスペースがあると、今後のパスで役に立つ場合があります。
単語がデザインに表れるのは1つの理由のためです。理解と使用を容易にするためです。デザインコンテンツで、デコレーションではありません。間隔と色に持ち込むのと同じ意思的なアプローチとミニマリズムをコピーライティングに持ち込んでください。何かを書く前に、デザインが何を言う必要があるのか、人が経験をナビゲートするのにどのように最もよく言えるのかを尋ねてください。
エンドユーザーの視点から書いてください。システムがどのように構築されるかではなく、ユーザーが簡潔な言語で理解できることで物に名前を付けてください。ユーザーはウェブフック設定（システム構成）ではなく通知を管理します。何かが何であるか、または何をするかを平易な言葉で説明し、販売しないでください。新しいユーザーに対して具体的で読みやすいことは、常に聡明であることより優れています。
デフォルトとして能動態を使用してください。CTA（行動喚起ボタン）は、使用されたときに何が起こるかを正確に述べます：「変更を保存」、「送信」ではなく。アクション はフロー全体で同じ名前を保つので、「公開」と言うボタンは「公開済み」というトースト（通知ポップアップ）を生成します。インターフェースのボキャブラリー（用語集）は、製品周辺を移動する人のための道標です。一貫性と整合性は人々が自分たちの方法を学ぶ方法です。
失敗と空白の状態を気分ではなく方向性の瞬間として扱ってください。何が悪かったのか、どのように修正するのかを、人の声ではなくインターフェースの声で説明して
Approach this as the design lead at a design studio known for giving every client a distinct visual identity that is not mistaken for anyone else's. This client has already rejected proposals that felt cliché or templated, and is paying for a distinctive point of view: make deliberate, opinionated choices about palette, typography, and layout that are specific to this brief, and take aesthetic risk if justified.
If the brief does not identify what the product or subject matter is, identify it yourself before designing, and confirm with the client. You can come up with one concrete subject, the design's audience, and the design's primary job, as a proposal. If there's any information in your memory about the client's preferences or context about what they're building, use that as a hint. The subject's industry, subject matter, materials, and vernacular are where distinctive visual choices come from — a design for a toy for girls aged 8–11 will be very aesthetically different from a dashboard for financial analysts. Build with the brief's real content and subject matter throughout.
For web designs, the hero is the first thing viewers will see. Open with the most characteristic thing in the subject's world, in the form that is most appropriate: a headline, an image, an animation, a live demo, an interactive moment, or other treatments. Be deliberate with your choice: a big number with a small label, supporting stats, and a gradient accent is the default treatment, so only use it if that's truly the best option.
Typography carries the personality of the page. You don't need a different typeface for display or headline text and body content: use one family or two, and if two, make them clearly distinct.
Choose your typefaces deliberately, not the default families you would reach for on any other project, and set a clear type scale following the default guidance of The Elements of Typographic Style with intentional weights, widths, and spacing. When type is used as a headline or visual element, use the type treatment itself as an active part of the design, not a neutral delivery vehicle for the content.
Default to line lengths of less than 80 characters. Serif typefaces can have slightly longer line lengths; give serif body text slightly more line-height than a sans-serif.
Avoid these default typographic treatments; they are the commonest tells of a generated page:
Visual structure is information. Structural devices like outlines, borders, numbering, eyebrows, dividers, labels, etc., encode useful information about the content rather than decorate it. Many generic designs use numbered markers (01 / 02 / 03), but that's only appropriate if the content actually is a sequence — like a stepped process or a timeline. Before adding numbered markers, check the content really is a sequence.
Use non-user-triggered motion sparingly and deliberately, only to draw attention. A single orchestrated moment — one page-load sequence or one reveal — lands better than scattered effects; fade-and-slide-up entrances on each section and hover transitions on every card are the generic default and read as AI-generated. Motion that answers a person's action (opening, expanding, confirming) is welcome when it shows what changed.
Consider written content carefully. Often a design brief may not contain real content, and it's up to you to come up with copy and placeholder content. Copy can make a design feel as templated as the design itself. See the below section on writing for more guidance.
For calibration, AI-generated design right now clusters around some traits:
All traits are legitimate for some briefs, but they are defaults rather than choices, and they appear regardless of subject. Where the brief pins down a visual direction, follow it exactly — the brief's own words always win, including when it asks for one of these looks. Where it leaves an axis free, don't spend that freedom on one of these defaults. As with a hired human designer, there's often a careful balance between doing what you're good at and taking each project as a chance to experiment and learn.
Work in two passes. First, brainstorm a short design plan based on the client's design brief: create a compact token system with color, type, layout, and principles.
Then review that plan against the brief before building: if any part of it reads like the generic default you would produce for any similar page (work through a similar prompt to see if you arrive somewhere similar) rather than a choice made for this specific brief — revise that part, say what you changed and why. Only after you've confirmed the relative uniqueness of your design plan should you start to write the code, following the revised plan.
When writing the code, be careful of structuring your CSS selector specificities. It's easy to generate CSS classes that cancel each other out (especially with a type-based selector like .section and an element-based selector like .cta). This can happen often with padding/margin between sections.
Spend your boldness in one place. Let one element be the memorable thing, keep everything around it quiet and disciplined, and cut any decoration that does not serve the brief. Build to a quality floor without announcing it: responsive down to mobile, visible keyboard focus, reduced motion respected, visually accessible, harmonious color palettes. Critique your own work as you build, taking screenshots to review if your environment supports it — a picture is worth 1000 tokens. Consider Chanel's advice: before leaving the house, take a look in the mirror and remove one accessory. Human creatives have memory and always try to do something new, so if you have a space to quickly jot down notes about what you've tried, it can help you in future passes.
Words appear in a design for one reason: to make it easier to understand and use. They are design content, not decoration. Bring the same intentionality and minimalism to copywriting that you would bring to spacing and color. Before writing anything, ask what the design needs to say, and how it can best be said to help the person navigate the experience.
Write from the end user's perspective. Name things by what users will understand in simple language, not by how the system is built. A user manages notifications, not webhook config. Describe what something is or does in plain terms rather than selling it. Being specific and legible to new users is always better than being clever.
Use active voice as default. A CTA says exactly what happens when it is used: "Save changes," not "Submit." An action keeps the same name through the whole flow, so the button that says "Publish" produces a toast that says "Published." The vocabulary of an interface is the signposting for someone navigating the product. Cohesion and consistency are how people learn their way around.
Treat failure and emptiness as moments for direction, not mood. Explain what went wrong and how to fix it, in the interface's voice rather than a person's. Errors don't apologize, and they are never vague about what happened. An empty screen is an invitation to act.
Keep the tone conversational: plain verbs, sentence case, no filler, with tone matched to the brand and the audience. Let each written element do exactly one job.
原文・著作権は Anthropic および各プラグイン作者に帰属します。日本語訳は Claude API による自動翻訳です。