厳選・オープン・無料

Maquilts

モダンテキスタイルデザインに特化した、鮮やかなアート重視のポートフォリオ

01

デザイン DNA

大胆でモダンなテキスタイル作品を紹介するアーティストのポートフォリオ

02

カラー

鮮やかなオレンジのアクセントを持つ、温かく飽和度の高いプライマリ背景

03

タイポグラフィ

humanist-sans · geometric-sans · monospace

• display68px · 700
• display36px · 400
• body23px · 400
• mono14px · 400

見出しにはテキスト変換を大文字に設定 · ディスプレイテキストおよびサブテキストには文字間隔を広めに設定 · 太字の見出しと通常の本文の間でウェイトのコントラストをつける

04

余白

大きなセクション余白 (上部96px、下部192px) を用いたゆったりとした垂直リズム

05

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

4px solid rgb(241, 90, 36)

rgba(0, 0, 0, 0.1) 1px 0px 10px 6px

06

レイアウト

左にテキスト、右に画像を配置した分割画面ヒーロー

07

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

インタラクティブ要素でのスムーズなカラー遷移 · ホバーステートでのスケルトランスフォーム

ボーダーとテキストのカラー変更 · ボタンのトランスフォームスケール (0.98)

08

コンポーネント

• button 点線ボーダーと塗りつぶしテキストを持つピル型
• card 画像を多用し、ボーダーラディウスは最小限
• chip スクリーンショットでは確認不可
• input スクリーンショットでは確認不可
• hero 左に大きなタイポグラフィ、右に特集画像を配置した分割画面

09

文体と禁止事項

• トーン プロフェッショナル、アーティスティック、そしてインフォーマティブ
• 見出し 太字、大文字、ハイコントラスト
• CTA フレンドリーで親しみやすい、カジュアルな点線ボーダー

• 細く繊細なタイポグラフィを使用しない — スクリーンショットでは見出しに太く重みのあるウェイトが使用されている
• 暗い、またはクールトーンのプライマリ背景を使用しない — スクリーンショットでは温かく明るい黄色が使用されている
• プライマリボタンに角張った鋭いコーナーを使用しない — スクリーンショットではピル型、点線のアウトラインが使用されている
• ミニマルでモノクロのカラーパレットを使用しない — スクリーンショットでは鮮やかなマルチカラーリングの幾何学的デザインが使用されている
• メインナビゲーションを複雑なインタラクションで隠さない — スクリーンショットではシンプルなハンバーガーアイコンが使用されている
• 狭く詰まったスペーシングを使用しない — スクリーンショットではゆったりとした余白と広いガターが使用されている
• 避ける: 純粋に装飾的なフォントの使用
• 避ける: テキスト過多によるビジュアルの圧迫
• 避ける: 冷たい、または厳格に企業的なトーンの使用

10

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

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

11

System Prompt

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