ブランドガイド
メロンサイダー開発のロゴ・配色・書体と、使い方のルールです。取材・掲載・共同プロジェクトなどでご利用ください。
ロゴ
文字はアウトライン化済みのため、フォント環境に依存しません。
PNG(透過・高解像度)
配色
クリーム
#fffbe6--creamアイス・背景の最上部
ライム
#d9ffb3--lime背景グラデーション
メロン
#7ee081--melonメイン。ソーダの明るい部分
グリーン
#2fbf71--greenアクセント・アイコン
ディープ
#0f7a4a--deep深海
アビス
#063b2b--abyss最深部
インク
#0b3d1e--ink本文・ロゴ線
チェリー
#e63946--cherryCTA・さくらんぼ
サン
#ffd166--sun強調・星
サンド
#c9a86a--sandフッター
書体
Zen Maru Gothic — Google Fonts(400 / 500 / 700 / 900)
シュワっと弾ける、さわやかな開発を。
見出し:Zen Maru Gothic 700〜900
本文:Zen Maru Gothic 400〜500。行間 1.7 で、ゆったり読める設定にしています。
補足・キャプション:0.85rem、不透明度 80%。
アイコン:Font Awesome 6 Free(Solid / Brands)。絵文字は使用しません。使い方のルール
OK
- ロゴの周囲にはグラスの高さの 1/4 以上の余白を取る
- 明るい背景では基本版、濃い背景では白抜き版を使う
- 縮小はシンボル単体なら 16px、横組みは高さ 24px まで
- 色はこのページのパレットから選ぶ
NG
- 縦横比の変更、回転、影やグラデーションの追加
- グラスとさくらんぼの色の変更
- 文字だけを別のフォントで組み直す
- 他のロゴやキャラクターとの合成
アプリ内での表示
サイト内ではインライン SVG で表示し、輪郭は currentColor を使うため、ナイトモードでは自動的に白へ切り替わります。