厳選・オープン・無料

Stellar Work

エージェンシーのスピードで提供されるエリートなデザインサービス。

01

デザイン DNA

スピードと特別感を提供するハイエンドのデザインブティック。

02

カラー

主要なアクションにエレクトリックパープルをアクセントとして使用した、ダークでニュートラルな基盤。

03

タイポグラフィ

grotesque-sans

• display80px · 400
• display-lg96px · 400
• body16px · 400

大きなディスプレイテキストにはtightな字間 · セクション間にはゆったりとした垂直方向の間隔

04

余白

余白を生み出すために、大きな垂直方向のパディング（128-280px）を備えた柔軟なグリッド。

05

サーフェス (角丸 / 影 / 罫線)

かすかな区切りをつけるための、rgba(255,255,255,0.2)の薄い1pxボーダー。

0px 0px 16px 0px rgba(255, 219, 0, 0.5)

06

レイアウト

ゆったりとした水平パディングと、ヒーローセクション内でのtightな垂直方向のアラインメントを備えた、広めのセンタリングコンテナ。

07

モーションとインタラクション

すべてのインタラクティブ要素に_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

パック内の実スクリーンショット

実ページから取得 · 実 computed styles

11

System Prompt

en · zh-CN · zh-TW · ja · ko