DESIGN DIRECTION

図解で見せる

説明資料の矢印・線・手順を、話す順番に合わせて見せる動きです。

0.00秒

調整して指示を作る

値を変えると、見本と下の指示例・細かい指定・HTML・CSS が書き換わります。

長さ0.6秒

速さの変わり方

速さの変わり方とは

図解で見せる

矢印が伸びるArrow grow

箱と箱のあいだの矢印が、向きに沿って伸びていく。

AIへの指示例上の調整が入ります

スライド用（PowerPoint・Canva を操作するAIに）

「依頼」から「AIが要約」への矢印は、左から右へ伸びるように表示してください。長さは0.6秒で、最後はゆっくり止まる（イーズアウト）ようにしてください。

動画用（動画を作るAIや編集の依頼に）

2つの箱をつなぐ矢印を、左の箱から右の箱へ0.6秒で伸ばしてください。矢印の先は最後に現れます。速さの変わり方はイーズアウト（ease-out）。

細かい指定動画を作る人・細かく指示したい人向け

長さ: 0.6秒
速さの変わり方: イーズアウト（ease-out）
曲線の数値: cubic-bezier(0, 0, 0.58, 1)
変えるもの: 矢印の長さ 0% → 100%（左を基準に伸ばす）
順番: 箱を先に出し、矢印はあとから

HTML・CSSWebページや HTML のスライドを作る人向け。貼ればそのまま動きます

ページを開いたときに1回動きます。画面に入ったときに動かしたいときは、スクロールで現れるの JavaScript と組み合わせます。

<div class="fb-flow">
  <div class="fb-box">依頼</div>
  <div class="fb-arrow"></div>
  <div class="fb-box">AIが要約</div>
</div>

<style>
.fb-flow { display: flex; align-items: center; gap: 8px; }
.fb-box { padding: 12px 16px; border: 2px solid #ccc; border-radius: 8px; }
.fb-arrow {
  position: relative; width: 80px; height: 3px; background: #c25e1f;
  transform-origin: left;  /* 左から伸ばす */
  animation: fb-arrow 0.6s ease-out both;
}
.fb-arrow::after {  /* 矢印の先 */
  content: ""; position: absolute; right: -2px; top: -5px;
  border: 6px solid transparent; border-left: 9px solid #c25e1f; border-right: 0;
}
@keyframes fb-arrow {
  from { transform: scaleX(0); }
}

/* 端末で「動きを減らす」設定にしている人には動かさない */
@media (prefers-reduced-motion: reduce) {
  .fb-arrow { animation: none; transition: none; }
}
</style>

どう動くか: 箱を先に出しておき、矢印だけを始まりから終わりへ伸ばします。「ここからここへ」という流れを、目で追ってもらえます。
使う場面: 業務の流れ図、仕組みの説明、ビフォー・アフター。
やりすぎに注意: 矢印が多い図で全部を伸ばすと、どこを見ればよいか迷います。説明している矢印だけを伸ばします。

0.00秒

調整して指示を作る

値を変えると、見本と下の指示例・細かい指定・HTML・CSS が書き換わります。

長さ0.9秒

速さの変わり方

速さの変わり方とは

図解で見せる

線でつなぐConnect

2つの箱を結ぶ線が、片方から描かれていく。

AIへの指示例上の調整が入ります

スライド用（PowerPoint・Canva を操作するAIに）

関係図の2つの箱を結ぶ線は、片方の箱からもう片方へ描かれていくように表示してください。長さは0.9秒で、始めと終わりがゆっくりになる（イーズインアウト）ようにしてください。

動画用（動画を作るAIや編集の依頼に）

左の箱から右の箱へ、曲線を0.9秒で描いてつないでください（線を引くアニメーション）。速さの変わり方はイーズインアウト（ease-in-out）。

細かい指定動画を作る人・細かく指示したい人向け

長さ: 0.9秒
速さの変わり方: イーズインアウト（ease-in-out）
曲線の数値: cubic-bezier(0.42, 0, 0.58, 1)
変えるもの: 線の描かれた長さ 0% → 100%（つなぐ元から先へ）

HTML・CSSWebページや HTML のスライドを作る人向け。貼ればそのまま動きます

ページを開いたときに1回動きます。画面に入ったときに動かしたいときは、スクロールで現れるの JavaScript と組み合わせます。

<svg viewBox="0 0 300 120" width="400">
  <rect x="10" y="40" width="70" height="40" rx="8" fill="#fff" stroke="#ccc" />
  <rect x="220" y="40" width="70" height="40" rx="8" fill="#fff" stroke="#ccc" />
  <path class="fb-connect" d="M80 60 C150 0, 150 120, 220 60" fill="none" stroke="#c25e1f" stroke-width="3" pathLength="1" />
</svg>

<style>
/* 線の長さを1とみなし、隠していた分を少しずつ見せる */
.fb-connect {
  stroke-dasharray: 1;
  animation: fb-connect 0.9s ease-in-out both;
}
@keyframes fb-connect {
  from { stroke-dashoffset: 1; }
  to   { stroke-dashoffset: 0; }
}

/* 端末で「動きを減らす」設定にしている人には動かさない */
@media (prefers-reduced-motion: reduce) {
  .fb-connect { animation: none; transition: none; }
}
</style>

どう動くか: 片方の箱からもう片方へ、線がペンで描くように伸びていきます。2つの関係を、つながる瞬間で伝えられます。
使う場面: 関係図、ツール同士の連携の説明、人と人のつながり。
やりすぎに注意: 曲線のほうが、交差する線とも見分けやすくなります。線の色は1つの図で1〜2色までにします。

0.00秒

調整して指示を作る

値を変えると、見本と下の指示例・細かい指定・HTML・CSS が書き換わります。

次の手順までの間隔0.6秒色が付く長さ0.3秒

速さの変わり方

速さの変わり方とは

図解で見せる

手順の順に色が付くStep highlight

並んだ手順が、1つ目から順番に色付いていく。

AIへの指示例上の調整が入ります

スライド用（PowerPoint・Canva を操作するAIに）

手順の図は、1つ目から順番に0.6秒ずつ色が付くようにしてください。説明している手順が分かるようにします。色が付く長さは0.3秒で、最後はゆっくり止まる（イーズアウト）ようにしてください。

動画用（動画を作るAIや編集の依頼に）

3つの手順の箱を、左から順に0.6秒間隔で強調色に変えてください。1つの箱は0.3秒で色が付き、そのまま残します。速さの変わり方はイーズアウト（ease-out）。

細かい指定動画を作る人・細かく指示したい人向け

長さ: 0.3秒
速さの変わり方: イーズアウト（ease-out）
曲線の数値: cubic-bezier(0, 0, 0.58, 1)
時間差: 1手順 0.6秒ずつ
変えるもの: 箱の背景と枠をアクセント色に（付いた色は残す）

HTML・CSSWebページや HTML のスライドを作る人向け。貼ればそのまま動きます

ページを開いたときに1回動きます。画面に入ったときに動かしたいときは、スクロールで現れるの JavaScript と組み合わせます。

<ol class="fb-steps">
  <li>集める</li>
  <li>まとめる</li>
  <li>共有する</li>
</ol>

<style>
.fb-steps { display: flex; gap: 12px; list-style: none; padding: 0; }
.fb-steps li {
  padding: 12px 16px; border: 2px solid #ddd; border-radius: 8px;
  animation: fb-light 0.3s ease-out both;
}
/* 2つ目から 0.6秒ずつ遅らせる */
.fb-steps li:nth-child(2) { animation-delay: 0.6s; }
.fb-steps li:nth-child(3) { animation-delay: 1.2s; }
@keyframes fb-light {
  to { background: #fdf1e8; border-color: #c25e1f; color: #9c4715; }
}

/* 端末で「動きを減らす」設定にしている人には動かさない */
@media (prefers-reduced-motion: reduce) {
  .fb-steps li { animation: none; transition: none; }
}
</style>

どう動くか: 手順の箱を先に全部見せておき、説明に合わせて1つずつ強調の色に変えます。全体を見せたまま、今どこかを伝えられます。
使う場面: 手順の説明、研修資料、作業の流れの動画。
やりすぎに注意: 色が付いた手順は残したままにすると、どこまで進んだかが分かります。前の手順を元に戻すと、今の手順だけが目立ちます。

0.00秒

調整して指示を作る

値を変えると、見本と下の指示例・細かい指定・HTML・CSS が書き換わります。

長さ0.4秒

速さの変わり方

速さの変わり方とは

図解で見せる

吹き出しが出るCallout

指している所から、吹き出しが膨らむように現れる。

AIへの指示例上の調整が入ります

スライド用（PowerPoint・Canva を操作するAIに）

グラフの「ここが増加」の吹き出しは、指している所から膨らむように表示してください。長さは0.4秒で、少し行き過ぎてから戻って止まる（バック）ようにしてください。

動画用（動画を作るAIや編集の依頼に）

吹き出しを、しっぽの先を基準に60%の大きさから0.4秒で広げて出してください（同時にフェードイン）。速さの変わり方はバック（back）。

細かい指定動画を作る人・細かく指示したい人向け

長さ: 0.4秒
速さの変わり方: バック（back）
曲線の数値: cubic-bezier(0.34, 1.56, 0.64, 1)
変えるもの: 大きさ 60% → 100%・透明度 0% → 100%
広がる基準: しっぽの先（左下）

HTML・CSSWebページや HTML のスライドを作る人向け。貼ればそのまま動きます

ページを開いたときに1回動きます。画面に入ったときに動かしたいときは、スクロールで現れるの JavaScript と組み合わせます。

<p class="fb-callout">ここが増加</p>

<style>
.fb-callout {
  display: inline-block; padding: 8px 12px; border-radius: 8px;
  color: #fff; background: #c25e1f;
  transform-origin: left bottom;  /* しっぽの先から膨らむ */
  animation: fb-callout 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes fb-callout {
  from { opacity: 0; transform: scale(0.6); }
}

/* 端末で「動きを減らす」設定にしている人には動かさない */
@media (prefers-reduced-motion: reduce) {
  .fb-callout { animation: none; transition: none; }
}
</style>

どう動くか: 吹き出しのしっぽの先を基準に、小さい状態から広がって現れます。図のどこについての話かが、はっきり伝わります。
使う場面: グラフの注目点、画面の操作説明、補足の一言。
やりすぎに注意: 吹き出しの中の文は短く。長い説明は話すか、本文に書きます。

0.00秒

調整して指示を作る

値を変えると、見本と下の指示例・細かい指定・HTML・CSS が書き換わります。

1枚の長さ0.4秒ずらす間隔0.08秒

速さの変わり方

速さの変わり方とは

図解で見せる

タイルが順に並ぶTile stagger

格子に並んだタイルが、左上から順番に現れる。

AIへの指示例上の調整が入ります

スライド用（PowerPoint・Canva を操作するAIに）

アイコンのタイルは、左上から順番に少しずつ遅らせて並ぶように表示してください。1枚0.4秒、0.08秒ずつずらし、最後はゆっくり止まる（イーズアウト）ようにしてください。

動画用（動画を作るAIや編集の依頼に）

6枚のタイルを、左上から右下へ0.08秒ずつずらして、下から少し上がりながら出してください。1枚0.4秒、速さの変わり方はイーズアウト（ease-out）。

細かい指定動画を作る人・細かく指示したい人向け

長さ: 0.4秒
速さの変わり方: イーズアウト（ease-out）
曲線の数値: cubic-bezier(0, 0, 0.58, 1)
時間差: 1枚 0.08秒ずつ（左上から右下へ）
変えるもの: 下から 12px・透明度 0% → 100%

HTML・CSSWebページや HTML のスライドを作る人向け。貼ればそのまま動きます

ページを開いたときに1回動きます。画面に入ったときに動かしたいときは、スクロールで現れるの JavaScript と組み合わせます。

<div class="fb-tiles">
  <div></div><div></div><div></div>
  <div></div><div></div><div></div>
</div>

<style>
.fb-tiles { display: grid; grid-template-columns: repeat(3, 60px); gap: 8px; }
.fb-tiles div {
  height: 60px; border-radius: 8px; background: #f2e3d6;
  animation: fb-tile 0.4s ease-out both;
}
/* 2枚目から 0.08秒ずつ遅らせる */
.fb-tiles div:nth-child(2) { animation-delay: 0.08s; }
.fb-tiles div:nth-child(3) { animation-delay: 0.16s; }
.fb-tiles div:nth-child(4) { animation-delay: 0.24s; }
.fb-tiles div:nth-child(5) { animation-delay: 0.32s; }
.fb-tiles div:nth-child(6) { animation-delay: 0.4s; }
@keyframes fb-tile {
  from { opacity: 0; transform: translateY(12px); }
}

/* 端末で「動きを減らす」設定にしている人には動かさない */
@media (prefers-reduced-motion: reduce) {
  .fb-tiles div { animation: none; transition: none; }
}
</style>

どう動くか: タイルを左上から右下へ、少しずつ遅らせて出します。たくさんの項目を、一度にではなく流れで見せられます。
使う場面: サービス一覧、機能の紹介、アイコンの一覧。
やりすぎに注意: タイルが多いと待たされます。ずらす間隔を短くして、全体で1秒前後に収めます。

0.00秒

調整して指示を作る

値を変えると、見本と下の指示例・細かい指定・HTML・CSS が書き換わります。

1つの長さ0.4秒ずらす間隔0.12秒

速さの変わり方

速さの変わり方とは

図解で見せる

中心から広げるRadial expand

中心の言葉から、まわりの言葉が順番に広がって現れる。

AIへの指示例上の調整が入ります

スライド用（PowerPoint・Canva を操作するAIに）

中心の言葉を先に出し、まわりの4つの言葉を中心から広がるように順番に表示してください（マインドマップのように）。1つ0.4秒、0.12秒ずつずらし、少し行き過ぎてから戻って止まる（バック）ようにしてください。

動画用（動画を作るAIや編集の依頼に）

中心のテーマを出したあと、まわりの4つの要素を小さい状態から0.4秒で広げて出してください。0.12秒ずつずらし、速さの変わり方はバック（back）。

細かい指定動画を作る人・細かく指示したい人向け

長さ: 0.4秒
速さの変わり方: バック（back）
曲線の数値: cubic-bezier(0.34, 1.56, 0.64, 1)
時間差: 1つ 0.12秒ずつ（時計回り）
変えるもの: 大きさ 40% → 100%・透明度 0% → 100%
順番: 中心は先に出しておく

HTML・CSSWebページや HTML のスライドを作る人向け。貼ればそのまま動きます

ページを開いたときに1回動きます。画面に入ったときに動かしたいときは、スクロールで現れるの JavaScript と組み合わせます。

<div class="fb-map">
  <b class="fb-center">AI活用</b>
  <span>要約</span><span>翻訳</span><span>下書き</span><span>分析</span>
</div>

<style>
.fb-map { display: grid; grid-template-areas: ". a ." "d c b" ". e ."; gap: 12px; place-items: center; }
.fb-center { grid-area: c; }
.fb-map span:nth-of-type(1) { grid-area: a; }
.fb-map span:nth-of-type(2) { grid-area: b; animation-delay: 0.12s; }
.fb-map span:nth-of-type(3) { grid-area: e; animation-delay: 0.24s; }
.fb-map span:nth-of-type(4) { grid-area: d; animation-delay: 0.36s; }
.fb-map span {
  padding: 6px 12px; border-radius: 99px; background: #fdf1e8;
  animation: fb-branch 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes fb-branch {
  from { opacity: 0; transform: scale(0.4); }
}

/* 端末で「動きを減らす」設定にしている人には動かさない */
@media (prefers-reduced-motion: reduce) {
  .fb-map span { animation: none; transition: none; }
}
</style>

どう動くか: 中心のテーマを先に出し、まわりの要素を時計回りに順番に出します。マインドマップのように、話の広がりを見せられます。
使う場面: テーマの全体像、できることの一覧、話の構成の紹介。
やりすぎに注意: まわりの要素は4〜6個までにします。多いと一つひとつが小さくなり、読みにくくなります。

このページを共有する