スタイルフレーム
スタイルフレームとは、アニメーション全体を動かす前に、構図、書体、配色、グラフィックなど、完成時の見た目の方向性を示す静止画です。
スタイルフレームは、アニメーションの重要な場面をどのような見た目にするかを示します。仮の四角やプレースホルダーのままにせず、予定するビジュアル表現を適用します。英語では「styleframe」と続けて書くこともあり、複数の画像をデザインボードとしてまとめる場合もあります。
School of Motionの制作ガイドでは、絵コンテのラフをスタイルフレームへ発展させ、いくつかの案で見た目の方向性を探る方法が紹介されています。
スタイルフレームで決めること
- 視覚的な優先順位：最初に気づいてほしい文字や対象。
- タイポグラフィ：書体、太さ、大きさ、字間、長いラベルの収まり。
- 色とコントラスト：背景、アクセント、読みやすい組み合わせ。
- グラフィック：図形、イラスト、画像、UI要素の表現方法。
- 奥行きと仕上げ：平面表現、影、質感、立体感のあるレイヤーなど。
例では、メッセージと配置を固定して配色だけを変えています。こうすると見た目の選択を判断しやすくなります。構図と文章まで変えると、複数の判断が混ざってしまいます。
役に立つスタイルフレームの作り方
- 代表的な場面を選びます。実際に必要な種類の文字、画像、情報の優先順位が含まれる場面を使います。
- 納品時の縦横比でデザインします。できるだけ本番のラベルや承認済み素材を使います。仮の文章ではスペースの問題を見落とすことがあります。
- 重要な見た目の判断を具体化します。別の人も次の場面に同じルールを適用できる程度まで詰めます。
- 異なる場面でも確認します。短い見出しに合う見た目でも、図解や情報量の多い画面には合わない場合があります。
スタイルフレームだけでは動きやテンポの良し悪しは証明できません。たとえば静止画では自然な影でも、対象を動かすと不自然にずれることがあります。そうした点はアニメーションのテストで確認します。
ムードボードや絵コンテとの違い
ムードボードは方向性を示す参考資料の集まりです。スタイルフレームはその方向性を自分の場面に適用します。絵コンテは順序を説明し、アニマティックは尺とテンポを確認します。
iArtでスタイルフレームを活用する
保ちたいルールを言葉にします。背景、アクセント色、文字の優先順位、カードの形、奥行きなどです。動きはそれとは分けて説明します。最初の構図だけでなく、動いた結果も確認してください。冒頭の画像が似ていても、アニメーション全体が一致するとは限りません。具体的な指示例はClaudeで作るモーショングラフィックスをご覧ください。
関連用語：モーションデザイン・ブリーフ、モーショングラフィックス。