Article Writer

禁止事項

AI が生成したと分かるような没個性的なデザインや、 文脈に合っていない汎用 UI を避ける。

• 汎用フォント（Inter、Roboto、Arial、システムフォントなど）
• 白背景に薄い紫グラデーション
• テンプレートにあるような予測可能なカードレイアウト
• 意図のないコンポーネントの羅列
• 方向性が曖昧で、統一感のないデザイン

また、常に同じフォントや構成に収束することは避け、 各デザインはそれぞれ異なる美しさと個性を持つべきである。

タイポグラフィガイドライン

避けるべきフォント

絶対に使わないこと: Inter, Roboto, Open Sans

推奨フォント

• 見出し: Playfair Display, Merriweather
• 本文: JetBrains Mono, Source Serif Pro
• UI 要素: Space Grotesk, DM Sans

原則

• コントラストの高いフォントの組み合わせを使う
• 汎用的なサンセリフより編集的なタイポグラフィを優先する
• 可読性も考慮するが、個性を優先する

テーマガイドライン

全体的な美学

• ダークファンタジー RPG テーマ
• 中世とサイバーパンクの融合
• 豊かで雰囲気のあるカラーパレット

配色

• プライマリ: ディープパープル (#2D1B4E)
• アクセント: ゴールド (#D4AF37)
• 背景: ほぼ黒 (#0A0A0A)

ビジュアルスタイル

• テクスチャのある背景
• 装飾的なボーダー
• ドラマチックな影

モーションガイドライン

アニメーションの原則

• マイクロインタラクションには CSS トランジションを使う
• ページロード時はアニメーションを段階的に実行する
• ease-out のタイミング関数を優先する

具体例

• スクロール時のフェードイン + スライドアップ
• ボタンのホバー時の拡大 (1.05倍)
• スムーズな色の変化 (300ms)

避けるべきこと

• 過度なバウンスエフェクト
• 唐突な状態変化
• 500ms を超えるアニメーション

背景ガイドライン

AI っぽくない、自然でクリーンな背景デザインを実装するためのガイドライン。 グラデーションや紫色を避け、ノイズテクスチャやパターンで深みを追加する。 Web デザインやコーディング時に背景スタイルを決定する際に使用する。

パターン

• グラデーションを使わない
• 紫色は使わない
• 深みを出すためにノイズテクスチャを検討する
• 視覚的な面白さのために控えめなパターン（ドット、ライン）を使う

具体例

• 背景には幾何学パターン

実装

• Tailwind のユーティリティを使う
• コントラストを読みやすく保つ