厳選・オープン・無料

Schema Figma

Schema by Figmaのための、鮮やかな幾何学的アクセントとクリーンなタイポグラフィ階層を持つ、モダンで大胆なイベントランディングページ。

01

デザイン DNA

プレミアムなエディトリアル美学と、遊び心のある鮮やかなデザインアクセントを融合させた、話題のテックカンファレンスのランディングページ。

02

カラー

starkでハイコントラストのダークモード基盤。鮮やかな幾何学シェイプとカラフルなポートレート背景が、互いに注意を競い合うことなく際立つことを可能にします。

03

タイポグラフィ

grotesque-sans · humanist-sans · monospace

• display56px · 400
• heading32px · 700
• subhead24px · 400
• body18px · 400
• caption16px · 400
• label13px · 400

小規模なカテゴリーラベルには大文字の文字間隔を使用し、明確な階層を生み出します。 · 大きなディスプレイテキストには緊密な負の文字間隔を維持し、高インパクトな存在感を確保します。 · ダーク背景上のクリーンな可読性のため、レギュラーおよびミディアムウェイトを優先します。

04

余白

レイアウトは、主要セクション（例：120px垂直）での余裕のあるパディングと、一貫した24pxのガターシステムを組み合わせ、広々とした、息のできる構造を創出します。

05

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

プライマリアクションボタンと区切りには薄い1pxのボーダーが使用され、often rgba(255, 255, 255, 0.16)が微細な区切りのために利用されます。

rgb(128, 128, 128) 0px 0px 5px 0px

06

レイアウト

ページは、デスクトップ用の大きな中央配置コンテナを使用し、モバイルファーストのレイアウトにシフトする際には水平パディングが大幅に削減されます。

07

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

インタラクティブ要素に対する、0.2秒の標準的なbackground-color、border-color、colorトランジション。 · ホバリングまたはフォーカス状態に使用する、0.3秒のease-in-outを用いたTransformベースのアニメーション。

background-color、border-color、またはcolorに対する0.2秒の微細なトランジションにより、即座の視覚的フィードバックを提供します。 · ポインターカーソルを持つ要素は、標準的な0.2秒から0.3秒のイージングトランジションをトリガーします。

08

コンポーネント

• button 白いボーダーと角丸を持つ、大きく透明なゴーストボタン。
• card グレースケールのポートレート写真を、ソリッドで鮮やかで彩度の高いカラーブロック上にオーバーレイした、グリッドベースのスピーカーカード。
• chip 視認できるものなし。
• input 視認できるものなし。
• hero 巨大なタイポグラフィ、最小限のイベント詳細、および顕著な幾何学イラストストリップを特徴とする、支配的なダークセクション。

09

文体と禁止事項

• トーン プロフェッショナルで権威がありながらも、親しみやすく創造的。
• 見出し 即座の注目を集める、大きく、太字でインパクトのあるサンセリフテキスト。
• CTA UIにシームレスに溶け込む、ミニマルで透明なゴーストボタン。大きく明確なタイポグラフィを持つ。

• ホワイトバックグラウンドを使用しない — スクリーンショットは、メインレイアウトが主に黒（#000000）の背景であることを示しています。
• 複雑または有機的なシェイプを使用しない — スクリーンショットは、円、正六角形、六角形のような厳密な幾何学的プリミティブを示しています。
• 密集した段落テキストを使用しない — スクリーンショットは、明確で短く、非常に可読性の高いタイポグラフィブロックを示しています。
• ポートレート写真にソリッドホワイトバックグラウンドを適用しない — スクリーンショットは、鮮やかなソリッドカラーブロック上に重ねられたグレースケール写真を示しています。
• 重いシャドウシステムを使用しない — スクリーンショットは、最大で1つの微細なグレーシャドウのみの、非常にミニマルでほぼフラットなレイヤリングを示しています。
• 遊び心のある丸みのあるまたはポップなタイポグラフィを使用しない — スクリーンショットは、厳格でクリーンなgrotesque-sansおよびhumanist-sansフォントカテゴリーを示しています。
• 避ける: 過度に企業的または無機質な言葉遣いを避ける。
• 避ける: 高度に装飾的または目を散らすセリフフォントの使用を避ける。
• 避ける: 過度の補助要素や密集したテキストブロックでインターフェースを雑然とさせるのを避ける。

10

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

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

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