厳選・オープン・無料

Petertarka

ミニマルな編集タイポグラフィで、詳細な3D環境を展示するハイエンドクリエイティブポートフォリオ。

01

デザイン DNA

クリーンでスイス風タイポグラフィレイアウトで提示される、カスタム3Dビジュアルワールドのキュレーションされたギャラリー。

02

カラー

中立的なオフホワイトキャンバスと鋭い黒のタイポグラフィの間の、高コントラスト。

03

タイポグラフィ

geometric-sans

• display38px · 300
• body16px · 400

すべてのテキストレイヤーにgeometric sansを使用 · 大きなディスプレイテキストにはライトウェイト（300） · 本文および小さな要素にはレギュラーウェイト（400） · 大きなディスプレイテキストにはタイトなline-height

04

余白

ゆったりとしたpadding（45px）が、Airyでギャラリーのような感覚を生み出します。

05

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

薄い1pxの線（rgba(0, 0, 0, 0.1)）を控えめに使用。場合によっては非対称（0px 1px 1px 0px）。

06

レイアウト

ソリッドカラーブロックと空いたスペースを交互に配置する、クリーンなグリッド。

07

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

hover時のカラーおよびopacityトランジション · 微細なUIフィードバックのための高速（0.125s）のopacityトランジション

微細なopacity変化とカラートランジション。 · 標準的なリンク動作。

08

コンポーネント

• button ミニマルなテキストリンク。目に見えるボタンコンテナはなし。
• card 目に見えるカードコンテナはなし。コンテンツは直接背景上に提示。
• hero フルブリードの背景色に、大きな3Dアイソメトリックイラストと控えめなタイポグラフィ。

09

文体と禁止事項

• トーン ミニマルで、自信に満ち、プロフェッショナル。
• 見出し 直接的で簡潔なクライアント名。
• CTA 控えめなテキストリンク。

• セリフフォントを使用しない — スクリーンショットは厳格なgeometric sans-serifシステムを示している。
• 角丸を使用しない — スクリーンショットは鋭い、0pxのborder-radius要素を示している。
• 複雑な影を使用しない — スクリーンショットは完全にフラットなサーフェス提示を示している。
• 密集したテキストブロックを使用しない — スクリーンショットは疎で、大きなフォーマットのタイポグラフィを示している。
• 高彩度のUIカラーを使用しない — スクリーンショットは孤立したカラーブロックを持つ中立的パレットを示している。
• 装飾的なボーダーを使用しない — スクリーンショットは最小限の、1pxの境界線のみを示している。
• 避ける: 過度な装飾
• 避ける: 騒がしいCTA
• 避ける: 複雑なレイアウト

10

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

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

11

System Prompt

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