Custo
ガンメタルカラーのギャラリーに、巨大なフォントが配されている。落ち着いたグレーグリーンのトーンで統一されたショールームには、たった一つの暗いオブジェと57ピクセルのフォントが、それ自体で雄弁に語りかけてくる。
Custoは、工業製品のギャラリーとして機能します。温かみのあるメタリックなキャンバスが製品の背景となり、大判のタイポグラフィが主要な視覚的装飾として機能します。このシステムは完全に無彩色で、有彩色は一切使用されていません。そのため、暗くアルマイト処理されたレターボックスと、単一のサンセリフ書体の幾何学的な重厚感によって、ブランドの個性全体が表現されます。各画面は、広々としたホワイトスペースと記念碑的なタイポグラフィの主張がバランスよく配置され、ブランドマークはまるで建築要素のように繰り返されます。表面は平坦でマットな質感で、奥行きは影やグラデーションではなく、製品自体の反射によって生み出されます。
ページレイアウトは、ビューポートの中央に配置された最大コンテンツ幅約1280pxの縦型シングルカラム構造です。メインページ要素はページ幅全体に広がり、Canvas Gunmetal #9ea29fで端から端までレンダリングされ、右中央に郵便ポストの写真、下端に57pxのCUSTO®ロゴが配置されています。メイン要素の下には、セクションが交互に配置されています。2列のテキストブロック（左側に小さなキャプション、右側に大きなタイトル）、続いて3枚の製品画像カードの水平グリッド、そしてメインテキストが両側に交互に表示される2列のテキストと画像の行です。セクション間のガターは110pxで、十分な縦方向の余白が確保されています。ナビゲーションは、スクロールするとPaper Whiteにフェードアウトする透明なトップバーです。CESアイコンは、右下隅に固定されたフローティング要素です。全体的なリズムはギャラリーのようで、各セクションの要素は少なく、フォントは大きく、余白は広く、テキストストリップの間には製品写真が視覚的な句読点として配置されています。
これらの画像は、Custoメールボックスの製品写真のみで構成されており、3つのモードで撮影されています。金属フレームを背景にした全身ポートレート、デバイスとのインタラクションを示すライフスタイルショット、そしてスキャンインターフェースとLEDリングのクローズアップです。すべての写真は、メールボックスのマットブラック仕上げを視覚的なアクセントとして、落ち着いた高コントラストのトーンで仕上げられています。イラスト、抽象的なグラフィック、ストックフォトは一切使用されていません。写真は半径8ピクセルのカードに配置されるか、57ピクセルのロゴの背後にフルスクリーンで使用されています。CESアイコンは、ウェブサイト全体で唯一のマルチカラー画像です。
パレット
中性
- Canvas Gunmetal
#9ea29f— メインセクションとテーマセクションの温かみのあるグレーグリーンの背景は、Custoを一般的な白いSaaSテンプレートとは一線を画すものにしており、デジタル表面というよりは建築用のコンクリートのような印象を与えます。 - Obsidian
#000000— 本文、細い枠線、アイコンの線など、システム内で最もコントラストの高いインクで、見出しや構造的な区切り線に使用されます。 - Paper White
#ffffff— 身体部位の背景画像、ガンメタルキャンバスに反転したテキスト、製品写真の暗い背景にテキスト。 - Anodized Graphite
#4b514d— 商品写真、追加の見出し、立体的なテキストに使用される暗い表面は、郵便受けの仕上げを反映しており、ユーザーインターフェースと製品が同じ素材で作られているように見える。 - Brushed Steel
#8e9194— Paper WhiteとObsidianの間には、控えめな本文テキスト、リストの区切り線、追加のアイコンのアウトラインが配置され、埋め込みメタデータや目立たないリンクに使用されます。 - Linen Mist
#a7aaad— 見出しや区切り線の枠線や区切り線の淡い色は、オブシディアン色の構造的な線と決して競合しない、繊細な色合いです。
タイポグラフィ
15～57ピクセル・5段階
- PP Neue Montreal — 交換： Inter · 概要 400 (Medium) · 本文から説明文まで、すべてに単一のフォントファミリーが使用されています。太さの幾何学的な均一性が特徴で、補助フォントや表示専用フォントの使用は避けられています。そのため、57ピクセルで設定された「CUSTO®」のワードマークは、15ピクセルのフォーム入力フィールドのラベルと同じフォントファミリーに属しているように認識されます。
音程と形式
| 目的 | 意味 |
|---|---|
| 密度 | 広々とした |
| 基本的なステップ | 24px |
| ボタンの半径 | 31.35px (pill) for primary action; 8px for secondary |
| カード半径 | 8px |
| 影 | いいえ - 影の代わりに境界線 |
| セクション間 | 110px |
| ページ幅 | 1280px |
AI がCustoスタイルであなたのウェブサイトを構築し、
- リンクから商品や投稿を追加してください - Instagram 、 TikTok 、 Facebook 。
- 古いサイトからコンテンツを移行するには、アドレスを指定するだけです。
- 最高のエンジンであるReact （ Next.js ）上で動作するモダンなデザイン。サーバーレンダリングとSEO最適化が標準搭載されています。
- 検索結果のSEO最適化とニューラルネットワークによるレコメンデーションを完全に自動化。
類似のスタイル
- 099 SUPPLY — 白黒のオブジェで埋め尽くされたギャラリーの壁
- Specht Studio — 控えめな好奇心を掻き立てるギャラリーの壁。スタジオ独自のクロム仕上げは、白い表面に黒い文字があしらわれ、視覚的なインパクトはすべて、このプロジェクトのタイルワークの中に凝縮されている。
- Structured — 粘土のような紙に描かれたルネッサンスギャラリー
- Airbnb — 静かな白いギャラリーの壁に、サンゴ色のしおりが1枚だけ飾られている。
- VSCO — ギャラリーのモノクロの壁は白黒写真の展示で、そこに差し込む温かみのあるスポットライトが、これから起こる出来事を照らし出す。
- Apple (España) — 柔らかな自然光に照らされた美術館のギャラリーは、魅惑的で軽やかな白い空間で、それぞれの展示品は淡い色合いの壁にスポットライトで照らされている。
- Peak Design — ギャラリーの壁、部分的に照明付き
- Apple (España) — オブシディアン・ギャラリーの展示室は薄暗い展示ホールで、そこにチタン製のオブジェが一つだけ、漆黒の背景に浮かび上がって光っている。
- Apple (España) — 白いギャラリー用ディスプレイケース
- teenage engineering — スタジオ照明の工業カタログでは、製品がページ上で唯一の重要な対象物であり、その他すべてはその製品を中心に説明されている。
- Apple (España) — 朝霧に覆われたギャラリーの窓
- Apple (España) — ホワイトミュージアムギャラリーの正午