厳選・オープン・無料

Logo Archive

これだけは手元に置きたい唯一のロゴブック。

01

デザイン DNA

モダニズムのロゴデザインのための、高品質で厳選されたライブラリのような存在。

02

カラー

主なアクションに1つの明るいアクセントカラー（黄色）を使用した、高コントラストのダークモード。

03

タイポグラフィ

transitional-serif · grotesque-sans

• display96px · 400
• body-lg18px · 400
• body16px · 400

ディスプレイ見出しの強調にはイタリック体のトランジショナルセリフを使用します。 · 本文テキストは、すべてのUI要素で一貫してグロテスクサンセリフを使用します。

04

余白

厳密な4pxグリッドシステムが、清潔で予測可能な垂直リズムを生み出します。

05

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

目立つボーダーは使用しません。空間的な分離は背景色の変化で実現します。

06

レイアウト

タイポグラフィを強調するための、豊かな余白を備えた中央揃えの単一カラムレイアウトです。

07

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

ロゴアニメーション用の、滑らかで弾力性のあるイージング。 · インタラクティブ要素の控えめなホバートランジション。

ボタンやインタラクティブ要素の、控えめな背景色の変化。 · スケールの縮小や透明度の変化による、即座の視覚的フィードバック。

08

コンポーネント

• button 高コントラストの黄色塗りまたは控えめなグレー背景の、ピル（カプセル）形状ボタン。
• card コンテンツセクションをグループ化するために使用される、暗い背景の角丸コンテナ。
• chip 特定の情報を強調するために使用される、背景塗りの小さなインラインタグ。
• input 目立つ存在ではありませんが、確立されたピル形状のスタイルに従います。
• hero 巨大なタイポグラフィと浮遊するブランドロゴが中心の、フルワイドの中央揃えレイアウト。

09

文体と禁止事項

• トーン 自信に満ち、権威があり、ミニマル。
• 見出し 明確で大胆。強調のため通常体とイタリック体のセリフを混在させます。
• CTA 価格などの価値提案に焦点を当てた、直接的で明確な表現。

• アクセントカラーを複数使用しないこと — スクリーンショットでは、暗い背景に1つの主たる黄色(#fde533)のみが使用されている。
• 太いボーダーを使用しないこと — スクリーンショットでは、背景色のブロックと間隔によって分離が実現されている。
• ドロップシャドウを使用しないこと — スクリーンショットでは、段差のないフラットで層状のサーフェスが使用されている。
• 本文テキストに全大文字を使用しないこと — スクリーンショットでは、可読性のために文頭大文字が使用されている。
• 小さいディスプレイサイズを使用しないこと — スクリーンショットでは、ビューポートを支配する巨大な96pxのヘッドラインが使用されている。
• 明るく高彩度の背景を使用しないこと — スクリーンショットでは、厳密なダークモードパレットが使用されている。
• 避ける: 雑然としたレイアウトや不要なUI要素を避けてください。
• 避ける: 複数の競合するアクセントカラーを避けてください。
• 避ける: カジュアルまたは過度に熱心な言葉遣いを避けてください。

11

System Prompt

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