ブランドの ガイドラインを 爆速で
SVGやPNGのロゴをドロップすると、カラーを解析して横長スライドのブランドガイドラインを半自動で組み上げます。内容を整えたら、単体で動くHTMLをダウンロード。登録不要、すべてブラウザ内で完結します。
ロゴをここにドロップタップしてロゴを選択
SVG / PNG（SVGだと自動生成できる項目が増えます）
FILES NEVER LEAVE YOUR BROWSER
LOGOGUIDE.
LOGO → BRAND GUIDELINES
01FEATURES
デザイン事務所の納品物が、
その場で仕上がる。
A
ロゴから半自動生成
SVGのコードを解析してブランドカラーを抽出。モノクロ版・白抜き版・クリアスペース図・使用禁止例まで、ロゴひとつから自動で組み上げます。
B
横長スライド形式
画面で読まれる前提の16:9。キーボードでもスワイプでもページ送りでき、印刷すればそのままPDFのガイドラインになります。
C
単体で動くHTML
書き出したファイルはこのサイトに依存しません。社内サーバーに置いても、メールで送っても、そのまま開けます。
D
登録不要・無料
ロゴがブラウザの外へ送信されることはありません。解析も生成も、すべて手元のブラウザ内で完結します。
02HOW IT WORKS
3ステップ、最短3分。
STEP 1
ロゴを落とす
SVGまたはPNGをドロップ。カラーが抽出され、8ページのガイドラインが目の前で組み上がります。
STEP 2
内容を整える
ブランド名・色の名前・書体・掲載ページを選ぶだけ。文書デザインは6つのテーマから選べます。
STEP 3
HTMLを書き出す
単体で動くガイドラインHTMLをダウンロード。プロジェクトを保存すれば、いつでも再編集できます。
03PAGES
ブランドガイドラインに必要な8ページ。
ロゴの使い方だけでなく、ブランドの考え方から連絡先まで。必要なページだけを選んで書き出せます。下の画像は、デモ用ロゴから実際に生成したページです。
01表紙
02理念（ブランドステートメント）
03ロゴ（正規表示とバリエーション）
04余白と最小サイズ
05カラー（HEX / RGB / CMYK）
06タイポグラフィ
07使用禁止例
08奥付（連絡先）
文書のデザインは6種類。
下の見本は、デモ用ロゴから書き出したHTMLの実物です。テーマを切り替えて、ページもめくってみてください。FLOW と PRISM は、ページを開くたびに中の要素が順に現れる動くテーマです。
04USE CASES
こんな場面で。
ロゴ納品に、一枚添える
デザイナーがクライアントへロゴを納品するとき。使い方の規定が一緒だと、ロゴは長く正しく使われます。
社内でロゴの使い方を揃える
資料ごとに色や比率がバラバラ——そんな状態を、共有URLひとつ、ファイルひとつで解決します。
自分のブランドを守る
個人ブランド、同人サークル、部活のエンブレム。規模に関係なく、「らしさ」の決めごとは効きます。
05FAQ
よくある質問
ブランドガイドラインとは何ですか？
ロゴ・カラー・書体など、ブランドの見た目の使い方をまとめた規定集です。ロゴの周囲に確保する余白（クリアスペース）、最小サイズ、やってはいけない加工などを明文化することで、誰が使ってもブランドの印象が揃います。
無料ですか？商用利用できますか？
無料です。生成したブランドガイドラインは、商用案件の納品物としてもご利用いただけます。
アップロードしたロゴはどこに保存されますか？
サーバーには送信されません。解析も生成もすべてブラウザ内で行われ、ロゴはお使いの端末から外へ出ません。
自動で抽出された色は、そのまま使えますか？
ロゴのデータから拾った色なので、目安としてお考えください。ブランドの正式な指定色が決まっている場合は、「カラー」タブで色見本かカラーコードを書き換えて差し替えてください。PNGのロゴは輪郭のなじませ部分の色を拾うことがあるため、特に確認をおすすめします。CMYKの値は画面の色から換算した近似値です。印刷物では色校正で確認してください。
書き出したHTMLはどう使えますか？
単体で動くファイルなので、社内サーバーや共有フォルダに置く、メールで送る、そのままブラウザで開く、など自由に扱えます。ブラウザの印刷機能（Cmd+P / Ctrl+P）でPDFにもできます。
後から内容を編集できますか？
できます。「保存」でプロジェクトファイル（JSON）を書き出しておけば、いつでも読み込んで続きから編集できます。同じブラウザなら自動保存からの再開も可能です。