厳選・オープン・無料
Monocle
世界の情勢、文化、ライフスタイルを扱う、洗練された編集プラットフォーム。
editorialmagazine
01
デザイン DNA
EditorialGlobal AffairsLifestyleCuratedPremium
高級国際誌をデジタルフォーマットに凝縮したもの。
02
カラー
#FFC500Accent
#000000Ink
#141414Ink soft
#FFFFFFBG
#F8F8F8BG soft
#6E6E6EMuted
rgba(0,0,0,0.1)Line
黑白のハイコントラストを基調とし、単一の鮮やかな黄色アクセントと構造用の穏やかなグレーを用いる。
03
タイポグラフィ
transitional-serif · grotesque-sans
- display
96px · 400 - h1
48px · 700 - h2
24px · 700 - body
16px · 400 - caption
13px · 400
ナビゲーションやセカンダリセクションリンクには、全て大文字を使用する。 · 黒いテキストと白い背景の間には、高いコントラストを厳守する。 · メインの見出し（masthead）は中央揃えとし、大きなセリフフォントで目立つように配置する。
04
余白
4px
8px
16px
24px
32px
48px
64px
80px
96px
一貫した4pxグリッド。編集の明瞭性を高めるため、十分なホワイトスペースを確保。
05
サーフェス (角丸 / 影 / 罫線)
sm · 4px
md · 8px
lg · 12px
pill · 999px
構造的な区切りやボタンに、薄い1pxの黒またはグレーのボーダーを使用。
0px 0px 0px 1px #D9D9D9 · 0px 30px 70px 0px rgba(0,0,0,0.3)
06
レイアウト
1280container
12columns
24pxgutter
768 / 1024breakpoints
固定された中央揃えのトップナビゲーションバーを備えた、構造化された12カラムグリッド。
07
モーションとインタラクション
220msmicro
250mssmall
400msmedium
ease-ineasing
インタラクティブ要素における、微細なbackground-colorとtransformのトランジション。 · UI状態変更時のリニアスライドまたはフェードトランジション。
ボタンやリンクの、微細なbackground-color変更やtransformシフト。 · カーソルがポインタ状態となり、即座に視覚応答。
08
コンポーネント
- button 黒の大文字テキストを持つ明るい黄のプライマリボタン。丸型または角丸4px程度の矩形シェイプ。
- card ホワイトスペースと微細なボーダーラインで定義されたシンプルなコンテンツブロック。大きな画像と太字の見出しが特徴。
- chip メインナビゲーションで縦線（パイプ）で区切られた、シンプルなテキストラベル。
- input メインコンテンツエリアには表示されませんが、想定されるフォームは最小限のボーダーと4pxのradiusを使用するでしょう。
- hero フルワイドエリア。大きな中央揃えの見出し（masthead）または、ボーダー付きの編集用イラストの水平列を配置。
09
文体と禁止事項
- トーン 権威あり、洗練され、グローバルな視点を持つ。
- 見出し 直接的で情報を提供し、カテゴリナビゲーションにはしばしば全て大文字で表記。
- CTA 大胆で明確かつ機能的。「SUBSCRIBE」などのプライマリアクションにはハイコントラストな黄色を使用。
- 赤、青、緑などのプライマリカラーは使用しない。スクリーンショットでは黄色が唯一の高彩度アクセントとして示されている。
- 全てのボタンに丸型・ピル型を使用しない。スクリーンショットでは矩形またはわずかに角丸（4px radius）のボタンが示されている。
- 装飾的なスクリプトフォントやハンドワーティングフォントは使用しない。スクリーンショットでは、構造化されたトランジショナルセリフとクリーンなサンセリフが示されている。
- 背景を暗色や彩色されたままにしない。スクリーンショットでは、メインコンテンツエリアがクリーンな白背景（#FFFFFF）であることが示されている。
- プライマリナビゲーションを隠さない。スクリーンショットでは、MAGAZINE、RADIO、SHOPといった常時表示のトップレベルリンクが示されている。
- 背景に複雑なグラデーションを使用しない。スクリーンショットでは、塗りつぶしの白またはシンプルな透明から白へのグラデーションが示されている。
- 避ける: 過度にカジュアルな言葉遣いや、過剰な感嘆符は避ける。
- 避ける: 競合する視覚要素を多数詰め込み、インターフェースを雑然とさせるのを避ける。
- 避ける: 可読性を損なうような、低コントラストのカラーパレットの使用を避ける。
10
パック内の実スクリーンショット
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏実ページから取得 · 実 computed styles
11
System Prompt
Monocleは、世界の情勢、文化、ライフスタイルに焦点を当てた洗練された編集プラットフォームです。純白（#FFFFFF）を背景に、純黒（#000000）をテキストとするハイコントラストパレットを採用し、単一の鮮やかな黄（#FFC500）をプライマリアクセントとして使用しています。タイポグラフィは、見出しやメインの見出し（masthead）にトランジショナルセリフを多用し、本文にはクリーンなサンセリフを組み合わせています。重要なデザインルールには以下の点が含まれます：プライマリテキストに低コントラストのグレーを決して使用せず、プレミアムな編集感覚を保つために十分なホワイトスペースを常に確保し、二色プラス黄のカラーパレットに厳密に従うこと。過度に装飾的なフォント、雑然としたレイアウト、またはキュレーションされたコンテンツから注意をそらすようなセカンダリアクセントカラーの使用は避けてください。
en · zh-CN · zh-TW · ja · ko