厳選・オープン・無料
Thefascination
ファッション、ライフスタイル、現代文化の交差点を探求する、キュレーションされたデジタル出版物。
EditorialCurationPhotographicCleanPremium
01
デザイン DNA
エディトリアルキュレーションモダン洗練された文化的
ライフスタイル、ファッション、文化にフォーカスしたハイエンドなデジタル雑誌。
02
カラー
#2EA3F2Accent
#1A202CInk
#797472Ink soft
#FAF8EFBG
#4C40E0Muted
rgba(0,0,0,0.1)Line
暖かみのあるオフホワイトの背景に、暗く読みやすいテキストを配し、強調のための鮮やかなブルーとパープルのアクセントを加えています。
03
タイポグラフィ
transitional-serif · humanist-sans
- display
96px · 700 - headline
30px · 700 - body
18px · 400 - caption
14px · 400
表示用や見出しにトランジション・セリフ字体を使用し、エディトリアルの権威を加える。 · 本文にヒューマニスト・サンス字体を使用し、高い可読性とモダンな印象を確保する。 · スクリプト字体（Qwitcher Grypenなど）は、装飾的な手書き風アクセントとして控えめに使用する。
04
余白
4px
8px
16px
24px
32px
48px
64px
96px
4pxグリッドに基づき、一貫性のあるリズミカルな構成で、整理されつつも息のできるレイアウトを生み出しています。
05
サーフェス (角丸 / 影 / 罫線)
sm · 2px
md · 6px
lg · 12px
pill · 999px
最小限でクリーンに使用し、主に1pxのラインで構造的な区切りを付けます。
none · 0 0 5px 0 rgba(128, 128, 128, 1)
06
レイアウト
1280container
12columns
24pxgutter
768 / 1024breakpoints
クリーンな中央コラム型レイアウトで、余白をたっぷりと確保し、明確なセクション見出しを配置しています。
07
モーションとインタラクション
220msmicro
400mssmall
800msmedium
cubic-bezier(0.4, 0, 0.2, 1)easing
モーダルやインタラクティブな要素に対して、透明度やトランスフォームの滑らかなトランジションを適用する。 · リンクやボタンに微細なホバーエフェクトをつける。
インタラクティブな要素に対して、微細な色の変化や透明度の変更を適用する。 · 微小なトランスフォームや透明度の変更によって、即座に視覚的なフィードバックを提供する。
08
コンポーネント
- button クリーンなタイポグラフィと最小限のスタイルを用いた、シンプルなテキストベースのボタン。
- card 明確なタイトルとメタデータを持つ画像重視のカードで、薄い区切り線で分けることが多い。
- chip カテゴリーラベルで、強調のためにカラフルな上ボーダーがつくることもある。
- input 1pxのボーダーを持つ、標準的でクリーンな入力フィールド。
- hero 大規模な画像重視のヒーローセクションで、プロモーション用のモーダルオーバーレイが重なることもある。
09
文体と禁止事項
- トーン キュレーションされ、洗練され、少し遊び心のある。
- 見出し 太字で断定的な表現で、権威をつけるためにセリフ字体をよく使う。
- CTA 直接的で明確に、強調のために大文字（アルファベット）を使う。
- ダークモードは使用しない — サイトは暖かみのある明るい背景（#FAF8EF）のみを使用する。
- 見出しにサンス字体は使用しない — サイトは主に表示テキストにトランジション・セリフ字体を使用する。
- アクセントとして鮮やかな緑色は使用しない — サイトは鮮やかなブルー（#2EA3F2）と落ち着いたパープル（#4C40E0）を使用する。
- 重いドロップシャドウは使用しない — サイトは最小限または微細なシャドウを用いたクリーンでフラットな表面を好む。
- 記事本文に複数カラムレイアウトは使用しない — サイトは単一の、中央揃えの、読みやすいコラムを維持する。
- カードに丸みのある角は使用しない — サイトはシャープまたはごくわずかに丸めた角（2-6px）を使用する。
- 避ける: 過度にアグレッシブな営業言葉遣いを避ける。
- 避ける: 雑然としたレイアウトや過度な視覚的ノイズを避ける。
- 避ける: フォントファミリーを2〜3種以上使わない。
- 避ける: 過度に明るい、またはネオンのようなカラーパレットを避ける。
- 避ける: 画像なしで密集した、途切れのないテキストブロックを作らない。
- 避ける: 複雑な多層シャドウやグラデーションを使わない。
10
パック内の実スクリーンショット
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏実ページから取得 · 実 computed styles
11
System Prompt
これはライフスタイル、ファッション、文化に焦点を当てたキュレーションされたエディトリアル・ウェブサイトで、洗練されたデジタル雑誌として位置づけられています。デザインDNAは、暖かみのあるオフホワイト背景（#FAF8EF）、暗く読みやすいテキスト（#1A202C）、鮮やかなブルー（#2EA3F2）とパープル（#4C40E0）のアクセントを中心に据えています。タイポグラフィは、太字の見出しにトランジション・セリフ字体を、非常に読みやすい本文にヒューマニスト・サンス字体を組み合わせています。重要な禁忌事項：ダークモードは絶対に使用せず、表示用見出しにサンス字体は使用せず、アクセントカラーとして鮮やかな緑色を導入しない。レイアウトはクリーンで、中央揃え、余白をたっぷりと確保し、画像重視のカードと最小限で機能的なUIコンポーネントを特徴としています。
en · zh-CN · zh-TW · ja · ko