webデザインを参考に

seguimi


今回はヤマノススメMADで学んだwebサイトの動きを紹介したいと思います。

・テキストモーション


XY移動と透明度を使ったテキストモーション。

ものすごくシンプルですが、意識してよく見たら、いいなぁって思いました。
普段よく見かけているはずなんですけどね。
画面の外から入ってきて画面の外へ出ていくことしか頭になかった自分には、
とても勉強になりました。

 
入りの部分でXY移動と透明度100→0。
XYの移動量はテキストの大きさにもよるので、ちょうどいい数値を見つけてみてください。
いずれの移動もイージングの7番を使用しています。


・レイヤーを上手に使う



通常、画とテキストのコントラストが小さいと、読みづらくなってしまいますが、
画とテキストの間に一枚、黒背景透明度50を差し込むと文字が読みやすくなります。

 
カーソルを合わせると浮かんでくるようにしました。
別パターンで後ろの画像も少し拡大。


それぞれが別オブジェクトなのでちょっと数が多め。


黒背景、透明度50のレイヤーを一枚はさむだけで、
シーンチェンジをせずに、
新しい空間を作り出すことができるので、とても便利です。


・動きは後でつける



「この動きをしたらこうなった」ではなく、
完成形としてのレイアウトを先に決めて、
それから、「どういう動きでこのレイアウトにもっていこうかな」という順番で考えました。


 
今回のヤマノススメMADで一番大変だったのは、
レイアウトを考えることで、随分時間を費やしました。



巡回したwebサイトの中では、見たことのないような動きよりも、
シンプルかつ効果的なエフェクトが目を引いたような気がします。
参考としていくつか紹介します。

http://bianca-hair.com/
http://quentinmorisseau.com/
https://www.ficc.jp/
http://www.jp.playstation.com/scej/title/gravitydaze/ps4/

いかがだったでしょうか。
webサイトの動きやデザインは動画と共通する部分も多く、
MAD作りにも役立つと思います。

広告をナメたらアカンよ。
グラフィック文化を築いた13人: 『アイデア』デザイナーインタビュー選集
最も伝わる言葉を選び抜く コピーライターの思考法
キャッチフレーズの戦後史 (岩波新書)


Comments 3

There are no comments yet.
周防涼白  

いつも決まりきったブログとかしか巡回していなかったので、リンクのサイトはとても参考になります。ありがとうございます!!

以前、ブラーの使い方で「エフェクトは控えめに、かかっているかいないか程度」と発言がありましたが、今回のテキストモーションもレイヤーの件も、その小さな変化が見ている側に対して良い印象を与えていますね!

最初のローディングの演出とか途中の斜めの走査線? とかも見ていてぐっときます!!


よろしければ、歌詞の「時間が経つほど」のあたりの枠線の演出とかの解説をお願いしたいです。

更新、楽しみにしています!!

2015/11/30 (Mon)  | EDIT | REPLY |   
seguimi  
To 周防涼白さん

コメントありがとうございます。

細かいところまで見ていただいて、作った甲斐があります。

「時間が経つほど」の演出ですね。
少し先になるかもしれませんが、記事を書きますので気長に待っていただけると幸いです。

2015/12/02 (Wed)  | EDIT | REPLY |   
seguimi  
To 周防涼白さん

「時間が経つほど」の枠線演出の件についてですが、
”ラインとアウトライン”の記事内にてやり方を説明してありますので、
そちらを参考にしてみてください。

2015/12/07 (Mon)  | EDIT | REPLY |   

Leave a reply