AppTalentHub の資料をつくるときの決まりごとと、そのまま使えるプレゼンテンプレートをまとめたページです。社内・業務委託・提携先の制作物に共通で適用します。
ロゴやキャラクターの画像そのものが必要な方は、素材集（ブランドアセット）をご覧ください。
プレゼンテンプレート
ブランド準拠のスライドテンプレートです。PowerPoint ではなく HTML1ファイル。ブラウザで開くだけで動き、ロゴとキャラクター画像も中に埋め込んであるので、ネットのない会場でも表示が崩れません。
複製するときは、リンクを右クリック →「名前を付けてリンク先を保存」。ダウンロードしたファイルの文言を書き換えれば、そのまま自分の資料になります。
使い方
- ファイルを複製して名前を変える
<section class="slide">〜</section>が1枚ぶん。中の文言を書き換える- 不要な型は
sectionごと削除。増やすときはsectionごとコピー - ブラウザで開いて発表する
| 操作 | キー |
|---|---|
| 次へ / 前へ | → / ←（クリックでも次へ） |
| 全画面 | F |
| PDFにする | Ctrl + P → 送信先を「PDFに保存」 |
スライドの8つの型
テンプレートには、この8種類が1枚ずつ入っています。必要な型だけ残して使ってください。
| 型 | 用途 | 指定 |
|---|---|---|
| A 表紙 | デッキに1枚だけ。白ロゴを載せる | slide grad |
| B メッセージ | いちばん伝えたいことを1文で | slide tint |
| C 番号リスト | 手順・項目。最大4つ | slide |
| D 大見出し | 章の変わり目。3〜10文字で言い切る | slide tint |
| E 注意・強調 | 覚えてほしいこと／やってはいけないこと | callout |
| F 休憩 | 区切り。キャラクターを添える | slide grad |
| G 表 | 時間割・比較・一覧。最大6行 | table tt |
| H 締め | ねぎらい・次回予告 | slide |
カラー
使う色は2色だけです。他の色を足さないでください。図やグラフで色数が必要な場合も、この2色の濃淡で表現します。
| 役割 | コード | 使うところ |
|---|---|---|
| メインブルー | #1f5b8c | 見出し・本文の強調・ボタン・帯 |
| アクセント | #38bdf8 | ラベル・下線・数字・リンク的な強調 |
| グラデーション | #1f5b8c → #38bdf8 | 表紙・区切り・番号バッジ（135度） |
| 背景（淡） | #e8f4f8 | 面の塗り分け・タグ |
| 背景（白） | #ffffff | 本文スライドの基本 |
| 警告 | #e11d48 | 事故につながることだけ。多用しない |
タイポグラフィ
- 欧文：Space Grotesk（Bold）— ロゴと同じ書体。数字・英単語に適用されます
- 和文：ヒラギノ角ゴ ProN → Yu Gothic → Meiryo → Noto Sans JP の順でフォールバック
- 字詰め：
font-feature-settings:"palt"でかなと約物を詰める - 字間：
letter-spacing: 0.02em（詰めたぶんを少し戻して読みやすく） - 行間：本文
1.65／ 見出し1.2〜1.4
この4つの組み合わせが、日本語の資料をきれいに見せる最小構成です。テンプレートには設定済みなので、触る必要はありません。
文字量のルール
ブランド準拠でいちばん効くのは、実は色でも書体でもなく文字量です。投影されたスライドは「読む」ものではなく「見た瞬間に伝わる」ものにします。
- 1スライド＝1メッセージ。2つ言いたくなったら2枚に分ける
- 1枚100字が目安。多くても150字まで
- 箇条書きは4項目まで。5つ以上になったら分割する
- 表は6行まで
- 詳しい手順は配布資料に逃がす。スライドは看板に徹する
キャラクターの使いどころ
資料で使うのはラピットくんです。にぎやかしで置かないでください。場面と意味が合うときだけ使います。
- 合う場面：休憩あけ、着手をうながすところ、ハンズオンの導入、締めのねぎらい
- ポーズは素材集から場面に合うものを選ぶ（サムズアップ、タスク完了、ひらめき など）
- 1つのデッキに2〜3枚まで。毎ページに出すと軽く見えます
- 透過PNGを選ぶこと。背景が白く塗られた画像は、色面のスライドで四角く浮きます
やってはいけないこと
- ロゴ・キャラクターの改変（色替え、パーツの追加・削除、比率の変更）
- ロゴをコントラストの低い背景に置く（白背景か、十分暗い背景で）
- 指定2色以外の色を足す
- 警告色（赤）を強調目的で使う。赤は事故につながることだけ
- 小さい文字を詰め込む。読めないスライドは無いのと同じ
AIエージェント向けの仕様書（DESIGN.md）
Claude や ChatGPT に資料をつくらせるときは、このページを読ませる代わりに DESIGN.md を渡してください。ここまでのルールを機械が解釈できる形にまとめた1ファイルです。色コード、フォント指定、文字サイズの階層、8つの型の制約が、すべて値として書いてあります。
- 置き場所：プロジェクトのフォルダに
AGENTS.mdやCLAUDE.mdと並べて置きます。エージェントが自動で読みます - 形式：awesome-design-md-jp（日本語UI向けの DESIGN.md 集）に準拠しています
- 使い分け：中身はこのページと同じです。人が読むならこのページ、AIに渡すなら DESIGN.md
いちばん効くのは「新しいスライドを一から書かせない」ことです。テンプレートの型をコピーして文言だけ差し替えるよう指示すると、ブランドから外れません。この指示も DESIGN.md に書いてあります。
クレジット表記
社外で利用する場合は © AppTalentHub Inc. の表記をお願いします。素材の利用についてご不明な点があれば、お問い合わせフォームよりご連絡ください。
関連ページ：素材集（ロゴ・キャラクターのダウンロード）
