厳選・オープン・無料
Eye on Design
独自のピンクとグリーンのカラーパレットが特徴の、キュレーションされた記事を掲載するエディトリアルデザインブログ。
editorialdesign
01
デザイン DNA
デザイン出版キュレーションビジュカルカルチャー
クリーンでエディトリアルなレイアウトを備えた、プレミアムデジタルデザインマガジン。
02
カラー
#FF8C8CAccent
#000000Ink
#524B48Ink soft
#FFFFFFBG
#ECE2E2BG quiet
rgba(0,0,0,1.0)Line
クリーンな白のキャンバスに、支配的なピンクのアクセントとハイコントラストなブラックのタイポグラフィを配色。
03
タイポグラフィ
grotesque-sans · humanist-sans
- display
44px · 700 - body
16px · 400
見出しにはボールドなゴロテスクサンセリフを使用 · 本文にはクリーンなヒューマニストサンセリフを使用 · 大文字のラベルには文字間隔を広めに設定
04
余白
4px
8px
16px
24px
32px
48px
64px
96px
セクション間に十分な余白を設けた、一定の垂直リズム。
05
サーフェス (角丸 / 影 / 罫線)
sm · 4px
md · 4px
lg · 4px
pill · 999px
注目度の高い要素には2pxの实线黑色、その他の箇所は最小限。
06
レイアウト
1280container
3columns
24pxgutter
768 / 1024breakpoints
記事カードには3カラムグリッド、メインコンテンツには1カラム。
07
モーションとインタラクション
150msmicro
300mssmall
300msmedium
ease-in-outeasing
インタラクティブ要素に対する滑らかなトランジション
リンクやボタンのカラー変化。 · 即座のレスポンス。
08
コンポーネント
- button シンプルなテキストリンクまたは小さな大文字ラベル。
- card 画像、カテゴリラベル、見出し、短い抜粋。
- chip ピンク色の大文字カテゴリラベル。
- input ナビゲーションに統合された検索機能。
- hero ボールドな見出しと画像を持つ大型の注目記事。
09
文体と禁止事項
- トーン プロフェッショナルで権威がありつつも、親しみやすく引き込むトーン。
- 見出し 直接的で、情報豊かかつ大胆。
- CTA 控えめで機能的。
- ごちゃごちゃしたレイアウトを使用しない — スクリーンショットには要素間のクリーンで豊かな余白が示されています
- 装飾的なフォントを使用しない — スクリーンショットにはクリーンで機能的なゴロテスクおよびヒューマニストサンセリフが示されています
- 暗い背景を使用しない — スクリーンショットには主に白い背景が示されています
- 繊細なグラデーションを使用しない — スクリーンショットにはピンクのアクセントのようなフラットで均一なカラーブロックが示されています
- 低コントラストのテキストを使用しない — スクリーンショットには白い背景に対するハイコントラストの黒いテキストが示されています
- ナビゲーションを隠さない — スクリーンショットには永続的で明確なナビゲーション要素が示されています
- 避ける: 過度にカジュアルな言葉遣い
- 避ける: コンテンツから注意をそらす装飾的な要素
- 避ける: ごちゃごちゃしたレイアウト
10
パック内の実スクリーンショット
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏実ページから取得 · 実 computed styles
11
System Prompt
これはエディトリアルデザインの出版物ウェブサイトです。クリーンな3カラムグリッドレイアウト、豊かな余白、ハイコントラストなタイポグラフィを採用しています。プライマリカラーはアクセントやカテゴリラベルに使用される鮮やかなピンク（#FF8C8C）、見出しにはブラック（#000000）、背景にはホワイト（#FFFFFF）です。タイポグラフィはゴロテスクおよびヒューマニストサンセリフに依存します。重要なデザイン制約：ごちゃごちゃしたレイアウト、装飾的なフォント、低コントラストのテキストは避けてください。プロフェッショナルで権威あるトーンを維持しながら、ビジュアル表現はクリーンでコンテンツに焦点を当ててください。
en · zh-CN · zh-TW · ja · ko