厳選・オープン・無料
Sketch
洗練されたダークテーマのUIの中で、ユーザーのワークを中心に据える、プロフェッショナルでハイコントラストのデザインプラットフォーム。
Design ToolsCleanProductPremiumCollaboration
01
デザイン DNA
デザイン中心プロフェッショナル集中型歓迎的
丁寧に作り上げられたスタジオ環境のように感じられる、上質で集中型のツールキット。
02
カラー
#212123Ink
#000000Ink soft
#f5f5f5BG
#ffffffBG soft
#f0f0f0BG quiet
#0000006bMuted
rgba(0,0,0,0.32)Line
ヒーローセクションに微かな暖色のグラデーションを加えた、ハイコントラストの中性色。焦点と奥行きを生み出します。
03
タイポグラフィ
transitional-serif · humanist-sans · monospace
- display
72px · 400 - heading
40px · 400 - subhead
22px · 400 - body
16px · 400 - caption
14px · 400
ディスプレイフォントは、ハイコントラストなトランジショナルセリフ。 · 本文はニュートラルなヒューマニストサンス。 · 大きなディスプレイサイズでは、字間をタイトに詰めます。
04
余白
4px
8px
12px
16px
24px
32px
48px
64px
96px
4pxグリッドをベースに、ゆとりのある余白を採用しています。
05
サーフェス (角丸 / 影 / 罫線)
sm · 4px
md · 8px
lg · 12px
pill · 9999px
輪郭を明確にするための、rgba(0,0,0,0.32)の控えめな1pxボーダー。
rgba(0, 0, 0, 0.2) 0px 1px 4px 0px · rgba(0, 0, 0, 0.1) 0px 2px 4px 0px
06
レイアウト
1280container
12columns
24pxgutter
768 / 1024breakpoints
豊富なpaddingと明確な視覚的階層を持つ、中央揃えコンテンツ。
07
モーションとインタラクション
125msmicro
200mssmall
400msmedium
cubic-bezier(0.455, 0.03, 0.515, 0.955)easing
スクロール時のフェードイン · 滑らかなhoverトランジション
インタラクティブ要素の微妙な色や不透明度の変化。 · 即座のフィードバックを提供する、標準のポインターカーソル。
08
コンポーネント
- button ハイコントラストなテキストを持つ、ダークで角丸の長方形。
- card Featureのショーケースに使用される、微かな影のある角丸コンテナ。
- chip 背景色と大文字テキストを持つ、小さな角丸ラベル。
- input 控えめなボーダーを持つミニマリストな角丸入力フィールド。
- hero 印象的なセリフヘッドラインとソフトなグラデーション背景を持つ、大きな分割セクションレイアウト。
09
文体と禁止事項
- トーン 自信に満ち、フレンドリーで、プロフェッショナル。
- 見出し 直接的で、効果と歓迎的なトーンのためにセリフフォントをよく使用。
- CTA アクション指向で明確。ハイコントラストなボタンを使用。
- 低コントラストなテキストを使用しない — スクリーンショットでは明るい背景にハイコントラストなインクが使用されている。
- 本文に装飾的なフォントを使用しない — スクリーンショットではクリーンなヒューマニストサンスが使用されている。
- プライマリアクションに強烈で明るいアクセントカラーを使用しない — スクリーンショットではダークでハイコントラストなボタンが使用されている。
- 要素を詰め込みすぎてレイアウトを雑踏にしない — スクリーンショットでは豊かな余白が維持されている。
- プライマリコンポーネントに鋭角で四角い角を使用しない — スクリーンショットでは角丸（20px、12px）が使用されている。
- 大きなヘッドラインに細く軽いフォントを使用しない — スクリーンショットでは太字のハイコントラストセリフフォントが使用されている。
- 避ける: 専門用語
- 避ける: 攻撃的なセールス言語
- 避ける: 過度にカジュアルなスラング
10
パック内の実スクリーンショット
桌面首屏（hero）
桌面滚动分段（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
これは、デザイナーのための集中型でプロフェッショナルなツールキットとしてポジショニングされた、プレミアムデザインツールのウェブサイトです。主要なHEXカラーには、ライトグレー背景（#f5f5f5）、ハイコントラストのダークインク（#212123）、セカンダリーテキストのための控えめなミュートトーンが含まれます。タイポグラフィには、ディスプレイヘッドライン（例：「Designers, welcome home.」）用のトランジショナルセリフと、本文用のヒューマニストサンスが特徴です。重要な禁止事項：1. 低コントラストなテキストを使用しない — デザインは高い可読性に依存している。2. 本文に装飾的なフォントを使用しない — 明確さを維持する。3. レイアウトを雑踏にしない — 焦点を生む豊かな余白を保つ。4. プライマリボタンに強烈で明るいアクセントカラーを使用しない — ダークでハイコントラストを維持する。5. コンポーネントに鋭角で四角い角を使用しない — 確立された角丸システムを使用する。6. 大きなヘッドラインに細く軽いフォントを使用しない — 効果のためにハイコントラストのセリフフォントを使用する。
en · zh-CN · zh-TW · ja · ko