Vivid+Co
黒曜石を透過するプリズム光
Vivid+Coは、映画のような暗い空間で展開されます。#101010～#495764のほぼ黒に近いキャンバスに、ほぼすべての書体とインターフェース要素に使用されている単一のほぼ白色（#fffdf9）がアクセントとして加えられています。タイポグラフィは主にNeue Montrealの400ウェイトでレンダリングされており、意図的に太字は排除されています。権威はウェイトではなく、スケール（136pxと105px）によって表現されています。特徴的なテクニックはクロマティックプリズムです。RGBで分離された彩度の高い赤/緑/青の光のブロックがガラスキューブを通過することで、モノクロの表面が崩れます。レイアウトは中央に配置され、ゆったりとしています。ナビゲーション、本文、リンクはすべて単一の#fffdf9カラーで、アクセントボタン、塗りつぶし、影は使用されていません。区別は、間隔、スケール、そしてブランド唯一のカラーアクセントとして機能する虹色のアーティファクトによって実現されています。
最大幅約1440pxの単一カラムのコンテンツを含む、暗く全幅のキャンバス。主要要素は中央に配置されたプリズム状のアーティファクトで、タイトル（テキストがキューブと交差）が重なり、サブタイトルは左揃え。ナビゲーションは上部の細いバーに配置され、左側にロゴ、右側に4つの非表示リンク、行の最後に専用の「お問い合わせ」ボタンがあります。セクションのリズムは、全高のヒーローパネルと、約108pxの間隔がある狭いコンテンツストリップが交互に表示されます。コンテンツのレイアウトは非対称で、プリズム状のアーティファクトが視覚的な中心となり、タイトルがそれを囲むように配置されています。単一カラムのテキストブロックの最大幅は約440pxで、複数カラムのグリッド、カードマトリックス、価格表はありません。フッターは細い線で区切られた細いストリップで、メタデータの2つのカラムがあります。
主なデザイン要素は、RGBカラーで区切られた、エッジに色収差のあるガラスキューブの抽象的な3Dイメージです。写真、人物画像、製品写真は一切使用していません。プリズムがブランドイメージであり、その他はすべて暗いキャンバス上のモノクロのタイポグラフィです。アイコンは最小限に抑えられており、見出しの末尾にある控えめなナビゲーションラベルと小さなカーソル/グリフのアクセント（領域142765）が、単一のモノライン16ピクセルアイコンを暗示しています。イラスト、装飾パターン、テクスチャは一切使用していません。
パレット
中性
- Bone White
#fffdf9— 本文、ナビゲーションラベル、リンクの色、見出しの塗りつぶしはすべてほぼ白色で、暗い背景上のすべての文字領域を占めている。 - Obsidian
#101010— ページキャンバス、つまりメインストライプと区切りストライプの背景は、内部にプリズム状のアーティファクトが描かれた濃い黒色です。 - Graphite Veil
#495764— 見出しやコンテンツブロックの背景には、クールでダークなスレート色が支配的に使われており、真っ黒な色を使わずにキャンバスに奥行きを与えている。 - Ash Border
#403f3f— テキストと競合することなく行を区切るために、1ピクセルの控えめな区切り線とカードのアウトラインが使用されています。 - Fog Blue
#6f879c— 控えめな補助テキストと目立たないボタンラベル（コントラスト比3.7:1）により、「戦略」、「クリエイティブ」、「コミュニケーション＋マーケティング」などのサービスカテゴリの指定は、強調されていないメタデータとして認識されます。 - Pure Black
#000000— SVGアイコンやイラストの装飾的な塗りつぶし。プリズム画像やアイコングリフに使用されます。背景ではありません。
タイポグラフィ
15～136ピクセル · 9段階
- Neue Montreal — 交換： Söhne · 概要 400, 700 · 専用フォントは、見出し、本文、ナビゲーション、ボタン、リンク、フッターなど、ユーザーインターフェース全体で使用されています。デフォルトのウェイトは400で、700ウェイトは小見出し専用です。105pxと136pxのウェイトの見出しは、行間が1.00～1.01em、文字間隔が-0.02emとなっており、映画のような立体感のある見出しが、タイポグラフィというより彫刻的な印象を与えます。
音程と形式
| 目的 | 意味 |
|---|---|
| 密度 | 広々とした |
| 基本的なステップ | 7px |
| ボタンの半径 | 0px |
| カード半径 | 15px |
| 影 | いいえ - 影の代わりに境界線 |
| セクション間 | 108px |
| ページ幅 | 1440px |
AI がVivid+Coスタイルであなたのウェブサイトを構築し、
- リンクから商品や投稿を追加してください - Instagram 、 TikTok 、 Facebook 。
- 古いサイトからコンテンツを移行するには、アドレスを指定するだけです。
- 最高のエンジンであるReact （ Next.js ）上で動作するモダンなデザイン。サーバーレンダリングとSEO最適化が標準搭載されています。
- 検索結果のSEO最適化とニューラルネットワークによるレコメンデーションを完全に自動化。
類似のスタイル
- Sequel — 夜になると行われるプライベート上映は、それ以外は真っ暗な映画館の中で、唯一の温かい光となる。
- ThoughtLab — 黒曜石の記念碑に深紅の信号が灯る。黒い虚無のキャンバスの中に、大聖堂の中で唯一鮮やかな赤色を帯びた物体が、大きな白い文字で印刷された、たった一つの色彩豊かな人物像として存在する。
- Dovetail — 黒い月の下の設計図――かろうじて見えるグラフ線、白い文字、紫色の火花が一つ
- MekaVerse — デジタル作品のモノクロギャラリー――レンダリングされた世界がまるで美術館の展示品のように吊るされた、漆黒の虚空。そして、ユーザーインターフェース全体は、つや消しの黒いガラスに白いインクで描かれている。
- Krea — 真夜中のギャラリー・ノワール
- Factory — 真夜中の「作戦室」の端末。「工場」は、懐中電灯で照らされた指令書のように一枚の白いカードが置かれる、殺風景な黒い制御盤だ。部屋にある唯一の物体は、仕事そのものだけだ。
- basement — 午前3時のがらんとした印刷機――真っ暗な画面に巨大で圧縮されたフォントが広がり、ナビゲーションバーにオレンジ色の光がかすかに灯るだけ。それ以外はすべて白か、幽霊のような灰色だ。
- Stink Studios — 真夜中の映画スタジオ――映写機が唸りを上げ、部屋は暗く、フィルムだけが照らされている。
- Apple (España) — 照明器具を備えた黒い劇場
- Charlie — 修道院の石から彫り出された黒曜石の文字。一枚の赤い壁が、耳をつんざくような静寂を生み出す作品集。
- Rive — 高精度な暗視機能。インターフェースには、暗闇を透過して技術的な細部を極めて鮮明に捉える特殊レンズが搭載されています。
- Datalands — 黒い大聖堂に、ネオンの光が一つだけ灯っている。ロゴが身廊全体を埋め尽くし、それ以外はほとんど聞こえないほどの小さな文字で覆われている。