Framer
虚空に浮かぶネオンギャラリー
Framerはほぼ完全な暗闇として機能します。コンテンツがギャラリーのオープニングのネオンサインのように浮かぶ黒いキャンバスです。見出しはGT Walsheim Mediumで設定され、行間隔は0.8～1.1と狭く、文字間隔は54pxで-0.04emとかなり大きく設定されています。これにより、ページ上にきちんと収まるのではなく、前に押し出されるような、凝縮された装飾的な書体になっています。単一のエレクトリックブルー（#0099ff）が、境界線、グロー、アイコン、アクティブ状態など、すべての機能的なアクセントを提供し、インターフェースの残りの部分は無彩色のままで、純粋な黒から奥行きを生み出すために微妙なグレーの遷移（#111、#171717、#242424）に依存しています。コンポーネントは装飾的というよりは考え抜かれたものになっています。8～25pxの丸みを帯びた半径、1pxの細い境界線、最小限のドロップシャドウ、そして空虚が透けて見える半透明の表面。
全幅セクションは黒いキャンバスを超えて広がり、コンテンツは最大幅が約1200pxに制限され、中央に配置されます。メインセクションには左揃えのヘッダーと単一のコールトゥアクション（CTA）ボタンがあり、右側は意図的に空白のままになっています。非対称で、中央揃えではありません。セクションは、テキストのみのレイアウト（大きなヘッダーとサブテキスト）と製品のスクリーンショットを交互に使用します。「Framerに付属」セクションでは、4列のグリッドでロゴウォールを使用します。コミュニティセクションでは、製品のスクリーンショットが、角が丸い中央揃えの全幅コンテナ内に配置されます。ナビゲーションは最小限で、左にロゴ、右にリンクが揃った細いトップバーがあり、コントロールは表示されません。セクションのリズム：セクション間に80pxの大きな垂直ギャップがあり、空に浮かぶ明確なコンテンツの島を作り出します。
製品のユーザーインターフェースのスクリーンショットが中心で、信号機のようなドットがあしらわれたクローム風のウィンドウに埋め込まれたアプリのスクリーンショットがメイン画像となっている。品質の証となるロゴは、広い間隔で黒い背景に白い文字で表示されている。写真、イラスト、抽象的なグラフィックは一切使用されていない。視覚的な言語は、生き生きとしたインターフェースとして表示される製品そのものだ。アイコンのスタイルは、ミニマルでアウトライン化されたモノクロームの白で、サイズは小さい。テキスト密度は、主にテキストで、時折、製品のスクリーンショットという形で大きな断片が挿入される。空間の視覚的なバランスは、明らかに画像よりもタイポグラフィを優先している。
パレット
ブランド
- Vivid Violet
#0066ff— メインアクションボタンは、インターフェース内で唯一、単色のボタン背景が表示される場所です。
中性
- Bone
#ffffff— 主要な見出し、本文は暗い背景に表示され、ボタンの背景のみが光源となっている。 - Void
#000000— ページキャンバス、ナビゲーションの背景、カードの表面、アイコンの塗りつぶしなど、すべてが無限に続く黒色で、不要なコンテンツをすべて吸収してしまう。 - Graphite
#111111— 立体的なカード表面は、空間よりも一段上の存在であり、大型の機能的なカードや、様々な用途に対応できる容器などを指す。 - Obsidian
#171717— ボタン、追加カード、UI要素の塗りつぶしなどのための中間サーフェス。インタラクティブな要素をキャンバスから分離します。 - Slate
#242424— マウスカーソルを重ねると、入力フィールドとインデントされたパネルは、テキスト形式に切り替わる前に最も明るいニュートラルカラーで表示されます。 - Ash
#333333— 非アクティブな背景画像や構造要素には、濃い塗りつぶしを施します。
タイポグラフィ
12～68ピクセル・8段階
- sans-serif — 交換： Inter · 概要 400 · sans-serif - 抽出されたデータには含まれているが、AIによって説明されていない。
- GT Walsheim — 交換： Inter Tight · 概要 500 · 見出しやタイトルに使用するフォントは、ブランドフォントです。行間は0.8～1.1、文字間隔は-0.04～-0.05em（44～68pxの範囲）と、非常にコンパクトにまとめられています。装飾的な要素ではなく、GT Walsheimの幾何学的な温かみと厳密なメトリクスが、自信に満ちた、コンパクトで、やや未来的な、このシステムの個性を際立たせています。同様の幾何学的な表現をお求めの場合は、Inter TightまたはSpace Grotesk Boldをご検討ください。
- Inter Variable — 交換： Inter · 概要 400 · メインテキスト、ナビゲーション、およびサブ見出しが主力要素です。Inter Variable軸を使用すると、重みをスムーズに補間できます。トラッキングはサイズが大きくなるにつれて狭くなり、-0.001emから18px、-0.027emから22pxまで調整されます。可変バージョンを使用すると、サイトのスムーズなマイクロアニメーションが可能です。代替：Inter（ Google ） – ほぼ同じフォールバック機能です。
音程と形式
| 目的 | 意味 |
|---|---|
| 密度 | 平均 |
| 基本的なステップ | 10px |
| ボタンの半径 | 9999px |
| カード半径 | 20px |
| 影 | いいえ - 影の代わりに境界線 |
| セクション間 | 80px |
| ページ幅 | 1200px |
AI がFramerスタイルであなたのウェブサイトを構築し、
- リンクから商品や投稿を追加してください - Instagram 、 TikTok 、 Facebook 。
- 古いサイトからコンテンツを移行するには、アドレスを指定するだけです。
- 最高のエンジンであるReact （ Next.js ）上で動作するモダンなデザイン。サーバーレンダリングとSEO最適化が標準搭載されています。
- 検索結果のSEO最適化とニューラルネットワークによるレコメンデーションを完全に自動化。
類似のスタイル
- Auros — 生物発光データボールを備えた深海端末
- Origin Financial — 静謐な豪華さを湛えた真夜中のギャラリー。静かで、ほとんど薄暗い部屋の中で、大きなセリフ体フォントと数枚の照明付きカラーパネルが、金融が丹念に作り上げられた芸術作品であるかのような感覚を生み出す。
- Raycast — ミッドナイト・コマンドセンター、コーラルネオン
- Dimension — 夕暮れ時の光に照らされた、曇りガラスのパネルを備えたワークステーション
- Reflect Notes — 星空のような紫色の空間は、暗い天文台であり、そこでは音符が星座のように、ほぼ黒に近い藍色の虚無を背景に浮かんでいる。
- Ameba — 真夜中の管制室――曇りガラスのパネルの中に、鮮やかな青い光が脈打つ。
- Branding — 黒いギャラリーの壁、血のような赤のアクセント - 大きな白いフォントが、虚無を思わせる暗いキャンバスの上に浮かび、そこに鮮やかな赤のアクセントと、ウェブインターフェースというよりギャラリーの看板のような印象的な装飾要素が一つだけ配置されている。
- Harness — 真夜中の管制室、燐光を放つ緑色のアクセント
- Koto — 真夜中のオブシディアン・ギャラリー。ほぼ真っ暗な舞台には、たった一本の黄色いマーカーだけが温かい光を放ち、広大な空間に凝縮された文字がまるで展覧会のポスターのように浮かんでいる。
- Ohzi — 暗いギャラリーに吊るされた光る立方体
- Depot — 暗いサーバー端末。ほぼ黒色の開発者コンソールには、作業開始を示す緑色のLEDが1つ点灯し、その他のユーザーインターフェースはグラファイト色で表示されている。
- Maciej Zadykowicz — 万華鏡のような壁画が特徴的なミッドナイト・ギャラリーは、ほぼ黒一色のスタジオの壁の中に、鮮やかで色彩豊かなタイポグラフィ作品がひときわ目を引く一方で、他の作品はすべて静かで落ち着いた雰囲気を醸し出している。