Friendly

難易度:
ビジュアルスタイル
Friendly プレビュー

プレビュー

デザイントークン

公式ブランド資料とこのスタイルのプロンプトから導出した主要トークン。コピーするか、下の DESIGN.md と合わせて利用できます。

カラー

  • primary手動確認済み

    主要アクションとハイライト

  • on-primary推定

    プライマリ上のテキスト

  • secondary推定

    タグ、バッジ、副次的な強調

  • on-secondary推定

    セカンダリ上のテキスト

  • neutral手動確認済み

    ページ背景

  • on-neutral推定

    背景上のテキスト

  • surface推定

    カード、パネル、オーバーレイ

  • on-surface推定

    サーフェス上のテキスト

  • border推定

    ボーダーと区切り線

角丸と形状

推定
sm · 4px
md · 8px
lg · 12px
full

スペーシング

推定
  • sm8px
  • md12px
  • lg24px

シャドウとエレベーション

推定

階層は細いボーダーとトーンの違いで表現します。

タイポグラフィ

推定
  • Ag

    見出し 32px · ボールド

    Inter

  • Ag

    本文 16px · レギュラー

    Inter

  • Ag

    ラベル 13px · ミディアム

    Inter

Friendly は親しみやすく直感的なスタイルです。丸みのある要素、柔らかなパステル調（ミントグリーン #D9F2D8 とライトピンク #F2D9DC が引き立て合う）、そして大きく読みやすい書体が、UI を忍耐強い友人のように感じさせます。鋭い角もまぶしいコントラストもなく、すべての操作がひと目でわかります。教育、医療、一般向けのコンシューマー製品に適しています。

Friendlyクリエイティブ

プロンプトテンプレート

基本テンプレート
Design a Friendly-inspired interface.  Colors: #D9F2D8, #16A34A, #D97706, #DC2626 with #16A34A accent. Typography: #F2D9DC.

バリエーションプロンプト

📱 モバイル
Design a mobile app with Friendly aesthetics. Use Friendly color identity with #16A34A accents. Clean, touch-friendly, native feel.
💻 Web
Design a web application with Friendly style. Use Friendly color identity with #16A34A accents. Professional, responsive layout.
📊 ダッシュボード
Design a dashboard with Friendly design language. Use Friendly color identity with #16A34A accents. Data-rich, organized, clear hierarchy.
📄 ランディングページ
Design a landing page with Friendly visual identity. Use Friendly color identity with #16A34A accents. Compelling, conversion-focused.

使用例

Friendly アプリ

Web
Build a web app with Friendly design language and #16A34A color system.

Friendly ダッシュボード

ダッシュボード
Create a dashboard using Friendly style with data visualization and #F2D9DC typography.

✅ 適した用途

  • クリエイティブプロジェクト
  • 家庭向けプロダクト
  • 健康・ケア系アプリ

❌ 適さない用途

  • 冷徹な金融ターミナル
  • ダーク SF の UI

DESIGN.md ファイル

design.md オープン形式に準拠したデザインシステム記述。コピーまたはダウンロードして AI コーディングツールに渡せます。

ダウンロード