厳選・オープン・無料

Friendsofthenew

巨大なタイポグラフィの存在感とフォトグラフィックコラージュレイアウトを持つ、新進アーティストのためのモノクロエディトリアルショーケース。

01

デザイン DNA

ハイファッションのアートギャラリーマガジン

02

カラー

対照的なブラックと暖色系オフホワイトに依存した厳格なモノクロパレット。最大限のコントラストとエディトリアルなエレガンスを実現します。

03

タイポグラフィ

transitional-serif · humanist-sans

• display200px · 400
• body10px · 400

ロゴタイプはドラマチックな視覚効果のためにハイコントラストのトランジショナルセリフを使用 · UI要素は小サイズでの可読性のためにクリーンなヒューマニストサンセリフを使用 · 大きなディスプレイテキストには統一感を出すためにタイトな文字間隔を適用

04

余白

20pxの溝とエディトリアルなペーシングのための豊かな余白を備えたグリッドベース。

05

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

1px solid rgb(0, 0, 0)

06

レイアウト

下部に固定されたロゴタイプと、その上に浮遊するコラージュスタイルの画像グリッド

07

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

hover時の滑らかな画像フィルター遷移（0.3s ease-out） · 状態変化のための一般的な要素遷移

画像フィルターまたは微かな視覚的シフト · モーダルによる中断のない直接ナビゲーション

08

コンポーネント

• button 円形アウラインインジケーターを持つミニマルなテキストリンク
• card 緩やかなグリッド内に浮遊するフレームなしのフォトグラフィック画像
• chip ナビゲーション状態のための円形インジケータードット
• input 目立つ入力フィールドのないミニマルなテキストベースナビゲーション
• hero ビューポート下部をアンカーとするフル幅のディスプレイロゴタイプ

09

文体と禁止事項

• トーン 洗練され、控えめで、自信に満ちている
• 見出し 大胆で妥協ないタイポグラフィックステートメント
• CTA 従来のボタンスタイルのない、控えめなテキストベースナビゲーション

• 明るいアクセントカラーを使用しない — スクリーンショットには厳格なブラックと暖色系オフホワイトのみが表示
• 角丸を使用しない — スクリーンショットには鋭いエッジと円形のピル形状のみが表示
• テキストを中央揃えしない — スクリーンショットには左揃えのナビゲーションと下部にアンカーされたロゴタイプが表示
• ドロップシャドウを使用しない — スクリーンショットには完全にフラットなフォトグラフィックレイヤーが表示
• ディスプレイテキストにサンセリフを使用しない — スクリーンショットにはメインロゴタイプのトランジショナルセリフが表示
• 装飾的なボーダーやフレームを追加しない — スクリーンショットにはフレームなしの浮遊するフォトグラフィック要素が表示
• 避ける: 明るい色
• 避ける: 角丸
• 避ける: ドロップシャドウ
• 避ける: 装飾的なアイコン
• 避ける: 忙しないパターン
• 避ける: 中央揃えテキスト
• 避ける: サンセリフ見出し

10

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

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

11

System Prompt

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