厳選・オープン・無料

Glossier

複雑なUIコンポーネントではなく、写真とタイポグラフィを主要なデザインドライバーとして活用する、「クリーン」な現代的なDTCデザインの好例として Included に値します。

beauty ecommerce clean
Glossier のスクリーンショット

オリジナル: https://www.glossier.com

OpenDesign で開く

デザイン DNA

視覚言語

純白と黒を基調としたミニマルなパレットに、製品写真から取られた柔らかなパステルカラー(特にピンク)と、控えめなテキスト用の中性グレーを組み合わせています。

レイアウト構造

写真を主体としたフルワイドのレイアウトで、ゆったりとしたホワイトスペースを確保しています。巨大なタイポグラフィのヒーローオーバーレイと、クリーンでグリッドベースのコンテンツセクションが特徴です。

インタラクション形態

モーダル、カルーセル、セクション表示において、滑らかな透明度ベースのトランジションを用いた、標準的なeコマースのインタラクションです。穏やかで洗練されたユーザーエクスペリエンスを維持しています。

モーション規則

font-size、opacity、visibilityの変化に対して、主にease-in-outトランジションを用いる、控えめで機能的な動きです。エディトリアルな流れに沿ってユーザーを誘導します。

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