厳選・オープン・無料
Hypebeast
プレミアムなストリートウェアとライフスタイルカルチャーのための、大胆で権威あるデジタルマガジン。
editorialstreetwear
01
デザイン DNA
ストリートウェアカルチャーファッションプレミアムエディトリアル
ハイエンドファッション誌のデジタル正門。
02
カラー
#00469BAccent
#111111Ink
#888888Ink soft
#FFFFFFBG
#F5F5F7BG soft
rgba(238,238,238,1)Line
単一の権威ある青のアクセントを持つ、高コントラストのモノクロームです。
03
タイポグラフィ
grotesque-sans · humanist-sans
- display
48px · 700 - h3
24px · 700 - body
18px · 400 - small
12px · 500
見出しはインパクトを高めるため、 Tight な文字間隔と重いウェイトを使用します。 · 本文テキストは、クリーンで読みやすいヒューマニストスタイルを維持します。 · ナビゲーションとカテゴリーラベルは、一貫して大文字で表記します。
04
余白
4px
8px
16px
24px
32px
48px
64px
96px
コンテンツの区切りを確保するため、豊かなpaddingを用いた標準の4pxグリッドです。
05
サーフェス (角丸 / 影 / 罫線)
sm · 2px
md · 4px
lg · 0px
pill · 999px
コンテンツセクションを分けるために控えめに使用される、薄く明るいグレーのラインです。
06
レイアウト
1280container
12columns
24pxgutter
768 / 1024breakpoints
エディトリアルの階層構造のための非対称マルチカラムグリッドです。
07
モーションとインタラクション
150msmicro
300mssmall
0msmedium
ease-in-outeasing
インタラクティブ状態のための、高速で繊細な色の遷移。
テキストとアイコンのための繊細な色の変化です。 · 重いフィードバックなしの即時応答です。
08
コンポーネント
- button ミニマリストで、テキストベースまたはゴーストボタンが主に採用されます。
- card 装飾を最小限に抑え、強いタイポグラフィに依存した、画像を重視したカードです。
- chip 「ゲーミング」や「フットウェア」などのカテゴリーを表す、シンプルな大文字テキストラベルです。
- input ボーダーライン付きのクリーンな検索バーです。
- hero 主要なエディトリアル記事を1つフィーチャーする、大型で支配的なヒーローセクションです。
09
文体と禁止事項
- トーン 権威があり、クールで、文化的に精通している。
- 見出し 直接的で、大胆で、断定的。
- CTA 控えめで、テキストリンクやシンプルなボタンとして統合されることが多い。
- カードに角丸を使用しない — スクリーンショットにはシャープまたは2pxの角丸が見られます。
- UI要素にドロップシャドウを使用しない — スクリーンショットにはフラットデザインが示されています。
- マルチカラムのグラデーション背景を使用しない — スクリーンショットには純白が示されています。
- 装飾的なセリフフォントを使用しない — スクリーンショットにはクリーンなサンセリフ系が使われています。
- テキストを全て中央揃えにしない — スクリーンショットには見出しに強い左揃えが使われています。
- ボタンに明るいプライマリカラーを使用しない — スクリーンショットには単一の深い青のアクセントが使われています。
- 避ける: 遊び心のある言葉
- 避ける: 明るいネオンカラー
- 避ける: 過度な装飾要素
10
パック内の実スクリーンショット
桌面首屏（hero）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
移动首屏実ページから取得 · 実 computed styles
11
System Prompt
Hypebeastは、ストリートウェア、ファッション、カルチャーに焦点を当てたプレミアムなデジタルエディトリアルプラットフォームです。そのデザインDNAは、大胆なモノクロームパレット（#FFFFFF背景、#111111のインク）と単一の権威ある青のアクセント（#00469B）が特徴です。タイポグラフィは、見出しに重いグロテスク・サンセリフ、本文にクリーンなヒューマニスト・サンセリフが主に使用され、全て一貫して左揃えです。重要なデザインルールには、過度な装飾や明るい色を避け、可読性のための高コントラストを維持し、フォトグラフィを際立たせるための豊かな余白を活用することが含まれます。レイアウトは、タイポグラフィと画像の配置を通じて視覚的階層を優先する、クリーンなマルチカラムグリッドです。主要なインタラクションは繊細で、hover状態のための高速な色の遷移に依存しています。
en · zh-CN · zh-TW · ja · ko