Column
涼しい夜明けの下の濃い青色の帳簿
Columnは、ほぼ白の背景に深みのある重厚なネイビーブルーを使用しています。ページは、まず堅牢な銀行製品のインターフェース、次に開発者の遊び場という印象を与えます。ブランドカラーは単一ではなく、ネイビーブルー#111a4a（堅実な構造用）とミントグリーン#44b48b（データとコード用）という2色の組み合わせで、Brexカードのような高強度のアクセント面には温かみのあるオレンジ（#ec652b）が使用されています。タイポグラフィは、300（リンク）から600（ディスプレイ）までの全ウェイト範囲で使用されている幾何学的なサンセリフ体SuisseIntlが中心で、ほとんどのフィンテック企業にはない洗練された編集スタイルをシステムに与えています。カードは、微妙なレイヤー状の影が付いた大きな白い表面に浮かんでいます。ほとんどのインターフェース要素はフラットで、カードが物理的な物体のように感じられるようにする必要がある部分（トランザクションウィジェット、製品モックアップ）にのみ奥行きが現れます。コードと財務データは、海泡色を基調としたモノクロで表示されている。これは、この銀行がエンジニアによってエンジニアのために作られた銀行であることを視覚的に示している。
ページ構造は全幅で中央揃え、広いサイドマージン（デスクトップでは64～15cm）となっています。メイン画面は分割レイアウトで、見出しとコールトゥアクションは左揃えで25cm、フローティングトランザクションウィジェットは右揃えで55cm、背景はハーフトーンマップです。メイン画面の下は、白（4cm）とライトキャンバス（5cm）が交互に配置され、縦方向のガターは6cmです。コンテンツは単一の6列グリッドに従って配置され、テキストブロックは4列（7cm）、画像/製品カードは5～6列を占め、グリッドから意図的にオフセットされています。機能の説明セクションは2列レイアウトで、左側にテキスト、右側に製品が配置されています。信頼統計セクションは、ページ全幅にわたる4列グリッドに分割されています。顧客ロゴは中央揃えの1行に配置され、ガターは48pxです。フッターはコンパクトな2列レイアウトです。ナビゲーションは、メイン画面上に固定された高さ62ピクセルの透明なトップバーで、背景はぼかされており、スクロールすると白くフェードアウトします。サイドバーやメガメニューはなく、ドロップダウンメニューはシンプルな矢印型のメニューです。
ビジュアルスタイルはミニマルで機能的です。Columnはストックフォトを一切使用していません。ビジュアル言語は、次の3つのソースに基づいています。(1) SVGデータイラスト、具体的にはドットハーフトーンの世界地図で、インディゴからオレンジ、ターコイズへのグラデーションでレンダリングされ、メイン要素の背後にグローバルスケールの雰囲気を作り出しています。(2) 製品カードレイアウト - 口座残高、送金の詳細、JSONコードスニペットをドラマチックな影付きの白いカードに表示するフローティングウィジェット。(3) チャートビジュアライゼーション - 信頼/統計セクションで使用されている、細い接続線が付いたターコイズのローソク足または棒グラフ。ハーフトーンマップは特徴的なビジュアル要素です。そのグラデーションは#d65620（オレンジ）からバイオレット、ブルー、アズール、ターコイズ、イエローへと変化し、単一の装飾面上にブランドパレット全体を統合するスペクトルを作り出しています。アイコンは、#232730または#a9acb6のバリエーションで、1.5～2pxの均一なアウトラインの太さを持ち、アクティブな状態には塗りつぶしが適用されます。ライフスタイル写真も抽象的な3Dレンダリングも一切なし。こうした抑制は、製品とデータに注目を集めるための意図的なものだ。
パレット
ブランド
- Indigo Navy
#111a4a— メインブランドカラーは、塗りつぶされたコールトゥアクション、アクティブなナビゲーション状態、ヘッダー、ロゴに使用されています。深みのあるバイオレットブルーは、サイトに重厚感と深みのある黒の色合いを与え、白いテキストと組み合わせることで、サイト上で最も印象的なボタンを作り出しています。 - Seafoam 600
#44b48b— コードとデータの色は、コードスニペット内のJSONキー、識別子、および財務値に使用されるブランドカラーです。また、グラフや成長可視化におけるデータポイントにも使用されます。 - Seafoam 700
#167e6c— データコンテキスト内の輪郭、グラフ線、アイコンのアクセントには、より濃いシーフォーム色を使用します。これにより、シーフォーム色のスケールが濃い背景色に対して安定します。 - Seafoam 400
#94efb7— 強調表示されたコード断片には、コードブロック内に文字列値、URL、およびAPIエンドポイントが含まれています。最も薄いシーフォーム色は、緑がかった等幅フォントとして読み取れます。 - Deep Sea
#023247— チャートの装飾的な輪郭線とアクセントカラーは、SVGイラストやデータビジュアライゼーションでよく使われる、深みのあるターコイズブルーで、シーフォームカラースケールと組み合わされています。
中性
- Midnight Ink
#011821— 暗い表面と強調表示されたテキスト – 商品カードの背景、高コントラストのメインテキスト。グレーに近い色合いで、クールな青緑色がかった色調。セクションを反転させる必要がある場合のダークモードのベースとして使用されます。 - Slate Ink
#3b3e47— 副題と本文は、ミッドナイトインクよりもやや暖色系の色調で、明るいキャンバスには純粋な黒ではきつすぎるように見える箇所に使用されています。 - Steel
#7c7f88— 本文とリンクテキストは、落ち着いた色合い（本文中で245回使用）が主体となっている。落ち着いた印象を与えるニュートラルなグレーブルーで、決して色褪せたような印象は与えない。 - Fog
#a9acb6— アイコンの輪郭、補助的な境界線、およびプレースホルダーテキスト。テキストと競合することなく、テキストを区切る中間のグレーの色。 - Mist
#cbcccf— 署名、免責事項、細かい文字などの本文は、白い背景でも判読できるが、視覚的には目立ちにくい。 - Silver Lining
#e3e4e8— カードの枠線、入力フィールドの枠線、区切り線。この構造的で繊細な色は、影をつけずに2つの面を分離する必要がある箇所に使用されます。
タイポグラフィ
10～60ピクセル・10段階
- SuisseIntl — 交換： Inter · 概要 300, 400, 500, 600 · メインフォント – 見出し、本文、ボタン、ナビゲーション、リンク、カードテキストなど、すべてのテキストに使用されます。独自の幾何学的なサンセリフ体により、ColumnはInter-onlyのみを使用している他のフィンテック企業とは一線を画す、独特の編集スタイルを実現しています。太さは、見出しが52～60pxで600、小見出しが500、本文が400、強調度の低いリンクが300です。
- SuisseIntlMono — 交換： JetBrains Mono · 概要 400 · SuisseIntlに似た等幅フォントで、技術的なラベル、API識別子、UI要素内の埋め込みデータなどに使用されます。SuisseIntlと同じ比率を維持するため、等幅テキストとプロポーショナルテキストが混在する環境でも正しく整列します。
- SFMono — 交換： Fira Code · 概要 400 · コードスニペットの表示 – JSONの例やAPIドキュメントブロックに表示されます。コードとUIテキストを視覚的に区別するために、シーフォームグリーンの色合いが使用されています。
音程と形式
| 目的 | 意味 |
|---|---|
| 密度 | 平均 |
| 基本的なステップ | 8px |
| ボタンの半径 | 8px |
| カード半径 | 8px |
| 影 | いいえ - 影の代わりに境界線 |
| セクション間 | 72px |
| ページ幅 | 1200px |
AI がColumnスタイルであなたのウェブサイトを構築し、
- リンクから商品や投稿を追加してください - Instagram 、 TikTok 、 Facebook 。
- 古いサイトからコンテンツを移行するには、アドレスを指定するだけです。
- 最高のエンジンであるReact （ Next.js ）上で動作するモダンなデザイン。サーバーレンダリングとSEO最適化が標準搭載されています。
- 検索結果のSEO最適化とニューラルネットワークによるレコメンデーションを完全に自動化。
類似のスタイル
- dope.security — 紫色のビーコンを備えた真夜中のターミナル
- Leonardo — 逆さまの編集ギャラリー。黒い壁の美術館で、紫色の見出しが壁面インスタレーションとして機能し、その下にはAIが生成した肖像画が密集したグリッド状に展示されている。
- VEED — 白いギャラリーウォールにネオングリーンのライトボタン
- Craft Docs — スクラップブッキング用のデジタルコラージュ。丁寧に作られた、触感豊かなスクラップブックをイメージしたデザインで、構造化されたデジタルメモと、柔らかく有機的な質感が融合しています。
- Letter — 収蔵庫から発掘された、きらめく美術品を展示するプライベートギャラリー。黒い壁に囲まれた展示スペースでは、色付きの壁に飾られたクロム製の彫刻の上に、セリフ体の見出しが浮かび上がっている。
- Railway — コズミック・ミッドナイト・エクスプレス。明瞭な信号を頼りに、星明かりに照らされた暗い宇宙を巡る、穏やかでスリリングな旅。
- Garden Eight — クリーム色の紙に印刷された、記念碑的な社説。温かみのある羊皮紙の上に、215ピクセルのセリフ体の見出しがぽつんと鎮座し、浮遊感のある彫刻的なフォルムと潮風を思わせる余白に囲まれている。まるでダッシュボードというより、美術作品集の表紙のような印象を受ける。
- Steep — 温かみのある紙におけるセリフ体フォントの分析
- ElevenLabs — 温かみのあるクリーム色を基調としたフォトエッセイに、さりげない見出しを添えた一冊。バウハウス風のノートは、卵の殻のような色の紙に黒インク、そして製品紹介のために紫とオレンジのアクセントを一つだけ配している。
- Awesomic — オレンジ色の句読点が紙吹雪を思わせる、編集用の亜鉛メッシュ。
- Monad — 温熱羊皮紙に関する編集技術誌
- AI for Business — 温かみのあるグレーの色調で統一された、ブルータリズム建築の編集ショールーム