厳選・オープン・無料

Anacuna

オーバーサイズのテキストとピルシェイプのナビゲーションでイラスト作品を紹介する、高コントラストでタイポグラフィー主導のポートフォリオ。

01

デザイン DNA

巨大なタイポグラフィーを主要デザイン要素とするミニマリストな雑誌レイアウト。

02

カラー

黒と白のみを使用する厳格なモノクロームパレットに、ロゴ用の単一のピンクアクセント。

03

タイポグラフィ

grotesque-sans

• display94px · 400
• body15px · 400

すべてのテキストは大文字 · メインのディスプレイテキストは単一の均一な巨大サイズに設定 · ディスプレイテキストの行間はタイトにし、密なテキストブロックを形成

04

余白

厳格な4pxグリッドに基づき、ヒーローセクションにはたっぷりの垂直パディングを、テキストブロックにはタイトなマージンを設けています。

05

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

1px solid black

06

レイアウト

水平線で区切られたフルワイドセクションで、巨大なテキストが主要な構造要素となる。

07

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

0.3秒のホバートランスフォーム · 0.7秒のページ遷移トランスフォーム

インタラクティブ要素上の繊細なカーソルポインターチェンジ。 · トランスフォームによる即座のビジュアルフィードバック。

08

コンポーネント

• button 大文字テキストを使用したピルシェイプのアウトラインボタン。
• card 1pxの水平線で区切られたフルワイド行に、巨大なプロジェクトタイトルを含む。
• chip 1pxボーダーと角丸を持つ小さなピルシェイプタグ（例：'Google Play', 'Adobe'）。
• hero ビューポート幅にまたがる巨大な大文字テキストで、たまに小さなピルタグが近くに浮遊している。

09

文体と禁止事項

• トーン ミニマリストで、プロフェッショナル、そして自信に満ちている。
• 見出し 巨大、全大文字、タイトなトッキングのグロテスクサンセリフ。
• CTA 大文字テキストを使用したアウトラインピルボタン。

• セリフフォントを使用しない — スクリーンショットには exclusively 大文字のグロテスクサンセリフタイポグラフィーが表示される。
• ドロップシャドウを使用しない — スクリーンショットには1pxボーダーのみのフラットデザインが表示される。
• グラデーションを使用しない — スクリーンショットにはソリッドな黒と白の背景が表示される。
• メインレイアウトで小文字テキストを使用しない — スクリーンショットにはすべてのテキストが大文字である。
• カラムを持つ複雑なレイアウトを使用しない — スクリーンショットにはシングルカラムのフルワイド行が表示される。
• 見出しに小さなテキストを使用しない — スクリーンショットにはプロジェクトタイトルがビューポート全体の幅にまたがっている。
• 避ける: 装飾的なフォント
• 避ける: ドロップシャドウ
• 避ける: グラデーション
• 避ける: 複雑なカラーパレット
• 避ける: 角丸（ピルシェイプを除く）
• 避ける: イタリック体テキスト

10

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

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

11

System Prompt

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