厳選・オープン・無料
Counter Print
デザインプロフェッショナルのための、ミニマリストで画像優先の選りすぐり書店です。
EditorialCurationTypographyBooksPremium
01
デザイン DNA
選りすぐりデザインブックグラフィックデザインリファレンス
グラフィックデザイン文献のためのデジタルギャラリー
02
カラー
#1C1C1CInk
#FFFFFFBG
rgba(229,231,235,1.0)Line
カラフルな書籍カバーを主な視覚的関心事とするための、厳格なモノクロームキャンバスです。
03
タイポグラフィ
grotesque-sans
- display
63px · 700 - body
15px · 400
表示サイズではインパクトを高めるために、狭いネガティブ文字間隔を使用します。 · 色ではなくウェイトとサイズのみを使用して、厳格な視覚的階層を維持します。
04
余白
4px
8px
16px
24px
32px
48px
64px
96px
関連アイテムをグループ化する水平方向の狭いギャップと、個々のコンテンツブロックを分離する垂直方向の広いパディングを実現しています。
05
サーフェス (角丸 / 影 / 罫線)
sm · 4px
md · 8px
lg · 12px
pill · 999px
1px solid rgb(229,231,235)
06
レイアウト
1280container
12columns
24pxgutter
768 / 1024breakpoints
キャンバスを埋めるために大型で高品質な写真に依存する、シンプルなグリッドベースのレイアウトです。
07
モーションとインタラクション
220msmicro
400mssmall
800msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
インタラクティブ要素に対する滑らかなopacityとtransformトランジション。
トランジションプロパティで示される、opacityやtransformのような微妙な視覚的変化。 · 標準的なカーソルポインターフィードバックによる即時応答。
08
コンポーネント
- button 「すべて表示」のようなセカンダリアクションに使用される、ピル型のボーダーラディウスを持つゴースト/アウトラインボタンです。
- card グリッドカラム内にフラッシュに配置され、プロダクト写真を強調する、エッジツーエッジの画像カードです。
- hero 大型のプロダクト写真と太字でミニマルなテキスト分類を特徴とする、2カラムの分割レイアウトです。
09
文体と禁止事項
- トーン プロフェッショナル、ミニマリスト、そして非常に厳選された。
- 見出し 太字で狭い追跡、かつ記述的な。
- CTA 控えめで、明確で機能的な言葉とピル型アウトラインボタンを使用する。
- UI要素に装飾的またはセリフフォントを使用しない — スクリーンショットは厳格な幾何学的/グロテスクサンセリフシステムを示しています。
- ボタンやハイライトに明るいアクセントカラーを使用しない — スクリーンショットは主導的なアクセントのない厳格なモノクロームUIを示しています。
- 重いドロップシャドウやソフトグローを適用しない — スクリーンショットはシャドウ使用のない完全にフラットなサーフェスを示しています。
- 主要なコンテンツカードに角丸を使用しない — スクリーンショットはプロダクト画像やレイアウトブロックにシャープな角を示しています。
- 両揃えテキストや密なコピーの塊を使用しない — スクリーンショットは広い垂直方向の間隔を持つ左揃えテキストを示しています。
- 不要なボーダーや区切り線を追加しない — スクリーンショットはセクションを分離するために余白とグリッドのアライメントを使用しています。
- 避ける: 過度にプロモーショナルな言葉
- 避ける: 散らかったレイアウト
- 避ける: 装飾的なフォント
10
パック内の実スクリーンショット
桌面首屏(hero)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
桌面滚动分段(90% viewport 步进,作为视觉证据)
移动首屏実ページから取得 · 実 computed styles
11
System Prompt
選りすぐりのグラフィックデザイン書店のための、ミニマリストでプレミアムなeコマースデザイン。UIは厳格なモノクロームパレット(#FFFFFF背景、#1C1C1Cインク)を使用し、カラフルな書籍カバーを注目の的としています。タイポグラフィは、太字で大規模なヘッダーを持つ、清潔で狭い追跡のグロテスクサンセリフ(Helvetica/Arial)に依存します。重要な禁止事項:装飾フォントは決して使用せず、重いシャドウを適用せず、製品と競合する明るいアクセントカラーを導入しないこと。レイアウトは広いパディングを持つグリッドベースで、セカンダリアクションにはゴースト/ピルボタンを使用します。インタラクションパターンは微妙で、滑らかなopacityとtransformトランジションに依存しています。
en · zh-CN · zh-TW · ja · ko