design-systems

デザインシステムスキル

ありきたりな「AIっぽいデザイン」を避け、個性的で記憶に残るウェブデザインを生み出すためのフレームワークです。

絶対ルール

• 絵文字禁止：生成するコンテンツでは、見出し、段落、ボタンのテキストなど、どこにも絵文字を使用しないでください。

デザイン思考のフレームワーク

デザインを始める前に、背景を理解し、大胆な美的方向性を決めてください。

1. 目的

• このデザインはどのような問題を解決しますか？
• 誰が使いますか？
• ユーザーにはどのような行動を取ってほしいですか？

2. トーン

ありきたりなスタイルの固定リストから選ばないでください。代わりに、サイトのテーマ、業界、文化、対象ユーザーから、それぞれの方向性を導き出してください。

• この依頼のために雇われた専門デザイナーのように考えてください。どのようなビジュアル資料を調べますか？どのようなムードボードを作りますか？どのような現実の空間、物、素材、文化的な工芸品が美的方向性の参考になりますか？
• 各方向性をテーマに沿ったものにしてください。伝統的なレストランなら、素朴な温かみ、洗練された優雅さ、文化遺産などを探る方向性が考えられますが、ブルータリズムのコンクリートは適しません。テック系スタートアップなら、洗練された精密さ、大胆な変革、データを軸にしたミニマリズムなどを探る方向性が考えられますが、居心地のよい農家風は適しません。
• 多様性に真正性を持たせてください。4つの方向性は、色のパレット、タイポグラフィ、レイアウトのアプローチ、雰囲気において意味のある違いを持たせてください。ただし、どの方向性も、この特定の種類のサイトにふさわしい、もっともらしく練られたデザインに感じられる必要があります。多様性は、無関係な美的要素を持ち込むのではなく、テーマのさまざまな側面を探ることで生まれます。
• 各方向性に具体的な名前を付けてください。タイトルには、一般的な「ミニマリスト」や「大胆」といったラベルではなく、テーマに根ざしたコンセプト（スイスのシャレーのサイトなら「温かな伝統」や「アルプスの優雅さ」など）を反映させてください。

3. 制約

• 技術要件（フレームワーク、パフォーマンス、アクセシビリティ）
• ブランドガイドライン（ある場合）
• コンテンツ要件

4. 差別化

何がこのデザインを忘れられないものにしますか？人々の記憶に残る、唯一の要素は何ですか？

フロントエンドの美的ガイドライン

あなたは、ありきたりで「よくあるパターンどおり」の出力に収束しがちです。フロントエンドデザインでは、これがユーザーの言う「AIっぽいデザイン」につながります。これを避け、創造的で個性的なフロントエンドを作り、驚きと喜びをもたらしてください。

タイポグラフィ

美しく、個性的で、興味を引くフォントを選んでください。

避けるべきフォント（使い古されたもの、ありきたりなもの）：

• Inter
• Roboto
• Arial
• システムフォント
• Space Grotesk（AIで使われすぎています）

優先すべきフォント（個性のあるもの）：

• 個性的なディスプレイフォントと洗練された本文フォントを組み合わせる
• 次のフォントを検討する：Fraunces、Clash Display、Cabinet Grotesk、Satoshi、Outfit、Syne、DM Serif Display、Playfair Display、Cormorant Garamond、Archivo
• フォントの個性をブランドに合わせる（テック系：幾何学的なサンセリフ体、高級感：洗練されたセリフ体、クリエイティブ系：ディスプレイフォント）
• フロントエンドの美しさを引き立てる、意外性があり個性豊かなフォントを選ぶ

タイポグラフィのスケール：

• 一貫した比率（1.25または1.333）を使用する
• 見出しは人目を引くものにする
• 本文は読みやすいサイズ（最小16〜18px）にする

色とテーマ

統一感のある美的方向性を定めてください。控えめで均等に配分されたパレットよりも、主要色に鮮やかなアクセントを添えるほうが効果的です。

戦略：

• モノクロマティック＋アクセント：単一の色系統に、目を引く色を1色加える
• 補色によるコントラスト：対照的な2色を組み合わせる（彩度に注意）
• 類似色による調和：色相環で隣り合う色を使う
• ダークモード：単に色を反転するのではなく、ダークモード専用にデザインする

避けるべきもの：

• 白い背景に紫のグラデーション（ありきたりなAI風の美的表現）
• 均等に配分された虹色のパレット
• コントラストの弱い、色あせた配色
• メインカラーにありきたりな青（#007bff）を使うこと
• 控えめで均等に配分されたパレット

色の比率：

• 60%：主要色（背景、大きな領域）
• 30%：二次色（コンテナ、セクション）
• 10%：アクセントカラー（CTA、ハイライト）

モーションとアニメーション

モーションは、色やタイポグラフィと同様にデザインシステムを構成する要素です。意図的で一貫性があり、サイトの個性に合ったものにしましょう。CSS のみで実現できる方法を優先してください。

手法の選択肢 — 以下のカテゴリから選び、豊かでダイナミックな体験を作りましょう。

カテゴリ	手法
登場アニメーション	フェードアップ、スライドイン、スケールアップ、clip-path による表示 — グループには段階的な遅延を設定
ホバー／フォーカス時のトランジション	カードの浮き上がり、ボタンの変形、下線の伸長、色の変化、影の強調
控えめな継続的モーション	要素の浮遊、アクセントの脈動、装飾的な図形のゆっくりとした回転、グラデーションの変化
スクロール連動の表示	セクションや要素がビューポートに入るとアニメーション
背景アニメーション	グラデーションの色の循環、パターンの移動、背景の緩やかな揺らぎ
テキスト効果	文字間隔のトランジション、ウェイトの変化、見出しの色のワイプ

CSS アニメーションのパターン：

/* Staggered fade-up entrance */
.fade-up {
  opacity: 0;
  transform: translateY(30px);
  animation: fadeUp 0.6s ease forwards;
}
.fade-up:nth-child(1) { animation-delay: 0.1s; }
.fade-up:nth-child(2) { animation-delay: 0.2s; }
.fade-up:nth-child(3) { animation-delay: 0.3s; }
.fade-up:nth-child(4) { animation-delay: 0.4s; }

@keyframes fadeUp {
  to { opacity: 1; transform: translateY(0); }
}

/* Slide-in from side */
.slide-in-left {
  opacity: 0;
  transform: translateX(-40px);
  animation: slideInLeft 0.7s ease forwards;
}
@keyframes slideInLeft {
  to { opacity: 1; transform: translateX(0); }
}

/* Scale reveal */
.scale-up {
  opacity: 0;
  transform: scale(0.9);
  animation: scaleUp 0.5s ease forwards;
}
@keyframes scaleUp {
  to { opacity: 1; transform: scale(1); }
}

/* Continuous float — decorative elements */
.float {
  animation: float 3s ease-in-out infinite;
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* Gradient background animation */
.gradient-shift {
  background-size: 200% 200%;
  animation: gradientShift 8s ease infinite;
}
@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Hover transitions */
.hover-lift {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0,0,0,0.15);
}

/* Accessibility: always include */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

組み立てのガイドライン：

• サイトごとに 2〜3 種類のモーション手法を選び、控えめに一貫して使用します。1 つのページにあらゆる手法を散りばめないでください。
• モーションをサイトの個性に合わせます：テック系サイトは正確でキビキビとしたタイミング、高級感のあるデザインはゆっくりと優雅なイージング、遊び心のあるデザインは弾むようなエネルギッシュな動きを選びます。
• 登場アニメーションは明確な読み進める順序に沿わせます。上から下へ、左から右へ段階的に表示します。
• スクロール連動の表示は最も効果の高いパターンです。セクションがビューポートに入るとアニメーションし、物語が進むような感覚を生み出します。

空間的な構成

ありきたりなレイアウトから抜け出しましょう。意外性のあるレイアウトを使い、定型的なパターンを避けてください。

• 非対称性：中心からずらした要素が視覚的な興味を生み出します。
• 重なり：境界をまたぐ要素が奥行きを加えます。
• 斜めの流れ：角度のある要素で視線を誘導します。
• グリッドからの逸脱：意図的にグリッドからはみ出す要素を配置します。
• ネガティブスペース：ゆとりのある余白、または計算された高密度のどちらかを選びます。

創造的に解釈し、文脈に合わせて本当にデザインされたと感じられる、意外性のある選択をしてください。

背景と視覚的なディテール

単色に頼るのではなく、雰囲気と奥行きを生み出しましょう。

手法	用途
グラデーションメッシュ	モダンでダイナミックな印象
ノイズテクスチャ	温かみ、触感のある質感
幾何学模様	テック、精密さ
透明度を重ねたレイヤー	奥行き、洗練された印象
印象的な影	プレミアム感、高級感
装飾的な境界線	エディトリアル、構造的な印象
グレインオーバーレイ	ヴィンテージ、アナログな印象

アイコン

• テーマの美的感覚に合った、カスタムデザインの SVG アイコンを使用します。
• 線の太さとスタイルに一貫性を持たせます。
• アイコンはコンテンツを引き立てるものであり、競合するものであってはなりません。

ビジョンに合わせた複雑さ

重要：実装の複雑さを美的ビジョンに合わせてください。

マキシマリストなデザインに必要なもの：

• 大規模なアニメーションを含む、凝ったコード
• 複数の視覚レイヤー
• 豊かなインタラクティブ効果
• 密度の高いスタイリング

ミニマリストなデザインに必要なもの：

• 抑制と精密さ
• 余白への細やかな配慮
• 控えめなタイポグラフィの調整
• 意図のある細部の一つひとつ

エレガンスは、機能を増やすことではなく、ビジョンをうまく実現することから生まれます。

デザインの多様性とバリエーション

複数のデザインを生成する場合：

同じ選択に収束させない

• 生成ごとに同じ選択へ収束することは絶対に避けてください
• どのデザインも同じにならないようにします
• 生成ごとに、使い古されたフォント（上記の「避ける」リストを参照）を使わないようにします
• それぞれのデザインが、本当に異なるものに感じられるようにします

核となる要素に変化をつける

色のバリエーション：

• 明るいテーマと暗いテーマを組み合わせます
• 暖色系と寒色系のカラーパレットを組み合わせます
• モノクロームな配色とカラフルな配色を組み合わせます

タイポグラフィのバリエーション：

• 毎回異なるフォントの組み合わせを使います
• セリフ体とサンセリフ体の見出しを組み合わせます
• エレガントな書体と太字の書体を組み合わせます
• 文字のサイズと階層に変化をつけます

レイアウトのバリエーション：

• 全幅のレイアウトと幅を制限したレイアウトを組み合わせます
• 非対称の構成と対称の構成を組み合わせます
• 余白の密度に変化をつけます（ゆったりとしたものからコンパクトなものまで）

スタイルのバリエーション：

• 異なる美的領域を探ります
• それぞれのデザインが、独自の完成したウェブサイトの土台となるように仕上げます
• 似た解決策に収束しないようにします

十分なバリエーションを確保する： デザインごとに、カラーパレット、タイポグラフィ、レイアウトのアプローチ、雰囲気を大きく変えます。ただし、どのデザインも、対象となるサイトの文脈に合った、妥当で考え抜かれたものに仕上げてください。

素晴らしい創作には、独自のビジョンを徹底して追求することが必要です。思い切って取り組みましょう。