Instagram のプロフィール写真は、正方形のアップロードからトリミングされ、円の中で表示され、その脇のサムネイルグリッドより小さいサイズで示されます。4:5の列全体を占めるフィード投稿と、9:16で画面を埋めるリールを足せば、ほとんど幾何学的な共通点のない3つの配置の形ができます。
本能としてはグリッド向けに作り、縮小します。それは描き直しを生む順番です。横長の投稿を埋めるように描かれたマークは、アバターに到達する前に細部を失うからです。代わりに円から外側へ作ります。まだ一度もマークを動かしたことがないなら、ロゴを動かす基本から始め、配置に戻ってきてください。
なぜアニメーションロゴはInstagramで異なる動きをするか
動画プラットフォームでは、マークはたいてい大きな構成の一部です。Instagram では、それが構成全体になることが多くあります。プロフィールアバターがブランドそのもので、周りのフレームも、キャプションも、それが置かれるグリッド以外の文脈もありません。
それは形に異常な重みを置きます。正方形を端から端まで埋めるマークはページでは正しく見え、円では切り取られます。横長のロックアップを持つマークは、トリミングの中でワードマークの両端を失います。そしてアバターはプロフィールページ、発見フィード、コメントスレッドでいくつかのサイズに現れるため、重要なのは最大ではなく最小のバージョンです。
2つ目の違いは音です。Reelsはミュートで自動再生され、視聴者の大きな割合はミュートを解除しません。ウェブサイトのヒーローがそこにいることを選んだ視聴者を想定できるのに対し、リールはスクロールを争っているので、アニメーションは音を消して到達を伝えなければなりません。それがカットのタイミングを曲自体より重要にします。
3つの配置と、それぞれが実際に必要とするもの
各配置を単なるリサイズではなく設計上の制約として扱います。マーク以外にほとんど共通点がないからです。
プロフィールアバター
正方形のアップロード、円での表示、小さいもの。その正方形の内接円の外にあるものはすべて消えるので、マークは偶然周りに余白がある長方形ではなく、設計上円の中で構成されなければなりません。直径の8〜10%を各側の余白とし、ブランドにワードマークがあるなら、ここで生き残らなければならないものではなく、より横長の配置向けの別アセットとして扱います。
フィード投稿
最も背の高い列のフォーマットは、ほとんどのブランドが全面の視覚に使うもので、3つの中で最も余裕のある配置です。ここはワードマークが置ける場所であり、タグラインが現れられる場所であり、タイミングが急かされることなく長いアニメーションが走れる場所です。また音ありで見られる可能性が最も高い配置でもあり、それがビートカットが十分に評価される場所にします。
リール
全画面、縦、デフォルトで無音、スクロールのジェスチャーと競合。2つの結果が続きます。最初のフレームは単独で成立しなければなりません。見続けるかを決める視聴者はそのフレームしか見ないからです。そしてオープナーは1秒以内でなければなりません。最初の3秒をロゴに費やすリールは、それを悪く費やしたことになるからです。
まず円形のトリミングを作る
最も厳しい制約から始めて外側へ働きます。円が最も厳しいものであり、その理由は機械的なものです。小さいから大きいへ行くと何も失いません。アバターサイズで読めるマークは、それ以上のどのサイズでも読めるからです。大きいから小さいへ行くとディテールを失い、それに気づくのはアニメーションが終わった後です。
2つの形は、トリミングに対して一貫して失敗します。境界ボックスの四隅に重要な内容があるもの、つまり左から右へぴったり組まれたワードマークや、名前の脇にシンボルがあるロックアップは、名前の両端を失います。そしてその幅を前提にした内部の間隔で作られた横長の長方形は、円が食い込むと中心がずれて見えます。
使える構造は、モノグラムに任意のワードマークを足すものです。モノグラムはすべての配置に耐えるアセットであり、ワードマークは横の余地があるフィード投稿とリール向けに足されます。それは小フォーマットのブランドアセットを最初にシンボルとして作る背後の同じ理屈であり、それがロゴGIFの制約がこれの役立つ予行演習になる理由です。フォーマットはアバターのトリミングが罰するのと同じディテールを罰します。
ミュートの自動再生向けにアニメーションを設計する
Reelsは音なしで再生されるので、アニメーションは音を消して入場を決め、その後に曲でより良くなる必要があり、曲に依存してはいけません。
テストは90秒の仕事です。タイムラインをミュートして最後まで見てください。到達が依然として意図的として読めるなら、音響デザインはおまけです。ミュートにするとカット点がいい加減に感じるなら、問題はタイミングにあり、whoosh、riser、sub-dropを3つの異なる位置に足しても、マークから数フレームずれたカットは直りません。効果音を重ねることも、2秒の作品をずっと長い何かの予告編のように聞かせ、即座に時代遅れにするものです。
自動再生のミュートは好みではなく、ブラウザやプラットフォームの方針であり、その仕組みは記録されています。MDNの自動再生メディアに関するガイドは、ミュート再生が許可され、ミュートなし再生がブロックされる理由を説明します。developer.mozilla.org — 自動再生ガイド。そのドキュメントが指摘するように、muted属性は自動再生をほとんどのブラウザで合法にする条件であり、それこそがミュートしたカットをあなたがテストの基準にしなければならない理由です。
フレームサイズと書き出し設定
各配置を1つのソースファイルから書き出せば、入場時間、ビートの整合、静止の長さが同一になります。変わるべきはマークの周りのフレームだけです。チャンネルごとにオープナーのタイミングを変えるブランドは、自分のアニメーションが何かを知らないように見えるからです。
リールについては、推測ではなく公開された動画仕様が最も安全な基準です。9:16のアスペクト比、推奨1080×1920ピクセルで最小540×960、24〜60fps、2〜5秒のクローズドGOPを持つH.264またはH.265圧縮、48kHzのステレオAAC音声です。<a href="https://developers.facebook.com/docs/video-api/guides/reels-publishing">developers.facebook.com — Reels公開</a>。平坦な背景にある彩度の高いマークは、一般映像が必要とする以上の高いビットレートの恩恵を受け、ファイルは数秒しかないのでサイズのペナルティは問題になりません。
プロフィールの静止面については、他のどこと同じ単純化の規則が当てはまります。ロゴは高コントラストな幾何学であり、それこそが非可逆圧縮が最も苦手とするコンテンツです。細い線や細い文字こそが、リング状のノイズが最初に現れる場所です。ソースファイルのアルファチャンネルが本物の透明性であること、つまりモックアップの背景がたまたま隠していた白い長方形ではないことを確認することは、何かを公開する前に1度実行する価値のあるもう1つのチェックです。
素人っぽい仕事に見える4つのミス
この4つが、Instagramで未完成に見えるアニメーション化したブランドマークの大半を占めており、それぞれに具体的な直し方があります。
正方形を端から端まで埋めて円に切り取られるワードマーク。直し方：内接円の中で構成し、ワードマークはフィード投稿とリールにだけ移します。
コンテンツが始まる前に3秒走るオープナー。直し方：マークが24フレーム以内に到達するまで入場を切り詰め、時間を足す代わりに2フレームの落ち着きを足します。
プロフィール、グリッド、リールにまたがる4つの異なるバージョンのマーク。直し方：すべての配置を1つのソースファイルから書き出し、タイミングを同一にし、フレームだけが異なるようにします。
数フレーム遅れて着地するビートカット。直し方：何か絵を配置する前にビートに目印を付け、到達フレームをちょうどマーカーに置きます。誰もその誤りに名前を付けられませんが、誰もがそれを見ることができます。
フィードとReelsの共通点
2つのフォーマットは正反対に見えます。1つはゆっくり読まれる考えられたグリッド投稿、もう1つは全画面のスクロールの決定です。しかし3つの制約を共有しており、その3つこそが仕事の場所です。
両方ともスマホで、縦で、少なくとも半分の時間は音を消して見られます。両方とも、辛抱強くある義務のないフィードの中に生きています。そして両方とも、ブランドではなく視聴者の端末によって決まるサイズでマークを示し、それは最小の可能なレンダリングこそが設計の対象でなければならないことを意味します。
その最後の点が、アバターがアバターを超えて重要である理由です。それは他のすべての配置での最悪の場合の予行演習です。サムネイルサイズの円形トリミングに耐えるマークは、4:5の投稿、全画面のリール、そのどちらかから引かれた静止画像にも耐えます。ですからプロフィール写真は、コンテンツ計画の脇に座る別の雑用ではありません。絵を決めるテストケースです。
絵が持ちこたえたら、残る決定はタイミングについてであり、動きをアカウント全体での共有言語として扱うことには十分な理由があります。異なる処理が何を伝えるか、つまりビルドに対する露出、ループに対する落ち着き、の慣習はブランドが実際に使うスタイルにまとめられており、1つを意図的に選ぶことは、3つあると気づくより安上がりです。
公開前の短いチェックリスト
6項目、すべて手早く、それぞれが投稿が予約された後に直すのが高くつくミスを捉えます。
マークは各側に余白のある内接円の中に収まり、それが認識できるためにワードマークは必要ありません。
ソースファイルは本物の透明性を持ち、仮定するのではなく暗い背景で見て確認されています。
リールの最初のフレームは静止画として機能します。それが、スクロールする視聴者が決める前に見る唯一のフレームだからです。
アニメーションは、ミュートで、フィードサイズで、スマホで見られています。
3つの比率すべてが1つのソースファイルから来ており、入場時間と静止の長さがプロフィール、フィード、リールで同一です。
退出はゆっくりしたフェードではなく、ハードカットかループです。そして動く要素として使われるなら、ファイルは最初のフレームにきれいにループします。
よくある質問
Instagram アニメーションロゴのサイズはどれくらいにすべきですか？
リールは9:16で1080×1920ピクセルに書き出します。それは推奨解像度で、最小540×960です。アバターは内接円の中で通じる正方形として設計し、各側に8〜10%の余白を保ちます。マークはマスター解像度ではなく、最小の表示サイズで作り、判定します。
Instagram のプロフィール写真としてアニメーション化したロゴを使えますか？
いいえ。Instagram のプロフィール写真は静止画像です。アニメーション版は、同じマークが動くフィード投稿、ストーリーズ、リールに属します。実際的には、それは静的なアバターを先に作り、コンテンツとして公開するバージョンを動かすことを意味します。その逆ではありません。
アニメーションは音なしで通用すべきですか？
通用しなければなりません。Reelsはミュートで自動再生され、視聴者の大きな割合はミュートを解除しないので、到達は沈黙の中で意図的として読まれなければなりません。タイムラインをミュートして最後まで見てください。音声なしでカット点がいい加減に感じるなら、問題は曲ではなくタイミングです。
Instagramでのアニメーションの長さはどれくらいにすべきですか？
リール内の到達は1秒以内、フィード投稿の完全なオープナーは1〜3秒です。リールの最初のフレームは単独で機能しなければなりません。それが、見続けるかを決める前に視聴者が見る唯一のフレームだからです。
作るのに動画編集ソフトが必要ですか？
いいえ。ブラウザのエディターで、ブランドマークが必要とするケースはカバーできます。透明なSVGやPNGをアップロードし、背景フレームと曲を選び、9:16、1:1、16:9で書き出します。編集スイートがインストールに値するのは、アニメーションが実写映像と合成しなければならない時であり、2秒のマーク披露のためではありません。
まとめ
まず円を作ります。それは集合の中で最小で最も厳しいトリミングであり、それに耐えるマークは2度の描画なしで4:5の投稿と全画面のリールに耐えます。それこそが、他の何より先にアバターを解決する全理由です。そしてリールをミュートして1度見てください。音を消しても到達が依然として決まるなら、アニメーションは完成です。完全な制作に踏み切る前に、自分のマークで円形のトリミングをブラウザエディターで試せます。