HyperStore ブランドガイドライン
HyperStore を正確に表現するために必要なものすべて — ロゴ、アプリアイコン、配色、タイポグラフィ、そして公式「Featured on HyperStore」バッジ。ブランドの一貫性を保つため、これらの要素はそのままご利用ください。
ロゴ
HyperStore のワードマークは私たちの主要なアイデンティティです。明るい背景にはフルカラー版を、暗い背景にはライト版をご使用ください。必ず提供されたファイルを使用し、ワードマークを書き直したり再入力したりしないでください。
余白
ロゴの周囲には、アプリアイコンの高さ以上の余白を確保してください。他の要素と接近して配置しないでください。
最小サイズ
判読性を保つため、画面上ではワードマークを 88px 幅未満で表示しないでください(印刷では約12mm)。
アプリアイコン
角丸のスクエアマークはコンパクトなアイデンティティです — ファビコン、アバター、ソーシャルプロフィール画像、ワードマーク全体が収まらないアプリアイコンのタイルなどにご使用ください。角丸はそのまま維持し、プレーンな正方形や円形にクロップしないでください。
カラー
パープルはブランドの核です。ヒーロー部分やアクセントにはグラデーションを、白背景でコントラストが必要なテキストや塗りにはディープパープルをで使用ください。スウォッチをクリックで HEX 値をコピーできます。
タイポグラフィ
HyperStore は製品全体で Lexend を使用しています — クリーンで高い可読性を誇るサンセリフ体です。見出しは Medium と Semibold、本文は Regular を使用しています。Lexend は Google Fonts から無料でオープンソースとして入手できます。
Lexend
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 & @ # % →
「Featured on HyperStore」バッジ
ツールが掲載されているなら、それを誇示しましょう。このバッジをサイトに設置し、HyperStore の掲載ページにリンクしてください。スタイルとサイズを選んで、スニペットをコピーしてください。
注意事項
ブランドマークの視認性を保ちましょう。いくつかの簡単なルールでほぼすべてをカバーできます。
- 元の無加工のファイルを使用する。
- ロゴの周囲に余白を確保する。
- Shiftキーを押しながら縦横比を保って拡大・縮小する。
- 十分なコントラストのある背景に配置する。
- ロゴの色やグラデーションを変更しない。
- 引き伸ばし、圧縮、回転をしない。
- 影、輪郭線、効果を加えない。
- ごちゃごちゃした背景やコントラストの低い背景に配置しない。
ブランドの使用についてご質問がありますか?
報道関係、パートナーシップ用ロゴ、その他こちらに記載のない内容については、お気軽にお問い合わせください。
お問い合わせ →