Subframe
温かみのある羊皮紙に描かれたグラフィックなドローイング。デザイナーズペーパーを使用し、すべてのストロークは鉛筆か消しゴムで、絵の具は一切使われていない。線の太さとまばらなセリフによって奥行きが表現されている。
Subframeはモノクロームのデザイナーズワークスペースです。温かみのあるクリーミーなキャンバス、グラファイトブラックのインク、そして色彩のアクセントは一切ありません。インターフェース全体は、紙、鉛筆、影という単一の素材で構成されているように感じられます。そこに大胆なタイポグラフィのアクセントが一つ加わります。洗練されたセリフ体（Instrument Serif）と、体系的なサンセリフ体（Inter）の組み合わせが、見出しに編集上の重厚感を与えています。表面は隆起ではなく、平らでフレームで囲まれています。奥行きは、#e5e7ebの細い区切り線と、影ではなく暗いコントロール部分のインセットハイライトによって表現されています。密度は高く、広い垂直方向のリズム（セクション間の間隔は48～64ピクセル）、中央揃えの全幅レイアウト、そしてテキストの周囲には十分な余白が確保されています。唯一の色は、ほぼ白とほぼ黒のコントラストであり、暗いボタンが各ページで最も印象的な要素となり、グレーのトーンで並んだパートナーブランドのロゴの帯が唯一の装飾的な視覚要素となっています。
中央揃えの全幅レイアウト（1200px）で、縦方向のリズムがゆったりとしています。メイン要素は中央に配置された単一のブロックで、上部に暗いセグメント化されたコントロール、大きな「Inter」の見出し、1行の小見出し、隣接する2つのボタン（塗りつぶしと半透明）があり、サイド画像やレイアウトの分割はありません。メイン要素の下には、中央に配置されたグレースケールのロゴストライプがあります。以降の各セクションは同じパターンに従います。左揃えのタイトルと小見出しのブロック、そしてセクション間に48～64pxの余白がある全幅の製品紹介フレームです。ナビゲーションは最小限で、中央揃えのリンクと右揃えのアクションを備えた上部のバーのみで、サイドバーやメガメニューはありません。ページは上から下まで、それぞれに十分なスペースが与えられた中央揃えのステートメントの連続として読み進められます。レイアウトは、賑やかな製品ページというよりは、編集ポートフォリオのような印象を与えます。
ビジュアルデザインはミニマルで機能的です。システムは2つのビジュアルモードを使用します。(1) 24px半径のフレームで囲まれたフレーム付き製品スクリーンショットとUIモックアップ。これらは、同じモノクロパレットでレンダリングされた実際のインターフェースコンポーネント(テーブル、ボタン、フォーム)を表示し、スクリーンショットがページにシームレスに統合されているように見えます。(2) グレースケールのパートナーロゴの1つのストリップがソーシャルプルーフとして機能し、色やコンテナなしでフラットにレンダリングされます。ライフスタイル写真、抽象的なグラデーション、3Dレンダリングはありません。唯一のイラスト要素は、ブランドアイコンが入った温かみのあるグレーの背景の中央にある暗い製品「タイル」です。これは装飾ではなく、製品のデモンストレーションとして認識されます。すべての画像はテキストベースのレイアウトを占め、視覚的な重みはテキストによって担われています。
パレット
中性
- Page Canvas
#fafafa— ページの背景、キャンバスに印刷されたポストカード、暗い表面に浮かぶ明るい文字――モノクロームシステム全体を支えるのは、温かみのある白色だ。 - Hairline Border
#e5e7eb— 区切り線、カードの枠線、画像フレーム、アイコンのアウトライン - システム内で最も頻繁に使用されるアウトラインの種類であり、空間構造を定義します。 - Card Surface
#ededed— カード用の背景として使用される、キャンバスより一段高い位置にある追加の表面は、影のないグループを形成します。 - Divider Mid
#dadada— 中間調の区切り線とセクション間の移行 - Graphite
#242424— 明るい表面上の主要ボタンには、コントラストの高いニュートラルな塗りつぶしを使用します。 - Ink Black
#171717— 本文、見出し、アイコンのアウトラインなど、Graphiteよりもややクールな印象で、表面ではなくタイポグラフィに使用されます。
タイポグラフィ
12～128ピクセル · 7段階
- Inter — 交換： Inter (Google Fonts) · 概要 500, 600, 700 · サンセリフ体のシステムインターフェース（ナビゲーション、本文、ボタン、小見出し、セクション見出し）を採用。ウェイトは、本文とコントロールが500、小見出しとナビゲーションアクセントが600、セクション見出しが700です。文字間隔を広く取ることで、あらゆるサイズにおいて幾何学的な形状が圧縮され、インターフェースに洗練された技術的な印象を与えます。
- Instrument Serif — 交換： Playfair Display · 概要 400 · 見出しや編集コンテンツ専用にデザインされたセリフ体フォント。400のウェイトと-0.025emの文字間隔により、エレガントでイタリックな印象を与え、Interの工業的な幾何学模様とは対照的です。また、サンセリフ体のページの中にセリフ体の単語やフレーズを1つだけ配置し、見出しスタイルではなく視覚的な句読点として用いるという、独自のテクニックも採用しています。
- Fragment Mono — 交換： JetBrains Mono · 概要 400 · インラインのコードのような要素、タグラベル、技術的な注釈には、アクセントモノが使用されます。使用頻度は少なく、設計ツールが「これは機械出力です」と示したい関数リストやインライン注釈などに使用されます。
音程と形式
| 目的 | 意味 |
|---|---|
| 密度 | 平均 |
| 基本的なステップ | 8px |
| ボタンの半径 | 16px |
| カード半径 | 24px |
| 影 | いいえ - 影の代わりに境界線 |
| セクション間 | 64px |
| ページ幅 | 1200px |
AI がSubframeスタイルであなたのウェブサイトを構築し、
- リンクから商品や投稿を追加してください - Instagram 、 TikTok 、 Facebook 。
- 古いサイトからコンテンツを移行するには、アドレスを指定するだけです。
- 最高のエンジンであるReact （ Next.js ）上で動作するモダンなデザイン。サーバーレンダリングとSEO最適化が標準搭載されています。
- 検索結果のSEO最適化とニューラルネットワークによるレコメンデーションを完全に自動化。
類似のスタイル
- monopo saigon — 編集部の沈黙の背後にある、液体のような虹色の輝き――溶けた光の上に浮かぶモノクロの編集ギャラリー
- Hyer Aviation — 夕暮れ時のコックピット、羊皮紙の上。淡い夜明けの空が機体サイズのセリフ体ロゴと出会い、温かみのある粘土色のアクセントが単色の抑制を打ち破る。
- OFF+BRAND. — 温かい羊皮紙の上に虹色に輝く球体
- Seed — 実験用ガラスケース内の生物
- Eindhoven Design District — 白い紙に描かれた編集的なブルータリズムは、大きな活字、最小限の写真、そして徹底的な抑制によって表現された、都市デザインのマニフェストである。
- Miranda — 淡いクリーム色の背景にクラシックなワイドフォーマットのフォントを使用した、デジタル時代の新聞社説
- Monocle — クリーム色の紙を使用した、高品質で大判の新聞。厳選された論説記事はどれも掲載にふさわしく、ページには意味のある色はたった一色のみ。
- Agencja brandingowa — 白を基調とした編集ギャラリー。文字は黒インクで印刷されている。
- Websmith Studio — クリーム色の紙に当たる朝の光
- Aspelin Reitan — キャンドルライトに照らされた建築アーカイブ - このページは、温かみのあるクリーム色の壁にピンで留められた建築空間のポートフォリオのように見え、各画像の上には、ページの全幅にわたって白いテキストが1行浮かんでいる。
- Public — 冷たい大理石の上にモノクロームで描かれたエディトリアル――まるでモノクロームのキャンバスのようで、300ポイントのセリフ体フォントとたった一つの紫色のアクセントが、すべての色彩を担っている。
- Motto — 紙の上にそびえ立つタイポグラフィの巨石――真っ白な紙の上に、力強く自己主張する単一の声。