厳選・オープン・無料
Madebyon
大胆なデザインと技術革新を通じて、デジタル体験の未来を形づくることに焦点を当てたプレミアムなデジタルエージェンシー。
AgencyCleanBold TypographyPremiumDesign Tools
01
デザイン DNA
デジタルエージェンシークリエイティブスタジオ革新モダンプレミアム
デジタル体験のためのハイエンドな建築事務所。技術的な精度とクリエイティブな大胆さを組み合わせています。
02
カラー
#DCFF4FAccent
#FAF9F4Ink
#000000BG
#151515BG soft
#888888Muted
rgba(250,249,244,0.12)Line
コール・トゥ・アクションのための単一の鮮やかなアクセントを用いたハイコントラストのミニマリズム。大胆で集中したビジュアルヒエラルキーを生み出します。
03
タイポグラフィ
geometric-sans
- display
56px · 400 - h2
40px · 400 - body
16px · 400 - caption
12px · 400
すべての主要テキストにジオメトリックなサンセリフフォントを使用し、クリーンでモダンな美学を維持します。 · 見出しは大きく大胆にし、インパクトのために文字間隔を詰めます。 · ウェイトのバリエーションを制限し、主にウェイト400に依存して一貫した洗練された外観を維持します。
04
余白
4px
8px
16px
24px
32px
48px
64px
96px
一貫した8pxの基本単位と豊かな余白で、広々としたプレミアム感を生み出します。
05
サーフェス (角丸 / 影 / 罫線)
sm · 4px
md · 8px
lg · 24px
pill · 999px
最小限のボーダー。分離には微細な透過度の変化または極細の区切り線を使用します。
0px 4px 14px rgba(0, 0, 0, 0.12) · 0px 24px 60px rgba(0, 0, 0, 0.35) · 0px 32px 68px rgba(0, 0, 0, 0.3)
06
レイアウト
1280container
12columns
24pxgutter
768 / 1024breakpoints
左寄せのヒーローテキストとその下のフルワイドのビジュアル要素から始まり、グリッドベースのプロジェクトショーケースへと展開します。
07
モーションとインタラクション
220msmicro
400mssmall
900msmedium
cubic-bezier(0.165, 0.84, 0.44, 1)easing
ページ要素のための滑らかなフェードインとトランスフォームアニメーション。 · 実験的なセクションにおける微細なパーティクル効果を伴う動的ビデオ背景。 · インタラクティブ要素のホバー遷移によるフィードバックの強化。
色の変化、透過度の調整、または微細なトランスフォームによる視覚的なフィードバック。 · 滑らかな遷移状態による即座の視覚的応答。
08
コンポーネント
- button 鮮やかなアクセントカラー（黄）と黒テキストを用いたハイコントラストな丸型ボタン、または白テキストのアウトライン付き丸型ボタン。
- card 豊かなパディング、微細な背景の差別化、滑らかなホバー遷移を備えたコンテンツカード。
- chip ナビゲーションやタグに使用される最小限のチップ。多くの場合、ボーダーや微細な背景付き。
- input 微細なボーダーと明確なフォーカス状態を備えた、クリーンでミニマルな入力フィールド。
- hero 大きなタイポグラフィと動的背景（動画/画像）を備えた、フルワイドの没入感のあるヒーローセクション。
09
文体と禁止事項
- トーン 未来志向でプロフェッショナルな、自信とビジョンに満ちたトーン。
- 見出し 大胆で宣言的な、大きなインパクトのあるタイポグラフィを使用したステートメント。
- CTA 直接的で行動指向。ハイコントラストなボタンを使用してエンゲージメントを促進。
- 装飾的またはセリフフォントを使用しない — スクリーンショット全体がクリーンなジオメトリックサンセリフを示しています。
- 複数のアクセントカラーを使用しない — スクリーンショットは単一の主要アクセント（黄緑）のみを示しています。
- 不必要な要素でインターフェースを雑然とさせない — スクリーンショットは豊かな余白とミニマルなUIを示しています。
- 小さく詰まったタイポグラフィを使用しない — スクリーンショットは余裕のある间距で大きく読みやすいテキストを示しています。
- 硬直した、箱型のレイアウトに頼らない — スクリーンショットは流動的でオーガニックな要素と角丸を示しています。
- 分離に太いボーダーに頼らない — スクリーンショットは代わりに微細な间距と背景の差別化を示しています。
- 避ける: 技術用語
- 避ける: 過度にカジュアルな言葉
- 避ける: 不確実またはためらいがちな表現
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
Madebyonのプレミアムなデジタルエージェンシーウェブサイト。ジオメトリックなサンセリフタイポグラフィを特徴とする、ダークでハイコントラストな美学。プライマリカラーは黒（#000000）とオフホワイト（#FAF9F4）。コール・トゥ・アクション要素には鮮やかな黄緑のアクセント（#DCFF4F）を使用。デザインは、大胆で大きなタイポグラフィ、文字間隔の詰め、豊かな余白、動的ビデオ背景を含む没入感のあるビジュアルコンテンツを重視。主要原則はミニマリズム、自信、技術革新。重要な禁止事項：装飾的フォント、複数のアクセントカラー、雑然としたレイアウト、小さなテキスト、硬直した箱型、太いボーダーを避ける。このサイトは、野心的で高インパクトな協業を通じてデジタル体験の未来を形づくると位置づけている。
en · zh-CN · zh-TW · ja · ko