本文へ移動
cccskills
無料GitHub で公開

japanese-brand-design

Japanese brand design guidelines with traditional color palettes (伝統色), typography (ゴシック体/明朝体), ma (間) spacing, wabi-sabi (侘寂) aesthetics, and logo design for Japanese characters. Triggers on requests for 和風デザイン, ブランドデザイン, 伝統色, 日本語タイポグラフィ, ロゴデザイン, 配色ガイド.

インストール方法を見る

含まれるファイル(2)

  • SKILL.md8.5 KB
  • palettes/traditional-colors.md8.0 KB

SKILL.md(原文)

インストールする前に、エージェントに与えられる指示の中身を確認できます。

日本語ブランドデザイン ガイドラインスキル

概要

日本の美意識・伝統文化に根ざしたブランドデザインガイドラインを生成するスキルです。伝統色パレット、日本語タイポグラフィ、間(ma)の設計原則、侘寂の美学を統合的に活用し、日本らしいブランドアイデンティティを構築します。

伝統色パレット

日本の伝統色を基調としたブランドカラーの基本パレットです。

色名HEX印象・用途
藍色(あいいろ)#264348信頼・誠実。企業ブランド、ヘッダー
茜色(あかねいろ)#B7282E情熱・活力。アクセント、CTA
桜色(さくらいろ)#FEDFE1優美・柔和。背景、女性向け
若草色(わかくさいろ)#B9D08B成長・新鮮。環境、ヘルスケア
山吹色(やまぶきいろ)#F8B500豊穣・注目。警告、ハイライト
藤色(ふじいろ)#BAA5C8上品・神秘。プレミアム、クリエイティブ
墨色(すみいろ)#343434重厚・洗練。テキスト、フッター
金色(きんいろ)#C9A84C高級・伝統。装飾、プレミアムライン

詳細な伝統色一覧は palettes/traditional-colors.md を参照してください。

日本語タイポグラフィ ガイドライン

書体の選択

書体特徴推奨用途代表フォント
ゴシック体均一な線幅、モダン、視認性が高い見出し、UI、Web本文Noto Sans JP, BIZ UDGothic, 游ゴシック
明朝体横細・縦太、伝統的、可読性が高い長文本文、格式ある文書、印刷物Noto Serif JP, 游明朝, 源ノ明朝
丸ゴシック体角が丸い、親しみやすいカジュアルなUI、子供向けM PLUS Rounded 1c, ヒラギノ丸ゴ

フォントペアリング(日本語 + 欧文)

日本語フォント欧文フォント印象
Noto Sans JPInter / Robotoモダン・クリーン
Noto Serif JPPlayfair Display / Cormorantエレガント・格式
游ゴシックHelvetica Neue / SF Proビジネス・プロフェッショナル
M PLUS Rounded 1cNunito / Quicksandカジュアル・親しみ

テキスト階層

h1: 32px / font-weight: 700 / letter-spacing: 0.05em / 明朝体 or ゴシック体
h2: 24px / font-weight: 700 / letter-spacing: 0.04em
h3: 20px / font-weight: 600 / letter-spacing: 0.03em
本文: 16px / font-weight: 400 / letter-spacing: 0.05em / line-height: 1.8
キャプション: 14px / font-weight: 400 / letter-spacing: 0.04em
注釈: 12px / font-weight: 400

行間・字間の設定

  • 行間(line-height): 日本語本文は 1.8〜2.0 を推奨(欧文より広めに取る)
  • 字間(letter-spacing): 0.04em〜0.08em で読みやすさを確保
  • 段落間: 本文の 1.5〜2.0 倍の余白を設ける
  • 禁則処理: 句読点・閉じ括弧が行頭に来ないよう word-break: keep-all を考慮

間(ma)— 余白の設計原則

「間」は日本の美意識の根幹を成す概念です。単なる「空き」ではなく、要素間の関係性を定義する積極的なデザイン要素として扱います。

間の三原則

  1. 引き算の美学: 要素を足すのではなく、不要な要素を引くことで本質を際立たせる
  2. 呼吸する余白: 余白は「無」ではなく「気配」。コンテンツが呼吸できる空間を確保する
  3. 関係性の表現: 要素間の距離で、関連性の強弱を視覚的に表現する

実装ガイドライン

要素推奨余白説明
セクション間80px〜120px大きな間で区切りを明確に
見出し上部48px〜64px新しいトピックの始まりを示す
見出し下部16px〜24px見出しと本文の近接性を保つ
段落間24px〜32px読みやすいリズムを生む
カード内パディング24px〜40px内容に呼吸する余裕を与える

侘寂(wabi-sabi)の美学

三つの美意識

概念意味デザインへの応用
不完全の美完璧でないものに宿る美しさ手書き風要素、非対称レイアウト、テクスチャの活用
簡素余計なものを削ぎ落とした本質的な美ミニマルなUI、限定的な色数、必要最小限の装飾
自然さ人工的でない、有機的な美しさ自然素材のテクスチャ、有機的な曲線、季節感の反映

デザインルール

  • 色数の制限: メインカラー1色 + アクセント1色 + 無彩色で構成する
  • テクスチャの活用: 和紙、墨、筆のかすれなど自然な質感を取り入れる
  • 非対称バランス: 完全な左右対称を避け、動きのあるレイアウトを心がける
  • 季節の反映: 四季に応じた色彩・モチーフを取り入れる

ロゴデザイン ガイドライン

漢字ロゴ

  • 筆文字スタイル: 書道の力強さ・躍動感を活かす。飲食・伝統文化向け
  • 角ゴシックスタイル: 現代的・力強い印象。テクノロジー・メーカー向け
  • 明朝スタイル: 格式・信頼感。金融・法律・高級ブランド向け

ひらがなロゴ

  • 柔らかい曲線: ひらがなの有機的な曲線を活かし、親しみやすさを表現
  • カスタムレタリング: 既存フォントをベースにオリジナルの調整を加える
  • 余白の確保: ひらがなは画数が少ないため、周囲の間を広めに取る

ロゴ設計の注意事項

  1. 縦書き・横書き両対応: 日本語ロゴは縦横両方の配置を想定して設計する
  2. 小さいサイズでの視認性: ファビコン・SNSアイコンサイズでも判読できるか確認
  3. 背景色の考慮: 明背景・暗背景の両方で使えるバリエーションを用意する
  4. 英語表記との併記: 海外展開を見据え、英語ロゴタイプも同時にデザインする

ブランドボイス ガイドライン

トーン設定

ブランドの性格推奨トーン語尾・表現
格式・伝統丁寧・荘厳です・ます調、漢語多め
親しみ・温かみ柔らかい・包容的です・ます調、やまとことば多め
先進・革新シャープ・簡潔体言止め、短文、カタカナ活用
遊び・創造カジュアル・自由くだけた表現、オノマトペ活用

ブランドボイス定義テンプレート

## ブランドボイス定義書

### 私たちは…
- 【形容詞1】で【形容詞2】な存在です
- 【ブランドの信念・ミッション】

### 話し方
- **使う言葉**: 【例: やまとことば中心、専門用語は避ける】
- **使わない言葉**: 【例: 上から目線の表現、過度なカタカナ語】
- **文体**: 【です・ます調 / だ・である調 / 体言止め】

### トーンの幅
- 最もフォーマル: 【例: 公式プレスリリース】
- 標準: 【例: Webサイト・パンフレット】
- 最もカジュアル: 【例: SNS投稿】

生成時の確認事項

ブランドデザインガイドラインを作成する前に、以下を確認してください:

  1. 業種・業態: 何のブランドか(飲食、テクノロジー、伝統工芸等)
  2. ターゲット: 主要な顧客層(年齢、性別、趣味嗜好)
  3. ブランドの性格: キーワード3〜5個(例: 信頼、革新、温かみ)
  4. 和の度合い: 伝統寄り / モダン和風 / 和洋折衷
  5. 使用媒体: Web / 印刷物 / 店舗 / パッケージ
  6. 既存素材: 既にあるロゴ・カラーなどの制約

レビュー

まだレビューはありません。使ってみた感想をお寄せください。

同じリポジトリのスキル

概要と使いどころ

algorithmic-art-jp

無料日本語概要

Japanese algorithmic and generative art skill covering traditional pattern generation (wagara), calligraphy simulation, zen garden generators, and mathematical patterns from Japanese art. Triggers on requests for 和柄生成, ジェネラティブアート, アルゴリズミックアート, 伝統紋様パターン, Japanese generative art.

LinkX-Japan/ai-souken-workflows62026年3月12日 更新

article-writer-jp

無料日本語概要

Japanese tech article writer with non-duplicate H2/H3 structure design, content generation, and image TODO placeholders. Triggers on requests for 記事作成, 記事を作って, 記事を書いて, 〇〇の記事, テック記事, 解説記事, ブログ記事作成.

LinkX-Japan/ai-souken-workflows62026年3月12日 更新

canvas-design-jp

無料日本語概要

Japanese-inspired canvas and graphic design skill for HTML5 Canvas and SVG, covering traditional aesthetics (ma, wabi-sabi, yugen), calligraphy, washi textures, traditional patterns, and seasonal motifs. Triggers on requests for 和風デザイン, Canvas描画, SVGイラスト, 日本画風, Japanese-inspired graphics.

LinkX-Japan/ai-souken-workflows62026年3月12日 更新

doc-coauthoring-jp

無料日本語概要

Japanese document co-authoring and editing assistant with proofreading checklist, keigo adjustment, essay structure patterns (起承転結, PREP), and revision tracking. Triggers on requests for 文章推敲, 共同執筆, 文章校正, 敬語調整, 文体統一, レビュー依頼, ドキュメント編集.

LinkX-Japan/ai-souken-workflows62026年3月12日 更新

docx-jp

無料日本語概要

Generate Japanese Word documents (.docx) using python-docx with proper Japanese fonts, vertical writing (縦書き), ruby text (ふりがな), and business templates. Triggers on requests to create Word文書, 見積書docx, 請求書docx, 日本語Word, 縦書き文書, ビジネス文書Word.

LinkX-Japan/ai-souken-workflows62026年3月12日 更新

frontend-design-jp

無料日本語概要

Japanese frontend and web design skill covering typography, vertical writing, form handling, accessibility (JIS X 8341-3), and common Japanese UI patterns. Triggers on requests for 日本語Webデザイン, フロントエンド, 和文タイポグラフィ, Japanese web design.

LinkX-Japan/ai-souken-workflows62026年3月12日 更新

LinkX-Japan のスキルをすべて見る

このスキルの問題を報告する