厳選・オープン・無料

GoCardless

B2Bの決済回収を効率化するよう設計されたプロフェッショナルなフィンテックプラットフォーム。

01

デザイン DNA

B2Bの決済回収を効率化するよう設計された、信頼性を重視したプロフェッショナルなフィンテックプラットフォーム。

02

カラー

温みのあるオフホワイトと暗いチャコールの抑制されたパレットに、単一の高彩度イエローアクセントを配する。

03

タイポグラフィ

geometric-sans · humanist-sans · monospace

• display56px · 700
• h236px · 600
• body18px · 400
• small14px · 400

見出しには太字の幾何学的sans-serifを用い、力強くモダンな存在感を演出。 · 本文には高可読性のhumanist sans-serifを用い、快適な読書体験を実現。 · 等幅フォントは、特定の技術的またはデータ関連のコンテキストに限定して使用。

04

余白

4pxベースグリッドを一貫して使用し、主要なページセクション間には十分な垂直リズム（48px/64px）を設ける。

05

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

1px solid #D4D1CD

0px 0px 0px 1px inset（ボタンボーダー） · 0px 0px 1px 0px rgba(0, 0, 0, 0.1)（カードの控えめな奥行き）

06

レイアウト

デスクトップ向けの2カラムグリッド。テキスト左/メディア右、メディア左/テキスト右と交互に配置し、視覚的な興味を喚起する。

07

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

インタラクティブ要素の背景、カラー、ボックスシャドウに対する高速な0.1秒/0.2秒トランジション。 · テキストリンクに対する滑らかな0.2秒のアンダーラインカラートランジション。

ボタンの背景カラー塗りつぶしやボーダーカラーの変化。 · 背景やボーダーの更新による即時のステート変更。

08

コンポーネント

• button 太く実線のダークボーダーを持つピル型ボタン。プライマリアクションには塗りつぶしイエロー、セカンダリには透明を使用。
• card ソフトなドロップシャドウと大きなボーダー-radius（24px/32px）を持つクリーンなカード。証言やパートナーロゴに使用。
• chip 主要な機能としては採用されない。
• input 主要な機能としては採用されないが、丸みのあるボーダーのクリーンなデザインが想定される。
• hero 大胆なタイポグラフィに高品質なコンテキスト写真と目立つビデオ再生オーバーレイを組み合わせる。

09

文体と禁止事項

• トーン プロフェッショナルで、直接的、かつベネフィット指向。
• 見出し 即座に注意を引くための太字、大文字、パンチのあるスタイル。
• CTA 明確でアクション指向。例：「サインアップ」「営業へのお問い合わせ」。

• ダークテーマを使用しない — スクリーンショットでは、明るく温みのあるオフホワイトがプライマリ背景（#EFECE7）として使われている。
• 細く繊細なタイポグラフィを使用しない — スクリーンショットでは、太字のヘビーな幾何学的sans-serifがディスプレイテキストとして使われている。
• 控えめでマイルドなアクセントを使用しない — スクリーンショットでは、単一の高彩度イエローアクセント（#F1F252）が使われている。
• シャープで四角いコーナーを使用しない — スクリーンショットでは、ボタンやカードに大きなピル型のradius（24px/32px）が使われている。
• 複雑なグラデーションを使用しない — スクリーンショットでは、フラットなカラーフィルとシンプルな写真背景が使われている。
• 繊細で細いボーダーを使用しない — スクリーンショットでは、インタラクティブ要素に目立つ1pxの実線ダークボーダーが使われている。
• 避ける: 過度に複雑な専門用語
• 避ける: 見出しにおける受動態
• 避ける: 不明確な価値提案

10

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

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

11

System Prompt

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