Le Puzz
サニー・サンデー・サーキュラーは、謎に満ちたタブロイド紙だ。
Le Puzzは、ブティック向けのマキシマリストなeコマースシステムで、2色の基調を基盤としています。鮮やかなハニカム状の黄色と純粋な黒が、クールなパールグレーの背景に映えています。そのスタイルは、ヴィンテージ新聞とジグソーパズルを掛け合わせたようなもので、本文はセリフ体のTimesフォント、見出しはカスタムフォントのTimes Nowを使用しており、サンセリフ体フォントに依存する従来のeコマースの慣習を意図的に打ち破っています。インターフェース自体はシンプルでグリッドベースに保たれており、視覚的なインパクトは製品パッケージ（おもちゃでいっぱいのイラスト入りの緻密な構成）によって伝えられます。インターフェースのコントロールは非常に充実しており、黄色の背景に黒い枠線が付いたボタン、ピル型のアイコン、半径12pxのカード、そして小文字の文字間隔が広く取られているため、「QUICK ADD」ボタンでさえ編集的な雰囲気を醸し出しています。
特徴的な編集デザインが施された、クラシックなeコマースグリッド。ヘッダーは幅1の黒い枠線が付いた黄色のハニカムストリップで、中央にロゴとナビゲーションボタンの列が配置されています。その下、グレーの背景に3列の製品グリッドがあり、その上にTimes Nowフォントのウェルカムヘッダーが中央に配置されています。メイン要素は角丸の中央配置の写真ブロック（40）で、両側に2枚の製品カードが配置されています。セクションのリズムは維持されており、十分な垂直スペース（30）、黄色とグレーの交互の表面、ページの中央に配置された最大幅は約4.5cmです。製品カードは同じサイズで、5cm間隔の整然とした3列グリッドに配置されています。レイアウトは左右対称でグリッドに沿っており、非対称な構成や要素の重なりはありません。
ビジュアル要素は製品写真です。パズルボックスは白またはニュートラルな背景の前で正面から撮影され、その後、温かみのある青または自然なスタジオ背景に置かれます。メイン画像には、複数のパズルボックス（ライフスタイルアイテム）を持った人物が、自然なエネルギーで捉えられています。パッケージ自体は、豊かでイラスト的で、マキシマリスト的です。500ピースのパズル全体に散りばめられた、子供向け絵本のイラストのように見えるようにデザインされた、鮮やかな原色と太い黒の輪郭線で描かれた多数のおもちゃ、食品、キャラクターが描かれています。抽象的なグラフィックも、3Dレンダリングも、虫眼鏡1つ以外のアイコンもありません。パズルそのものがビジュアル言語なのです。
パレット
ブランド
- Honeycomb Yellow
#ffd931— ブランドの主要色、タイトルバー、主要なアクションボタン、ナビゲーションのアクティブ状態、リンクの下線の色、アクセントカラーの塗りつぶし――すべてがその色を中心に展開する、たった一つの色。
中性
- Carbon Black
#000000— 本文、太い枠線、ボタンの輪郭、アイコンの輪郭、ナビゲーションテキストは、システム全体の構造的な基盤となる要素です。 - Ink Black
#231f20— 補助テキスト、主テキスト、ボタンの枠線、入力フィールドの枠線には、やや暖かみのある、ほぼ黒に近い色を使用し、柔らかな印象を与えます。 - Pearl Gray
#c8cbcd— ページキャンバス、商品カードの背景、黄色と黒の色が際立つ印象的な舞台。 - Fog Gray
#a6a8aa— 控えめなバッジ表面、二次的なチップ背景、そしてさりげないユーザーインターフェースの塗りつぶし。 - Smoke Line
#d6d6d6— スリムな仕切り、目立たないテーブル/カード仕切り。
タイポグラフィ
11ピクセルから47ピクセルまで · 6段階
- Times Now — 交換： Playfair Display · 概要 100, 400 · 見出しや小見出し用のセリフ体フォント。メインの見出し、商品名、セクションタイトルなどに使用されます。極細の100ポイント、ピッチ47ピクセルのフォントは、背が高く、やや凝縮された印象を与えます。文字の高さが0.87～0.90とコンパクトなため、大きな見出しを本文に近づけて配置でき、印刷されたポスターのような効果を生み出します。
- Times — 交換： Times New Roman · 概要 400 · セリフ体の本文フォントはオンラインストアとしては意外な選択だが、サイト全体に文学的でカタログのような雰囲気を与えている。行間が狭い（1.15）ため、段落はコンパクトで読みやすくなっている。
- Helvetica Neue — 交換： Helvetica · 概要 100, 400 · ユーザーインターフェース内の小さなテキスト、ボタン上のテキスト、マイクロテキストは、11ピクセルのフォントサイズで、文字間隔を広く（0.0730em）設定することで、快適な体温下でも大文字で書いているような感覚を生み出します。
音程と形式
| 目的 | 意味 |
|---|---|
| 密度 | 密集 |
| 基本的なステップ | 15px |
| ボタンの半径 | 12px |
| カード半径 | 12px |
| 影 | いいえ - 影の代わりに境界線 |
| セクション間 | 30-40px |
| ページ幅 | 1200px |
AI がLe Puzzスタイルであなたのウェブサイトを構築し、
- リンクから商品や投稿を追加してください - Instagram 、 TikTok 、 Facebook 。
- 古いサイトからコンテンツを移行するには、アドレスを指定するだけです。
- 最高のエンジンであるReact （ Next.js ）上で動作するモダンなデザイン。サーバーレンダリングとSEO最適化が標準搭載されています。
- 検索結果のSEO最適化とニューラルネットワークによるレコメンデーションを完全に自動化。
類似のスタイル
- Agence Foudre — 雑誌の表紙は、口紅を思わせる淡いピンク色だ。
- INVERSA — 真夜中の地形測量用端末。暗い操作パネルには、巨大な編集用フォントとネオングリーンのマーカーが単層で重ねられ、地球の衛星画像に表示されている。それぞれのラベルはモノクロで、まるで任務座標を読み取っているかのようだ。
- Acne Studios — 鮮やかな写真で埋め尽くされたミニマルなギャラリースペース――大理石の上に広げられたファッション雑誌
- GTE — ギャラリー照明の背後にある取引ターミナル
- Diabla — 地中海風の中庭、正午の光景――日焼けしたピンク色の壁、鮮やかな赤いキャンバス地の天幕、そして空いっぱいに広がるセリフ体の社説の見出し。
- Subset — 未加工のリネンを使用したエディトリアルブティック
- Cursor — くすぶる炭火に照らされた、居心地の良い羊皮紙工房
- MindMarket — クリーム色の紙に印刷された、居心地の良いおとぎ話の本。大きなInterの見出しと切り抜かれた紙のキャラクターが、太陽の光を浴びたような、ステッカーのように柔らかい表面に共存する、親しみやすい編集上のキャンバス。
- Lamborghini — ショールームのスポットライトの下に展示された黒いボディカラーの車と、黄色い車が1台。
- Amplemarket — 紙吹雪が散りばめられた、陽光あふれる職場
- Getharvest — 夕暮れ時の机――温かみのあるクリーム色のキャンバス、キャンバスに掛けられた白いポストカード、そして一つの明るいオレンジ色の炎
- Drive Capital — 温かみのある紙に印刷されたレトロなロードトリップポスター