「テキストをボックスのちょうど真ん中にのせたいのに、なんだか微妙にズレている…」。アニメーション制作やデザイン作業をしていると、こういう細かいズレって地味にストレスですよね。見た目を整えたいのに、目分量でドラッグしているといつまでたっても決まらない。私も駆け出しのころは、矢印キーでチマチマ動かしては「あと1ピクセル右…いや行きすぎた」なんてことをよくやっていました。
じつはオブジェクトを中央に揃える作業は、「整列パネル」という専用の機能を使えば、ボタンひとつできれいに片づいてしまうんです。
この記事はもともと、Adobe Flash（Flash Professional）でオブジェクトの中心にテキストなどを配置する方法を紹介したものでした。ただ、一点お知らせがあります。Flashはすでに役目を終え、現在はその後継として「Adobe Animate」というツールに生まれ変わっています。ブラウザで動いていたFlash Playerにいたっては、2020年いっぱいでサポートが終了しました。「昔Flashを触っていたけど、今は何を使えばいいの？」と戸惑っている方も少なくないと思います。
そこでこの記事では、まずFlashからAnimateへの流れをサクッと整理したうえで、Animateでオブジェクトを中央にそろえる具体的な手順を紹介します。整列パネルの使い方はもちろん、「ステージの中心に置く方法」と「複数のオブジェクトどうしで中央をそろえる方法」の違いや、座標を直接入力して正確に配置するテクニックまで、初心者の方にもわかるようにかみくだいて解説します。
WEB制作歴25年、Adobe系のツールとは長いつき合いの私がお送りします。一度コツをつかめば、ほかのAdobe製品でもそのまま応用できる考え方ばかりです。それでは、さっそく見ていきましょう。
まず確認：Flashは終了し、後継は「Adobe Animate」
具体的な操作に入る前に、いまのFlash事情を整理しておきます。久しぶりに「Flashで作業しよう」と思っている方は、ここを押さえておくと迷わずに進められます。
かつて定番だったオーサリングツール「Adobe Flash Professional」は、2016年に「Adobe Animate（アドビ アニメイト）」へと名称を変えてリニューアルされました。名前こそ変わりましたが、タイムラインで動きをつけたり、ステージ上にオブジェクトを並べたりという基本的な使い勝手は、Flashの流れをしっかり受け継いでいます。長くFlashを使ってきた方なら、見慣れた画面にすぐなじめるはずです。
一方で、作ったコンテンツを再生していた「Flash Player」のほうは、セキュリティ面の問題などもあって、2020年12月31日をもってサポートが完全に終了しました。そのため、いまのAnimateでは出力先がSWFではなく、ブラウザでそのまま動くHTML5やアニメーション用の各種形式へと切り替わっています。つまり「Flashという技術は終わったけれど、制作ツールそのものはAnimateとして生き続けている」という状態なんですね。
ですので、これからオブジェクトの配置を整えたいなら、舞台はAnimateになります。とはいえ難しく考える必要はありません。「中央に揃える」という考え方は、FlashでもAnimateでも、さらにはPhotoshopやIllustratorといったほかのAdobe製品でも、ほとんど同じ感覚で使えます。ここで覚えた整列の発想は、いろんな場面で長く役立ちます。
関連記事：【Adobe】Photoshop・Illustrator・Flashのショートカットをまとめた壁紙
参考: Adobe公式ヘルプ（Animateのオブジェクトの整列）
整列パネルでオブジェクトを中央に揃える基本手順
それではいよいよ本題、Animateでオブジェクトを中央にそろえる方法です。主役になるのは「整列（Align）パネル」。これを開くところから始めましょう。
整列パネルは、メニューバーの「ウィンドウ」→「整列」（英語版では Window → Align）で表示できます。Flashを使っていた方にはおなじみのパネルですね。パネルには横方向・縦方向の整列ボタンがずらりと並んでいて、選んだオブジェクトをぴたっとそろえてくれます。
基本の流れは、とてもシンプルです。
- そろえたいオブジェクトをクリックして選択する（複数の場合は Shift を押しながらクリックで追加選択）
- 「ウィンドウ」→「整列」で整列パネルを開く
- 横方向の中央にそろえたいときは「水平方向中央」、縦方向なら「垂直方向中央」のボタンをクリックする
- 真ん中にそろえたいなら、横と縦の両方の中央ボタンを押せば、ど真ん中に配置できる
整列パネルでは、横方向には「左揃え・水平方向中央・右揃え」、縦方向には「上揃え・垂直方向中央・下揃え」が選べます。中央に置きたいときに使うのは、このうちの「水平方向中央」と「垂直方向中央」の2つ、と覚えておけば迷いません。
ボタンの上にマウスを乗せると名前が表示されるので、最初のうちはそれを確認しながら押すと確実です。アイコンの形にも慣れてくれば、だんだん見ただけで「これだ」とわかるようになります。
「ステージ基準」と「オブジェクトどうし」の違いに注意
ここがいちばんのポイントであり、つまずきやすいところでもあります。整列パネルには「ステージを基準」（To Stage / Align to stage）というチェック項目があり、これのオン・オフで結果がまるっきり変わってくるんです。元の記事でも「ここのチェックが大事」とお伝えしていた部分ですね。
違いを整理すると、こうなります。
- 「ステージを基準」をオンにすると→ステージ（画面）の中央にそろう。ロゴをドキュメントのど真ん中に置きたい、といった場面で使います。この場合はオブジェクトが1つだけでも中央に配置できます。
- 「ステージを基準」をオフにすると→選んだオブジェクトどうしで中央がそろう。複数のパーツの中心を合わせたいときはこちら。この場合は、基準を決めるために最低でも2つ以上のオブジェクトを選んでおく必要があります。
たとえば「ボックスの中心にテキストをのせたい」なら、ボックスとテキストの両方を選んでから、「ステージを基準」をオフにして水平・垂直の中央ボタンを押す。すると、お互いの中心がぴたりと重なります。一方で「ステージのど真ん中に1つのオブジェクトを置きたい」なら、「ステージを基準」をオンにすればOK、というわけです。
狙った場所に揃わないときは、たいていこのチェックの状態が逆になっています。「あれ、思った位置にいかない」と感じたら、まずここを見直してください。これだけで解決することが本当に多いです。
パーツをまとめたいときは「グループ化」も便利
中央に揃えたあとに、そのまま全体を移動させたい場面もあります。そんなときに役立つのが「グループ化」です。
複数のオブジェクトを選択した状態で「修正」→「グループ化」（ショートカットは Ctrl+G / Mac は Command+G）を実行すると、バラバラだったパーツがひとつのまとまりとして扱えるようになります。せっかくそろえた配置を崩さずに、まとめて動かせるので便利です。グループを解除したいときは「修正」→「グループ解除」（Ctrl+Shift+G）でいつでも元に戻せます。
「中央にそろえる→グループ化してロックしておく」という流れにしておくと、あとから別の作業をしているときに、うっかり位置を動かしてしまう事故も防げます。地味なテクニックですが、作業が複雑になってくるほど効いてきます。
関連記事：PhotoshopとIllustratorで使いこなす！作業効率を上げるショートカットキー
もっと正確に置きたいなら「座標」を直接入力
整列パネルはとても手軽ですが、「この位置にピクタリ合わせたい」と数値で正確に決めたい場面もあります。そんなときは、座標（X・Y）を直接入力する方法が確実です。
オブジェクトを選択した状態で「ウィンドウ」→「プロパティ」でプロパティパネルを開くと、位置を表すXとYの入力欄があります。Xが横方向、Yが縦方向の位置で、基準はステージの左上角です。ここに数値を打ち込めば、思いどおりの座標へピタッと移動できます。「ウィンドウ」→「情報」で開く情報パネルからも、同じように座標を指定できます。
ここで知っておくと役立つのが「変形点（トランスフォームポイント）」という考え方です。オブジェクトの位置や回転の基準になる点のことで、ふだんはオブジェクトの中心あたりに置かれています。情報パネルでは、この変形点を基準に座標を見るか、登録点（左上）を基準にするかを切り替えられます。「中心の座標」をきっちり管理したいなら、変形点を基準に表示しておくと考えやすくなります。
整列パネルでざっくりそろえてから、最後に座標で微調整する。この合わせ技を覚えておくと、配置の精度がぐっと上がります。慣れてきたら一度試してみてください。
参考: Adobe公式ヘルプ（Animateでのオブジェクトの移動とコピー）
まとめ：整列パネルを使えば中央配置はあっという間
Adobe Animate（旧Flash）でオブジェクトを中央に配置する方法を見てきました。最後に、今日のポイントをおさらいしておきましょう。
結論はシンプルで、「ウィンドウ→整列」で整列パネルを開き、水平方向中央・垂直方向中央のボタンを押すだけで、オブジェクトはきれいに中央へそろうということです。
そのうえで、いちばんの肝になるのが「ステージを基準」のチェック。ステージのど真ん中に置きたいならオン、オブジェクトどうしの中心を合わせたいならオフ、と使い分けます。思った場所に揃わないときは、まずここを疑うのが解決への近道です。さらに、移動をまとめたいときはグループ化、ピクセル単位で正確に決めたいときはプロパティパネルでの座標入力。この組み合わせを覚えておけば、配置で悩む時間はぐっと減らせます。
そして冒頭でもお伝えしたとおり、Flash Professionalは現在Adobe Animateへと姿を変え、Flash Player自体は2020年末で役目を終えています。「昔Flashで覚えた操作、もう無駄になっちゃったかな」と心配していた方も、その必要はありません。整列パネルやグループ化、座標指定といった基本の考え方は、Animateでもそのまま生きていますし、PhotoshopやIllustratorといったほかのAdobeツールでも同じ感覚で使えます。一度身につけてしまえば、長く役立つ財産になります。
細かい位置合わせは、地味なようでいて、仕上がりの印象を大きく左右する大事な作業です。整列パネルという心強い味方を手に入れて、配置の精度をひとつ上げていきましょう。次の記事でもまたお会いしましょう。
