厳選・オープン・無料

Pika

大胆で遊び心のあるAI動画生成プラットフォーム。清潔でハイコントラストのインターフェース。

01

デザイン DNA

遊び心がありながらも強力なAIクリエイティブスタジオ。

02

カラー

温かみのあるオフホワイトの背景に、鋭い黒のタイポグラフィと遊び心のあるゴールデンアクセント。

03

タイポグラフィ

grotesque-sans · humanist-sans

• display80px · 900
• h148px · 700
• h232px · 500
• body17px · 400
• caption14px · 300

見出しはウルトラボールドの大文字で、力強くインパクトのある視覚的階層を生み出す。 · 本文は見出しの大胆さに対し、可読性のためにより軽いウェイトで設定する。 · タイポグラフィは、現代的でコンパクトな印象を与えるため、字間を tight に設定する。

04

余白

一貫した4pxの基本単位で、セクションには広めのパディング（40px）。

05

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

1px solid rgba(207, 195, 255, 0.5)

0px 2px 0px 0px #111111 · 0px 4px 4px 0px rgba(0, 0, 0, 0.05)

06

レイアウト

中央揃えの単一カラムヒーローで、下部に広いコンテンツエリア。

07

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

インタラクティブ要素のスムーズな色と背景色のトランジション。 · ボタンやカードの微細なtransformトランジション。

インタラクティブ要素の微細な色や背景色の変化。 · わずかなtransformや透明度の変化。

08

コンポーネント

• button ハイコントラストの角丸ボタン。プライマリはダーク背景に白文字、セカンダリはライト背景にダーク文字。
• card 大きな角丸カード。明確な背景色（パープル、ダークグレー、オレンジ）と大胆なタイポグラフィ。
• chip 小さな角丸タグ（例：'PIKA AGENT'）。ダーク背景にライトテキスト。
• input 大きな角丸テキスト入力エリア。ライトグレー背景に、アクションボタンを統合。
• hero 中央揃えのヒーロー。巨大で大胆な見出し、サブヘッドライン、目立つ入力フィールド。

09

文体と禁止事項

• トーン 遊び心があり、エネルギッシュで、率直。
• 見出し 大胆、大文字、非常にインパクトがある。
• CTA アクション指向で明確（例：「生成」「Webで試す」）。

• 見出しに細く軽いタイポグラフィを使用しない — スクリーンショットはウルトラボールドの重いウェイトのディスプレイテキストを示している。
• 純粋な白の背景を使用しない — スクリーンショットは温かみのあるオフホワイト（#FCFAF7）を示している。
• クールな青やグリーンをプライマリアクセントに使用しない — スクリーンショットは温かみのあるゴールデンイエロー（#FFD184）とパープルを示している。
• シャープで四角い角を使用しない — スクリーンショットはカードや入力に大きなborder-radius（18px）を示している。
• 小さく窮屈な間隔を使用しない — スクリーンショットはセクションに広めのパディング（40px）を示している。
• ダークモードをデフォルトにしない — スクリーンショットはダークテキストを用いた主にライトのインターフェースを示している。
• 避ける: 過度に技術的な専門用語
• 避ける: 受動的な言葉遣い
• 避ける: 細く薄いタイポグラフィ
• 避ける: ごちゃごちゃしたレイアウト

10

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

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

11

System Prompt

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