厳選・オープン・無料
Stellar Work
エージェンシーのスピードで提供されるエリートなデザインサービス。
AgencyPortfolioPremiumBold TypographyClean
01
デザイン DNA
高速エリートデザインスプリントシニアレベル
スピードと特別感を提供するハイエンドのデザインブティック。
02
カラー
#6A48F2Accent
#FFFFFFInk
#888888Ink soft
#171718BG
#2C2C2EBG soft
rgba(255, 255, 255, 0.2)Line
主要なアクションにエレクトリックパープルをアクセントとして使用した、ダークでニュートラルな基盤。
03
タイポグラフィ
grotesque-sans
- display
80px · 400 - display-lg
96px · 400 - body
16px · 400
大きなディスプレイテキストにはtightな字間 · セクション間にはゆったりとした垂直方向の間隔
04
余白
4px
8px
16px
24px
32px
48px
64px
96px
128px
200px
280px
余白を生み出すために、大きな垂直方向のパディング(128-280px)を備えた柔軟なグリッド。
05
サーフェス (角丸 / 影 / 罫線)
sm · 4px
md · 10px
lg · 16px
pill · 50px
かすかな区切りをつけるための、rgba(255,255,255,0.2)の薄い1pxボーダー。
0px 0px 16px 0px rgba(255, 219, 0, 0.5)
06
レイアウト
1280container
12columns
24pxgutter
768 / 1024breakpoints
ゆったりとした水平パディングと、ヒーローセクション内でのtightな垂直方向のアラインメントを備えた、広めのセンタリングコンテナ。
07
モーションとインタラクション
220msmicro
300mssmall
500msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
すべてのインタラクティブ要素に_smoothなトランジション(0.3秒) · コンテンツ表示のための微妙なフェードイン
ボタンやインタラクティブ要素への微妙な背景または不透明度のシフト。 · 軽微なスケールや不透明度の変化による即座のビジュアルフィードバック。
08
コンポーネント
- button アクセントカラーの塗りつぶしと白いテキストを持つ、ピル型(border-radius: 50px)。
- card 薄いボーダーと角丸を持つ、ダーク背景のカード(rgba(23,23,24,1.0))。
- chip 「ブランディング」や「ウェブデザイン」などのフィルタリング用ピル型タグ。
- hero 最小限のイメージを背景にしたダーク背景上に、tightな字間の巨大なディスプレイタイプ。
09
文体と禁止事項
- トーン 自信に満ち、直接的で、プレミアム。
- 見出し 短く、力強く、価値を伝えるフレーズ。
- CTA 「予約する」や「始める」のように、明確で行動を促す動詞。
- 明るい色やパステル調の背景を使用しない — スクリーンショットでは深いダークグレー(#171718)が使用されている
- 装飾的または手書きのフォントを使用しない — スクリーンショットではクリーンなgrotesque-sansが使用されている
- 複数の高彩度アクセントカラーを使用しない — スクリーンショットでは単一のメインカラーであるパープル(#6A48F2)が使用されている
- 小さく詰まったディスプレイタイポグラフィを使用しない — スクリーンショットでは大きくtightな字間のヘッドラインが使用されている
- ボタンに尖った角や四角い角を使用しない — スクリーンショットではピル型(50px radius)のボタンが使用されている
- 賑やかで情報の詰まったレイアウトを使用しない — スクリーンショットではゆったりとしたホワイトスペースとクリーンなグリッドが使用されている
- 避ける: 控えめまたは過度に丁寧な言葉遣
- 避ける: 一般的なビジネス用語
- 避ける: 過度な感嘆符
- 避ける: 長々とした説明
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
Stellar Workは、ダークでムードのある美学と、巨大でtightな字間のgrotesque-sansタイポグラフィが特徴の、プレミアムで高速なデザインエージェンシーのランディングページです。カラーパレットは厳密にモノクローム(ダークグレー#171718背景、ホワイト#FFFFFFインク、#888888ミュート)で、鮮やかなエレクトリックパープル(#6A48F2)はプライマリのCTAボタンとアクセントにのみ使用されます。レイアウトはゆったりとしており、広めの垂直パディングと12カラムグリッドを備えています。明るい背景、装飾的なセリフフォント、複数の明るい色、または賑やかで情報密度の高いセクションは避けてください。インタラクションは0.3秒のトランジションで滑らかに保ち、すべてのコピーでは自信に満ちた直接的なトーンを維持してください。
en · zh-CN · zh-TW · ja · ko