厳選・オープン・無料

Readymag

表現力豊かでギャラリーのようなウェブサイトを作成するための、プレミアムなデザインツールプラットフォーム。

01

デザイン DNA

デジタルデザインツールのためのスイススタイルのギャラリー。

02

カラー

大胆で鮮やかなアクセントと豊かなホワイトスペースを持つハイコントラストベース。

03

タイポグラフィ

humanist-sans · system-sans

• display80px · 500
• headline30px · 400
• body16px · 400
• caption14px · 400

ディスプレイ見出しにはGeometric/Humanist sansを使用。 · UI要素にはシステムフォントを使用。 · 大きなディスプレイテキストには tightening letter-spacing を確保。

04

余白

4pxベースグリッド、コンパクトなUI要素にはtightで意図的なスペーシング。

05

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

1px solid rgba(40,40,40,0.24)

0 2px 8px rgba(0,0,0,0.05)

06

レイアウト

フレキシブルなガターとハイデンシティギャラリーレイアウトを持つ標準12カラムグリッド。

07

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

UI状態変化のための滑らかなopacityトランジション。 · インタラクティブな要素のための微妙なtransformアニメーション。 · モーダルやオーバーレイの表示のためのフェードイン/フェードアウト。

インタラクティブな要素のわずかな明るさやopacityの変化。 · 軽微なtransformや色の変化による即座の視覚的フィードバック。

08

コンポーネント

• button 大胆なオレンジ背景に白文字のピル型、またはダークボーダーのアウトライン。
• card tightなボーダーと最小限のpaddingで、ビジュアルコンテンツに焦点を当てた画像重視のもの。
• chip 目立った使用はせず、タグや小さなステータスラベルに使用。
• input ボトムボーダーまたは繊細な背景を持つクリーンなテキスト入力。
• hero 大胆なタイポグラフィーと、高密度の画像ギャラリーやboldなカラーブロックを組み合わせたもの。

09

文体と禁止事項

• トーン 自信に満ち、直接的で、クリエイティブに焦点を当てたもの。
• 見出し boldでミニマル、しばしば実験的またはオーバーサイズ。
• CTA 直接的でアクション指向、しばしばboldなプライマリカラーを使用。

• 装飾的やスクリプトフォントを使用しない — スクリーンショットはクリーンで機能的なsans-serifタイポグラフィーを示している。
• テキストに低コントラストカラーを使用しない — スクリーンショットはboldなアクセントを持つハイコントラストの白黒を示している。
• 複雑で雑然としたレイアウトを使用しない — スクリーンショットはクリアでグリッドベースのギャラリーレイアウトを示している。
• すべてのUIコンポーネントに丸みのある、泡立ったデザインを使用しない — スクリーンショットはシャープで意図的なボーダーと、ボタンのみのピルシェイプを示している。
• ミュートされたパステルカラーパレットを使用しない — スクリーンショットはオレンジやパープルのようなboldで鮮やかなカラーを示している。
• インタラクションの背後にビジュアルコンテンツを隠さない — スクリーンショットはプライマリコンテンツとして高密度の画像ギャラリーを示している。
• 避ける: 難解な技術用語
• 避ける: 過度にコーポレートで無機質なトーン
• 避ける: 低コントラストまたは読みにくいタイポグラフィー

10

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

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

11

System Prompt

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