デザインガイドライン株式会社coiai

デザインガイドラインをエージェント型AIのために作成しました。ヒトのためのガイドラインよりも禁止事項をより充実させました。このスライドはMark Down 形式で作ったものをHTMLにしてPDFとして書き出したものです。

Transcript

1. デザイン ガイドライン 社内外のあらゆる制作物に一貫性を持たせるためのデザイン指針 2026.03 初版
2. 01 — ブランドパーソナリティ 属性 coiaiらしさ coiaiらしくない トーン 優しくて品がある 尖りすぎて攻撃的 態度 カジュアルだが専門性がある 馴れ馴れしい / 権威的 姿勢 弱者の側に立つ、開放的 囲い込み、排他的 ものづくり 手を動かす、美しく作る 企画書だけ、妥協する 発信 知見を惜しみなく共有する 情報を有料で囲い込む
3. 02 — カラーパレット（ライト） プライマリ coiai Navy #2434A9 coiai Text #1E1E1F coiai White #FFFFFF coiai Light Gray #F5F5F7 coiai Gray #6C6C6D アクセント Accent Red #E83323 Accent Yellow #FBEC4F Accent Green #60D03E 使用ルール Navy はCTA・アイコン・リンクに使用 アクセントは画面全体の5%以下 背景は原則 Light Gray、区切りに White
4. 02 — カラーパレット（ダーク） プライマリ coiai Text White #F5F5F7 coiai Dark #000000 coiai Dark Gray #161617 coiai Mid Gray #86868B 注意事項 黒背景にNavyテキストを置かない 背景は原則 Dark、区切りに Dark Gray アクセントカラーはライトモードと共通
5. 03 — タイポグラフィ 見出し（日本語） — Noto Sans JP Bold テクノロジーで、全員に武器を。 本文（日本語） — Noto Sans JP Regular 大手比30〜50%のコストで、同等品質を提供します。 見出し（英語） — Helvetica Bold Build with Purpose. コード — JetBrains Mono const ai = new LlamaModel("70B") PC サイズ体系 h1 64px bold h2 56px bold h3 40px bold h4 24px bold 本 文 16px 注 釈 14px スタイルルール 見出しの色はText Colorと同様 本文の行間は 1.8
6. 04 — ロゴ使用規定 ロゴ表記 クリアスペース: ロゴ高さの50%以上を確保 表記ルール 禁止事項 正式名称: 株式会社coiai ロゴタイプ: coiai（すべて小文字） 大文字表記は使用しない ロゴの色を勝手に変更しない ロゴを変形・回転させない 低解像度のロゴを使用しない 背景とのコントラストが不十分な配置をしない
7. 05 — トーン・オブ・ボイス カジュアルだが専門性のある言葉遣い。パンクだが品がある。 場面 トーン 例 技術記事 正確で簡潔 「LlamaベースのRAG構築で社内文書検索を実装した」 SNS カジュアル、リアル 「ARデモ、家具の影がどうしても浮く問題と3時間格闘した」 営業資料 丁寧、数字で語る 「大手比30〜50%のコストで、同等品質を提供します」 企業理念 情熱的、ストーリー 「どんな底辺にいる人間にも、幸せを勝ち取る手段を届ける」 言葉遣い 「弊社」ではなく「coiai」または「私たち」 過度な敬語よりも明快さを優先 「できません」より「こういう方法なら実現できます」
8. 06 — レイアウト原則 グリッド 見出し 角の処理 余白 情報の構造化 要素 Web: 12カラム、最大幅 1200px モバイル: シングルカラム、左右 16px 原則左寄せ h2 はセクションでまとめる ボタン: 完全な角丸 カード: 16px の角丸 大きく余白をとる 比較情報はテーブルで整理 箇条書きは5項目以内 カードは3つ以上の場合のみ クリック可能なものにはホバーアクション
9. 07 — ホバーアクションと禁止事項 ホバーアクション transform: scale(1.01); transition: transform 0.3s ease; 禁止事項 クリック可能な要素にのみ適用 必ず ease をつけて緩急をつける 1.01倍に拡大する ボタンはカラーを明るくする クリックできないものにホバーアクション シャドー（box-shadow）の使用 中央寄せ 絵文字の使用 カードにBorderの使用 背景と同色のカード フリー素材の多用
10. 08 — 写真・画像と媒体別の適用 画像のスタイル 媒体別 Web Navy + White ベース / Noto Sans JP X テキスト主体、ブランドカラーを意識 Instagram ビジュアル品質最優先、統一感 YouTube Navyアクセント、フォント統一 印刷物 CMYK確認 / 最小フォント 8pt 写真と背景が同色の場合はborderを用いる 背景色は完全な白ではなくライトグレー 過度なフィルター加工禁止 無関係なイメージ画像での装飾禁止
11. 株式会社coiai 東京都練馬区3-6-9 オンプレミスAI構築 / XR・AR開発 / Web・アプリ開発 / 基幹システム開発 coiai.net/contact