厳選・オープン・無料

Cereal

広大なホワイトスペースと、繊細で控えめなタイポグラフィによって定義される、ミニマルなエディトリアルサイト。

01

デザイン DNA

極めて抑制が効いた、エレガントなデジタルプレゼンスを持つハイエンドライフスタイル雑誌。

02

カラー

ネアブラックのテキストを用いた、暖かみのあるオフホワイト。明るいアクセントカラーはありません。

03

タイポグラフィ

geometric-sans

• display14px · 400
• body-sm12px · 400

ロゴは広い文字間隔を使用 · ナビゲーションは小文字で、大文字表記、文字間隔あり · 太いウェイトは見られない

04

余白

十分なホワイトスペースと、固定のトップナビゲーションバー。

05

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

ヘッダーと空のボディを分ける、1pxの水平線が1本。

06

レイアウト

左揃えのロゴと右揃えのミニマルなナビゲーションを備えた、フルワイドのヘッダー。

07

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

静止スクリーンショットでは、アニメーションやモーションは見られません。

ナビゲーションリンクの、微妙な不透明度の変化。 · 標準的なリンク動作。

08

コンポーネント

• input 検索機能はテキストで示されていますが、表示される入力フィールドはありません。
• hero ヘッダーの下にある、完全に空白で広大なオフホワイトエリア。

09

文体と禁止事項

• トーン 静かで、自信に満ち、控えめな。
• 見出し 文字間隔のある、大文字のサンセリフ。
• CTA 目立つボタンではなく、最小限のテキストリンク。

• 明るく彩度の高い色を使わない — スクリーンショットでは、暖かみのあるオフホワイトのパレットが示されています。
• 太いまたは重いフォントウェイトを使わない — スクリーンショットでは、ライトまたはレギュラーのウェイトのみが示されています。
• 密集した、複雑なレイアウトを作成しない — スクリーンショットでは、広大で空のホワイトスペースが示されています。
• 装飾的な影や角丸を使わない — スクリーンショットでは、シャープなエッジとフラットなサーフェスが示されています。
• 目立つCTAボタンを使わない — スクリーンショットでは、最小限のテキストリンクのみが示されています。
• ページをコンテンツで埋め尽くさない — スクリーンショットでは、ほぼ完全に空のボディエリアが示されています。
• 避ける: 明るい色
• 避ける: 重いタイポグラフィ
• 避ける: 視覚的な雑然
• 避ける: 情報の密集したレイアウト
• 避ける: 装飾的な要素

11

System Prompt

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