クリスタのキーフレームでできること7つ｜動かし方と使えない時の原因を整理！

クリスタでアニメーションを作るとき、キーフレームを使うと、1枚ずつ絵を描かなくてもレイヤーの位置や大きさを時間に合わせて変化させられます。

ただし、セル指定やタイムラインの操作と混ざりやすいため、最初は「どの機能で何が動くのか」が分かりにくいです。

クリスタのキーフレームは、レイヤーそのものを動かす機能であり、絵柄を自動で描き変える機能ではありません。

この記事では、基本的な考え方から設定手順、表示されない時の原因、自然に見せるための調整まで、初心者が迷いやすい順に整理します。

ゲームキーボードを美しく飾れるスタンド

クリスタのキーフレームでできること7つ

クリスタのキーフレームは、タイムライン上の特定フレームに状態を記録し、別のフレームまでの変化を自動でつなぐ機能です。

レイヤーを移動できる

キーフレームを使うと、同じ絵を左から右へ移動させたり、上から下へ落としたりできます。

たとえばキャラクターの顔パーツ、吹き出し、背景素材、装飾アイコンなどを、時間に合わせてスライドさせる用途に向いています。

重要なのは、動かしたい絵を描き直すのではなく、レイヤーの表示位置を変えているという点です。

そのため、歩き方や表情の変化のような絵そのものの変化は、セル指定や別レイヤーの切り替えと組み合わせる必要があります。

拡大縮小できる

キーフレームでは、レイヤーを少しずつ大きくしたり小さくしたりする表現も作れます。

キャラクターを画面に近づける演出、文字をポップに表示する演出、背景をゆっくりズームする演出に使いやすいです。

拡大率を大きく変えすぎると画像の粗さが目立つことがあるため、元画像は仕上がりサイズより少し大きめに用意すると安定します。

イラストを自然に見せたい場合は、急激な拡大よりも、小さな変化を長めのフレームで見せるほうが扱いやすいです。

回転できる

キーフレームでは、レイヤーや素材を回転させる動きも記録できます。

小物をくるっと回す演出、カメラが傾くような演出、背景の一部を揺らす表現などに使えます。

回転の中心がずれていると、不自然に大きく振り回されて見えることがあります。

回転を使うときは、中心点の位置を確認し、どこを軸に動かしたいのかを先に決めると調整しやすくなります。

不透明度を変えられる

キーフレームでは、レイヤーの不透明度を時間に合わせて変化させることもできます。

フェードイン、フェードアウト、光の点滅、半透明の効果表示などは、不透明度の変化だけでも作れます。

静止画に少しだけ動きを加えたい場合、不透明度のキーフレームは初心者でも失敗しにくい表現です。

特にSNS用の短い動画やアイキャッチ風の演出では、移動よりも不透明度の変化のほうが上品に見えることがあります。

2Dカメラを動かせる

2Dカメラフォルダーを使うと、絵そのものを変形せずに、画面を撮影する範囲を動かすようなカメラワークを作れます。

背景をズームしたり、画面全体を横へ流したり、キャラクターに寄るような演出を作る場合に便利です。

通常レイヤーを直接動かす方法とは違い、2Dカメラは画面の見え方を変えるための機能です。

補間を選べる

キーフレームの補間は、始点から終点までの変化の仕方を決める設定です。

一定値、等速、滑らかのように変化の種類を選べるため、同じ移動でも見た目の印象が変わります。

カクッと切り替えたい時は一定値、機械的に動かしたい時は等速、自然な動きに寄せたい時は滑らかが使いやすいです。

セル画に重ねられる

キーフレームは、手描きのセルアニメーションと組み合わせて使うと表現の幅が広がります。

表情や手足の動きはセル指定で作り、画面全体の移動やズームはキーフレームで作るように分けると管理しやすいです。

すべてをキーフレームだけで済ませようとすると、絵が動いているだけで演技が足りない印象になることがあります。

• 表情はセル指定
• 移動はキーフレーム
• 寄り引きは2Dカメラ
• 表示切替は不透明度

クリスタでキーフレームを設定する基本手順

クリスタでキーフレームを使う流れは、タイムラインを用意し、対象レイヤーを選び、開始位置と終了位置の状態を記録する順番です。

タイムラインを表示する

キーフレームはタイムライン上で管理するため、まずタイムラインパレットを表示して作業します。

イラスト用の通常キャンバスで作業している場合、タイムラインが表示されていないとキーフレームの位置や状態を確認できません。

アニメーション用の新規ファイルを作ると最初から扱いやすいですが、通常の作品でもタイムラインを追加して短い動きを作れます。

最初はフレーム数を短くし、数秒の動きだけを試すと、キーフレームの仕組みを理解しやすいです。

編集を有効にする

対象レイヤーを動かすには、タイムラインでそのレイヤーのキーフレーム編集を有効にします。

有効化すると、タイムライン上に変形や不透明度などのキーフレーム用項目が表示され、レイヤー側には編集制限を示す表示が出ることがあります。

これは不具合ではなく、記録済みの動きを保護しながら管理するための状態です。

開始位置を置く

動きを作るときは、最初に開始フレームで現在の状態を記録します。

次に終了フレームへ移動し、レイヤーの位置、拡大率、回転、不透明度などを変更すると、その間の動きが作られます。

開始位置を記録しないまま終点だけを動かすと、意図したタイミングで動き始めないことがあります。

• 開始フレームを選ぶ
• キーフレームを追加する
• 終了フレームを選ぶ
• 状態を変更する
• 再生して確認する

キーフレームが使えない時に見直す場所

キーフレームが表示されない、動かない、描けないと感じる時は、機能の故障よりも設定対象の違いやタイムラインの見落としが原因になりやすいです。

タイムラインがない

タイムラインがない状態では、キーフレームを置く場所そのものが見えません。

通常のイラスト作業画面から始めた場合、アニメーション用のパレットやメニューを表示していないだけのケースがあります。

まずはタイムラインパレットが表示されているか、再生範囲が短すぎないか、対象レイヤーがタイムライン上に見えているかを確認します。

作業画面が複雑になっている場合は、ワークスペースを一度アニメーション向けに整えると原因を切り分けやすいです。

レイヤーが選べていない

キーフレームは、どのレイヤーやトラックに記録するかが重要です。

動かしたいレイヤーではなく別のレイヤーを選んでいると、操作しているつもりでも目的の絵は動きません。

また、フォルダーに対してキーフレームを有効にすると、フォルダー内のレイヤー全体に影響することがあります。

描画制限を誤解している

キーフレーム編集を有効にしたレイヤーでは、通常の描画や編集が思った通りにできないように見えることがあります。

これは、キーフレームで記録された変形状態と、通常の描画編集を混ぜないための挙動です。

絵の中身を描き直したい場合は、キーフレームが有効なレイヤーを編集するための操作を使うか、キーフレームを一時的に無効にして状態を整理します。

• 絵を描く作業
• 絵を動かす作業
• セルを切り替える作業
• カメラを動かす作業

動きが不自然な時の整え方

キーフレームを置いただけで動きは作れますが、自然に見せるには速度、間隔、補間の調整が欠かせません。

補間を変える

動きが硬いと感じる場合は、まず補間の種類を見直します。

等速補間は一定の速さで動くため分かりやすい反面、生き物や手描き風の演出では機械的に見えることがあります。

滑らか補間にすると、動き始めと止まり際に緩急が出るため、画面になじみやすくなります。

間隔を調整する

キーフレーム同士の距離が短いほど動きは速くなり、距離が長いほど動きはゆっくりになります。

初心者が不自然さを感じる原因は、動かす量が大きいのにフレーム間隔が短すぎることが多いです。

特にズームや回転は少しの差でも目立つため、最初は変化量を小さくしてから調整すると破綻しにくいです。

• 速すぎるなら間隔を広げる
• 遅すぎるなら間隔を詰める
• 大きく動くなら変化量を減らす
• 止めたい場所には同じ値を置く

曲線を調整する

より細かく速度を整えたい場合は、ファンクションカーブ編集モードを使います。

ファンクションカーブでは、位置や拡大率などの変化をグラフとして確認でき、加速や減速の流れを視覚的に調整できます。

いきなり複雑なカーブを触ると混乱しやすいため、最初は滑らか補間で大まかに作り、必要な部分だけ曲線を直すのがおすすめです。

動きの気持ちよさを作る機能ですが、数値管理が増えるため、短い動画で慣れてから長い作品に使うと扱いやすいです。

作例別の使い方

キーフレームは機能名だけで覚えるより、作りたい表現から逆算して使うほうが理解しやすいです。

文字を出す

タイトル文字や効果音文字を出すなら、不透明度と拡大縮小の組み合わせが使いやすいです。

最初のフレームでは不透明度を低くして少し小さくし、数フレーム後に不透明度を上げながら本来のサイズに戻します。

この方法なら、手描きの動画でなくても、静止画の上に簡単な動きを加えられます。

文字が派手に動きすぎると本文や絵の邪魔になるため、短い距離で控えめに動かすほうが読みやすいです。

背景を流す

背景を横へ流す表現は、レイヤー移動か2Dカメラのどちらでも作れます。

背景素材そのものを動かしたい場合は通常レイヤーのキーフレームを使い、画面全体を撮影する位置だけ変えたい場合は2Dカメラを使います。

背景を長く流す場合は、端が見切れないように素材サイズを大きくしておく必要があります。

SNS動画を作る

SNS向けの短い動画では、複雑なアニメーションよりも、分かりやすいキーフレーム演出が効果的です。

イラストを少しズームさせ、文字をフェードインし、最後に軽く止めるだけでも動画らしい印象になります。

現行の公式情報では、CLIP STUDIO PAINT PROとDEBUTは24フレームを超えるアニメーション制作に制限があるため、長い動画を作る場合はグレード差も意識します。

• 短尺ならPROでも試しやすい
• 長尺ならEXが向きやすい
• 投稿用なら書き出し形式を確認する
• ループ用なら終点を自然に戻す

キーフレームを効率よく管理するコツ

キーフレームが増えるほど、どのレイヤーに何の動きを記録したのか分かりにくくなるため、最初から管理しやすい構成にしておくことが大切です。

レイヤー名を整える

動かすレイヤーには、背景、文字、キャラ顔、装飾、カメラ用など、役割が分かる名前を付けておきます。

名前が曖昧なまま作業すると、後からキーフレームを修正する時に対象を間違えやすくなります。

特にフォルダー単位で動かす場合は、フォルダー内の全レイヤーに影響することがあるため、階層の意味をはっきりさせておく必要があります。

• 背景
• キャラクター
• 文字
• 装飾
• 2Dカメラ

動きを分ける

ひとつのレイヤーに移動、拡大、回転、不透明度をまとめて入れると、後から修正しにくくなります。

初心者のうちは、文字は文字、背景は背景、カメラはカメラというように、役割ごとにレイヤーを分けるほうが安全です。

複数の動きを同時に使う場合でも、まずは移動だけを完成させ、その後に不透明度や拡大を足す流れにすると原因を追いやすくなります。

複製を残す

キーフレームを大きく編集する前は、対象レイヤーやファイルを複製しておくと安心です。

キーフレームを削除したり補間を変えたりすると、見た目が一気に変わることがあります。

特に完成に近い作品では、試作用のコピーを作ってから速度やカメラワークを調整すると、元の状態へ戻しやすいです。

うまくいった設定だけを本番ファイルへ反映する流れにすると、長い作品でも安定して管理できます。

自然に動かすなら最初は小さな変化から始める

クリスタのキーフレームは、レイヤーの移動、拡大縮小、回転、不透明度、2Dカメラの動きなどを時間に沿って記録できる便利な機能です。

最初に覚えるべきことは、キーフレームは絵を自動で描き変える機能ではなく、レイヤーやカメラの状態を変化させる機能だという点です。

動かない時は、タイムラインの表示、対象レイヤーの選択、キーフレーム編集の有効化、セル指定との混同を順番に確認すると原因を見つけやすいです。

自然な動きにしたい場合は、補間を滑らかにし、キーフレームの間隔を広げ、変化量を小さくするところから始めると失敗しにくいです。

慣れてきたら、セル指定で絵の変化を作り、キーフレームで位置やカメラワークを加えることで、短いSNS動画から本格的なアニメーションまで表現を広げられます。

ゲームキーボードを美しく飾れるスタンド