厳選・オープン・無料

Magdareyman

ブランディングとユーザーエクスペリエンスを結びつける、洗練されたデザインポートフォリオ。

01

デザイン DNA

洗練された、自信に満ちたミニマリズムで提示された、デザインワークのキュレーションされたギャラリー。

02

カラー

作品が語れるように、中立的なグレーと深いブラックを用いたモノクロのパレット。

03

タイポグラフィ

transitional-serif · humanist-sans · monospace

• display40px · 400
• body16px · 400
• caption8px · 400

プライマリのUIと本文にはシステムサンセリフフォントを使用します。 · 見出しと強調にはクリーンなトランジショナルセリフを使用します。 · 見出しテキストにはタイトな行間を維持します。

04

余白

リラックスしたエディトリアルな雰囲気を生む、たっぷりとした余白。

05

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

1.4px solid #282828

0 4px 20px rgba(0,0,0,0.1)

06

レイアウト

目立つヒーローエリアと散りばめられたプロジェクトショーケースを持つ、シンプルなグリッドレイアウト。

07

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

インタラクティブな要素の不透明度とトランスフォームのトランジション。

繊細な色の変化や不透明度のシフト。 · 最小限のフィードバックを伴う、即座のレスポンス。

08

コンポーネント

• button ソリッドな背景色を持つピル型、またはテキストのみの形态。
• card アプリUIスクリーンショットのクリーンなプレゼンテーション。
• chip 連絡先情報のための小さな、大文字のテキストラベル。
• input 全体的なサンセリフに合わせた、ミニマルなスタイリング。
• hero サブタイトル付きの、大きなタイポグラフィによるステートメント。

09

文体と禁止事項

• トーン 自信に満ち、ミニマルで、少し遊び心がありつつもプロフェッショナル。
• 見出し タイトな文字間隔を持つ、クリーンなセリフまたはサンセリフ。
• CTA テキストベースのリンク、またはシンプルなピル型ボタン。

• 明るく彩度の高い色は使用しない — スクリーンショットは厳格なモノクロのグレースケールパレットを示しています。
• 華やかなディスプレイフォントは使用しない — ディスプレイテキストにはクリーンで洗練されたトランジショナルセリフを使用しています。
• 密集したレイアウトは作成しない — スクリーンショットはたっぷりとした余白とリラックスしたオープンな構造を示しています。
• 複雑なシャドウやグラデーションは使用しない — スクリーンショットは最小限の繊細なシャドウを持つフラットな表面を示しています。
• 角にシャープな角を持つ角丸長方形は使用しない — スクリーンショットはピル型のボタンや高いボーダー半径を持つ要素を示しています。
• 太いフォントウェイトは使用しない — スクリーンショットは主に通常（400）ウェイトのタイポグラフィを示しています。
• 避ける: 過度に装飾的な要素
• 避ける: 密集した段落
• 避ける: 明るく彩度の高い色

10

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

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

11

System Prompt

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