厳選・オープン・無料

Kaleidografik

インディペンデントなクリエイティブスタジオのための、最小限のコンテンツファーストのポートフォリオ。

01

デザイン DNA

大胆なクライアントワークが自身の言葉で語るための、空白のキャンバス

02

カラー

暖かいオフホワイト背景を持つ厳密なモノクロームキャンバス。色はクライアントワークに完全に依存。

03

タイポグラフィ

humanist-sans · monospace

• display120px · 400
• h132px · 400
• body16px · 400

すべてのタイポグラフィは、ウェイト400のSuisse Intl Regularを使用 · ナビゲーションリンクは16pxの本文サイズを使用し、アクティブステートにはアンダーラインを設定 · 巨大な背景透かし文字には非常に大きいディスプレイサイズを使用

04

余白

コンテナに20pxの水平パディングと75pxのボトムパディングを持つ、豊かなホワイトスペース。

05

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

コンテナに目立つ境界線なし。アクティブなナビゲーションアイテムには1pxの黒いアンダーライン。

プロジェクトカードに 0 4px 20px rgba(0,0,0,0.1)

06

レイアウト

異なるカードサイズのメーソンリーのようなグリッド、トップナビゲーションバー、そして大きな背景透かし文字。

07

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

ホバーステートでの透明度フェードトランジション · ナビゲーションの滑らかな透明度とtransformのトランジション · インタラクティブ要素の背景色トランジション

ナビゲーションリンクとプロジェクトカードの透明度を下げること · プロジェクト詳細ページにナビゲート

08

コンポーネント

• button アンダーラインステートを持つ最小限のテキストリンク。目立つボタンコンテナなし。
• card スクリーンショットとケーススタディ画像を含む、異なるアスペクト比のプロジェクトプレビューカード。
• chip プロジェクトのメタデータ用の1pxの黒いボーダーを持つ小さなピル型タグ。
• input 現在のビューでは不可視。
• hero 大きなフェードされた背景タイポグラフィの上に散りばめられたプロジェクトカード。

09

文体と禁止事項

• トーン 控えめでプロフェッショナル。仕事自体が語ることを許す。
• 見出し 最小限で直接的、プロジェクトカテゴリには大文字
• CTA 視覚的強調のないシンプルなテキストリンク

• 複数のフォントウェイトを使用しない — スクリーンショットではウェイト400が一様に使用されている
• 装飾的なUI要素を追加しない — スクリーンショットでは純粋にコンテンツ驱动のレイアウト
• カラフルな背景を使用しない — スクリーンショットでは一貫した #ECEAE5 オフホワイト
• 複雑なボタンスタイルを作成しない — スクリーンショットではアンダーライン付きのテキストのみのナビゲーション
• メインコンテナにドロップシャドウを追加しない — スクリーンショットではフラットでクリーンなカード表示
• ブランドカラーアクセントを使用しない — スクリーンショットでは完全にモノクロームのスキーム
• 避ける: クライアントワークと競合する装飾的な要素を避ける
• 避ける: 複雑なグラデーションやシャドウを避ける
• 避ける: 複数のフォントウェイトを避ける

10

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

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

11

System Prompt

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