
Slush
パステルカラーの紙に貼られた、膨らませるステッカーの世界
Slushはまるでステッカーアルバムのようです。パステルカラーの紙のキャンバスに、鮮やかな青の大きなリボンがふんだんに使われ、色とりどりのステッカーが紙吹雪のように散りばめられています。フォントは大きく、文字が凝縮されているため(横幅800×200~640ピクセル、行間0.75~0.80)、単語は文章というより彫刻作品のように見えます。6色の鮮やかなシグネチャーカラーがステッカーパレットとして機能し、それぞれの色が塗りつぶされたステッカー、カードの表面、または装飾レイヤーとして使用され、控えめなアクセントとして使われることはありません。コンポーネントは丸みを帯びており(カードでは20~40ピクセル、ナビゲーションではピル型)、手作り感を出すために黒で縁取られています。その結果、フィンテックのランディングページというよりは、明るい色の壁にピンで留められた物理的なコラージュのような仕上がりになっています。
レイアウトは、サイドバーや固定コンテナのない、全幅スクロールページを特徴としています。スクロールテキストとミニマルなトップナビゲーション(左にロゴ、中央にナビゲーションバー、右に塗りつぶされたコールトゥアクション)は上部に残ります。各セクションは、全幅のカラーストリップ(#dceeff → #ffffff → #cccccc)で、拡大されたサイドテキストが中央揃えまたは左揃えで配置され、3Dの青いリボンで囲まれています。コンテンツのレイアウトは、グリッドベースではなく、意図的にゆるやかでコラージュのようなデザインになっています。ステッカーがテキストに重なり、リボンがテキストの後ろで交差し、QRカードがセカンダリセクションの中央からずれた位置に配置されています。垂直方向のリズムはかなり広く(セクション間の間隔は48px)、水平方向の構成は意図的に非対称になっています。ページは上から下まで、それぞれが独立したポスターである3つの大きなカラーストライプとして読み取れます。
ビジュアル言語の中心は、3次元の青いリボンです。これは、各セクションの見出しテキストを包み込んだり覆い隠したりする、ざらざらとした質感の膨らんだチューブ状のエレクトリックブルーの図形で構成された、統一されたブランドモチーフです。装飾的な2次元のステッカー(ロケット、金貨、緑のチェックマーク、紫の財布)は、ボードにピンで留められた紙の切り抜きのように見出しの周りに浮かび、それぞれに黒い輪郭線(1ピクセル)が付いています。写真は一切使用されていません。従来のイラストグリッドも存在せず、すべてがコラージュされ、非対称に配置されています。3次元のリボンがメインの雰囲気を作り出し、ステッカーが遊び心のあるタッチを加え、残りは文字と色で構成されています。
パレット
ブランド
- Electric Blue
#4da2ff— ブランドの基調色である太いリボンの彫刻、画像の背景、カード上のぼかし模様などは、各画面の基盤となる視覚的な特徴となっている。
中性
- Carbon
#000000— メインテキスト、カードフレーム、行動喚起のための背景、そしてロゴは、パステル調の表面に手切りしたステッカーの輪郭のような効果を生み出している。 - Paper White
#ffffff— キャンバスページ、厚紙の表面、ボタンの輪郭線で塗りつぶし、暗い背景にテキスト。 - Sky Wash
#dceeff— メインセクションの背景、淡い青色のパステル調の背景。 - Concrete Gray
#cccccc— 二次セクションの背景、中立的な中間面 - Soft Mist
#e9e9e9— 微妙なボタンと表面の色調、無効状態 - Mint Pop
#55db9c— 背景、装飾的なストライプ、そしてコンテンツの背後にある柔らかなアクセントを強調するために、緑色で塗りつぶします。
タイポグラフィ
12~640ピクセル・7段階
- Lateral — 交換: Druk · 概要 800 · 見出し部分、つまり「SLUSH」のロゴや「ALL THINGS SUI」といったセクションバナーのみが、200~640ピクセルのフォントサイズで、行間を0.75~0.80に縮小して表示され、文字が立体的なブロック状に見えるようになっています。これは従来とは異なる表示方法で、800ポイントのフォントサイズで行間を0.85未満に設定したウェブサイトは他にありません。この効果により、テキストはまるで立体的なリボンで包まれた物体のように見えます。
- Aeonik Pro — 交換: Inter · 概要 500, 700 · 本文、ナビゲーション、ボタン、小見出しを含むユーザーインターフェース全体。本文とメタデータにはウェイト500(12~16px)、小見出しとナビゲーションラベルにはウェイト700(24~30px)、大きな二次見出しには700を64pxずつ増分します。文字間隔を狭く(-0.010em)すると本文(14~16px)が狭くなります。ナビゲーションラベル/ボタンをわずかに広げる(0.030~0.032em)ことで、コントロールに「余白」が生まれます。
音程と形式
| 目的 | 意味 |
|---|---|
| 密度 | 密集 |
| 基本的なステップ | 4-12px |
| ボタンの半径 | 1600px |
| カード半径 | 20px |
| 影 | いいえ - 影の代わりに境界線 |
| セクション間 | 48px |
| ページ幅 | 1440px |
AI がSlushスタイルであなたのウェブサイトを構築し、
- リンクから商品や投稿を追加してください - Instagram 、 TikTok 、 Facebook 。
- 古いサイトからコンテンツを移行するには、アドレスを指定するだけです。
- 最高のエンジンであるReact ( Next.js )上で動作するモダンなデザイン。サーバーレンダリングとSEO最適化が標準搭載されています。
- 検索結果のSEO最適化とニューラルネットワークによるレコメンデーションを完全に自動化。
類似のスタイル
- Cursor — くすぶる炭火に照らされた、居心地の良い羊皮紙工房
- MindMarket — クリーム色の紙に印刷された、居心地の良いおとぎ話の本。大きなInterの見出しと切り抜かれた紙のキャラクターが、太陽の光を浴びたような、ステッカーのように柔らかい表面に共存する、親しみやすい編集上のキャンバス。
- Shop — 白い大理石の上に浮かぶ交易の星座
- Airbnb — 静かな白いギャラリーの壁に、サンゴ色のしおりが1枚だけ飾られている。
- Superr — 午後の柔らかな光に照らされた、温かみのあるノート。クリーム色のページ、キャップのないオレンジ色のマーカー、そして剥がされるのを待つラミネート加工された名前シールの束。
- Apple (España) — 柔らかな自然光に照らされた美術館のギャラリーは、魅惑的で軽やかな白い空間で、それぞれの展示品は淡い色合いの壁にスポットライトで照らされている。
- Lamborghini — ショールームのスポットライトの下に展示された黒いボディカラーの車と、黄色い車が1台。
- Amplemarket — 紙吹雪が散りばめられた、陽光あふれる職場
- Getharvest — 夕暮れ時の机――温かみのあるクリーム色のキャンバス、キャンバスに掛けられた白いポストカード、そして一つの明るいオレンジ色の炎
- Agence Foudre — 雑誌の表紙は、口紅を思わせる淡いピンク色だ。
- Drive Capital — 温かみのある紙に印刷されたレトロなロードトリップポスター
- Apple (España) — 白いギャラリー用ディスプレイケース