厳選・オープン・無料

Character.AI

キャラクターベースの会話に焦点を当て、低フリクションのサインアップフローを備えた、ミニマルでフレンドリーなAIプラットフォーム。

01

デザイン DNA

シンプルさとオンボーディングの容易さを重視した、クリーンでモダンなチャットアプリケーションインターフェース。

02

カラー

プライマリアクションには高コントラストのダーク要素を用いた、中立的で控えめなパレット。

03

タイポグラフィ

geometric-sans · humanist-sans

• display36px · 700
• body16px · 400

見出しにはインパクトのため、tightなnegative letter-spacingを使用。 · 本文テキストは可読性を維持するため、標準的なline-heightを維持。 · フォントウェイトは400、500、600、700のみに厳密に限定。

04

余白

paddingとgapのための、一貫したスペーシングを備えた標準的な4pxグリッドシステム。

05

サーフェス (角丸 / 影 / 罫線)

1px solid #d4d4da

rgba(0, 0, 0, 0.1) 0px 4px 6px -1px · rgba(0, 0, 0, 0.1) 0px 2px 4px -2px

06

レイアウト

サインアップフォームの背景となる大きなヒーロー画像を持つ、中心配置のカードレイアウト。

07

モーションとインタラクション

すべてのインタラクティブ要素に微細な250msトランジション。 · スムーズな背景画像のスケーリングまたはフェード。 · ボタンやリンクのクリーンなhover状態。

プライマリボタンの微細な背景色の変化や透明度のシフト。 · 軽微なスケールや色の変化による即座のフィードバック。

08

コンポーネント

• button 高コントラスト（黒または白）でテキストが中央揃えされた、大きく角丸のボタン。
• card メインのサインアップフォームに使用される、微細なシャドウを持つ浮遊白カード。
• chip フッターナビゲーションに使用される、hover時に下線がつくシンプルなテキストリンク。
• input 角丸と微細なボーダーを持つクリーンな入力フィールド。
• hero 大きなアニメーション/イラスト付き背景と、コンバージョン用の浮遊白カードを持つ分割レイアウト。

09

文体と禁止事項

• トーン 魅力的、シンプル、そして前向き。
• 見出し スケールとスピードに焦点を当てた、直接的でメリット重視のスタイル。
• CTA 明確でアクション指向のボタン（例：「チャットにサインアップ」「Googleで続ける」）。

• 複雑なマルチカラムグリッドを使用しない — スクリーンショットはシンプルで焦点を絞った単一カラムまたは分割レイアウトを示している。
• 多様な色を使い分けない — スクリーンショットは黒と白を主なコントラストとする中立的なパレットを示している。
• 華やかまたは装飾的なフォントを使用しない — スクリーンショットはクリーンでモダンなサンセリフタイポグラフィを示している。
• メインインターフェースに重く暗い背景を使用しない — スクリーンショットは明るく軽快な美学を示している。
• 小さく詰まったボタンを使用しない — スクリーンショットは十分なpaddingを持つ、大きくタッチフレンドリーなボタンを示している。
• 攻撃的または高彩度のアクセントカラーを使用しない — スクリーンショットは落ち着いたモノクロ UI を示している。
• 避ける: 技術用語
• 避ける: フォーマルまたは過度に企業的な言語
• 避ける: 冗長な説明

10

パック内の実スクリーンショット

実ページから取得 · 実 computed styles

11

System Prompt

en · zh-CN · zh-TW · ja · ko