
Mercury
夕暮れ時のアルプスの斜面
Mercuryは、アルプスの銀行を思わせる美学に基づいて設計されています。ほぼ黒に近いキャンバス(#171721)が、映画のような、天文台のような雰囲気を醸し出し、コンテンツ面はやや明るいグラファイト色のカードのように浮かび上がります。インターフェースは主にモノクロで、オニキス地にアイボリーのテキストが配置され、コアとなる「口座開設」操作専用の鮮やかなコバルトブルー(#5266eb)が1つだけ使用されています。タイポグラフィが主な表現力を担っており、カスタムディスプレイフォント480(太字でも細字でもない)と控えめな本文フォント400を組み合わせることで、自信に満ちた、しかし決してけばけばしくないスタイルが生まれています。コンポーネントはフラットでフレームレスであり、影ではなく12pxのグラファイト色のカード半径とカプセル型のコントロールによって構造を定義しています。ページ全体を占めるメインの写真要素(寂しげなテーブルを背景にした霧のかかった山々)が、ユーザーインターフェースが起動する前に雰囲気を決定づけ、その後のすべての要素も静かで高級感のある暗さを維持しています。
すべてのコンテンツは、ダークなフル幅スタイルでデザインされています。メイン画面は、中央に見出し、サブテキスト、およびメールアドレスの連絡先情報を収集するためのフォームブロック(最大幅約640ピクセル)が配置された、幅100ピクセルのフル幅写真です。メイン画面の下には、最大幅1200ピクセル、垂直方向の余白72ピクセルのセクションにコンテンツが整理されており、左側にテキスト、右側に画像を配置した2列レイアウトと、3列の製品説明カードが交互に表示されます。ナビゲーションは、メイン画面に重ねられた透明なトップバーで、スクロールすると、曇りガラスを思わせる濃い色の塗りつぶし(背景のぼかし)に変化します。フッターはダークで、注釈テキストが表示されます。垂直方向のリズムはゆったりとしており、セクション間に十分なスペースが確保されています。サイドナビゲーションはなく、すべてのナビゲーションはトップバーに配置されています。
メインセクションは、雰囲気のある感動的な風景(霧のかかった山々、自然の中の静かなワークスペースなど)を捉えた、画面いっぱいに広がる映画のような写真で占められており、銀行業務を思索的で崇高な体験として位置づけています。写真は高画質で、彩度はやや抑えられ、クールなトーンとテキストの読みやすさを保つための控えめなダークオーバーレイが施されています。メインセクションの下には、製品のユーザーインターフェースのスクリーンショットと抽象的で雰囲気のある背景が交互に表示されます。イラストや芸術作品のようなアイコンはなく、視覚要素は写真か純粋に機能的なもののみです。ユーザーインターフェース全体を通して使用されているアイコンスタイルは、ナビゲーション、ボタン、フォーム要素に使用されている、ミニマルなアイボリー色の線/グリフスタイルです。
パレット
ブランド
- Cobalt
#5266eb— 紫色は、塗りつぶされたボタン、選択されたナビゲーション状態、およびフォーカスによってコンバージョンが促進される場面で使用されます。
中性
- Onyx Canvas
#171721— メインページの背景、ホーム画面の基本オーバーレイ、フッターと各セクション用のキャンバス。 - Graphite Card
#1e1e2a— 段ボールや各パーツの盛り上がった表面は、キャンバスよりも一段階明るい色になっており、滑らかな境界を作り出している。 - Obsidian Button
#272735— 追加のボタン塗りつぶし、埋め込みフォームの背景、目立たないインタラクティブな表面。 - Slate Border
#70707d— コンテンツブロック間の、中程度の厚さの仕切りと構造的な境界。 - Mist Border
#e2e3ed— 細くてほとんど目立たない境界線、ほとんど目立たないボタンの輪郭、入力フィールドの端――暗い背景に薄い境界線。 - Ash Text
#c3c3cc— 本文、補助文、追加ラベル ― 読みやすさを損なうことなく階層構造を簡素化。
タイポグラフィ
12~65ピクセル・9段階
- arcadia — 交換: Inter · 概要 360, 400, 420, 480 · メインおよびユーザーインターフェース - ナビゲーション、本文、ボタン、入力フィールド、ラベル、および補助テキスト用のフォント。本文のウェイトは400、強調部分のウェイトは480です。標準のウェイトスケール(300/400/600)ではなく、中間ウェイトスケール(360、420、480)を採用することで、Mercuryのテキストは独特のバランスの取れた外観となり、太字にも細字にもならず、常に落ち着いた印象を与えます。
- arcadiaDisplay — 交換: Söhne Breit · 概要 360, 480, 530 · 見出しや装飾要素に使用されるフォントは、28pxから65pxまでのすべての見出しサイズで480ウェイトが使用され、530ウェイトは最も大きな装飾要素用に確保されています。低い行間(1.1~1.2)と適切な文字間隔(0.01~0.02em)により、装飾テキストは編集テキストに見られるような圧縮された構造ではなく、幅広く建築的な印象を与えます。
音程と形式
| 目的 | 意味 |
|---|---|
| 密度 | 平均 |
| 基本的なステップ | 12px |
| ボタンの半径 | 32px |
| カード半径 | 12px |
| 影 | いいえ - 影の代わりに境界線 |
| セクション間 | 72px |
| ページ幅 | 1200px |
AI がMercuryスタイルであなたのウェブサイトを構築し、
- リンクから商品や投稿を追加してください - Instagram 、 TikTok 、 Facebook 。
- 古いサイトからコンテンツを移行するには、アドレスを指定するだけです。
- 最高のエンジンであるReact ( Next.js )上で動作するモダンなデザイン。サーバーレンダリングとSEO最適化が標準搭載されています。
- 検索結果のSEO最適化とニューラルネットワークによるレコメンデーションを完全に自動化。
類似のスタイル
- Origin Financial — 静謐な豪華さを湛えた真夜中のギャラリー。静かで、ほとんど薄暗い部屋の中で、大きなセリフ体フォントと数枚の照明付きカラーパネルが、金融が丹念に作り上げられた芸術作品であるかのような感覚を生み出す。
- Air — 彫刻作品「ガラス越しの真夜中の空」
- Slash — 金箔の帳簿が付いた真夜中の金庫
- dope.security — 紫色のビーコンを備えた真夜中のターミナル
- Modal — 暗いサーバー室にある蛍光端末 ― 唯一の光源は鮮やかな緑色
- Giga — 霜の降りた黒曜石の上に広がる真夜中の地平線
- Dovetail — 真夜中の設計図コントロールセンター
- Dovetail — 黒い月の下の設計図――かろうじて見えるグラフ線、白い文字、紫色の火花が一つ
- AgentQL — 夜間、ターミナル上空に浮かぶオーロラ
- Supabase — 真夜中のコードエディタに、燐光を発する緑色の点が一つだけ浮かび上がる――石炭の粉塵の海に浮かぶ、たった一つの色のパルス。
- Changelog — 暗いガラス越しに見える観測コンソール
- GitHub — 生物発光制御ポイントを備えた宇宙空間の司令パネル――暗く雰囲気のある作業空間で、たった一つの緑色の光が進むべき方向を示す。