きょうきゅうかた | アババイ 制作ブログ

アババイ 制作ブログ

アババイの制作が定期的に制作事例の紹介、制作こだわりポイント、WEB知識ネタ・・・などを紹介します。

お久しぶりです。まつざきです。

9月も半ばを過ぎ、すごしやすい天候になってきました。

今月は少し新規の案件に絡みつつ相変わらずの修正ライフで日々様々な業務をしております。


修正でデザイン、コーディング、システム等いろいろ楽しい業務を振っていただいているのですが、なんといってもこの業界、新しい技術やトレンドがたくさん出てきます。

あれもやりたいし、これもやってみたい・・・。

しかし、そう都合よく需要と供給が一致するはずもなく常に供給過多の状態です。


たかいくん


なので、今後この場を借りて「頼まれてもないけど楽しそうだからやってみました」と

技術の押し売り、安売りをしていくことに勝手に決めました♪



第一弾は”動画背景”、少し前から見られるようになった映画等のプロモーションサイトでよく見られるアレです。

インパクトあるけど使いどころが意外とないです。業種をかなり選びます。


手順は以下の通りです。

1.何でもいいから動画を撮影。(今回はiphone5sで撮影)
※今回は時間がなかったので割とどうでもいい動画です。

2.動画の加工。
※まともに使うとアスペクト比の関係上無駄な余白ができるのと容量が重すぎるので加工します。
 あと、音はいらないのでついでに消します。

3.コーディング
※こちらに関してはやり方は色々あるようですが今回はhtml5のみで実装しました。
理由はjqueryを使用するほどでもないかなと思った程度です。

そんなこんなで出来上がったのがこちらです。
↓↓↓↓↓↓↓---------------------------------------------

http://ababai.co.jp/takai/takai.html

---------------------------------------------

…。
なんか思ってたのと違います…。
素材が原因でオシャレに見えないのは仕方ないとしてもうちょっと何とかなるはず…。


4.悪あがき
・ドットのマスクをかける。
サーバーやユーザーサイドの負荷を考え動画をかなり圧縮する必要があります。
荒いのは仕方ない誤魔化そうというのがよくつかわれるこの手、小さなドットや間隔の狭いボーダー等を敷くと
まあ何とか許せる感じになるのは不思議なものです。今回はドットにしました。

・WEBフォントを使ってみる。
これも何となくやってみたかったものの一つです。ついでなのでやってみました。

こちらが完成です。
↓↓↓↓↓↓↓---------------------------------------------

http://ababai.co.jp/takai/takai02.html

---------------------------------------------


そんなこんなで満足できたので今回はここまでとします。

何度も言って申し訳ないのですが今回は素材がアレだったのでファウンドフッテージ物のB級モンスター映画感が半端ないですが

使いどころと、素材さえ完璧ならかなりいいモノが作れそうだなと思いました。

ではでは