Electronic Materials Office
木炭で装飾されたギャラリーに燃える燃えさし
電子資料室は深夜の工房だ。マットな漆黒のキャンバスに、オレンジ色に輝く一筋の火種、そして宣言するのではなくささやくような書体。インターフェースは各画面を暗室のスタジオのように扱い、キーボードの写真が唯一の光源であり、UIはその光に従う。200ウェイトのGT-Flexaで組まれた見出しは広大なネガティブスペースに浮かび、本文は意図的に小さく人間味のあるデザインになっている（タイムズ紙）。色は計算されている。文字には純白、リンクには落ち着いた紫（#9e9eff）、そしてページ上の唯一のオレンジ色（#f45500）のコールトゥアクションは、30ピクセルの光を放つ。コンポーネントは半径20ピクセル以内にぴったり収まり、境界線は#9d9d9dでほとんど目立たず、システム内の影は主要なアクションの周囲にある2つの色のハローだけだ。
全幅のチャコールグレーのキャンバスに、中央に配置された最大幅のコンテンツ（約1200px）が表示されます。メイン画面は、ビューポート幅の約80%を占める半径20pxのメディアカード（製品ビデオを含む）から始まり、その直後に、ほぼ全幅のコンテンツ幅まで折り返される複数行のGT-Flexa 200の見出しが表示されます。セクションのリズム：Tobiasスタイルのすべて大文字の製品説明セクションが1つあり、続いて（デスクトップでは）2x2グリッドの製品説明カードが表示されます。カードには1pxの#9d9d9dの境界線と、カード間の24pxのガターが使用されます。十分な垂直方向のブリージングがあり、セクションは区切り線ではなく、48～128pxのチャコールグレーのネガティブスペースで区切られています。ナビゲーションは、上部に固定された単一の透明なパネルで、非表示のリンクのクラスターと単一のEmberコールトゥアクションがあります。サイドバー、メガメニュー、セカンダリナビゲーションはありません。
画像は製品デモンストレーションのみを目的としており、Altar I キーボードを完全な黒の背景にクローズアップしたマクロショットで、上からのバックライトによりケースが光り、キーキャップの縁が光を反射しています。ライフスタイル、人の手、環境コンテキストは含まれていません。画像は高コントラストで暗く、モノクロパレット以外の唯一の色はキーボード自体のオレンジ色の電源スイッチで、Ember Orange のコールトゥアクションを反映しています。画像は正方形または 16:9 で、常に半径 20 ピクセルのカードに配置され、カードの端からはみ出しています (写真の周囲にパディングはなく、テキストは端の下にあります)。アイコンスタイル: 唯一のアイコンは、ロゴの前にある小さな塗りつぶされた円 (●) で、約 6 ピクセルの太さの単一のオレンジ色のドットです。
パレット
ブランド
- Ember Orange
#f45500— 塗りつぶしが施されたメインアクションボタンは、UI内で唯一の有色面であり、常に30ピクセルのオレンジ色のハローが伴い、フィラメントのように光ります。メインコールボタンの外側の30ピクセルの光は、Ember Orangeの六角形シンボルを複製したものですが、塗りつぶしではなく影として存在するため、ボタンが内側から光っているように見えます。
中性
- Studio Charcoal
#202020— キャンバスや厚紙の表面は、暗いギャラリーの床のように、決して完全に真っ黒ではなく、柔らかな縁に視線を休ませることができる。 - Bone White
#ffffff— 本文、画像の細い枠線、そしてまれに反転した表面。フォント階層全体が独立して維持されます。 - Ash Gray
#9d9d9d— 控えめなテキスト、目立たないカードの枠線、そして非アクティブなキャプションは、配色の中で唯一中間色のグレーであり、白が派手すぎる場合に使用されます。 - Mid Felt
#eaeaea— 反転パネルやモダルグリッドに使用する、表面を軽くウォッシュする色。ベージュと濃いキャンバスの中間の色合いの白。 - Carbon
#000000— 最も印象的なアクセントは、アイコンのストロークや、木炭のキャンバスが明るすぎて形をうまく保てない対照的なフレームに見られる。 - Lavender Link
#9e9eff— 埋め込みリンクの色と追加アクションフレームの輪郭は、温かみのあるオレンジ色とは対照的な、落ち着いたクールな色合いになっており、チャコールグレーの背景に対してアクションが読みやすいようになっています。
タイポグラフィ
16～86ピクセル・8段階
- GT-Flexa — 交換： Inter (200/400) or Manrope (200/400) · 概要 200, 400 · 見出しや装飾要素のメインフォントです。200ウェイトは24px以上のすべての見出しに適しています。これは特徴的なスタイルで、68pxや86pxでは文字が主張するのではなく、空間に溶け込むように見えます。400ウェイトは小見出しやカードのキャプションに適しており、文字はほとんど聞こえません。最大サイズでは行間が1.0に縮小されるため、装飾フォントは空気の柱のように積み重なります。
- Tobias-light — 交換： Söhne Buch or Inter Tight · 概要 400 · セクション見出しとフッターロゴ用のセカンダリータイポグラフィスタイル。GT-Flexa 200の1段階下のグレードで使用され、トーンのコントラストを生み出します。Tobiasはより建築的で表現力豊かな印象を与える一方、GT-Flexaはより雰囲気のある印象を与えます。ネガティブな文字間隔により、Tobias Lightの広いプロポーションが引き締まります。
- Times — 交換： Source Serif 4 or PT Serif · 概要 400 · 本文と見出しの段落は、幾何学的で装飾的なフォントとは意図的に対照的なセリフ体を使用しています。セリフ体は本文の文字サイズを超えずに、製品説明に温かみと編集上の権威を加えています。
音程と形式
| 目的 | 意味 |
|---|---|
| 密度 | 密集 |
| 基本的なステップ | 4-8px |
| ボタンの半径 | 20px |
| カード半径 | 20px |
| 影 | いいえ - 影の代わりに境界線 |
| セクション間 | 48-128px |
| ページ幅 | 1200px |
AI がElectronic Materials Officeスタイルであなたのウェブサイトを構築し、
- リンクから商品や投稿を追加してください - Instagram 、 TikTok 、 Facebook 。
- 古いサイトからコンテンツを移行するには、アドレスを指定するだけです。
- 最高のエンジンであるReact （ Next.js ）上で動作するモダンなデザイン。サーバーレンダリングとSEO最適化が標準搭載されています。
- 検索結果のSEO最適化とニューラルネットワークによるレコメンデーションを完全に自動化。
類似のスタイル
- OFFFICE : — 巨大なフォントに覆われたノワールギャラリー
- Bibliothèque — スポットライトに照らされた黒い立方体型のギャラリー――広大な暗いホールにぽつんと置かれた、光り輝く一枚のプレート。
- 21 TSI — 深紅の虚空、ただ一つのシルエット――ユーザーインターフェースが大気に溶け込む、ハイファッションのエディトリアル。
- Structured — 粘土のような紙に描かれたルネッサンスギャラリー
- CHAIBOY — 黒いギャラリーの壁面に、バックライトで照らされた写真が1枚飾られている。
- Holiday 100 — 真夜中の贈り物ギャラリー――セリフ体の見出しがスポットライトの役割を果たし、暗いキャンバスがベルベットの壁となり、それぞれの製品画像は厳選された額縁のように飾られている。
- Apple (España) — 柔らかな自然光に照らされた美術館のギャラリーは、魅惑的で軽やかな白い空間で、それぞれの展示品は淡い色合いの壁にスポットライトで照らされている。
- Analogue — 黒いギャラリーのディスプレイケース – 商品が虚空に浮かぶ
- Apple (España) — オブシディアン・ギャラリーの展示室は薄暗い展示ホールで、そこにチタン製のオブジェが一つだけ、漆黒の背景に浮かび上がって光っている。
- Studio Oker — 深紅のアクセントが効いた薄暗いギャラリー――黒い壁に囲まれたポートフォリオルームでは、白い文字が宙に浮いているように見え、静寂を切り裂くように赤いささやき声が響く。
- 099 SUPPLY — 白黒のオブジェで埋め尽くされたギャラリーの壁
- Retool — 温かみのある黒曜石の工房――精密工具を置くための作業台であり、くすぶる残り火に照らされ、あらゆるものが生み出される場所。