弊社のデザインガイドラインをAIでもわかるようにMarkDown形式で作成しました。
今までプロダクトやサービスのUI設計を任されることがあり、その際はデザインガイドラインをFigmaにエンジニアにわかるように設定していたのですが、エージェント型AIが普及するにあたり、ヴィジュアルでわかるよりも文章でわかるものを用意する必要を感じ制作しました。
実際に作ってみると、ヴィジュアルを言葉として理解するのは難しいという当たり前のことがわかったのと、LLMと人間の違いをまた見たなと思いました。
人間用デザインガイドライン
今回作成したガイドラインは人間にもみやすいようにヴィジュアルでも作成しました。
なるべく変更がしやすいようにMarkDown形式で作成したものをHTMLに変換し、PDFで書き出すという手順をとっています。
マークダウンのデザインガイドライン
design-guideline.md
# 株式会社coiai デザインガイドライン
> 社内外のあらゆる制作物に一貫性を持たせるためのデザイン指針。
---
## 1. ブランドアイデンティティ
### ブランドパーソナリティ
| 属性 | coiaiらしさ | coiaiらしくない |
|------|-----------|---------------|
| トーン | 優しく品がある | 尖りすぎて攻撃的 |
| 態度 | カジュアルだが専門性がある | 馴れ馴れしい / 権威的 |
| 姿勢 | 弱者の側に立つ、開放的 | 囲い込み、排他的 |
| ものづくり | 手を動かす、美しく作る | 企画書だけ、妥協する |
| 発信 | 知見を惜しみなく共有する | 情報を有料で囲い込む |
---
## 2. カラーパレット
### プライマリカラー
| 名称 | HEX | 用途 |
|------|-----|------|
| **coiai Navy** | `#2434A9` | アクセント、ブランドの主色、リンクテキストにも使用 |
| **coiai Text** | `#1E1E1F` | 本文テキスト |
| **coiai White** | `#FFFFFF` | 背景 |
| **coiai Light Gray** | `#F5F5F7` | 背景（セクション区切り） |
| **coiai Gray** | `#6C6C6D` | キャプション、補足テキスト |
### アクセントカラー（必要に応じて）
| 名称 | HEX | 用途 |
|------|-----|------|
| **Accent Red** | `#E83323` | 警告、重要な強調（控えめに使用） |
| **Accent Yellow** | `#FBEC4F` | 赤より低い強調表現 |
| **Accent Green** | `#60D03E` | 成功、ポジティブな指標 |
### ダークモード
#### プライマリカラー（ダークモード）
| 名称 | HEX | 用途 |
|------|-----|------|
| **coiai Text White** | `#F5F5F7` | 本文テキスト |
| **coiai Dark** | `#000` | 背景 |
| **coiai Dark Gray** | `#161617` | 背景（セクション区切り、カード） |
| **coiai Mid Gray** | `#86868B` | キャプション、補足テキスト |
### 使用ルール（共通）
- 見出しはText Color と同様
- 背景は原則 White（ダークモード時は Dark）。情報量が多い場合に Light Gray / Dark Gray でセクションを分ける
- Navy はCTAボタン・アイコンに使用。本文には使わない
- アクセントカラーは画面全体の5%以下に抑える
- 黒背景にNavyテキストを置かない（ダークモードでは Navy Light を使用すること）
---
## 3. タイポグラフィ
### フォント指定
| 用途 | フォント | フォールバック |
|------|---------|-------------|
| **見出し（日本語）** | Noto Sans JP Bold | Hiragino Sans, sans-serif |
| **本文（日本語）** | Noto Sans JP Regular | Hiragino Sans, sans-serif |
| **見出し（英語）** | Helvetica Bold | Helvetica Neue, sans-serif |
| **本文（英語）** | Helvetica Regular | Helvetica Neue, sans-serif |
| **コード・技術表記** | JetBrains Mono | monospace |
### サイズ体系
#### PC版
| 要素 | サイズ | 用途 |
|------|--------|------|
| h1 | 64px bold | ページタイトル、スライド表紙 |
| h2 | 56px bold | セクション見出し |
| h3 | 40px bold | サブセクション |
| h4 | 24px bold | 小見出し |
| 本文 | 16px | 通常テキスト |
| キャプション | 14px | 表注釈、補足情報 |
#### スマホ版
| 要素 | サイズ | 用途 |
|------|--------|------|
| h1 | 36px bold | ページタイトル、スライド表紙 |
| h2 | 32px bold | セクション見出し |
| h3 | 24px bold | サブセクション |
| h4 | 20px bold | 小見出し |
| 本文 | 16px | 通常テキスト |
| キャプション | 14px | 表注釈、補足情報 |
### スタイルルール
- 見出し（h2〜h4）の色は `#2F4E8F`
- 本文の行間は 1.8（可読性重視）
## 5. ロゴ使用規定
### ロゴ表記
- 正式名称: **株式会社coiai**
- ロゴタイプ: **coiai**（すべて小文字）
- 大文字表記（COIAI, Coiai）は使用しない
### 余白（クリアスペース）
- ロゴの周囲にはロゴ高さの50%以上の余白を確保する
- ロゴの上に他の要素を重ねない
### 禁止事項
- ロゴの色を勝手に変更しない
- ロゴを変形・回転させない
- 低解像度のロゴを使用しない
- 背景とのコントラストが不十分な配置をしない
---
## 6. トーン・オブ・ボイス
### 文章のトーン
> **カジュアルだが専門性のある言葉遣い。パンクだが品がある。**
| 場面 | トーン | 例 |
|------|--------|-----|
| 技術記事 | 正確で簡潔、専門用語は恐れず使う | 「LlamaベースのRAG構築で社内文書検索を実装した」 |
| SNS | カジュアル、制作過程をリアルに | 「ARデモ、家具の影がどうしても浮く問題と3時間格闘した」 |
| 営業資料 | 丁寧だが堅すぎない、数字で語る | 「大手比30〜50%のコストで、同等品質を提供します」 |
| 企業理念 | 情熱的、ストーリーで伝える | 「どんな底辺にいる人間にも、幸せを勝ち取る手段を届ける」 |
### 言葉遣いのルール
- 「弊社」ではなく「coiai」または「私たち」
- 過度な敬語よりも明快さを優先する
- 技術用語は適切に使い、必要に応じて簡潔な補足を添える
- 競合の悪口・比較広告はしない
- 「できません」より「こういう方法なら実現できます」
---
## 7. レイアウト原則
## 見出し
- 原則左寄せ
### 余白
- 大きく余白をとる。
### グリッド
- Web: 12カラムグリッド、最大幅 1200px
- モバイル: シングルカラム、左右 16px のパディング
### 角の処理
- ボタンは完全な角丸
- カードは16pxの角丸
### 要素
- h2 はセクションでまとめる
- カードデザインは３つ以上のコンテンツがある場合のみ使用する。
- クリック可能なものはホバーアクションを設定する。
### 情報の構造化
- 比較情報はテーブルで整理する
- 箇条書きは5項目以内を目安にする
- 図や構造は ASCII / Mermaid で表現し、不要な装飾画像は使わない
## ホバーアクション
- クリック可能な要素にホバー時に行う
- 必ずeaseをつけて緩急をつける
- 1.01倍大きくする
- ボタンはカラーを明るくする
## 禁止事項
- クリックできないものにホバーアクションをつけない。
- シャドーの使用
- 中央寄せ
---
## 8. 写真・画像のスタイル
- 写真と背景が同色の場合はborderを用いる。
- なるべく背景色は完全な白ではなく、ライトグレーを用いる。
### 禁止事項
- 絵文字の使用は禁止
- フリー素材の多用（「いかにもストックフォト」な写真）
- 過度なフィルター加工
- 無関係なイメージ画像での装飾
- カードにBorderの使用禁止
- 背景と同色とカードの禁止
---
## 9. 媒体別の適用
### Web（coiai.net）
- カラー: Navy + White ベース
- フォント: Noto Sans JP / Helvetica
### SNS
- **X**: テキスト主体。画像/動画付きの場合はブランドカラーを意識
- **Instagram**: ビジュアル品質を最優先。フィードの統一感を保つ
- **YouTube**: サムネイルにNavyのアクセントを入れ、フォントを統一
### 印刷物（チラシ・名刺）
- CMYK変換時の色指定を確認すること
- Navy の CMYK 参考値: C85 M60 Y10 K20
- 最小フォントサイズ: 8pt
---
## 10. お問い合わせ情報フッター（共通）
営業資料・チラシの末尾には以下を統一フォーマットで記載
```
株式会社coiai
- 所在地: 東京都練馬区3-6-9
- 事業内容: オンプレミスAI構築 / XR・AR開発 / Web・アプリ開発 / 基幹システム開発
- お問い合わせ: coiai.net/contact
```
---
## 更新履歴
| 日付 | 内容 |
|------|------|
| 2026-03-27 | 初版作成 |
Leave a Reply