簡単!Premiere Proの使い方【テロップ編】

こんにちは!
今回のテーマは「簡単!Premiere Proの使い方【テロップ編】」です。
Premiere Proでテロップを作る方法をご紹介したいと思います。

こちらのネコの動画にテロップを入れてみたいと思います。

Premiere Proの立ち上げ方や、素材の読み込み方について知りたいと言う方は、簡単!Premiere Proの使い方【立ち上げと読み込み編】もご覧ください!
Premiere Proの立ち上げ方と素材の読み込み方、基礎的な名称の説明をしています。


使用するソフト

■Premiere Pro(プレミアプロ)
※バージョンは「CC 2018」を使用しています。


テロップの開始位置を決める

まず初めにテロップの開始位置を決めます。
開始位置を決めるには、「タイムラインパネル」の「時間インジゲーター」を左右に動かしてください。
「時間インジゲーター」と「プログラムモニター」は連動していますので、プログラムモニターで映像を確認しながら任意のタイミングに調整します。

もっと細かく調整したい時は、タイムラインパネルかプログラムモニターを選択した状態で、キーボードの矢印キーの左右で時間インジゲーターを動かします。
または、プログラムモニターの戻るボタンか進むボタンでも大丈夫です。
こうすることでコンマ単位の繊細な調整をすることが出来ます。

ここで1つ注意なのが、この段階でコンマ単位の調整に時間を掛けすぎない事です。
ガチガチに決めても、後々、実際にテキストを入れたりエフェクトを掛けた時に調整したくなるからです。
まずはザックリ位置を決めるまでに留めて、後で細かい調整をする気持ちで進めましょう。

参考までに、私がよくやる流れを書いてみます。
①テロップを入れたい大まかな位置の辺りまで時間インジゲーターを動かす。
②プログラムモニターの再生ボタンを押して動画を再生。テロップを入れたいタイミングで停止する。
※この工程はなくても良いのですが、動画の動きやテンポを確認しながらテロップの位置を決めたい時にやりやすいのでオススメです。
③タイムラインパネルかプログラムモニターを選択した状態で、キーボードの矢印キーの左右で時間インジゲーターを調整する。


テキストを入力する

次にテキストを入力します。
「ファイル」→「新規」→「レガシータイトル」を選択すると、下の図のような「新規タイトルウィンドウ」が表示されます。

設定したい項目があれば変更し、特に指定がなければそのままOKを押して下さい。

タイムベースについては、動画の設定に合わせておけば大丈夫です。
今回で言うと、ネコの動画が「59.94fps」の設定になっていたので図のような数値になっています。
ちなみに、「名前」の項目は設定した物がプロジェクトパネルに反映されます。後々編集できますのでこのまま進めてしまっても大丈夫です。

新規タイトルウィンドウのOKを押すと、画面は下の図のようになっているかと思います。

プロジェクトパネルにタイトル01が追加されていますね。
更に、プログラムモニターの表示が少し変わりました。これは「タイトルパネル」が表示された状態です。タイトルパネルではテキストの入力や編集が出来ます。
上部のパネルを切り替える事でデフォルトのパネルとタイトルパネルを切り替える事が出来ます。
また、時間インジゲーターを触ってもデフォルトのパネルに切り替わります。

次に、「レガシータイトルツール」で「横書き文字ツール」などを選択します。
横書き文字ツールを選択した状態でプログラムモニターをクリックすると、テキストが入力できるようになります。
テキストの位置は、「レガシータイトルツール」の「選択ツール」で好きな所へ移動させることが出来ます。

ここまで出来たら、プロジェクトパネルに作成したタイトル01のクリップをタイムラインパネルにドラッグします。
この時、時間インジゲーターにクリップの左端がピッタリくっつくようにします。
こうする事で、1番初めに決めたテロップの開始位置からテキストが表示されるようになります。

テロップが表示されている時間は、タイムラインパネルのタイトル01のクリップの端を左右に伸縮させることで調整する事が出来ます。

余談ですが、私の場合、タイムラインパネルにクリップを入れた段階で一度レンダリングして保存します。
学生の頃、映像の授業の教授に「レンダリングだけは小まめに掛けて保存しておくように。これだけ出来れば何も怖くない。レンダリングレンダリング…」と言われました。
この言葉が頭に焼き付いているので、レンダリングバーが赤くなろうものなら即刻レンダリングして保存します。
レンダリングをする意味としては、ザックリ言うと処理が重くならないようにする為です。
レンダリングしていないデータが多いと、Premiere Proの処理速度が落ち、場合によっては固まって強制終了…なんて事もあります。
保存を小まめにしていなかった場合、何時間もかけて編集したデータが飛びます。想像しただけで心臓がキュッとなりますね。
心配な方は小まめにレンダリングと保存をして下さい。

また、小まめにレンダリングするメリットとして、レンダリング時間があります。
情報量が少なければ数秒で済む場合もありますし、多ければ数時間を要する場合もあります。
小まめにやるか、後でまとめてやるか、そもそもやらないか、作業スタイルに合わせて試してみて下さい。


フォントを編集する

テロップのフォントを変えたり、スタイルを付けたりすることが出来ます。
プログラムモニターの上部には、フォントやサイズ、カーニングなど基本的な設定をする項目があります。

「レガシータイトルプロパティ」では、カラーを変えたり影を付けたり、より細かい編集作業が出来ます。
また、「レガシータイトルスタイル」では、登録されたスタイルを選ぶことが出来ます。デフォルトで登録されているスタイルもあれば、自分で作ったスタイルを保存して使う事も可能です。

「レガシータイトルスタイル」でスタイルを選んだ後、「レガシータイトルプロパティ」で微調整する事も出来ますので、イメージに合うフォントを作ってみて下さい。


エフェクトを付ける

テキストにエフェクトを付けます。
「エフェクトパネル」に様々なエフェクトがありますが、今回は「ビデオトラジション」の「ディゾルブ」を使います。
ビデオトラジションのディゾルブを、タイムラインパネルのタイトル01のクリップの両端にドラッグします。
こうする事で、フェードイン、フェードアウトの効果を付けることが出来ます。

エフェクトはいらないな、と言う場合は「Back Spaceキー」や「Deleteキー」で消せます。

また、クリップに付けたエフェクトを左右に伸縮させることで、エフェクトの表示時間を調整する事も出来ます。
伸ばすとゆっくりエフェクトの効果が表れ、縮めると早く表示されます。

今回はディゾルブを使いましたが、他にもエフェクトは沢山あります。
また、エフェクトの種類にもよりますが、テキストだけでなく、動画などクリップであれば何にでも付けることも可能です。
色々付けたり消したりしてみると楽しいので、ぜひお試しください。

ここまで来たら動画の編集作業は完了です!

あとは書き出して終わりです。
「ファイル」の「書き出し」から「メディア」を選択してください。
「書き出し設定」が表示されます。設定の変更は画面右側で出来ますが、特に指定がなければデフォルトのままで大丈夫です。
「書き出し」ボタンを押すと書き出されます。
動画の長さによって書き出し時間も数秒~数時間と変わってきますので、気長に待ちましょう。

書き出せたらテロップの作成は完了です!おつかれさまでした!


おわりに

いかがでしたでしょうか?
最後となりましたが、今回作った動画はこんな感じになっています。


※この動画はブログ掲載用に設定を調整しています。

動画を作るのは難しいイメージがあるかもしれませんが、作り始めてみると色々手を加えたくなって楽しいものです。
テロップも作ってみると意外と簡単ですので、ぜひ試してみて下さい!

それではまた!デジマースのコンでした。

簡単!Premiere Proの使い方【立ち上げと読み込み編】

こんにちは!
今回のテーマは「簡単!Premiere Proの使い方【立ち上げと読み込み編】」です。
Premiere Proの基礎用語の説明を交えながら、プロジェクトの立ち上げから素材の読み込み方についてご紹介したいと思います!

Premiere Proで動画を作りたいけど、どうすればいいかわからない…、上手くいかない…とお困りの方!
これが理解出来れば、初心者の方でも簡単に操作出来るようになりますので、ぜひご覧ください。
ゴールは、タイトル通り「Premiere Proを立ち上げて素材を読み込む所まで」です。


使用するソフト

■Premiere Pro(プレミアプロ)
※バージョンは「CC 2018」を使用しています。


事前準備

Premiere Proを開く前にやるべき、大切な事前準備があります。
それは、これから作るPremiere Proのファイルや使用する素材を保存する場所を決め、フォルダを準備しておく事です。
保存場所はローカルでもネットワークでも良いので、使用するファイルは全て1ヵ所にまとめておくようにして下さい。
私はいつも、保存する場所を決めたら下記の図のような感じでフォルダを準備します。

何故こうするかと言うと、Premiere Proに素材を読み込んで作業する場合、リンクしか出来ないからです。
Illustratorのように素材を埋め込むことは出来ません。
その為、作業途中に素材を別フォルダに移動させたり、ファイル名を変更したりすると、Premiere Pro上でリンクが途切れてしまいます。
リンクを再設定するのが大変なので、保存場所は最初に準備しておきましょう。


プロジェクトの立ち上げ

まずはプロジェクトを立ち上げます。
今回は例として新規プロジェクトから立ち上げます。
すでに動画データがある方は任意のプロジェクトを開いてくださいね。

新規プロジェクトを押すと、新規プロジェクトの設定画面が出てきます。
タイトルと動画の保存場所を設定してください。
他の項目は、特に設定したい物がなければ、下記の図のような初期設定のままで大丈夫です。

OKを押すと、新規プロジェクトが立ち上がります。


ワークスペースについて

プロジェクトが立ち上がった所でさっそく動画を作って行きたいのですが、その前に…。
初めてPremiere Proを使う方の為に、まずは「ワークスペース」について説明したいと思います。

Premiere Proは細かい編集画面が多く、初めて見ると戸惑い、ハードルが高く感じる方も多いのではないでしょうか?
私は初見でかなり戸惑った上に、もう動画作るのやめようかしらとすら思いました。
下記にワークスペースの名称と簡単な役割をまとめました。
こちらの要素さえ理解してしまえば、不安な気持ちは軽減されると思います!

■プロジェクトパネル
動画や音源、静止画など素材全てをまとめておく場所です。
また、Premiere Proに入れた素材はクリップと呼ばれます。

■ツールボックス
タイムラインやプログラムモニターで編集を行う為のツールが表示されています。

■タイムラインパネル
編集作業をする場所です。

■ソースモニター
クリップの編集が個別に出来ます。

■プログラムモニター
タイムラインパネルのクリップを再生する事が出来ます。

■その他の編集パネル
エフェクトやテキストなどの編集が出来ます。

■オーディオメーター
音声レベルの確認が出来ます。


素材を読み込む

素材を読み込む方法ですが、大きく分けて2つあります。
「プロジェクトパネルに読み込む方法」と「メディアブラウザーから読み込む方法」です。

1つ目の「プロジェクトパネルに読み込む方法」ですが、プロジェクトパネルの「プロジェクト」タブ内にドラッグ&ドロップ。
もしくは「ファイルメニュー」の「読み込み」から読む込むことが出来ます。

「プロジェクトパネルに読み込む方法」は、1つ1つ素材を整理しながら進めたい時にオススメです。

2つ目の「メディアブラウザーから読み込む方法」ですが、プロジェクトパネルの「メディアブラウザー」タブから読み込みます。
「メディアブラウザー」タブを選択すると、ローカルやネットワークのドライブが表示されます。

そこから【事前準備】の項目で作った素材フォルダを選択します。
そうすると、右側にフォルダ内のファイルが表示されます。
ここの表示は「リスト表示」「サムネールビュー」の2種類から選べます。サムネールビューの方が見やすいのでオススメです。

そこから使いたい素材を選び、タイムラインパネルにドラッグ&ドロップします。

タイムラインパネルに入れると、自動的に「プロジェクト」タブにも反映されます。

「メディアブラウザーから読み込む方法」は、素材数が多い場合や、使用する素材の順番が予め決まっている場合にオススメです。
ただ、事前に素材の配置順を決めてファイル名でナンバリングしていない場合、意図しない順番で素材が配置される事になりますので注意が必要です。

素材を読み込む方法を2種類紹介しましたが、どちらでも自分のやりやすい方法で進めてみて下さいね。

ここまで無事進められた方…。
おつかれさまでした!これでゴールです!


おわりに

いかがでしたでしょうか?
今回は基礎的な部分の説明でしたが、知らずに挑むと躓きやすいポイントでもあります。
これを覚えたらもうPremiere Proは怖くないも同然ですので、ぜひ覚えてみて下さい!

今後更新予定の「簡単!Premiere Proの使い方【テロップ編】」では、テロップの作り方をご紹介します。
良ければそちらもご覧下さい!

それではまた!デジマースのコンでした。

スマホ広告バナーサイズ表_無料動画バナー紹介!

スマートフォンバナー


ネットワーク系バナー

★モバイル_バナー(横×縦)

 ・320× 50 ADNW
 ・640×100 ADNW【高解像度版】

 ・320×100 ADNW
 ・640×200 ADNW【高解像度版】

★レクタングルバナー(横×縦)

 ・300×250 ADNW
 ・600×500 ADNW【高解像度版】


インフィード形式(横×縦)

 ・ 300×300 ①_スクエア型
 ・1200×628 ②_バナー型

※掲載場所によりサイズに差異があります


スマホバナーサイズのメモの意味合いで現在出稿があるモバイル向け広告を中心にサイズ表を下記に作成しました。※2018.3.5時点のデータ

モバイル端末も「ケータイ電話」と呼ばれていたフィーチャーフォンから、スマートフォンへ移行しました。

そして、モバイル広告サイズも解像度が増えて「ドット打ち」と呼ばれる技法が有効な抽象的領域を越え、構成も通常の印刷広告のような余白のデザインが可能となりました。

参考で、かつてマス広告として絶大な広告効果を出していた、ケータイ電話モバイル広告時代の代表的な広告サイズと事例を紹介します。


フィーチャーフォンバナー

192×53 QVGA端末向け_バナー

フィーチャーフォン向けのデフォルトバナーサイズ。使用する「レスポンスフォーマット」(「CLICK!」文字入りの黒枠部分)の
カタチとサイズが決められている。2018年の現在でも運用されている代表的なバナーサイズ


384×106 VGA端末向け_バナー

「デフォルトバナー」×2倍サイズ。フィーチャーフォン向けのVGA端末向けに特化して一時的に運用されていたバナーサイズ。SB枠で使用されてましたが運用コスト減の影響からか現在は運用されていません。


192×53 QVGA端末向け_アニメGIFバナー

「デフォルトバナー」に「GIFアニメ」を使うことで複数コマの差し替えアニメーションを再現できました。コントラストに違いの大きい2つのバナーを交互に表示させるだけでも利用者の目線をバナーに向かわせることが出来、静止画バナーと比較して広告効果を大きく改善できました。


192×53 Flashバナー

「デフォルトバナー」と縦横サイズやレスポンスフォーマットは同じですが、当時のリッチ仕様としてFlashで掲載が可能でした。「5kバイト」という少ないバナー容量制限のなかで、アニメGIFバナーでは再現できない(容量が約4~10倍まで増大)細かいアニメーションが表現できる唯一の手段として、モバイル広告の表現に多大な力を与えました。

無料動画バナー:FP時代の広告面にあふれた無料訴求のバナーを一部紹介↓

※記事用にFlash形式を動画バナー(アニメGIF)に書き出ししています


最後に

以上、一部のプラットフォームとサイズについて紹介しましたが、状況に応じて修正と追加します。
スマートフォン向けのクリエイティブは情報量が多いので迷いと迷走に陥りやすいと感じますが、
明確なルールを設定して必然的で効率的な作業を続けていきます。

それでは次回も情報設計に関係した話題をお届け致します。
デジマースのネモトでした。

初心者向け!エンドロールの作り方②[After Effects編]

こんにちは!
今回のテーマは「初心者向け!エンドロールの作り方②」です。
結婚式の披露宴などで流すエンドロールムービーの作り方をご紹介します!

前回のIllustrator編の続きとなっています。
Illustratorで文字が組めたら、After Effectsで文字が上へ流れていく動きを付けてみましょう!


使用するソフト

今回は1種類のソフトを使用して動画を作ります。

————————————

■After Effects(アフターエフェクト)

————————————

バージョンは「CC 2017」を使用しています。


作成の全体の流れ

作成の全体の流れは大きく分けて3つです。

①作るべき動画のサイズと素材を確認。
②Illustratorでテキスト作成・文章の構成確認。
③After Effectsでテキストが上にスクロールする動きを付けます。

今回は③についてお話していきたいと思います。


エンドロールを動かそう!

1.After Effectsで新規コンポジションを作成

After Effectsを立ち上げ、「ファイル」→「新規コンポジション」を選択。

サイズはIllustrator編に合わせ、「幅」は640px、「高さ」は360pxと入れました。
「デュレ―ション」は動画の再生時間の長さを決められます。
エンドロールの長さによって必要な時間がそれぞれ違うかと思います。後で変更できますので、だいたいの時間を仮で入れておいて下さい。今回は一旦「40秒」としています。
「背景色」は黒にして下さい。ここもエンドロールの背景色に合わせて変えて下さいね。

ここまで出来たらOKを押して下さい。「コンポジション」パネルが真っ黒な状態で開けたかと思います。


2.IllustratorのデータをAfter Effectsに取り込む

「プロジェクト」パネルにIllustratorのデータをドラッグ&ドロップします。

下記のようにモーダルウィンドウが出てきたら、「レイヤーを統合」を選択してOKを押します。
こうすることで、Illustratorで作ったデータがレイヤーで分かれていても、背景や文字などを1つの画像として読み込むことが出来ます。


3.読み込んだデータをタイムラインに乗せる

「プロジェクト」パネルにデータが読み込めたら、そこから「タイムライン」パネルにドラッグ&ドロップします。

ここまで来たら、「コンポジション」パネルでIllustratorで作ったデータが見れるようになっているかと思います。


4.位置を整える

エンドロールの始まりは、テキストの映り込んでいない真っ黒な画面から始まるのが一般的です。
※今回は背景が黒いシンプルなエンドロールなので上記のようにしています。写真を使用したりカラフルなエンドロールの場合は、そちらに合わせて下さいね。

今のままだとエンドロールの中盤あたりが中途半端に「コンポジション」パネルに表示されていますので、まずエンドロールの頭の部分が表示されているように位置を整えます。
「整列」パネルの「垂直方向の上に整列」を選択してください。

次に、エンドロールを「選択ツール」で直に選択し、画像を下げてテキストが全く見えない状態にします。


5.エンドロールを動かす為の指定

エンドロールのように、下から上へ要素が流れていく動きを付けたい時は、画像の動き始めと終わりの「位置」を指定する必要があります。

まずは、画像の動き始める位置を指定します。
「タイムライン」パネルの「ソース名:エンドロールムービー.ai」の左側にある、三角のアイコンをクリックします。
クリックすると下部に「トランスフォーム」と出てくるので再度クリックします。
いくつか項目が出てきますので、「位置」と書いてある行のストップウォッチのようなアイコンをクリックします。

ここまで来ると、同じく「タイムライン」パネルの右側が下記の図のようになっているかと思います。

「キーフレーム」と言う青いひし形のアイコンが表示されています。これで、エンドロールの開始位置を指定することが出来ました。
今の状態は「0秒の時、エンドロールムービー.aiはここにいるよ」と言う事を表しています。

次に、終了地点を指定します。
「タイムライン」パネルの「時間インジゲーター」を右端(終了時間)へ寄せます。

「整列」パネルの「垂直方向の下に整列」を選択してください。

続けて、エンドロールを「選択ツール」で直に選択し、画像を上に移動させてテキストが全く見えない状態にします。

ここまで出来たら、「タイムライン」パネルに「キーフレーム」が出来ているか確認してみましょう。
下記の図のようになっていたら、エンドロールの終了位置を指定することが出来ています。


6.実際にエンドロールを動かしてみる

動画を書き出す前に、動きをチェックしましょう。「プレビュー」にある再生ボタンで再生できます。

問題ない方は、手順8へ行ってください。
動画が早すぎたり遅すぎたりして、文字が読みづらい…と言う方は、手順7を確認してください。


7.動画の時間を変更する

メニューバーの「コンポジション」→「コンポジション設定」を選択。
「デュレ―ション」の時間を変更します。動画を都度再生しながら最適な長さに調節してみて下さい。

エンドロールの特性上、多くの人が一斉に見たり読んだりすることになりますので、読むのに十分な時間を確保してあげてください。


8.動画を書き出す

「ファイル」→「書き出し」→「Adobe Media Encoder キューに追加」を選択します。
Adobe Media Encoderが開きますので、下記の図の再生マークを押すと書き出しが始まります。

これで、エンドロールは完成です!
実際に書き出した動画が下記になります。この流れで作るとこんな風になるんだなと言う参考程度に見てみて下さい。

※この動画はブログ掲載用に設定を調整しています。


おわりに

いかがでしたでしょうか?
実際に動画として完成するとちょっと嬉しくなるのではないでしょうか!

今回はスタンダードなエンドロールの作り方でしたが、背景を変えたり、写真を載せたりするだけでもガラッと雰囲気が変わります。
ぜひ色々試してみて下さい。そして、思い出に残る素敵な結婚式のエンドロールムービーを作って下さいね!

それではまた!デジマースのコンでした。

簡単!アニメーションgifの作り方

新年、あけましておめでとうございます!
2018年もどんどん情報発信していきたいと思いますので、デジマースブログをどうぞよろしくお願い致します!

余談ですが、みなさん初詣は行きましたか?
私は毎年初詣に行きます。年末年始のまったりした雰囲気が大好きなので、それを味わいに行っています。
昼間に行くのも良いですが、出店や神社に明かりが灯る遅い時間に行くのがオススメです。
参拝客の混雑も若干緩和されていますし、出店から立ち上る湯気や明かりで非日常感が増し増しでワクワクします。

さて、今回のテーマは「簡単!アニメーションgifの作り方」です。
アニメーションgifに興味があるけどどうやって作るのかわからない、思ったように上手く動かせない…とお悩みの方向けの簡単な内容になっていますので、ぜひ試してみて下さい。

作業環境は下記の通り、Adobeのソフトを使用して作成します。

—————————-

■ Illustrator CC 2018
■ Photoshop CC 2018

—————————-

それでは早速作ってみましょう!


01.何を作るか決める

何を作るか決めましょう。
「どんなモノを作るか」だけでなく、「どんな動きをさせるか」までイメージすると作りやすいです。
例えば「ボールを作って」「上下に跳ねる動きを付けよう」とイメージすることが大事です。

私は「犬を作って」「嬉しそうにしっぽを振る動き」のアニメーションgifを作りたいと思います。


02.アニメーション用の素材を作る

アニメーション用の素材を作ります。まずはラフを描き、Illustratorを使って描き起こします。
“アニメーション用”とはどう言うことかと言いますと「パーツごとに分けて作る」と言う意味です。

簡単な例えですと、「犬のしっぽを動かしたい」時は、「しっぽ」と「それ以外の部分」を分けて作ります。こうすることで、後で動きを付ける時に楽に調整することが出来ます。

分けて作っておかないと、いざしっぽに動きを付けよう!と言う時にパスで調整することになるので、非常に時間が掛かってしまいます。更に、やっぱり元に戻したいと思った時などの修正も難しくなってしまいます。

パーツごとに分けて作る際、最初からバラバラに作ると難しいと思いますので、ラフをなぞる過程でパーツごとに区切って下さいね。

パーツを分けると言っても、実際にどこをどう分けたらいいの?と疑問に思う方もいるかと思います。
基本として、まずはパーツをザックリ大枠でイメージすることが大切です。

大枠で捉えてから、動きのイメージに合わせて必要なパーツの足し算と引き算を行います。
必要なパーツの数は、どんな物にどんな動きを付けたいかによって1個~数百個に変わります。

例えば生き物の場合だと、「頭」「胴体」「上肢」「下肢」の4つが大枠のパーツになります。大枠が捉えられたらパーツの足し算と引き算を行います。
頭だけ動かしたいなら、「頭」と「それ以外」の2つのパーツが必要になります。
頭の動きと、歩行のアニメーションも付けたい場合は、「頭」「胴体」「上肢」「下肢」の4つのパーツが必要になります。

さらに、「肘や膝を曲げる」「瞬きをさせる」と言ったより繊細な動きを付けたい場合は、もっと多くのパーツが必要になります。
表現したい動きをイメージしながら、必要に応じて「腕」「手」「脚」「足」「指」「耳」「目」「口」など、細かく分けてパーツを作るとより自由に動かすことが出来ますよ。

関節や接続部分を意識するとパーツを分けやすいですが、指は?瞼は?と細かく意識し過ぎると果てしないので、イメージする動きに合わせてほどほどに分けて下さい。

今回は犬を作りますので、基本の「頭」「胴体」「上肢」「下肢」と、「耳」「目」「口」「しっぽ」の大きく8つのパーツに分けて作っていきたいと思います。
パーツを作る際のコツですが、パーツ同士が重なる部分は面積に少し余裕を持たせて作って下さい。理由としては、パーツを動かした時にスキマが出来ないようにする為です。

上記のことを意識しながら、Illustratorに新規ドキュメントを作ります。最初のレイヤー名は「01」にしておいてください。
レイヤー01のアートボードに犬を作っていきます。
実際に作った物が下の図になります。

一見普通の犬の絵ですが、分解するとパーツが沢山ありますね。
これでベースとなる素材は完成です。


03.コマを作る

素材が出来たら、次はコマを作っていきます。
アニメーションgifは、複数のコマをパラパラ漫画のように再生することで動いているように見せます。

先ほど作ったレイヤー01が1コマ目になりますので、これをベースに2コマ目を作っていきます。

レイヤーパネルのレイヤー01をコピーして上に複製を貼り付けます。これが2コマ目になりますので、レイヤー名を「02」にします。
これで、アートボード上の前後に同じ絵が重なった状態になっているかと思います。

レイヤー02のパーツを動かして、2コマ目を作っていきましょう。
イメージする動きに合わせて、レイヤー02のパーツを傾けたり移動させたりします。
今回はしっぽを振るアニメーションにしたいので、まずはしっぽの位置や傾きを変えます。

位置が決まったら、これで2コマ目は完成です。
ちなみに、02のレイヤーの左側にある目のアイコンを表示させたり消したりすることで、Illustrator上でアニメーションを疑似的に確認することが出来ますよ。

この要領で、レイヤー02の他のパーツも動かしていきます。
目や口、耳なども調整を行います。

これで2コマ目も完成です。

今回は2コマを繰り返し再生するアニメーションにしますので、これで素材は揃いました。
もっと複雑な動きを付けたい場合や動きを滑らかにしたい場合は、必要なコマ数は増えていきます。

最後に、アートボードをコピペして、レイヤー01とレイヤー02をそれぞれ別のアートボードに配置します。
その後、アートボードごとにPNG形式で描き出してください。ファイル名はそれぞれ「01」「02」として下さい。


04.アニメーションさせる

いよいよアニメーションさせる作業に入ります。
ここからはPhotoshopを使います。

PhotoshopにPNGファイル「01」をドラッグ&ドロップして下さい。その上に重ねるようにPNGファイル「02」もドラッグ&ドロップします。
ここまでで、Photoshopの画面は下の図のようになっているかと思います。

一度、レイヤーパネルのレイヤー02の目のアイコンをクリックして非表示にします。
「タイムラインパネル」の「フレームアニメーションを作成」をクリックします。
すると、タイムライン上にレイヤー01が表示されます。これが1コマ目になります。

次に、タイムラインパネルのレイヤー01を選択した状態で、タイムラインパネルの右上にあるメニューを選択します。
いくつか選択肢が表示されますので、「フレームをコピー」を選択した後、「フレームをペースト」を選択します。
モーダルウィンドウが開いたら「選択範囲の後にペースト」を選びます。
タイムラインパネルに、左上に「2」と書かれたもう1つレイヤー01が表示されたかと思います。

左上に2と書かれている方を選択した状態で、先ほど非表示にしたレイヤーパネルのレイヤー02を表示させます。また、レイヤー01を非表示にしておきます。

タイムラインパネルの1コマ目と2コマ目の「ディレイ時間」を「0.5秒」に、「ループ回数」を「無限」に設定します。

これでアニメーションさせる準備は整いました。
タイムラインパネルにある再生ボタンを押してみて下さい。絵が動き出します。
実際の動きを見て、ディレイ時間やループ回数を調整してみて下さい。

「Web用に保存」でgif形式で書き出せば、完成です!


おわりに

いかがでしたでしょうか?
アニメーションを作るのは難しいイメージがあった方も多いかと思いますが、このような単純な動きであれば簡単に作ることが出来ます。
もっと複雑で滑らかなアニメーションを作りたい!と言う場合も、ご紹介した工程を繰り返したり増やしたりすることで可能になります。
時間は少し掛かってしまいますが、コツコツ作ることで誰でも作ることが出来ますので、ぜひ楽しんで作ってみて下さい。

それではまた!デジマースのコンでした。


UIとアニメーションの関係②

必要最低限の機能は揃っていてもアニメーションが一つもないアプリケーションがあった場合、機能面では問題がなくともUI/UX的には優れているとは言えません。
もしそのようなアニメーションのないアプリが存在した場合、あらゆる動作は唐突で、自分が現在どのページにいるのか?どのページから何を呼び出したのか?など、全ての動作にストレスが生じます。UIにアニメーションを取り入れる事で表示に順序が生まれ、目で追うことのできない唐突な動きを削ることができます。このようにアニメーションはユーザーとOSの対話をスムーズに行うための重要な役割を担っています。

ここまでは前回の記事でご説明した通りですが、アニメーションの役割はOSとの対話をスムーズにするだけではありません。アニメーションを使用して楽しさを演出することで印象に残るUXにする事が可能です。
例えばSNSでハートの形をしたグレーのいいねボタンがあった場合「押した直後にピンク色に切り替わる」場合と「押した直後にハートの周りにキラキラした光が浮かびハートが動きながらピンク色に切り替わる」場合では、後者の方が印象に残りやすくなります。コレはいいねと言うポジティブな動作に合わせたアニメーションだからです。大げさに言うと動作と感情に合わせたアニメーションだからです。
また、アニメーションはユーザーの楽しいという体験に影響を与えるだけではなく、ネガティブな動作のストレスを和らげたり、ポジティブな印象に変えることができます。視覚的に楽しければ、ユーザーは印象深く質の高いUI/UXと判断するでしょう。

今回のブログでは、ユーザーの目線や意識を惹きつけたり、体験に影響するアニメーションをいくつかご紹介致します。

1. 反応を示すアニメーション

SNSやECサイトで見かける「いいね」や「お気に入り」ボタン。押した際にアニメーションがあると、押した後の反応が伝わりやすくなるだけではなく、ポジティブな感情とリンクし、楽しい印象を与える事ができます。

2. 状態の切り替えのアニメーション

こちらは機内モードに変更した際に見られるアニメーションです。ONに変更した際には飛行機が飛んでくる。OFFの場合は飛行機が飛んでいく。動きは小さいですが、このような細部への配慮にも、ユーザは楽しさやサービスの質の高さを感じます。

3. 強調のアニメーション

使用して欲しい機能がある場合や、通知がきている場合などにアニメーションを使用することで要素を目立たせることができます。堅苦しい説明がある場合などに使用すると、堅苦しさを和らげることができます。

4. アニメーションの使いすぎに注意

アニメーションは小さくても動いているため目立ちます。そのためアニメーションを多用すると目線が散り、逆にどの要素も目立たなくなります。また、要素の優先順位やシンプルさが失われますので本当に目立たせたい所にだけ使用する事をオススメします。
アニメーションがよく作りこまれていてもアニメーション自体がくどくなっていたら意味がありません。具体的には動作が長い・派手という状態です。この状態だと使用する度に鬱陶しくなります。ユーザーがアプリを何十回、何百回と使用し、アニメーションに新鮮味を感じなくなった瞬間、アニメーションは目障りになります。ツール系アプリ等では特に使いどころに気を付けるべきかと思います。


アニメーションはUXに影響します。私はアプリを使った時にキャラクターが動いたり、ページ内で面白い動きがあった場合、良くできているな~とか、楽しいな~と思います。アニメーションは使用感の向上だけではなく楽しさの演出にも役立ちますが、アニメーションは一度気になりだすととにかく鬱陶しくなってしまいます。使いどころを良く検討した上で組み込む事をお勧めします。

UIとアニメーションの関係

こんにちは、ハラです。モバイルアプリで何気なく見るアニメーション、実は見た目を良くする為だけにあるのではなく、使用時のストレスや違和感をなくし使いやすさや満足感を高めるために使用されています。今回のブログではそんなUIのアニメーションについてご紹介いたします。

見た目だけじゃないアニメーション

まずは①の画面と②の画面のメニューボタンを押した後の反応を見比べてみてください。①と②でユーザーに違和感を与えないメニューの表示方法はどちらだと思いますか?

  ①    ②

 

大抵の方は②の方を選んだのではないでしょうか? ①ではメニューボタンを押した後にメニューが突然現れました。対して②ではメニューがスライドして現れました。スライドしてメニューが出てきた場合の方が違和感が無いのはなぜか? それはスライドして現れる方が現実に近いからです。現実では魔法のようにいきなり何かが出現することはありません、ユーザの想像を越えない現実に近い動きを加える事で自然でストレスのないメニューの表示が可能となります。①のように「よくわからない場所から突然現れる」という事になると、目線をどこに置くべきか定まらずストレスとなります。
ユーザーは、現実で起きる動きに近い表現に対しては自然に適応します、非現実的なアクションを起こすとユーザーは混乱してしまい、複雑なUIと捉えてしまいます。

そのほかにもアニメーションを使うと効果的な場面をご紹介します。

更新の動作
   

 

こちらは「画面を下にスワイプして放す」という動作により更新を行った場合に現れるアニメーションです。画面のどこからでもスワイプにより更新する事ができるこの方法は、ナビゲーションバーまで指を伸ばして更新ボタンを押し、画面に更新中と表示されるという流れがないため、ユーザにとってはボタンよりも楽な操作となります。しかし、このスワイプ更新にはアニメーションが必要不可欠です。もし、この操作にアニメーションが無かった場合、気づきとなる要素がないため、ユーザーは“どこまで下げればいいのか?” “更新がされているのか?”と悩んでしまいます。かといってどの辺りまで下げるべきなのかをチュートリアルで説明する事は、読まれるかわからない上にユーザーの使用を一時的に止めてしまうため、最良の手段とはいえません。このスワイプ更新のように、行って欲しい動作のイメージに沿ったアニメーションを加える事で、ユーザーは煩わしいチュートリアルを読む必要がなくなります。

削除と詰め
  ×    ○

 

リストなどで追加・削除を行った際にアニメーションが無かった場合、要素が消えたことや消えた空間が詰められたということがあまりにも突然で、ユーザーが認識をする事が難しく混乱します。また、削除と詰めなどの複数の動作が同時に起きる事も混乱の原因になります。この場合はアニメーションにより「削除」→「スペースを詰める」と言う順序をわかりやすく表示する事で混乱を避けることができます。このようにアニメーションにはアクションの順序を伝える手段として有効です。


UIにアニメーションを取り入れる事は非常に重要です。「言われてみれば、ここにアニメーション使われているよね」と、思われるぐらい自然に組み込むことが理想です。また、ポジティブな体験を伝え、ユーザーを飽きさせないようにする・惹きつけるアニメーションももちろんあります!(こちらもまた別の機会にご紹介してみたいと思います)では。

初心者向け!エンドロールの作り方①[Illustrator編]

こんにちは!
今回のテーマは「初心者向け!エンドロールの作り方①」です。
エンドロールの中でも、結婚式の披露宴などで流すエンドロールムービーの作り方をご紹介します!
「結婚式の費用を節約したいからエンドロールは手作りしたい!」「友人から頼まれちゃった」「でも作り方がわからない…」と言う方はぜひ参考にしてみて下さい!

今回は、まずどうやって文字を組めばいいの?と言う方向けにIllustrator(イラストレーター)を使用した静的なエンドロールの作り方をお話したいと思います。
「初心者向け!エンドロールの作り方①[Illustrator編]」の続編、「初心者向け!エンドロールの作り方②[After Effects編]」では、After Effects(アフターエフェクト)を使用した動的なエンドロールの作り方をご紹介しています。
ぜひそちらもご覧ください!


使用するソフト

今回は1種類のソフトを使用して動画を作ります。

■Illustrator(イラストレーター)

バージョンは「CC 2017」を使用しています。


作成の全体の流れ

作成の全体の流れは大きく分けて3つです。

①作るべき動画のサイズと素材を確認。
②Illustratorでテキスト作成・文章の構成確認。
③After Effectsでテキストが上にスクロールする動きを付けます。

After Effectsでテキスト作成をすることも出来ますが、名前の抜けや誤変換などミスがないかのチェックがしづらい為、まずはIllustratorでテキスト作成を行い文章の構成まで確認することをオススメします。
今回は①と②についてお話していきたいと思います。


エンドロールを作ろう!

1.作るべき動画のサイズを確認
作るべき動画のサイズを確認することはとても大切なことです。式場のプロジェクターのアスペクト比が4:3なのか、16:9なのかなど、動画を再生する設備によって作るべき動画のサイズは変わってくるからです。
いざ本番で再生しようとした時に上手く動画が映らなかった…なんて事が起きないように、利用する式場などにしっかり確認して下さい。

2.動画に使用するゲストの名前リストやメッセージリストを用意しましょう
エンドロールには名前が不可欠です。また、新郎新婦からゲスト1人1人へお礼のメッセージを添える場合もあります。ゲストの人数と名前をしっかり確認し、メッセージは誰に宛てているのかリストを作っておきましょう。
後ほどIllustratorで作業する中で、「新郎ゲスト」→「新婦ゲスト」の順番で並び替えたり、更に細かく「会社関係」→「友人」→「親族」→「家族」に並び替えますので、リストの段階でその並びになっていると後が楽ですよ!

3.Illustratorで新規ドキュメントを作成
Illustratorを立ち上げ、「ファイル」→「新規」を選択。今回は640×360(16:9)の画面サイズを想定して作成していきます。
※必要な動画サイズに関しては、[1]で説明したように利用する式場に確認してみて下さいね。

4.背景の作成
レイヤー1に「長方形ツール」で黒い縦長の長方形を作ります。これがエンドロールの背景になります。レイヤー名を“背景”にしておくとわかりやすいです。
高さは仮で5000としていますが、結婚式に出席する人数に合わせて自由に変えて下さい。

この段階では「整列」の設定は「選択範囲に整列」にしておいてください。

5.テキストボックスの作成
レイヤー2を作成します。このレイヤーに出席する人達の名前やメッセージを記入していきますので、レイヤー名は“テキスト”などとしておいて下さい。
「長方形ツール」で3種類の長方形を作ります。それぞれ「名前」「敬称」「メッセージ」のテキスト領域となります。
長方形が作れたらグループ化してしまいましょう。3つ選択した状態で「オブジェクト」→「グループ」でグループ化することが出来ます。

文字を組む際はルールを作ると見やすくなります。右揃えなのか中央揃えなのか、文字は1行に何文字まで入るのか決めることで、読みやすく統一感のあるエンドロールにすることが出来ます。
今回は「名前」は6文字まで対応で、「メッセージ」は4行かつ1行に14文字収めると言うルールで作成してみました。また、「敬称」は“○○ちゃん”にも対応できるように3文字分の領域を確保しています。
名前やメッセージ領域をもっと広く取りたいと言う場合は、長方形のサイズを大きくするなどして調整してみて下さい。
文字領域はこのくらいがいいけど名前が6文字以上の方がいる…と言う場合は、6文字の領域の中で文字を縮めて記載したり、2行で記載しても良いかと思います。

6.テキストの作成
「文字ツール」を選択し、長方形の左端にカーソルを合わせて左クリックします。これで長方形の中にテキストを配置することが出来ます。
上手くいかない時は、カーソルの形が「文字ツール」から「エリア内文字ツール」に変化した所でクリックして下さい。

名前やメッセージを入力すると下記の図のようになります。使用しているフォントや文字設定の情報も載せていますので、参考にしてみて下さい。
メッセージのフォントサイズは名前より小さくするとメリハリが付き読みやすいです。名前より70%~80%ほど縮小して下さい。

7.テキストと背景の整列
作成したテキストを先ほどの黒い長方形の背景の上に重ねると、下記の図のようになります。

図のようにテキストを背景の真ん中に配置したい場合は、背景とテキストを選択した状態で「整列」→「水平方向中央に整列」とします。

8.テキストをコピペして書き換える
[7]のテキストをコピペして、名前やメッセージを書き換えて下さい。
親族や友人グループなどまとめてメッセージを書きたい場合は、[5]の「名前」と「敬称」の長方形の高さを変えます。
例として親戚の叔母さん家族の設定で組んでみました。夫、妻、お子さんの“目上の方”順で、兄弟がいる場合は年齢順です。お子さんの敬称は“様”のままでも良いですが、小学生など若い方でしたら“○○ちゃん(くん)”など砕けた言い方でも良いかと思います。

9.テキストの並びを整える
名前とメッセージの入力が完了したら、「新郎ゲスト」→「新婦ゲスト」の順番で並び替えます。更に細かい順番は「会社関係」→「友人」→「親族」→「家族」の優先度が一般的です。
下記の図のようにグループごとに間隔を空けて配置していきます。文字が動くことを考慮して、読みやすいように間隔は広めに取りましょう。
今回の場合はテキストボックス同士の間隔が107px空くように配置しました。

空けたい間隔のサイズの正方形を作ると作業がしやすいです。ここで作った正方形は“作業”レイヤーを作って置いておきましょう。
作業が終わったら、レイヤーウィンドウの「目のマーク」をクリックして非表示にして下さい。

最後に、出来上がったテキストを全選択します。レイヤーウィンドウの右端にある“○”をクリックすると一括で選択できます。

選択出来たら「オブジェクト」→「グループ」でグループ化します。

10.アートボードを整える
[9]まで完了したら背景(黒い長方形)の高さを確認します。
名前やメッセージの量によっては、最初に設定した高さと異なっている場合があるかと思います。

確認できたらその数字をアートボードの高さに反映させます。※今回は初期設定のままの5000pxで進めます。
「アートボード」→「高さ」で数値を変更します。

11.アートボードに整える
それが終わったら「整列」の設定を「アートボードに整列」にします。

背景を選択して「整列」→「水平方向中央に整列」「垂直方向中央に整列」とします。
テキストも同じく、選択して「整列」→「水平方向中央に整列」「垂直方向中央に整列」とします。
※上記の後、テキストを背景に対して左右どちらかに寄せたい場合は「選択ツール」で手動で移動させてください。

これで、アートボードに全ての要素が配置されたかと思います。
下記の図はIllustratorの画面全体を見た時のイメージです。(12.5%の画面表示です。)

最後に名前やメッセージに間違いがないか確認して、問題なければ静的なエンドロール作成は終わりです!
おつかれさまでした!


おわりに

いかがでしたでしょうか?
黒い背景にテキストが整然と並んでいると動いていなくてもエンドロールっぽさが出てきますね。

そして次回は、いよいよAfter Effects編です!
今回作成したIllustratorのデータを使ってAfter Effectsで動きを付けていきますので、ぜひそちらもご覧ください!

それではまた!デジマースのコンでした。

マテリアルデザイン~アニメーションpart2~

こんにちはもしくはこんばんは!
デザイン業務に関わっております、デジマースのスガです!

2016年も残すところあとわずかになりました。
お家の片づけも仕事もやる事いっぱいの師走は本当に忙しいですね。
日に日に時間の流れが速くなっているような気がします。

さてさて、前回の記事にてマテリアルデザインのアニメーションについてお話しさせて頂きました。
今回も引き続きアニメーション部分に触れていきたいと思います!

*。゜・。ここでは全部を理解せずとも、デザイナーでなくとも
何となく分かるをベースに書いております。・。゜*


簡単に前回のおさらい!「マテリアルデザインのアニメーション」とは?

★マテリアルデザインとは触感的表現を含ませたものをさしますので、
よってアニメーション効果にもリアリティのあるルールを適応
★現実的な動きに合わせたモーションが推奨されている

マテリアルデザインのアニメーションの利点とは?

さっそくではありますが、アナタは下記の様に見たい記事を見つけました。

pic_161222_01

如何でしょうか。このパッと切り替わる動作は普段見慣れている人が多いかと思います。
求めている動作が早いことはとても良い事です。
まるで、長いマラソンのスタートとゴールの部分だけを見た様な感じです。

そこで、もっとユーザーメリットが組み込まれたらどうでしょう?
動作からすぐに結果が出ている時点でスピード面において充分メリットがありますが、
ここに「ユーザー自身が行った動作に対して、今自分がどのような状態なのかが一目で分かる」とどうでしょう。

またまた、アナタは下記の様に見たい記事を見つけました。

pic_161222_02

如何でしょうか。動作と結果の間にこのようなモーションを加えることで、
ユーザーは自分が行った行動に対して、アクションが起こるので、
今自分がどのような状態なのかが一目で分かる状態になります。

長いマラソンはスタートとゴールの間に、走っている過程があります。
その過程の部分をマテリアルデザインではユーザーの操作に合わせてリアリティのある現実的な動き
を加えスライドや拡大などのモーションで次のページへ誘導を行います。
つまり今までなかったはっきりとした遷移過程のアニメーションによって、
ユーザーの目線の動きもバッチリとらえ(人はつい動くものなどを追ってしまいますよね)
次々起こる動作をスムーズに解消していくことが出来ますね。

最後に

現実的な動き(例:スタートとゴールの間)に合わせたモーションを加えると操作もより分かりやすくなります。
これらのモーションには様々な種類があり、スライドしたり、画面内のパーツが入れ替わったり回ったり……様々なものがあります。

もしこれからスマートフォンでサイトなどを見るときに少し注意して見てみて下さい。
特に気にしていなかっただけで、実は上記のようなモーションで誘導されていたかもしれません。

まだまだ、マテリアルデザインは奥が深いですね。
次回もマテリアルデザインについて、項目をピックアップしながら全部を理解せずとも、デザイナーでなくとも何となく分かるをベースにお伝えしていければと思います。

それでは、またお会いしましょう!

【Adobe Animate CC】Flashツールから進化したWebアニメーションとは

今回はWebの一時代を華やかに着飾った「Flash」の、
代表的な制作ツールの進化(需要対応?)についてです。


そもそも「Flash」とは?

元々は旧Macromediaが開発したインタラクティブWEBアニメーションファイルを制作するツールで、
現在はAdobe内にて開発が継続しています。
Webページの切り替えにオーバー表現なアニメーションが展開されたり、
アーティスティックな個人WebサイトのUIでは目を奪われる表現に使われたり、
さらには、
YouTubeなど、Web動画再生の仕組みにも過去使われていました。

そんなFlashの制作ツールはタイムライン制御GUIによる直感的な操作が特徴で、
JavaScriptやhtmlなどが苦手なWebデザイナーでも簡単にアニメーションが作れたことで大変支持を得たのです。

「Flash」で出来ること

また、
特に独自のActionScriptを使用することでインタラクティブな制御か可能となり、
プログラムスキルがあればFlashアプリも作ることが出来る特徴があります。

近年では、SEO対策や脆弱性問題とブラウザ組み込みプラグインという特性上から標準搭載されなくなっている傾向もあり、
AdobeはFlashを「2020年末に終了」を正式発表しております。

時代の流れにも対応

そんな、Web業界で余命を宣告されたFlashのオーサリングツールである「Adobe Flash」ですが、
ツールの名称を「Adobe Animate CC」に変更して開発が継続されることになり、世のフラッシャーに希望を与えました。

注目は、近年対応を進めてきた「HTML5 Canvas」機能の実装によるJavaScriptアニメーションアウトプットであり、
今後のアップデートによって、動画書き出し含めて機能充実が期待されています。

「Adobe Animate CC」の活用

個人的な意見を述べるのであれば、
デザイナーが慣れ親しんだこのオーサリングツールを、
最終的なアウトプットやコンテンツを制作する目的に限定するのは大変もったいないので、
UIの確認を行う「プロトタイピング」の工程で大いに活躍することが出来ると考えています!

UX全体を考慮するのであれば単純な画面遷移アニメーション(トランジション)具合も重要なサービスの振る舞いになってきますので、
「静」でなく「動」の表現を企画者や開発者に伝える手段として適切なツールなのではないでしょうか。

「Adobe CC」を導入している環境であれば「Adobe Animate CC」を是非活用して、
プロジェクトメンバー間で、プロトタイピングによる使用感の共有を進めてみてください。

次回も日々変化するWeb制作環境などにスポットを当ててご紹介します。
サービスデザインに関わっているデジマースのネモトでした。