OnlineFreeTools.org
  • ホーム
  • Image editing tools
    • 文字透かしを追加 — ブラウザ完結
    • 画像から色を抽出 — パレットとクリック取色
    • 画像を反転 — 左右・上下
    • 画像に枠を追加 — 色と幅
    • 画像圧縮 — 長辺・画質・目標サイズ(端末内)
    • 画像の切り抜きとサイズ変更(端末内)
    • 写真の EXIF 表示と削除(GPS・カメラ情報・端末内)
    • 画像フォーマット変換 — PNG JPEG WebP AVIF BMP GIF ICO SVG ローカル
    • グレースケール変換 — ローカルで白黒に
    • 画像結合 — 複数写真を1枚のコラージュに
    • 画像最適化 — WebP / AVIF / MozJPEG(端末内)
    • 画像に重ねる — 写真へロゴを配置
    • 画像↔Base64 — ブラウザで変換
    • 画像からGIF — 短いアニメ
    • 画像をPDFに — 1枚1ページ
    • 画像をPowerPointに — 1枚1スライド
    • 画像をWordに — ローカルDOCX
  • デザインツール
    • ブランド色スケールを生成 — 50–950パレットとCSSトークン
    • ブランドスタイルガイド — 自動下書きを手直しできる
    • サイト配色方案 — 貼れるセマンティック CSS トークン
    • WCAGコントラストチェッカー — AA/AAA比率
  • Developer tools
    • DNS に WWW を追加 — A/CNAME と各社ガイド
    • CSV と JSON を相互変換 — 型・区切り文字・ローカル
    • HTML エンティティ エンコード/デコード — ローカル処理
    • IndexNow — Bing URL 送信・キー確認・ステータスコード
    • 自分のIPアドレス確認 — グローバルIP表示(IPv4/IPv6)
    • JSON Schema バリデータ — draft-07 のパス、ローカル
    • Markdown と HTML を相互変換(プレビュー付き)
    • Compare Two Texts Online — Text Diff Checker
    • サイトのHTTPヘッダを確認 — レスポンスヘッダ検査
    • YAML と JSON を相互変換(型ルール・複数ドキュメント対応)
  • Calculators
    • BMI計算ツール — 体格指数の求め方
    • 多変数の勾配 ∇f を計算 — 偏導関数ベクトル
    • 限界収入の求め方 — MR計算ツール(公式 ΔTR / ΔQ)
    • パーセント変化の計算 — 旧値から新値への増減率
    • ROI(投資利益率)計算ツール — 計算式と例
    • 平方フィート⇔平方メートル換算 — 物件・リフォーム向け
  • English
  • 中文
  • Español
  • العربية
  • Português
  • Bahasa Indonesia
  • Français
  • 日本語
  • Русский
  • Deutsch

ツール

文字透かしを追加 — ブラウザ完結DNS に WWW を追加 — A/CNAME と各社ガイドブランド色スケールを生成 — 50–950パレットとCSSトークンブランドスタイルガイド — 自動下書きを手直しできる画像から色を抽出 — パレットとクリック取色CSV と JSON を相互変換 — 型・区切り文字・ローカル画像を反転 — 左右・上下BMI計算ツール — 体格指数の求め方多変数の勾配 ∇f を計算 — 偏導関数ベクトル限界収入の求め方 — MR計算ツール(公式 ΔTR / ΔQ)パーセント変化の計算 — 旧値から新値への増減率ROI(投資利益率)計算ツール — 計算式と例HTML エンティティ エンコード/デコード — ローカル処理画像に枠を追加 — 色と幅画像圧縮 — 長辺・画質・目標サイズ(端末内)画像の切り抜きとサイズ変更(端末内)写真の EXIF 表示と削除(GPS・カメラ情報・端末内)画像フォーマット変換 — PNG JPEG WebP AVIF BMP GIF ICO SVG ローカルグレースケール変換 — ローカルで白黒に画像結合 — 複数写真を1枚のコラージュに画像最適化 — WebP / AVIF / MozJPEG(端末内)画像に重ねる — 写真へロゴを配置画像↔Base64 — ブラウザで変換画像からGIF — 短いアニメ画像をPDFに — 1枚1ページ画像をPowerPointに — 1枚1スライド画像をWordに — ローカルDOCXIndexNow — Bing URL 送信・キー確認・ステータスコード自分のIPアドレス確認 — グローバルIP表示(IPv4/IPv6)JSON Schema バリデータ — draft-07 のパス、ローカルMarkdown と HTML を相互変換(プレビュー付き)サイト配色方案 — 貼れるセマンティック CSS トークン平方フィート⇔平方メートル換算 — 物件・リフォーム向けCompare Two Texts Online — Text Diff CheckerWCAGコントラストチェッカー — AA/AAA比率サイトのHTTPヘッダを確認 — レスポンスヘッダ検査YAML と JSON を相互変換(型ルール・複数ドキュメント対応)

ブランドスタイルガイド — 自動下書きを手直しできる

ブラウザでブランドガイドラインを組み立てます。手順:ブランド名、業種、主色 HEX(例 Northline Studio #0F6E8C)、性格タグ、モジュール選択 → アイソレーション、配色、字体、余白、やってよい/だめな例入りのルール下書き → Markdown または JSON をコピー。自動提案はフィールド単位で編集可 — クラウド AI ではありません。アップロードなし。

タグは角丸、字体ヒント、ボイス、主色の使用面積に反映されます。

オフのモジュールはプレビューと出力に含まれません。

編集可能な下書きであり、商標の法的助言ではありません。構成プリセット(厳格 / プロダクト / フレンドリー)は公開ガイド構造を参考にした教育用パターン — 公式キットでも各団体との提携でもありません。生成はローカル。第三者 Logo はホストしません。

使い方

基本情報を入力し、構成プリセットとモジュールを選んで生成。性格ルール(角丸、字体、ボイス、主色面積)がやってよい/だめな例を作り Markdown/JSON を出力。編集したフィールドは手動のまま;未編集だけ再提案は触っていない自動値のみ更新。

想定されるルール

モジュール、自動 vs 手動、コントラスト、プライバシー。

  • 構造は モジュール → 要素 → 例(OK/NG)。オフモジュールは出力に含まれません。
  • 性格タグ → 角丸、主色最大面積、字体ロール、ボイス — ルールは見える、ブラックボックスではない。
  • Logo アイソレーション既定 1× マーク高(厳格は 1.5×)。デジタル最小サイズはプリセット依存。
  • ステータス色は固定でブランド主色と分離;エラーはブランド色相を継承しません。
  • 「自動」= このタブの決定論ルール — クラウド LLM ブランドキットではありません。
  • プライバシー:生成・プレビュー・クリップボードコピーはローカル。Logo やブランドパックはアップロードしません。

例

サンプル読込:Northline Studio、SaaS、#0F6E8C、落ち着き+テクニカル、プロダクト preset。プレビュー:基礎、アイソレーション 1×、teal 主色と派生副色/アクセント、固定ステータス、字体ロール、8px 余白、OK/NG カード。Markdown と JSON も同期。

こんなときに

  • デザイナー雇う前に最初のビジュアルルールを書きたい個人サイト。
  • PDF だけでなく編集可能 Markdown をクライアントに渡すフリーランス。
  • Web・SNS・アプリ UI を同じアイソレーションと色比率で揃える小チーム。

Frequently asked questions

パレットツールとの違いは?

パレットはスウォッチや CSS token が中心。ここは Logo・字体・余白・例入りの多モジュール文書。より深い配色は Brand Color Scale や Smart Website Color Scheme を。

「自動」は AI ブランド生成と同じ?

いいえ。固定で見えるルール(性格→角丸/字体/ボイス、HEX→副色/アクセント)。モデル API には送りません。

構成プリセットは何を変える?

厳格は Logo アイソレーションと境界;プロダクトは token 向けモジュール;フレンドリーはボイスと接点もオン。モジュールは手動切替可。

正式な商標使用許諾になる?

なりません。出力は自社ブランドの作業下書き。法的助言でも他人のマーク使用許可でもありません。

オフのモジュールは JSON に残る?

モジュール flag は保存;プレビューと Markdown はオフ部分を省略し、有効分だけパートナーに見せます。

Word と PDF の書き出しはどう動く?

Word/PDF は画面プレビューと同じ見た目を html2canvas で捉え、.docx 画像または PDF ページに分割します。モーションデモは静止画に固定。生成後はローカル処理;ダウンロード時にライブラリを読み込みます。

Related tools

  • ブランド色スケールを生成 — 50–950パレットとCSSトークン
  • サイト配色方案 — 貼れるセマンティック CSS トークン
  • WCAGコントラストチェッカー — AA/AAA比率

このツールを共有

SNSで共有、リンクをコピー、または端末の共有機能を使えます。

XFacebookLinkedInRedditWhatsAppTelegram

https://onlinefreetools.org/ja/tools/brand-style-guide

お問い合わせ・フィードバック

分かりにくい点、不具合、不足があれば下にメッセージを書いてください。ツールに関する内容はすべて確認します。

メール: dailyonetools@outlook.com

References

  • WCAG 2.2 Understanding — Contrast (Minimum)
  • Material Design 3 — Styles
  • Carbon Design System — Color
  • NASA Brand Guidelines (structure reference)
  • docx — JavaScript library
  • pdf-lib
OnlineFreeTools.org · 学習プロジェクト · 継続的にイテレーション
について·開発ログ·プライバシー·利用規約·お問い合わせ