厳選・オープン・無料

Joshuakaplan

クリーンなグリッドベースのレイアウトを通じて情報階層を優先する、高度に構造化され、タイポグラフィ主導のデザイナー・ポートフォリオ。

01

デザイン DNA

構造化されたインデックスや台帳のように機能する、緻密に整理されたデザイン・ポートフォリオ。

02

カラー

黒と白による鮮明で高コントラストのパレット。ステータス表示用に、鮮やかなライムグリーンのアクセントを1色のみ使用。

03

タイポグラフィ

sans-serif

• display16px · 500
• body12px · 500

すべてのテキストにミディアムウェイト（500）のサンセリフフォントを使用。 · 行間は非常に詰まっており、多くの場合1.0〜1.2程度。 · フォントサイズは一貫して小さく、主なサイズは16pxと12px。

04

余白

グリッドセル内には tight で一貫した8pxのpaddingを使用し、主要セクションは水平線で区切る。

05

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

1px solid rgba(0,0,0,0.75) の水平線を多用し、行とセクションを分離。

06

レイアウト

1カラムの垂直に積み重ねられた行。各行は幅の異なる4つのカラムに分割。

07

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

すべてのインタラクティブ要素にtransitionを適用。

テキストリンクがhoverで青に色を変える。 · クリック可能な要素に標準のポインターカーソル。

08

コンポーネント

• button ビジュアルなボタンスタイルのないテキストリンク。ナビゲーションとして機能。
• card 行がデータカードとして機能し、コンテンツは整列されたカラムに編成される。
• chip 「✓ Acquired」などのピル状ステータス表示。背景に鮮やかなライムグリーンを使用。
• hero デザイナーを紹介し、ナビゲーションリンクを提供するテキストのみのヘッダー。

09

文体と禁止事項

• トーン プロフェッショナルで、簡潔かつ体系的。
• 見出し 直接的かつ情報的。役職と所在地を明記。
• CTA 飾り気のないシンプルなテキストリンクをナビゲーションに使用。

• コンテナに角丸を使用しない — スクリーンショットでは、すべての行とセクションにシャープな90度の角が見られる。
• ドロップシャドウや立体効果を使用しない — スクリーンショットでは、シャドウのない完全にフラットなデザインが見られる。
• 複数のアクセントカラーを使用しない — スクリーンショットでは、ステータス・ピル用のライムグリーン1色のみのモノクローム・パレットが見られる。
• 大きく、多様なタイポグラフィを使用しない — スクリーンショットでは、サイズ変化が最小限の非常にtightなタイポグラフィ・スケールが見られる。
• 太いボーダーやボックスを使用しない — スクリーンショットでは、分離用の細い1ピクセルの水平線のみが見られる。
• 装飾的な画像や背景パターンを使用しない — スクリーンショットでは、ロゴ以外の画像のない plain white 背景が見られる。
• 避ける: 装飾的な言葉
• 避ける: マーケティング用語
• 避ける: 過度な形容詞

10

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

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

11

System Prompt

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