INO
静寂に包まれた博物館の展示ケース――それぞれの展示品は、ガラス越しに浮かぶ一つの物体のように、白い空間に浮かび、ほとんど黒に近い、かろうじて聞こえるフォントで縁取られている。
INOは、ほぼモノクロームのジュエリーギャラリーとして機能します。鮮やかな白いキャンバスに、温かみのあるほぼ黒に近いインクが1色だけ使われ、色はほとんど使われていません。ビジュアルシステムは、それぞれのリングを美術館の展示品のように扱います。臨床的な製品写真が広大なネガティブスペースに浮かび、フォントサイズや色ではなく、位置、文字間隔、白の量によって階層構造が構築されています。ナビゲーションはページ下部にあり、ラベル付きの4つのドット（塗りつぶしまたは空欄）で構成されています。これは、従来のeコマースサイトのトップバーとは意図的に逆になっています。ブランドマーク自体は、製品の形状を反映した同心円状の輪郭で構成されており、ロゴというよりはタイポグラフィの彫刻として機能しています。
コンテンツの幅に制限のない、全幅キャンバス。メイン画面はページの全幅を占め、写真とグラフィックは均等に分割されています（50/50）。製品グリッドは、ビューポートの端から十分な水平マージンを持つ3列の行として表示されます。下部のナビゲーションは中央に配置され、固定ではなくページフッターに固定されています。セクションの区切りには、全画面の編集写真または純粋な白いスペースが使用され、カラーバー、区切り線、グラデーションは一切使用されません。垂直方向のリズムは自由で、主要セクション間の比率は80/1/1となっており、ページがコンテンツで埋め尽くされるのではなく、呼吸できるような構成になっています。サイドバー、メガメニュー、上部のヘッダーバーはなく、「INO」ロゴはメイン画面の左上隅にのみ配置されています。
画像表示モードは2種類あり、1つはフラットな薄灰色のシームレスな背景に臨床的な製品写真（各リングは中央に配置され、手や様式化された小道具、表面の影はなく、リング自体が主役）で、もう1つは物語性のある編集画像（草で縁取られた箱の中のリング、チェーンを持った手など）で、彩度を落としたフルスクリーンの編集画像断片として表示されます。製品画像は製品カードとして機能し、編集画像はブランドの雰囲気を伝えます。どちらもモノクロまたはほぼモノクロで、メイン画像の草だけが緑色の痕跡ですが、それも森の色合いに抑えられています。インターフェースではアイコンは使用されず、同心円状のリングシンボルがすべてのアイコンに置き換えられています。
パレット
中性
- Obsidian Ink
#212123— 中立的なフォームの状態、アイコンテキスト、そして控えめなUIフィードバックを採用し、配色も目立たないようにする。 - Bone
#ffffff— キャンバス地のページ、厚紙の表面、暗い背景に反転した文字。ここが主要な画面であり、ウェブサイトのほぼすべてがここに配置されている。 - Carbon
#000000— アイコンの塗りつぶし、装飾的なグラフィックの輪郭、およびナビゲーションポイントインジケーターのアクティブ状態の塗りつぶし。「骨」色とのトーンコントラストを最大限に高めるため、控えめに使用しています。 - Ash
#999999— 中程度のコントラストの境界線、制御輪郭、および構造的な区切り線。 - Pebble
#a6a6a7— 控えめな補助テキスト、本文と二次メタデータを区切る細い区切り線。価格タグや背景に溶け込むべき付随テキストには、最も薄い機能的なグレーを使用。
タイポグラフィ
11～18ピクセル・4段階
- Sequel100Wide — 交換： Jost (400 · 概要 400 · ナビゲーション、本文、見出し、タイトル、価格表示、キャプションなど、あらゆる場面で400ウェイトのみを使用する唯一のコーポレートフォントです。ゆったりとした文字間隔と広い間隔で配置された幾何学的なシンボルは、コーポレートスタイル全体を反映しています。太字ウェイトがないのは意図的なものです。フォントの太さを変えるのではなく、大文字、文字間隔、配置によって階層構造を実現しています。
- Arial — 交換： system-ui · 概要 400 · レガシー環境でボタンを表示するための、システム全体の代替手段です。これはブランドの一部ではなく、Sequel100Wideの読み込みに失敗した場合にのみ表示されます。
音程と形式
| 目的 | 意味 |
|---|---|
| 密度 | 密集 |
| 基本的なステップ | 23px |
| ボタンの半径 | 50px |
| カード半径 | 8px |
| 影 | いいえ - 影の代わりに境界線 |
| セクション間 | 80-120px |
AI がINOスタイルであなたのウェブサイトを構築し、
- リンクから商品や投稿を追加してください - Instagram 、 TikTok 、 Facebook 。
- 古いサイトからコンテンツを移行するには、アドレスを指定するだけです。
- 最高のエンジンであるReact （ Next.js ）上で動作するモダンなデザイン。サーバーレンダリングとSEO最適化が標準搭載されています。
- 検索結果のSEO最適化とニューラルネットワークによるレコメンデーションを完全に自動化。
類似のスタイル
- Airbnb — 静かな白いギャラリーの壁に、サンゴ色のしおりが1枚だけ飾られている。
- Peak Design — ギャラリーの壁、部分的に照明付き
- 099 SUPPLY — 白黒のオブジェで埋め尽くされたギャラリーの壁
- Apple (España) — 白いギャラリー用ディスプレイケース
- Apple (España) — 朝霧に覆われたギャラリーの窓
- Custo — ガンメタルカラーのギャラリーに、巨大なフォントが配されている。落ち着いたグレーグリーンのトーンで統一されたショールームには、たった一つの暗いオブジェと57ピクセルのフォントが、それ自体で雄弁に語りかけてくる。
- Silencio — 白い部屋に、浮かぶようなオブジェが点在する。温かみのある紙で作られたギャラリー展示では、それぞれの要素が余白を背景にそれぞれの場所を占め、静寂は意図的なデザイン上の決定である。
- Oakâme — 陽光が降り注ぐ、温かみのある石を彫り出したプロヴァンス風の工房
- Nike — スポーツの偉業を収めたモノクロームのギャラリー――白い壁、芸術作品としての製品、背景に溶け込むクロム。
- Sociotype — 白い紙の上に置かれた典型的な博物館標本
- Arc — 真夜中の水面に浮かぶ工業用ホワイトギャラリー
- Rivian — ギャラリーのコンクリート壁にそびえ立つ、電気を帯びた巨大なモノリス。リビアンは、広大な白い空間を背景に、それぞれの車両を彫刻作品として展示している。巨大な文字は建築要素となり、単調な雰囲気を打ち破る温かみのある黄色が、まるでマットな表面に降り注ぐ太陽の光のようだ。