厳選・オープン・無料

Relief

債務を減らし、より早く借金フリーになるための金融アプリ。

01

デザイン DNA

債務を抱える人々のための、穏やかで安全な避難港。

02

カラー

穏やかで信頼感を伝えるパレット。温かみのあるオフホワイトと様々な青色を組み合わせ、安心感と安全性を表現します。

03

タイポグラフィ

humanist-sans · monospace

• display49px · 800
• display31px · 700
• display20px · 700
• body18px · 400
• body16px · 400
• body14px · 400

04

余白

4pxグリッドに基づいた一貫したスペーシング。14px、21px、28px、56pxなどの値を使用します。

05

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

基本的にボーダーレス。背景色のコントラストに依存します。

0px 7px 0px 0px rgba(154, 207, 246, 0.5) · 0px 3px 0px 0px rgba(0, 0, 0, 0.05) · 6px 6px 44px 0px rgba(22, 31, 53, 0.1)

06

レイアウト

中心に配置されたヒーローレイアウトから、2カラムの機能セクションへと移行します。

07

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

インタラクティブ要素へのホバートランジション

ホバー時の微細なトランジション効果 · スクリーンショットにはクリック状態の視覚的変化なし

08

コンポーネント

• button ピル型のプライマリボタン。ソリッドブルーの塗りと、明確な3Dオフセットシャドウを採用。
• card ダークブルーの背景と5つ星の評価を持つ、証言カード。
• chip ユーザーの信頼を示すアバター付きの角丸タグ。
• input クリーンで角丸の入力フィールド。
• hero モバイルアプリのモックアップと浮遊する3D要素を備えた、イラスト入りヒーローセクション。

09

文体と禁止事項

• トーン 支援的、励ますような、かつ率直なトーン。
• 見出し 「借金から解放されましょう」のような、直接的で行動を促すフレーズ。
• CTA 「安心を手に入れる」や「私の貯蓄を見る」など、明確でシンプルな表現。

• ヒーローにダークな背景を使用しない — スクリーンショットでは、雲のある明るいブルーの背景が使用されている。
• ボタンにシャープで直角の角を使用しない — スクリーンショットでは、完全に丸みのあるピル型ボタンが使用されている。
• プライマリボタンにフラットデザインを使用しない — スクリーンショットでは、明確な3Dシャドウオフセットのあるボタンが使用されている。
• 複雑なナビゲーションメニューを使用しない — スクリーンショットでは、ロゴとCTAのみのミニマルなトップバーが使用されている。
• 複数のハイコントラストカラーを使用しない — スクリーンショットでは、主にブルーとオフホワイトに限定されたパレットが使用されている。
• ヒーローに密集した複数カラムのレイアウトを使用しない — スクリーンショットでは、中心に配置された単一カラムのフォーカスが使用されている。
• 避ける: 過度に専門的な金融用語
• 避ける: 攻撃的または焦りを促すトーン
• 避ける: 複雑な文章構造

10

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

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

11

System Prompt

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