厳選・オープン・無料
Use All Five
広がりのあるグラデーションと大胆なタイポグラフィを用いた、プレミアムなデジタルデザイン・テクノロジースタジオのサイト。
studiodigital
01
デザイン DNA
デジタルエージェンシーデザインスタジオテクノロジークリエイティブイノベーション
大胆なタイポグラフィと透明感のあるグラデーションを融合したハイエンドデザインスタジオのポートフォリオ
02
カラー
#000000Ink
#FFFFFFBG
#969696Muted
rgba(0,0,0,1.0)Line
白地、または穏やかなパステルグラデーションの上に置かれた、ハイコントラストの黒テキスト。
03
タイポグラフィ
geometric-sans
- display
67px · 500 - h1
40px · 400 - body
18px · 400
大きなディスプレイ用の文字には、 tightな负の字送りを使用する。 · 本文テキストは、豊かなline-heightを保ち、高い読みやすさを維持する。
04
余白
4px
8px
16px
24px
32px
48px
64px
96px
大きなタイポグラフィや画像を強調するための、豊かな余白とpadding。
05
サーフェス (角丸 / 影 / 罫線)
sm · 0px
md · 0px
lg · 0px
pill · 999px
最小限、またはなし。カラーコントラストとspacingに依存。
06
レイアウト
1280container
12columns
24pxgutter
768 / 1024breakpoints
片側に巨大なタイポグラフィ、もう片側にコンテンツ/画像を配置した、非対称な分割カラムレイアウト。
07
モーションとインタラクション
220msmicro
400mssmall
800msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing
scrollによるテキストと画像のフェードイン。 · リンクのhover状態における滑らかなトランジション。
繊細な透明度の変化、またはシンプルな下線/矢印アニメーション。 · 即座に状態が変化。
08
コンポーネント
- button 矢印付きのシンプルなテキストベースリンク。実体のある背景は使用しない。
- card タイトルと説明の間に大きなギャップを設けた、画像中心のケーススタディブロック。
- hero 穏やかなマルチストップパステルグラデーションの背景に、タイポグラフィに焦点を当てた全画面ヒーロー。
09
文体と禁止事項
- トーン 自信に満ち、プロフェッショナルで、先見の明がある。
- 見出し 可能性と創造についての、太字で宣言的な文章。
- CTA 矢印付きのシンプルなテキストリンク（例: 「View Our Work →」）。
- セクションに実体のある背景色を使用しない — スクリーンショットでは広がりのあるパステルグラデーションを示している。
- 太字でコンデンスされたフォントを使用しない — スクリーンショットではRegular/Mediumウェイトのジオメトリックサンセリフを示している。
- 小さく詰め込んだグリッドを使用しない — スクリーンショットでは広がりがあり、豊かな余白を持つオープンなレイアウトを示している。
- プライマリカラーのボタンを使用しない — スクリーンショットでは矢印付きのシンプルなテキストリンクを示している。
- 要素にドロップシャドウを使用しない — スクリーンショットではフラットなサーフェスで、最小限の境界線かなしを示している。
- 複雑なマルチカラムテキストレイアウトを使用しない — スクリーンショットでは単一の明確なカラム、または分割レイアウトを示している。
- 避ける: 専門用語や技術的なバズワードの使用を避ける。
- 避ける: 雑然としたレイアウトや忙しない背景を避ける。
- 避ける: 小さく読みにくいテキストを避ける。
- 避ける: 注目を競い合う複数のアクセントカラーを避ける。
- 避ける: 重い影や3D効果を避ける。
- 避ける: 実体のあるボタンなどの標準的な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 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏実ページから取得 · 実 computed styles
11
System Prompt
プレミアムなデジタルデザイン・テクノロジースタジオのポートフォリオ。主な特徴は、広がりのあるマルチストップパステルグラデーション（穏やかなピーチ、シアン、ラベンダー）と大胆な黒のジオメトリックサンセリフのタイポグラフィ。レイアウトは非常に非対称で、余白が豊富。実体のあるカラーボタンやドロップシャドウは使用せず、CTAはシンプルなテキストリンク。重要な禁止事項: 実体のある背景セクションを使用しない、太字のウェイトを使用しない、標準的なUIボタンを使用しない。
en · zh-CN · zh-TW · ja · ko