monopo saigon
編集部の沈黙の背後にある、液体のような虹色の輝き――溶けた光の上に浮かぶモノクロの編集ギャラリー
Monopo Saigonは、徹底したモノクロームの原則に基づいて運営されています。純粋な黒と白に微妙なグレーのトーンが加わり、ページ全体に広がるキャンバスの上で息づいているかのような巨大なRoobertフォントがそれを包み込んでいます。特徴的なコントラストは、厳格な編集上の制約（ナビゲーションとテキストリンクの鋭角、豊富な余白、4pxを基調としたリズム）と、画像の上に液体のように浮かぶ75px半径のボタンという、たった一つの表現的なジェスチャーにあります。主要なデザイン要素は、虹色に輝く流動的な色彩の雰囲気（緑から琥珀色、そして深いワインレッドへと変化）へと傾倒していますが、インターフェース自体は単一の色調になることはなく、液体の光の川の上に浮かぶ白黒の編集ギャラリーのような感覚を生み出しています。フォントが全体のトーンを決定づけています。78pxの300ラインウェイトはささやくように、225pxの400ラインウェイトはビューポートを埋め尽くし、11pxの400ラインウェイトは自信に満ちたミニマルな方法で他のすべてを定義しています。動きは表現力豊かでありながら忍耐強く、1.25秒まで伸びる3次ベジェ曲線(0.19, 1, 0.22, 1)アンチエイリアシング曲線、変形遷移により、要素が急停止するのではなく滑らかに動きます。
レイアウトは最大幅 1078px で中央揃えになっており、暗いスプラッシュ セクションがページの全幅に広がり、コンテナからはみ出しています。スプラッシュ セクションはビューポート全体を占め、中央に配置された記念碑的なタイトル (Un i ted, Unbound) がきらめくメディア コンテンツの上に浮かび、ミニマルなナビゲーションが上部に浮かび、回転するアイコンが 1 つ左下に配置されています。本文セクションはゆったりとした編集リズムに従っており、セクション間の 46px の大きな間隔がブロック間のゆとりを生み出し、白と暗色 (白のフォントの黒) のストライプが交互に配置されています。コンテンツ レイアウトは非対称で、左にテキスト/右に画像、左に画像/右にテキストが交互に配置されるのが主流で、スプラッシュ セクションの外側には中央揃えのブロックはありません。カード グリッドは、複数列ではなく単一列のプロジェクト リストとして表示され、各プロジェクトは独自の画像とタイトルで全幅を占めます。ナビゲーションは、透明なトップバーで構成され、左側にロゴ、中央に地域情報、右側にメニューが配置されています。色の変化や影はなく、目に見えない保存ボタンがあるだけです。ページ下部には、東京、サイゴン、ロンドンといった都市名が簡潔なテキストとともに3列に並んだアドレスブロックがあります。全体的に、デジタルマガジンの編集スタイルと言えるでしょう。
ビジュアルは演劇的で独特です。メインスクリーンは、巨大で虹色に輝く流動的なテクスチャで覆われています。有機的な緑の色合いが琥珀色やワインレッドに溶け込み、まるで水面に浮かぶ油や溶けたガラスのようです。これは、画面全体を占める雰囲気のあるメディアコンテンツ、おそらくシェーダーで作成されたビデオやキャンバスのように感じられ、繰り返されるパターンではなく、単一の感覚的な瞬間として認識されます。プロジェクトのデモでは、フレームや境界線なしで提示される親密な編集写真（大規模な製品写真、プロモーション画像）が使用されています。画像がコンテンツです。イラストはなく、小さなUIグリフ以外のアイコンはなく、装飾的な形状もありません。アイコンは最小限か、まったくありません。回転する円形のテキストアイコンが、システムの唯一のタイポグラフィの装飾として機能します。全体的な密度：テキストは大きなサイズの単一の視覚的ジェスチャーで支配し、その後、タイポグラフィと製品画像の長く穏やかな編集的範囲が続きます。
パレット
ブランド
- Iridescent Fade
#a02d25— 色彩のアクセントはグラデーションの遷移部分のみに現れ、虹色の雰囲気の基盤となる溶けたようなバーガンディの色合いは、インターフェースのコントロールには使用されていません。
中性
- Obsidian
#000000— 本文、SVG ストローク、本文テキスト上の塗りつぶし - 純粋な黒には、すべての前景情報とグラフィック要素が含まれています。 - Paper
#ffffff— 暗い背景に明るい文字、反転したキャプション、高コントラストの見出しは避けてください。行動喚起のメインカラーとして明るい文字を使用することも避けてください。 - Inkstone
#181818— フッターの本文と追加の見出しは、長文を読みやすくするために、控えめな黒色で表示されています。 - Felt Gray
#6d6d6d— 補助テキスト、住所欄、法律文書など、完全に消え去るわけではないものの、気づかれずに徐々に目立たなくなる静かな注釈。 - Slate Pill
#636363— ボタンのニュートラルな背景は、「承認」などのアクションに使用される唯一の単色塗りつぶしです。 - Ash Mist
#9a9a9a— 視覚障害のある方やコントラストの低い方に適した、ニュートラルな中間色調の塗料。
タイポグラフィ
12～225ピクセル・9段階
- Roobert — 交換： Inter or Söhne — both share Roobert's geometric-humanist balance and clean aperture · 概要 300, 400, 600 · メインフォントは、インターフェーステキスト、ナビゲーション、見出し、本文、リスト、フッターなど、あらゆるテキストに使用されます。このカスタムデザインのサンセリフ体は、幾何学的な明快さと人間味あふれる温かみを兼ね備えています。300 Whisperから600 Anchorまで幅広いウェイトが用意されているため、壮大な見出しから注釈まで、あらゆる場面でその個性を発揮します。
- Raleway — 交換： Montserrat or Jost · 概要 400 · よりエレガントで細身のサンセリフ体がコントラストを生み出すような、特定の見出しの場面でのみ使用され、より太字のRobert書体との対比として使用されることは稀である。
- system-ui — 交換： Inter · 概要 400 · インターフェースのマイクロラベル、クッキーバナーの本文テキスト、小さなフォント - ブラウザのデフォルトのフォールバックオプションにより、カスタムフォントを必要とせずに、細部に至るまで読みやすさが確保されます。
音程と形式
| 目的 | 意味 |
|---|---|
| 密度 | 密集 |
| 基本的なステップ | 14px |
| ボタンの半径 | 75px |
| カード半径 | 0px |
| 影 | いいえ - 影の代わりに境界線 |
| セクション間 | 46px |
| ページ幅 | 1078px |
AI がmonopo saigonスタイルであなたのウェブサイトを構築し、
- リンクから商品や投稿を追加してください - Instagram 、 TikTok 、 Facebook 。
- 古いサイトからコンテンツを移行するには、アドレスを指定するだけです。
- 最高のエンジンであるReact （ Next.js ）上で動作するモダンなデザイン。サーバーレンダリングとSEO最適化が標準搭載されています。
- 検索結果のSEO最適化とニューラルネットワークによるレコメンデーションを完全に自動化。
類似のスタイル
- Hyer Aviation — 夕暮れ時のコックピット、羊皮紙の上。淡い夜明けの空が機体サイズのセリフ体ロゴと出会い、温かみのある粘土色のアクセントが単色の抑制を打ち破る。
- OFF+BRAND. — 温かい羊皮紙の上に虹色に輝く球体
- Seed — 実験用ガラスケース内の生物
- Eindhoven Design District — 白い紙に描かれた編集的なブルータリズムは、大きな活字、最小限の写真、そして徹底的な抑制によって表現された、都市デザインのマニフェストである。
- Subframe — 温かみのある羊皮紙に描かれたグラフィックなドローイング。デザイナーズペーパーを使用し、すべてのストロークは鉛筆か消しゴムで、絵の具は一切使われていない。線の太さとまばらなセリフによって奥行きが表現されている。
- Miranda — 淡いクリーム色の背景にクラシックなワイドフォーマットのフォントを使用した、デジタル時代の新聞社説
- Monocle — クリーム色の紙を使用した、高品質で大判の新聞。厳選された論説記事はどれも掲載にふさわしく、ページには意味のある色はたった一色のみ。
- Agencja brandingowa — 白を基調とした編集ギャラリー。文字は黒インクで印刷されている。
- Websmith Studio — クリーム色の紙に当たる朝の光
- Aspelin Reitan — キャンドルライトに照らされた建築アーカイブ - このページは、温かみのあるクリーム色の壁にピンで留められた建築空間のポートフォリオのように見え、各画像の上には、ページの全幅にわたって白いテキストが1行浮かんでいる。
- Public — 冷たい大理石の上にモノクロームで描かれたエディトリアル――まるでモノクロームのキャンバスのようで、300ポイントのセリフ体フォントとたった一つの紫色のアクセントが、すべての色彩を担っている。
- Motto — 紙の上にそびえ立つタイポグラフィの巨石――真っ白な紙の上に、力強く自己主張する単一の声。