厳選・オープン・無料

Mire Studio

大胆な色と巨大なタイポグラフィを通して作品を紹介する、鮮やかで表現力豊かなデザインスタジオのポートフォリオ。

01

デザイン DNA

大胆でカラフルなポートフォリオギャラリー。オーバーサイズで重なり合うタイポグラフィが特徴です。

02

カラー

高彩度のパレットが、大きな幾何学ブロックとオーバーラップするタイポグラフィに適用されています。

03

タイポグラフィ

geometric-sans

• display400px · 600
• body14px · 400

すべてのテキスト要素にPP Pangram Sans Roundedを使用します。 · ディスプレイロゴタイプは極端なスケールとオーバーラップする塗りを使用します。 · 本文は小さく丸みを帯び、カラーブロックに対して非常に視認性が高くなっています。

04

余白

角丸のカラーブロック内には十分なpadding。オーバーラップする要素間にはきつく詰められたspacing。

05

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

なし。形状はカラーブロックとオーバーラップするタイポグラフィで定義されます。

rgba(84, 84, 84, 0.23) 0px 0px 20px 0px

06

レイアウト

巨大なオーバーラップタイポグラフィを持つ、大きな角丸長方形ブロックのフルブリードグリッド。

07

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

グリッドブロックの連続的なずれたトランジション。 · 大きなタイポグラフィ要素のパララックス的なオーバーラップ。

インタラクティブ要素の上にカーソルがポインタに変わる。色やスケールの変化の可能性。 · プロジェクト詳細への即時ナビゲーション。

08

コンポーネント

• button 白い背景と暗いテキストを持つ、小さく丸みを帯びたピルボタン。
• card ソリッドカラーまたはプロジェクト画像で塗りつぶされた、大きく角丸のフルブリード長方形。
• chip プロジェクト画像に重なる、小さく丸みを帯びた白いラベル。
• hero 巨大なオーバーラップロゴタイプと説明テキストを持つ、ダイナミックで多色のグリッド。

09

文体と禁止事項

• トーン 自信に満ち、大胆で芸術的。
• 見出し 巨大、オーバーラップ、カラフル、表現力豊か。
• CTA ミニマル、丸み、控えめ。

• マットでコントラストの低いカラーパレットを使用しない — スクリーンショットは大胆で高飽和度のカラーブロックを示しています。
• 小さく硬直したタイポグラフィを使用しない — スクリーンショットは巨大でオーバーラップするロゴタイプ要素を示しています。
• コンテナに鋭い角を使用しない — スクリーンショットは大きく丸みを帯びた角（20-25px radius）を示しています。
• 複雑なドロップシャドウや3Dエフェクトを使用しない — スクリーンショットは最小限の柔らかい影を持つフラットなカラーブロックを示しています。
• 伝統的で厳密に整列されたグリッドシステムを使用しない — スクリーンショットは巨大なタイポグラフィを持った、オーバーラップするダイナミックなレイアウトを示しています。
• 一般的またはコーポレートなデザイン言語を使用しない — スクリーンショットは表現力豊かで芸術的なスタジオポートフォリオを示しています。
• 避ける: 繊細またはマットなパレット
• 避ける: 小さく繊細なタイポグラフィ
• 避ける: 硬直した、厳密に整列されたグリッド
• 避ける: 一般的なコーポレート言語

10

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

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

11

System Prompt

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