厳選・オープン・無料

Allbirds

ミニマルなUIと自然の写真を融合した、クリーンで大地色のECデザイン。

01

デザイン DNA

透明性と自然素材に焦点を当てた、モダンで持続可能な小売ブランド。

02

カラー

ハイコントラストの自然色と、深みのある穏やかなアンカーカラー

03

タイポグラフィ

humanist-sans · geometric-sans

• display40px · 500
• body16px · 400

Display：ヒーローヘッドラインやメインの見出しに使用。 · Body：一般的な読解や説明テキストに使用。 · Mono：ラベルやセカンダリなUI要素に使用。

04

余白

4pxの基本単位を基調とし、セクション間には豊かな余白を設定。

05

サーフェス (角丸 / 影 / 罫線)

1px solid rgba(0,0,0,0.1) による微細な区切り。

rgba(0,0,0,0.1) 0px 1px 3px 0px · rgba(0,0,0,0.1) 0px 20px 25px -5px

06

レイアウト

センターにモーダルオーバーレイを配置したフルワイドヒーロー。

07

モーションとインタラクション

hover状態や背景色における滑らかなトランジション。

微細な背景色の変化や透明度の変化。 · transformや色による直接的な視覚フィードバック。

08

コンポーネント

• button わずかなボーダー半径を持つ、塗りつぶしボタン。
• card 大きな商品写真を用いたクリーンなカード。
• chip 大文字テキストを用いたミニマルなラベル。
• input 明確なfocus状態を持つ、標準フォームインプット。
• hero センターにテキストオーバーレイを配置した、大型のライフスタイル写真。

09

文体と禁止事項

• トーン 透明性があり、親しみやすく、率直。
• 見出し 短く、的確で、ベネフィット重視。
• CTA 明確な視覚的重みを持つ、直接的でアクション重視。

• ネオンや highly saturated のカラーを使用しない — スクリーンショットでは #E0DACF のような穏やかな大地色を示しています
• 過度に condensed のフォントを使用しない — スクリーンショットでは humanist sans-serif と geometric sans カテゴリを示しています
• 重いドロップシャドウを使用しない — スクリーンショットでは浮遊感を出すための微細で柔らかなシャドウを示しています
• ごちゃごちゃしたレイアウトにしない — スクリーンショットでは豊かな余白と単一のモーダルフォーカスを示しています
• 本文テキストにすべて大文字を使用しない — スクリーンショットでは大文字をUIラベルや短い見出しに限定しています
• すべての角を鋭く四角くしない — スクリーンショットでは薬丸形状や最大16pxの丸みを帯びた角の組み合わせを示しています
• 避ける: 専門用語を多用した技術的な言語。
• 避ける: アグレッシブな販促戦術。
• 避ける: 過度に複雑な文構造。

10

パック内の実スクリーンショット

実ページから取得 · 実 computed styles

11

System Prompt

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