厳選・オープン・無料
IDEO
大胆かつ抑制された自信で、ヒューマン・センターの未来を紹介するプレミアムデザインコンサルタント。
studioproduct
01
デザイン DNA
デザインイノベーションヒューマン・センタークリエイティブ・スタジオ戦略的
実験的でありながら厳密に構造化された、ハイエンドなクリエイティブエージェンシーのポートフォリオ。
02
カラー
#D9FF00Accent
#333333Ink
#FFFFFFInk soft
#151F27BG
#F7FAFCBG soft
#2B2E35BG quiet
#7B92A5Muted
rgba(123,146,165,0.2)Line
最大のインパクトを出すため、鮮やかなシャトルーズをアクセントに用いた、ハイコントラートのダークモード。
03
タイポグラフィ
didone-serif · humanist-sans
- display
56px · 400 - heading
40px · 400 - body
18px · 400
プライマリのディスプレイテキストには、洗練された印象を与える鋭くエレガントなディドン・セリフを使用する。 · すべての補助的なUIテキストおよび本文には、クリーンなヒューマン・サンセリフと組み合わせる。 · 意図的で密度のある見た目のために、大きなディスプレイテキストにはタイトなネガティブトラッキングを維持する。
04
余白
4px
8px
16px
24px
32px
48px
64px
96px
8pxのベースグリッドを採用し、息の間を作るために24pxと32pxのゆったりとしたパディングを適用。
05
サーフェス (角丸 / 影 / 罫線)
sm · 4px
md · 8px
lg · 12px
pill · 999px
構造的な区切りに主に使用する、1pxの実線ボーダーを最小限に抑える。
控えめなボーダーエフェクトとしての、0px 1px 0px 0px rgb(21, 31, 39)
06
レイアウト
1280container
12columns
24pxgutter
768 / 1024breakpoints
広くフルブリードの写真ヒーローに続き、1200pxの中央揃えコンテナにコンテンツを配置。
07
モーションとインタラクション
220msmicro
400mssmall
800msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing
ボタンやホバーなどのインタラクティブ要素には、滑らかな0.3秒のトランジションを適用。 · スクロールやインタラクション時に、位置の微妙な変化をTransformベースのアニメーションで表現。
インタラクティブ要素上的、控えめな背景色の変化やテキスト色の変化。 · 0.1秒のbackground-colorトランジションによる、即座の視覚フィードバック。
08
コンポーネント
- button 黒いテキストを持つ、高コントラートなシャトルーズのCTA。セカンダリボタンは、控えめなボーダーを持つダークカラー。
- 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 步进，作为视觉证据）
移动首屏実ページから取得 · 実 computed styles
11
System Prompt
これは、単一の鮮やかなシャトルーズアクセント（#D9FF00）を備えた洗練されたダークモード美学が特徴の、プレミアムデザインスタジオウェブサイトです。レイアウトでは、見出しに鋭いディドン・セリフ、本文にクリーンなヒューマン・サンセリフが使用され、深いネイビーブルーの背景（#151F27）に設定されています。主要な要素には、フルブリードの写真、ジオメトリックなワイヤーフレームオーバーレイ、ビジョナリーでヒューマン・センターなアプローチを強調する豊かな余白が含まれます。重要なデザイン制約：複数のアクセントカラーを導入しないこと；厳格な2フォントの階層を維持すること；不必要なUI要素や太いボーダーで雑然とさせずに、大規模で空気感のあるレイアウトを保つこと。全体的な印象は、プレミアムで、構造化されており、意図的に実験的です。
en · zh-CN · zh-TW · ja · ko