AppTalentHub の資料をつくるときの決まりごとと、そのまま使えるプレゼンテンプレートをまとめたページです。社内・業務委託・提携先の制作物に共通で適用します。

ロゴやキャラクターの画像そのものが必要な方は、素材集（ブランドアセット）をご覧ください。

プレゼンテンプレート

ブランド準拠のスライドテンプレートです。PowerPoint ではなく HTML1ファイル。ブラウザで開くだけで動き、ロゴとキャラクター画像も中に埋め込んであるので、ネットのない会場でも表示が崩れません。

テンプレートを開く（HTML）

複製するときは、リンクを右クリック →「名前を付けてリンク先を保存」。ダウンロードしたファイルの文言を書き換えれば、そのまま自分の資料になります。

使い方

  1. ファイルを複製して名前を変える
  2. <section class="slide"> 〜 </section> が1枚ぶん。中の文言を書き換える
  3. 不要な型は section ごと削除。増やすときは section ごとコピー
  4. ブラウザで開いて発表する
操作キー
次へ / 前へ→ / ←（クリックでも次へ）
全画面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つの型の制約が、すべて値として書いてあります。

DESIGN.md をダウンロード
  • 置き場所：プロジェクトのフォルダに AGENTS.md や CLAUDE.md と並べて置きます。エージェントが自動で読みます
  • 形式：awesome-design-md-jp（日本語UI向けの DESIGN.md 集）に準拠しています
  • 使い分け：中身はこのページと同じです。人が読むならこのページ、AIに渡すなら DESIGN.md

いちばん効くのは「新しいスライドを一から書かせない」ことです。テンプレートの型をコピーして文言だけ差し替えるよう指示すると、ブランドから外れません。この指示も DESIGN.md に書いてあります。

クレジット表記

社外で利用する場合は © AppTalentHub Inc. の表記をお願いします。素材の利用についてご不明な点があれば、お問い合わせフォームよりご連絡ください。

関連ページ：素材集（ロゴ・キャラクターのダウンロード）