Glossier
太陽の光を浴びたフォトセッション - 白い紙、黒いインク、鮮やかな黄色のアクセント
Glossierは、まるでデジタル版の美容雑誌のように機能する。白と黒を基調としたほぼモノクロームのキャンバスに、ブランドのロゴと唯一の行動喚起を兼ねる鮮やかな黄色がアクセントとして際立っている。編集は抑制されており、特大のApercu見出し、十分なテキストスペース、感情的な重みの大部分を担う全面ライフスタイル写真が特徴だ。そして、実用性を重視したデザインとなっている。フラットな商品カード、細い枠線、そして装飾の完全な排除。黄色は単なるブランドカラーではなく、ブランドそのものなのだ。控えめに使用されているため、黄色が現れるたびにカメラのフラッシュのように鮮烈な印象を与える。その他の要素はすべて背景に溶け込むように設計されている。ニュートラルカラーは、かすかにピンクがかった温かみのあるグレー、枠線は控えめ、文字は密度が高く凝縮されている。その結果、自信に満ち、控えめでありながら、妥協のないモダンな印象を与えるストアフロントが誕生した。
このページは、縦に配置された一連の全画面セクションが特徴で、それぞれが独立した編集記事としてデザインされています。メインセクションは、全幅の写真に白いフローティングオーバーレイ（左上）が重ねられ、ページ下部全体を占める巨大な黄色のロゴが配置されています。メインセクションの下には、全画面画像と個々のカードのグリッドが交互に配置されています。カテゴリ（スキンケア/メイクアップ）は、画像の比率が均等（50/50）の2列に分割されていますが、境界線は表示されず、画像同士をつなぐ線のみがそれらを区切っています。製品カタログは、#f7f7f7のキャンバス上に正方形のカードを4列グリッドで配置しています。ナビゲーションは、上部にミニマルなバーがあり、その上にセカンダリ広告ストリップがあります。セクション間の間隔はかなり大きい（64px）ですが、セクション間の遷移はスムーズで、区切り線や背景色の切り替えはなく、暖色系のフッターのみが使用されています。全体的なリズムは、写真、テキスト、写真、グリッド、写真という、ファッション雑誌をめくるような感じです。
写真が主要な視覚言語です。閲覧領域全体がライフスタイル画像とポートレートで埋め尽くされています。温かみのある夕暮れ時の光、肌の柔らかなクローズアップ、太陽の眩しさを背景に製品ボトルを持つ手など。写真の色彩は温かみがあり彩度が低く、桃色の空、テラコッタ色の肌、深い海の青などが用いられています。白いテキストカードや黄色のロゴを除き、画像は常にページ全体を占め、角丸、フレーム、オーバーレイはありません。カタログカードの製品写真は、純白のシームレスな背景で、均一でフラットな照明の下で撮影されています。画像とテキストの比率は約70対30で、画像は感情を伝え、テキストは機能を伝えます。イラスト、抽象的なグラフィック、3Dレンダリングは一切使用されていません。
パレット
ブランド
- Glossier Yellow
#fff116— 黄色は、装飾的なディテールを際立たせたり、使用頻度の低い検索クエリを強調したりする際の補助的なアクセントカラーとして使用されます。行動喚起のメインカラーとして使用すべきではありません。
中性
- Ink
#000000— 本文、ナビゲーションリンク、主要テキスト、フッターテキスト、アイコンのアウトライン、細い枠線。主要なタイポグラフィと構造色。 - Paper
#ffffff— 商品カードの表面、充填部分、隆起したパネル。積み重ねられた商品の中で最も明るい表面レベル。 - Fog
#f7f7f7— ページキャンバス、セクションの背景、ページ上の画像間の遷移など、ウェブサイト全体が配置される基盤となる表面。 - Blush
#faf2f4— フッターの背景、柔らかく温かみのあるセクション区切り線。ページ下部には、ほんのりピンクがかった白の色合いが温かみを添えています。 - Mist
#f0f0f0— 目立たない背景を作り出し、セクションを区切るための、軽い支持面です。行動喚起のメインカラーとして使用すべきではありません。 - Ash
#e8e8e8— 入力フィールドの境界線、アイコンの背景、細い区切り線。カードやフォーム要素の構造的な境界線の色。
タイポグラフィ
12～32ピクセル・5段階
- Apercu — 交換： Inter · 概要 400, 500, 700 · メインフォントはユーザーインターフェース全体で使用されています。本文は16px/400、ナビゲーションとキャプションは12～14px/500、小見出しは20px/500、編集記事の見出しは32px/700です。Apercuの幾何学的で人間味あふれるデザインは、ブランドに凝縮されたモダンなスタイルを与えています。文字間隔がほぼゼロ（0.002～0.003em）であるため、フォントは軽やかで親しみやすいというよりは、コンパクトで雑誌のような印象を与えます。700のウェイトは、UI要素ではなく、編集記事の表示要素用に確保されています。
- Apercu Mono — 交換： JetBrains Mono or IBM Plex Mono · 概要 400 · 注文メタデータ、追跡番号、コード横のラベルなどに使用する、実用性を重視したマイクロタイポグラフィ。等幅フォント版は、均整のとれた本文フォントに対して、技術的な質感を生み出します。
- GTStandard-M — 交換： Inter · 概要 400 · GTStandard-M - 抽出されたデータには含まれているが、AIによって説明されていない。
音程と形式
| 目的 | 意味 |
|---|---|
| 密度 | 平均 |
| 基本的なステップ | 8px |
| ボタンの半径 | 0px |
| カード半径 | 0px |
| 影 | いいえ - 影の代わりに境界線 |
| セクション間 | 64px |
| ページ幅 | 1440px |
AI がGlossierスタイルであなたのウェブサイトを構築し、
- リンクから商品や投稿を追加してください - Instagram 、 TikTok 、 Facebook 。
- 古いサイトからコンテンツを移行するには、アドレスを指定するだけです。
- 最高のエンジンであるReact （ Next.js ）上で動作するモダンなデザイン。サーバーレンダリングとSEO最適化が標準搭載されています。
- 検索結果のSEO最適化とニューラルネットワークによるレコメンデーションを完全に自動化。
類似のスタイル
- Lightship — まるで映画に出てくるような、広大な道を描いたジオラマ。温かみのあるクリーム色のギャラリーの壁には、大きな風景写真が間隔を詰めて飾られ、額縁には細い黒文字がかすかに見え、単調な空間に鮮やかなオレンジ色のアクセントが、まるで草原の焚き火のように際立っている。
- Faire ES — 温かいクリームの卸売カタログ
- Adanola — 白い紙に印刷された、編集版ルックブック。清潔感のある白い表面に、タイポグラフィと写真が息づくファッション撮影。黒インクの文字と、ブランド全体のスタイルを反映した、さりげない特徴的なサンセリフ体フォント（Favorit）が用いられている。
- Oura Ring — 柔らかな自然光に包まれた、居心地の良いオートミール作りのワークショップ。
- Stykka — 白い光に包まれたスカンジナビアの工房――静かで手作りのショールーム。そこで聞こえるのは写真の音だけ。
- DJI — 航空宇宙をイメージした黒色のキャンバス地に、鮮やかなエレクトリックブルーのアクセントを1箇所加えたデザイン。
- Altitude Beverages — モノクロの雑誌見開きページ。ファッション雑誌の見開きページから、静止画以外のすべての色を取り除いたものを想像してみてください。テキストと余白だけで、物語のすべてが語られます。
- AATHER — 開いた手のひら、一本の炎――静寂の中に秘められた、ささやかな贅沢。
- Cowboy — 真っ白な磁器で統一された空間に佇むベルギーの自転車ギャラリー。マットな質感の表面、編集資料に用いられる大きなフォント、そして装飾を極力排除したショールームは、自転車とその中身に視線を引きつけるように設計されている。
- Refero — 白い大理石を背景にした編集レイアウト - タイポグラファーが作成した製品ページ。セリフ体の見出しがブランドの名刺代わりとなり、その他はすべて目立たないように配置されている。
- Face Formula — 北欧風の雑誌風ポートレート。落ち着いた雰囲気の誌面レイアウトで、モデルの視線と、凝縮されたセリフ体で書かれた見出しが、涼しげな霧の背景の中で雄弁に語りかけてくる。
- Shupatto — 白い大理石の博物館展示ケース