Origin Financial
静謐な豪華さを湛えた真夜中のギャラリー。静かで、ほとんど薄暗い部屋の中で、大きなセリフ体フォントと数枚の照明付きカラーパネルが、金融が丹念に作り上げられた芸術作品であるかのような感覚を生み出す。
Originは、パーソナルファイナンスを夜のギャラリーのように表現しています。ほぼ黒のキャンバス、控えめなセリフ体の見出し（80～96px、Lyon Display - 300）、バックライト付きカラーパネルのように浮かぶ色鮮やかな機能カード。画面の大部分は落ち着いたモノクロで、彩度の高い色は、支出、投資、予測モジュール用の全画面カテゴリタイルとデータシグナル（グラフ、スパークライン）にのみ表示されます。タイポグラフィは3つの異なるスタイルに分かれています。感情的な表現には高コントラストのセリフ体、ユーザーインターフェースにはネオグロテスクなサンセリフ体、技術的な見出しとすべて大文字のデータには等幅フォントが使用され、編集的なスタイルと正確さを感じさせます。唯一の主要なアクションは、黒い背景に白いテキストが表示されることだけで、インターフェースの残りの部分は暗闇に溶け込みます。
暗いキャンバスがページの全幅に広がっています（コンテンツコンテナは最大1200pxですが、セクションは端まで回り込んでいます）。ページのリズムは、(1)中央に見出しとAIツールチップが埋め込まれた印象的なスプラッシュ写真、(2)全幅のモジュール、(3)コントラストのために明るい反転#cacaca統計ブロック、(4)90pxのパディングが付いた製品レイアウトストライプが交互に表示されます。見出しは常に中央に配置され、機能カテゴリカードは12～15pxの間隔がある3列グリッドで配置されています。セクション間の垂直方向の間隔は24～80pxで、モジュール間に十分なスペースが確保されています。ナビゲーションは、ぼかし背景（背景フィルター（24px））の固定トップバーで、ロゴ、3つのゴーストボタンナビゲーション要素、「ログイン」テキストリンク、および右揃えの白いプライマリ「始める」コールトゥアクションが含まれています。
雰囲気のある写真が中心的な要素となっています（雲と空のフルフレーム写真に落ち着いたクールな処理を施すと、実際の天気というよりは、インスピレーションを刺激する広々とした空のように感じられます）。製品のビジュアル化では、ほぼ黒の背景にOrigin iPhoneアプリを傾けてレンダリングしたものが使用されています。デバイスが主要な要素であり、画面の反射効果ではなく、微妙な立体的な輝きが加えられています。イラスト、抽象的なグラフィック、ライフスタイル写真はありません。アイコンはミニマルで、白い線やシルエットのモノラインSVG画像が使用されています。全体的にテキストが支配的で、タイポグラフィが視覚的な重みの約80%を占め、画像は雰囲気と製品のプレゼンテーションのために残されています。
Origin Financial AI画像を生成するよう促す
Origin Financial ウェブサイトのビジュアルスタイルで画像を作成してください 描写するもの: [被写体と要望を入力してください — 例：「木製のテーブルの上のコーヒーカップ、朝の光」] スタイル: 静かな富の真夜中のギャラリー。静かでほとんど暗い部屋で、被写体が厳選された芸術作品のような感覚を生み出します。インスピレーションを与える開かれた空のように感じられる、控えめなクールトーン処理の雰囲気のある写真。イラスト、抽象的なグラフィック、ライフスタイル写真なし。 光と素材: ほぼ黒の背景。かろうじて知覚できるボリュームのある輝き、グレア効果なし。形を強調する柔らかく拡散した光。暗いテーマが優勢で、影の代わりに境界線。 パレット: Iris Gleam #847dff, Cyan Signal #00b3dd, Pale Iris #d1c9ff, Deep Iris #4b49aa, Orchid Bloom #dd90d8, Periwinkle #90b8f0, Obsidian #0f1011. フレーム構成: フレーム内で支配的な中央要素。フルフレーム写真。オブジェクトは主要な要素として提示され、暗い背景に十分なスペースがあります。ワイドフォーマット。 要件: 写真のようにリアルでクリーン、光と色は上記のパレットに厳密に従うこと。「描写するもの」で要求されない限り、テキスト、碑文、数字、インターフェース、ウェブサイトのレイアウトを追加しないでください。透かし、見知らぬロゴ、ブランド名なし。
パレット
ブランド
- Iris Gleam
#847dff— カテゴリーカードの主なアクセントカラーは、モジュールタイルによく見られる特徴的な紫色です。
中性
- Cyan Signal
#00b3dd— データ主導型のアプローチ – 暗い画面上に、グラフの線、ミニグラフのストローク、予測指標が表示されます。 - Pale Iris
#d1c9ff— テーマパネルや背景の塗りつぶしなど、より柔らかな配色に適した、淡い紫色。 - Deep Iris
#4b49aa— 網掛けされたカテゴリとステータスバーにマウスカーソルを合わせたときに表示される、濃い紫色のバリエーション。 - Orchid Bloom
#dd90d8— ライフスタイル／経費モジュールのピンク色のカテゴリカードは、寒色系のカラーパレットに対して温かみのあるコントラストを生み出しています。 - Periwinkle
#90b8f0— カウンセリングモジュールまたはカップル向けモジュールを示す、淡い青色のカテゴリーカード。 - Obsidian
#0f1011— ページというキャンバスは、あらゆるものが浮かぶ、支配的な暗い表面である。
タイポグラフィ
12～96ピクセル · 7段階
- Suisseintltrial — 交換： Inter · 概要 400 · Suisseintltrial - 抽出されたデータには含まれているが、AIによって説明されていない。
- Lyon Display — 交換： DM Serif Display or Playfair Display (Google Fonts) at weight 400 with manual letter-spacing tightening · 概要 300 · 見出しとセクションタイトルは、このデザインの特徴的なスタイルです。300ポイント（ライト）のフォントのみを使用することで、柔らかながらも自信に満ちた印象を与えます。また、極端なサイズ（38～96ピクセル）と狭い0.9行間隔が、独特の緊張感を生み出しています。
- Suisse Int'l — 交換： Inter or Geist Sans at matching weights · 概要 300, 400 · 本文、カードの説明文、リンクテキスト、入力フィールド。18pxのカードの小見出しには、表示テキストと微妙に調和するよう、300の太さのフォントを使用します。メインのUIテキストには、400の太さのフォントを使用します。
音程と形式
| 目的 | 意味 |
|---|---|
| 密度 | 平均 |
| 基本的なステップ | 12px |
| ボタンの半径 | 8px |
| カード半径 | 16px |
| 影 | いいえ - 影の代わりに境界線 |
| セクション間 | 80px |
| ページ幅 | 1200px |
AI がOrigin Financialスタイルであなたのウェブサイトを構築し、
- リンクから商品や投稿を追加してください - Instagram 、 TikTok 、 Facebook 。
- 古いサイトからコンテンツを移行するには、アドレスを指定するだけです。
- 最高のエンジンであるReact （ Next.js ）上で動作するモダンなデザイン。サーバーレンダリングとSEO最適化が標準搭載されています。
- 検索結果のSEO最適化とニューラルネットワークによるレコメンデーションを完全に自動化。
類似のスタイル
- July Fund — 暗いギャラリーに展示された、カラーの章見出しが付いたモノグラフ
- FLORA — 黒いベルベットのギャラリー - 清潔感のある暗いキャンバスに、鮮やかなイメージだけが色を添える
- Mercury — 夕暮れ時のアルプスの斜面
- Linear — ミッドナイト・プレシジョン・インスツルメント
- Air — 彫刻作品「ガラス越しの真夜中の空」
- Raycast — ミッドナイト・コマンドセンター、コーラルネオン
- dope.security — 紫色のビーコンを備えた真夜中のターミナル
- Dimension — 夕暮れ時の光に照らされた、曇りガラスのパネルを備えたワークステーション
- Giga — 霜の降りた黒曜石の上に広がる真夜中の地平線
- Reflect Notes — 星空のような紫色の空間は、暗い天文台であり、そこでは音符が星座のように、ほぼ黒に近い藍色の虚無を背景に浮かんでいる。
- Ameba — 真夜中の管制室――曇りガラスのパネルの中に、鮮やかな青い光が脈打つ。
- Branding — 黒いギャラリーの壁、血のような赤のアクセント - 大きな白いフォントが、虚無を思わせる暗いキャンバスの上に浮かび、そこに鮮やかな赤のアクセントと、ウェブインターフェースというよりギャラリーの看板のような印象的な装飾要素が一つだけ配置されている。