厳選・オープン・無料

Apartamento

クラシックなエディトリアルタイポグラフィと大胆なハイコントラストなグラフィックアクセントを融合させたライフスタイル雑誌サイト。

01

デザイン DNA

ウェブに適応された洗練された印刷雑誌に、大胆で印象的なポップ要素を加えたもの。

02

カラー

キャンバス全体を抑制の効いた暖色系ニュートラルが支配し、重要なインタラクティブ要素には、1つの高彩度イエローを効果的に配置。

03

タイポグラフィ

transitional-serif · humanist-sans

• display42px · 700
• h224px · 700
• body16px · 400

主要見出しには、印刷雑誌の威厳を想起させるハイコントラストなトランジショナルセリフ体を使用します。 · UI要素、ナビゲーション、本文には、クリーンで可読性の高いジオメトリック・ヒューマニスト・サンセリフ体を使用します。 · サンセリフテキストには幅広な文字間隔を適用し、モダンで空気感のある印象を高めます。

04

余白

エディトリアルレイアウトを支え、画像に十分な余白を与えるための、贅沢なパディングとホワイトスペース

05

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

最小限。入力フィールドとナビゲーションのアンダーラインに、細い黒いボーダーを使用。

06

レイアウト

クラシックな雑誌グリッド。全面に広がるヒーロー画像と、記事カード用の構造化されたカラムレイアウトが特徴。

07

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

フェードインモーダル · インタラクティブ要素のスムーズなトランジション

テキストリンク上の微細な色の変化またはアンダーライン · インタラクティブ要素に対する標準的なポインターカーソル

08

コンポーネント

• button 最小限のテキストベースボタン。薬剤形（ピル型）の角丸ボーダー付き。
• card 大きなエディトリアル写真、セリフ体タイトル、サンセリフ体のメタデータを備えたコンテンツカード。
• chip シンプルなテキストリンクまたはタグのような要素。
• input 鮮やかなイエローの背景に黒いボーダーを持つ、ハイコントラストな角丸ピル型入力フィールド。
• hero 中央に印象的なグラフィックモーダルオーバーレイを配置した、フルビューポートの写真ヒーローセクション。

09

文体と禁止事項

• トーン 洗練され、歓迎的で、文化的な雰囲気
• 見出し 直接的で大胆、かつ少し控えめ。インパクトはタイポグラフィに依存。
• CTA 明確で分かりやすく、エディトリアルフローに統合されている。

• 背景に無機質な白は使用しない — スクリーンショットでは暖色のオフホワイト（#F8F4EC）がベースとして示されています
• すべてのボタンを明るいイエローにしない — スクリーンショットではイエローがモーダルオーバーレイに厳密に限定されていることが示されています
• 主要見出しにサンセリフ体を使用しない — スクリーンショットでは「Latest stories」にハイコントラストなトランジショナルセリフ体が使われています
• 入力フィールドに強く角丸の四角形を使用しない — スクリーンショットでは極端なピル型の角丸が示されています
• レイアウトを凝ったUIパターンで散らかさない — スクリーンショットでは清潔で余裕のあるエディトリアルグリッドが示されています
• UIカードに複雑なドロップシャドウを追加しない — スクリーンショットでは完全にフラットで影のないコンポーネントが示されています
• 避ける: アグレッシブなマーケティング言語
• 避ける: 騒がしく、ぶつかり合うネオンパレット
• 避ける: 重いドロップシャドウ
• 避ける: 過度に遊び心のある、または丸みを帯びたUIコンポーネント

10

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

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

11

System Prompt

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