## アニメーション基礎の基礎
BISENで習ったこと、実務における経験、他社開催のセミナーへ参加して身につけた価値観を解説します！
※前提の話が少々長い...？

### ■ 良いアニメーションをつくるためにすること。
スマートフォンやPCが広く普及している今、ゲームや映画・アニメなどの映像作品に触れる機会が多くなりました。
普段からゲームをしたりYoutubeを見たりすることもかなり多いと思います。
先生も1日中ゲームしてるときも全然あります！
しかし、ただゲームや動画を楽しんでるだけではもったいない。

学生時代に先生から **「いつまでも視聴者でいるな」** と言われたことをしっかり覚えています。
そのころから **「クリエイター目線」** で物事を捉えるというのは実践し続けています。

生活の中で、ゲームや動画はもちろんのこと、広告・チラシ・本など「デザイン」に触れる機会はたくさんあるはず。
それをどれだけ「クリエイター目線」で見れるかが、自分の中の引き出しに数に繋がっていきます。

映画を見ていて「ここの演出いいなー」と思ったら何がいいのかすこし分析してみる。
フライヤーなどを見て「ここの文字詰め気になるなー」と自分ならどうするか考えられているか。

このような小さな積み重ねで、違和感のない、心地の良いデザイン・アニメーションが作れます。
WEBのアニメーションに限らずに活かせる考え方なので1秒でも早く実践・継続しましょう！

### ■ 良いWEBデザインの考え方
WEBサイトの役割は **「ユーザーに正確に情報を伝えること」** になります。
まず、これが出来ていないものは論外。
これを突き詰めていくと、不純物を取り除いて**純度の高い情報**を伝えることに行きつきます。
ではその不純物とは何かというと、**不必要な違和感**。
先ほど少し話に出した、「ここの文字詰め気になるなー」とか「色がチカチカする」とか「フォント変じゃない？」などの素人から見てもわかるような**デザイン上のミス**は絶対に避けましょう。
アニメーションの場合は「ここ動きすぎじゃない？」とか「情報が表示されるのが遅い」のようなことです。
このような違和感が少ないことで情報を伝達する際の密度が上がります。

そこからより良いデザインにするためには**良い意味での異常性・違和感**が必要になります。
ここで言う異常性とは、**「今までに見たことのない」「典型的じゃない」** のようなポジティブな異常性。
ターゲットとするユーザーに対して **「変わっている」** こと。
ただし、突飛なことをするのではなく、文脈に合ったうえでの **「心地よい違和感」** を与えるのがコツ。
※世界中で唯一無二である必要はなく、文脈を意識したうえでの違和感・異常性を考える。

この異常性を与えるのに手っ取り早いモノが **アニメーション**。

### ■ 実務で意識すること
近年のWEB制作では、デザイナーとコーダーが分業します。
デザイン時点で100点だったものがコーディング後に80点になってしまっては多方面に申し訳ない...
なので絶対に100点、もしくはアニメーションをつけることによって100点以上にすることを目標としています。
そのためには前述した、**不必要な違和感**と**心地よい違和感**を意識しましょう。

難しい言い回しをしましたが、結局のところ程よくやればOK。

ちなみに良いアニメーションと悪いアニメーションの場合はこういった特徴。

#### 良いアニメーション
- デザインのテイストを生かせている
- 適切に注目を集める演出を出来ている

#### 悪いアニメーション
- デザインの良さを潰してしまっている
- 主張が強く視点がぶれる

「注目」「視点」というフレーズを出しましたが、アニメーションには **視線誘導（ミスディレクション）** を意識するのも大事になります。
脇役のパーツを激しく動かすと本来見てほしいコンテンツを見てもらえず不純物となってしまいます。
逆に言えば重要なパーツ・コンテンツについては他の要素と比べて大きく動かすなどして印象的に見せてあげましょう。
**コンテンツの情報の優先度も意識しましょう**、ってことです。

### ■ アニメーションを構成するもの
コンテンツの内容を踏まえて程よいアニメーションを付ける。
このことを意識すると、視線誘導とアニメーションに関する要素を理解していると良いでしょう。

- 時間　→　アニメーションしている時間
- 変化量　→　アニメーション前後の状態の差
- イージング　→　アニメーション中の変化率


注目度を自在に操るにはこの「時間」「変化量」「イージング」を意識しておくことが大事です。
直感的に理解している部分も多いと思いますが、改めてこのような要素でアニメーションは構成されていて、このような特徴がある、と理解しておくとアニメーションの微調整などがしやすいと思います。

### ■ 夏季休暇課題
ボタンにアニメーションは自分で考えてつけること。（最低3つ）
inview.jsを使って表示する際のアニメーションをセクション（タイトル、文章、カードリスト、ボタン）に適宜につける。