厳選・オープン・無料
Qonto
口座、ツール、およびAI搭載の管理を提供する、包括的なビジネス財務プラットフォーム。
fintechsaas
01
デザイン DNA
ビジネス口座財務管理会社設立AIエージェント信頼
企業向けに、モダンなバンキングをAI駆動の財務自動化と融合させたプレミアムなフィンテックプラットフォーム。
02
カラー
#FFFFFFInk
#626262Ink soft
#050505BG
#1A1A1ABG soft
#CCCCCCMuted
rgba(204,204,204,1.0)Line
近黒の背景と純白のテキストによる、プレミアム感を実現するハイコントラストのモノクロームパレット。
03
タイポグラフィ
geometric-sans
- display
56px · 700 - h2
48px · 700 - body-lg
18px · 400 - body
16px · 400 - caption
14px · 400 - overline
12px · 400
ディスプレイテキストには、インパクトのためにタイトな負の文字間隔（-1px）を使用 · 本文テキストは、可読性のために十分な行高（1.5）を維持 · すべてのテキストは、モダンな一貫性のためにジオメトリック・サンセリフカテゴリを使用
04
余白
4px
8px
12px
16px
24px
32px
48px
56px
64px
80px
96px
一貫した4pxベースを採用し、コンポーネント密度に応じて4、8、12、16、24の倍数でスペーシングを定義
05
サーフェス (角丸 / 影 / 罫線)
sm · 4px
md · 8px
lg · 24px
pill · 33554432px
ミュートな区切り線にrgb(204,204,204)、インタラクティブ要素にrgb(255,255,255)を使用した1pxの実線ボーダー
0px 0px 20px 0px rgba(255,255,255,0.08) · 1px 0px 10px 2px rgba(0,0,0,0.1)
06
レイアウト
1280container
12columns
24pxgutter
768 / 1024breakpoints
12カラムグリッドを採用し、ビューポートを支配する大きなヒーローセクションとともに、十分なホワイトスペースを確保
07
モーションとインタラクション
200msmicro
300mssmall
500msmedium
cubic-bezier(0.25, 0.46, 0.45, 0.94)easing
画像reveal用のbackground-sizeトランジション · 読み込み状態用のwidthアニメーション · インタラクティブ要素用のスムーズなtransformアニメーション
0.5秒のease-outタイミングによる、控えめな背景色トランジション · トランスフォーム状態による即座のビジュアルフィードバック
08
コンポーネント
- button 24pxのボーダー半径を持つハイコントラストボタン。ダーク背景上では白、ライト背景上では黒の背景色を使用
- card 機能セクション用に、控えめなシャドウを持つ大型の角丸コンテナ（24px半径）
- chip ラベルやバッジ用の、12px半径を持つ小さな角丸タグ
- input 1pxボーダーと角丸を持つ、クリーンなインプットフィールド
- hero 大きなタイポグラフィ（56px）と製品写真を用いた、フルビューポートのヒーローセクション
09
文体と禁止事項
- トーン プロフェッショナルで自信に満ち、直接的な価値提案を伴う、簡潔なトーン
- 見出し 強調のためにピリオドで終了する、短く有力なステートメント（例：「ビジネス口座。」）
- CTA 明確な動詞によるアクション指向（例：「口座を開設する」「適切なプランを見つける」）
- カラフルなグラデーションを使用しない — スクリーンショットでは白テキストの単色黒背景が使用されている
- 過度なアニメーションを追加しない — スクリーンショットでは控えめなトランジションと静的レイアウトが使用されている
- 装飾的なフォントを使用しない — スクリーンショットでは全体を通してクリーンなジオメトリック・サンセリフが使用されている
- レイアウトを過密にしない — スクリーンショットでは十分なパディング（56px）とスペーシングが確保されている
- ヘッドラインに小さなテキストを使用しない — スクリーンショットではヒーローセクションに56pxのディスプレイタイプが使用されている
- 複数のアクセントカラーを混ぜない — スクリーンショットでは厳格な黒/白/グレーのパレットが維持されている
- 避ける: 過度な感嘆符を避ける — スクリーンショットでは落ち着いた、ピリオドで終了するステートメントが使用されている
- 避ける: 複雑な金融用語を避ける — スクリーンショットでは平易なビジネス言語が使用されている
- 避ける: 圧倒的な機能リストを避ける — スクリーンショットではセクションごとに明確な価値を1つ提示している
- 避ける: 雑然としたインターフェースを避ける — スクリーンショットでは十分なホワイトスペースが確保されている
- 避ける: 派手なカラーを避ける — スクリーンショットでは抑制されたモノクロームパレットが使用されている
- 避ける: カジュアルな言葉遣いを避ける — スクリーンショットでは全体を通してプロフェッショナルなトーンが維持されている
10
パック内の実スクリーンショット
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏実ページから取得 · 実 computed styles
11
System Prompt
これはビジネス財務管理のための、プレミアムなフィンテックSaaSプラットフォームです。デザインDNAは、近黒の背景（#050505、#1A1A1A）と純白のテキスト（#FFFFFF）による、ハイコントラストのモノクロームパレットを採用し、プレミアムなポジショニングを実現します。タイポグラフィは、ヘッドラインにタイトな文字間隔を持つジオメトリック・サンセリフカテゴリを採用し、本文テキストには十分な行高を設定します。主要なHEXカラーは、背景用#050505、プライマリテキスト用#FFFFFF、およびミュート要素用#CCCCCCです。レイアウトは24pxガターを持つ12カラムグリッドと、大きなヒーローセクション（56pxヘッドライン）を使用します。重要な注意点：カラフルなグラデーション、過度なアニメーション、装飾的なフォントは避けてください。すべてのコンポーネントにおいて、ピリオドで終了するヘッドラインと十分なホワイトスペースを維持し、抑制的で自信に満ちたトーンを保ちます。
en · zh-CN · zh-TW · ja · ko