厳選・オープン・無料

Driesbos

クリエイティブデベロッパーのための、テキスト主導のミニマルポートフォリオ。

01

デザイン DNA

明るいスタジオに整然と置かれた道具箱のような存在です。

02

カラー

暖色系の紙のような背景を備えたハイコントラストモノクロームで、タイポグラフィに完全にフォーカスします。

03

タイポグラフィ

grotesque-sans

• body20px · 400

アイデンティティにはカスタムサンセリフを使用 · 厳格にウェイト400を維持 · 一貫したブロックのリズムのために25pxのパディングを使用

04

余白

固定の25px内部パディングを持つグリッドベースで、一貫したビジュアルリズムを生み出します。

05

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

ブロックとテーブルを定義する1pxの黒い実線ボーダーを採用し、ヒーローセクションにはユニークな3Dワイヤーフレーム効果を施しています。

06

レイアウト

プロジェクト用のテーブルライクリストを持つ、シングルカラム・ブロックベースのレイアウトです。

07

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

水平マーキーティッカー · テキストと背景に対するスムーズな330msトランジション · 複雑なトランスフォームに対する700ms cubic-bezierイージング

精妙な330msのカラーおよび背景トランジションです。 · 視覚フィードバックは最小限で、主にトランジションの期間に依存します。

08

コンポーネント

• button カスタム矢印アイコン付きの、ミニマルなテキストのみリンクです。
• card 3Dワイヤーフレームで輪郭を描かれたヒーローコンテナが、主たる視覚的焦点となります。
• input 現在のビューでは使用されません。
• hero サイト名とイントロテキストを含む、透視図法で描かれたワイヤーフレームボックスです。

09

文体と禁止事項

• トーン 直接的で、専門的かつ簡潔です。
• 見出し ダッシュで区切られた、短く力強いフレーズです。
• CTA 矢印アイコンと繰り返されるマーキーティッカーを通じて暗示的に表現します。

• 角丸を使用しない — スクリーンショットでは、すべてのコンテナとカードに0pxのシャープな半径が示されています。
• 重いシャドウを使用しない — スクリーンショットでは、定義のためにフラットな1pxの実線ボーダーのみが使用されています。
• 装飾的なイメージを使用しない — スクリーンショットでは、厳密にテキストベースのワイヤーフレーム美学が示されています。
• 太字のウェイトを使用しない — スクリーンショットでは、全体を通じて一様な400のフォントウェイトが示されています。
• 鮮やかなアクセントカラーを使用しない — スクリーンショットでは、黒と暖色系のオフホワイトのみを使用した厳格なモノクロームです。
• 複雑なマルチカラムグリッドを使用しない — スクリーンショットでは、厳格なシングルカラム、ブロックベースの垂直フローが示されています。
• 避ける: 重いドロップシャドウや柔らかいブラーを避ける
• 避ける: プライマリコンテナに角丸を避ける
• 避ける: メインコンテンツにマルチカラムレイアウトを避ける

10

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

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

11

System Prompt

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