厳選・オープン・無料

Sirup Online

5周年を祝う、太字のタイポグラフィとドラマチックな写真による、プレミアムでエディトリアルスタイルのアーティストショーケース。

01

デザイン DNA

音楽アーティストのマイルストーンを扱うハイファッション誌の表紙。

02

カラー

複雑な写真やグラデーション背景の上に単色のテキストを配置し、コントラストとスケールで階層を構築します。

03

タイポグラフィ

transitional-serif · humanist-sans

• display120px · 700
• body16px · 400

ディスプレイフォントは、巨大なスケールで使用されるハイコントラストなトランジショナルセリフ体です。 · 本文フォントは中立的なヒューマニストサンセリフ体です。 · 垂直テキストは可読性のためにサンセリフ体を使用します。 · ディスプレイテキストのカーニングは Tight です。

04

余白

非対称で、レイアウト主導のスペーシングは重なり合う要素によって定義されます。

05

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

最小限で、重なり合う写真レイヤーに依存します。

06

レイアウト

フルブリードの写真ヒーローに、層状のタイポグラフィと絶対位置指定を組み合わせたものです。

07

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

スクロールベースの表示にはlinear遷移を使用。 · インタラクティブな要素にはcubic-bezierイージングを使用。

インタラクティブな要素でカーソルがポインタに変わります。 · 標準的なナビゲーションリンクです。

08

コンポーネント

• button 明確なボタンコンポーネントは見られず、インタラクションはリンクまたはアイコンで行われます。
• card 背景のない、アーティストのポートレートを特徴とする、重なり合う画像カードです。
• chip チップは見られません。
• input 入力フィールドは見られません。
• hero 中央にポートレートがあり、テキストが重なり合う、巨大なタイポグラフィの周年記念ヒーローです。

09

文体と禁止事項

• トーン 自信に満ち、洗練され、お祝いムードのあるトーン。
• 見出し 太字で表現豊か、ドラマチックにスケールされたもの。
• CTA 控えめで、テキストリンクやミニマルなアイコンとして統合されるもの。

• 小さくtightなディスプレイテキストを使用しない — スクリーンショットでは巨大で重なり合うタイポグラフィが示されている。
• フラットで単色の背景を使用しない — スクリーンショットでは複雑な写真やグラデーションの背景が示されている。
• 標準的なグリッドベースのカードレイアウトを使用しない — スクリーンショットでは重なり合う非対称な写真の配置が示されている。
• 控えめなカラーパレットを使用しない — スクリーンショットでは鮮やかな画像の上にハイコントラストのテキストが示されている。
• 標準的で中央揃えのUIコンポーネントを使用しない — スクリーンショットでは絶対位置指定と垂直テキストが使用されている。
• フレンドリーで丸みのある美学を使用しない — スクリーンショットではシャープでプレミアムなエディトリアルスタイルが示されている。
• 避ける: 一般的な、あるいはplayfulすぎるサンセリフ見出しは避ける。
• 避ける: 中心的なイメージを隠す、ごちゃごちゃしたレイアウトは避ける。
• 避ける: 標準的なボタンコンポーネントは避ける。

10

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

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

11

System Prompt

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