MAKR
手作りの革製品を展示する博物館のショーケース。静かで真っ白な部屋には、温かみのある黒インクで書かれたラベルが、手に持った革製品や風景を背景にした革製品の大きな写真の下に浮かんでいる。唯一の色のコントラストは、落ち着いたセージグリーンのストライプだけだ。
MAKRは、手作りの革製品に特化したオンライン編集ギャラリーで、ほぼ完全に無彩色で構成されたパレットを基盤とし、写真が主役となっています。上部の広告ストリップには、わずかにセージグリーンがかった、ほぼグレーのバナートーンがアクセントとして使われ、それ以外のすべて（表面、テキスト、区切り線、リンク）は、白い背景に深みのある温かみのある黒インクで表現されています。タイポグラフィは、Sohneのネオグロテスクを極めて控えめに表現したもので、小さなフォント、ゆったりとした行間、キャプションの大文字の適切な文字間隔は、ウェブインターフェースというより、ギャラリーの壁に飾られたテキストのように感じられます。レイアウトは、美術館のように画像が中心で、非対称かつミニマルです。被写体は、自然光の下、風景の中で、手に持って撮影され、その下に小さなリンクのようなキャプションが添えられています。下線付きのテキストリンク、非表示の入力フィールド、影なし、丸みを帯びたボタンなど、構成要素はほとんど見えず、革と写真がブランドを形作る上で中心的な役割を果たしています。
最大コンテンツ幅制限のないエッジツーエッジのレイアウトで、画像はビューポート全体を埋め尽くします。上部のバナー広告は全幅を占め、その下に全幅のヘッダーナビゲーションが続きます。メインコンテンツエリアは、ガターがゼロまたは最小限のマルチカラム画像グリッド（デスクトップでは2～3カラム）を使用しており、写真が独自の視覚構造を形成します。テキストとリンクは画像の下の空白に配置され、重なることはありません。編集セクションでは、製品グリッドと全幅のライフスタイルスタイルの写真が交互に表示されます。垂直方向のリズムはゆったりとしており（セクション間のガターは80～1.5）、ギャラリーを散策しているような感覚を与えます。ニュースレター購読モーダルは左下の固定パネルで、閉じることができる購読パネルはビューポートの最下部に配置されています。全体的な印象は、一般的なeコマースレイアウトというよりは、美術館のカタログや編集記事の見開きページのような印象です。
写真はブランドの中核となるコンテンツであり、表現手段です。2つの表現方法が共存しています。（1）商品を手に持った状態で撮影した、コントラストの高い大きなモノクロ写真。正方形または3:4の比率で、ライフスタイルの文脈を抜きにして、対象物がフレームいっぱいに写っています。（2）温かみのある自然光で撮影されたフルカラーのライフスタイル写真。アースカラーの風景、バッグを持って移動するモデルなどが、浅い被写界深度でローアングルから撮影されています。グレースケールとフルカラーの画像を交互に配置することで、ページ全体に統一感のある視覚的なリズムが生まれます。イラスト、3Dレンダリング、抽象的なグラフィックは一切使用していません。画像はページ全体、またはページの全幅を占め、半径ゼロのグリッドセル内に境界線はありません。アイコンは存在しないか、最小限に抑えられており、閉じるためのシンプルな十字マークのみで、それ以上はありません。
パレット
中性
- Obsidian Ink
#1c1717— メインテキスト、すべてのテキストリンク、本文、見出し、アイコンのアウトライン、そしてユーザーインターフェース全体にわたる繊細な境界線。これはメインカラーであり、白い背景に17.7:1の比率で、5,000箇所以上で使用されています。非常に繊細な温かみのある色調（純粋な黒ではない）が、インターフェース全体に画面ではなく印刷されたカタログのような印象を与えます。 - Paper
#ffffff— 明るい表面では、細い枠線、区切り線、入力フィールドのアウトライン、カードの縁などにこの色を使用してください。また、行動喚起ボタンのメインカラーとしてこの色を使用することは避けてください。 - Bone
#f0f0f0— 交互に配置されたセクションのための二次的な表面で、繊細なパネルの背景や内部の境界線／仕切りを作り出します。紙の白と広告の薄緑色の間に、微妙な温かみのあるグレーの色合いを生み出します。 - Eucalyptus Mist
#a9aea9— ページ上部のバナー広告の背景、セクション間の落ち着いた色調の変化、そして三次フレーム。単体で見るとほぼ灰色に見えるが、ページ幅全体に使用すると、ほのかなセージグリーンの色合いを帯びる。これはモノクローム配色の中で唯一のアクセントカラーとなっている。
タイポグラフィ
11～32ピクセル・5段階
- Sohne Web — 交換： Inter · 概要 400 · メインテキスト、ナビゲーション、リンク、見出し、ボタン、入力フィールド、アイコン、画像キャプションなど、インターフェース全体のスタイルが使用されています。400ウェイトのSöhneフォント（太字のバリエーションは見つかりませんでした）が、MAKRに静かで自信に満ちた表現力を与えています。情報は、ウェイトのコントラストではなく、サイズと文字間隔によって伝えられます。代替フォント：Inter、Söhne、またはUntitled Sans。
- CircularXXMonoWeb — 交換： JetBrains Mono · 概要 400 · 技術的な指示や製品仕様など、ごくまれな箇所にのみ使用してください。新グロテスク体のリズムを崩す、等幅フォントのささやき声のようなフォントです。使用は最小限にとどめてください。製品コード、材料仕様など、それ以外の用途には使用しないでください。代替フォントとしては、JetBrains MonoまたはIBM Plex Monoをお勧めします。
音程と形式
| 目的 | 意味 |
|---|---|
| 密度 | 密集 |
| 基本的なステップ | 5-8px |
| ボタンの半径 | 0px |
| カード半径 | 0px |
| 影 | いいえ - 影の代わりに境界線 |
| セクション間 | 80-120px |
AI がMAKRスタイルであなたのウェブサイトを構築し、
- リンクから商品や投稿を追加してください - Instagram 、 TikTok 、 Facebook 。
- 古いサイトからコンテンツを移行するには、アドレスを指定するだけです。
- 最高のエンジンであるReact （ Next.js ）上で動作するモダンなデザイン。サーバーレンダリングとSEO最適化が標準搭載されています。
- 検索結果のSEO最適化とニューラルネットワークによるレコメンデーションを完全に自動化。
類似のスタイル
- FARFETCH España — 「ホワイトキューブ」スタイルのファッションギャラリー。壁、床、什器すべてが真っ白に漂白された、高級小売スペースを想像してみてください。そこでは、服とそれを着る人だけが、あらゆる色合い、質感、そして視覚的な表現を生み出すのです。
- Franco Maria Ricci Editore — アールデコギャラリーカタログ - 真っ白な羊皮紙に磨き上げられた金色の線
- Laura Monin — 編集ギャラリーの壁、白い大理石、インクスタンプ
- Apple iPhone Duo — 白いギャラリーの中に折りたたみ式デバイスが置かれている。中央には製品のビジュアルレンダリングが配置され、文字と青色の操作ボタンは意図的に控えめな色調に抑えられている。
- Apple AirPods 5 — Apple ― 白い背景に映し出される映画。編集のための広大な白い空間は、動く物体のシルエットと鮮やかな照明が視覚的なドラマを生み出す長編コマーシャルへと繋がる。
- AXEL ARIGATO — 『アクセル・アリガト』は、飾らない都会の風景を捉えた写真集です。ページは、白い編集用フィールドと、丁寧にトリミングされた社会的に意義のあるファッション写真が連続して配置され、その間に簡潔な黒いキャプションが散りばめられています。
- Bose — 海岸沿いの撮影スタジオ。風になびく広告画像が画面いっぱいに広がり、その周囲には、まるで精密なディテールのように、鮮明な白黒のキャンペーン管理ツールが配置されている。
- OhDada — 編集ギャラリーウォール
- Cursor — くすぶる炭火に照らされた、居心地の良い羊皮紙工房
- Structured — 粘土のような紙に描かれたルネッサンスギャラリー
- MindMarket — クリーム色の紙に印刷された、居心地の良いおとぎ話の本。大きなInterの見出しと切り抜かれた紙のキャラクターが、太陽の光を浴びたような、ステッカーのように柔らかい表面に共存する、親しみやすい編集上のキャンバス。
- Airbnb — 静かな白いギャラリーの壁に、サンゴ色のしおりが1枚だけ飾られている。