WORKS

2020.10.05

HOWDY JOHNNY (ハウディジョニー) オフィシャルサイト

HOWDY JOHNNY (ハウディジョニー) オフィシャルサイト

Visit

howdyjohnny.com

Summary

「ドリンクウェア」にフォーカスしたプロダクトを展開する RIVERS による、アウトドアを題材にしたオリジナルアニメ「Howdy Johnny (ハウディジョニー)」のオフィシャルサイトを制作させていただきました。関西弁で喋る陽気な熊と、ある日山奥へやってきた訳ありサラリーマンを中心に織りなすキャッチーで独特な世界観をクリーンなカートゥーンテイストで表現しています。



Technical Challenges

今回の案件で難しかった・時間がかかった点は以下の2つです:

  1. キャラクター画像の切り抜き
  2. ファーストビューのキャラクターの配置

 

1.キャラクター画像の切り抜き

動画のスクリーンショットでは画質が落ちてしまうため、まず ffmpeg を使ってターミナル上で最高画質の mp4 を PNG へ 一枚ずつ書き出しました。画質や fps など様々なオプションを細かく変えられるので便利です。画像以外にも、WebM や OGG に変えたり圧縮したりもできます。

切り抜きは Affinity Designer で行いました。1つのキャラクターにつきポーズが何通りもあるので複数枚切り抜く必要がありましたが、デザインするときに選別ができたので時間をかけた甲斐がありました。

 

2.ファーストビューのキャラクターの配置

できるだけレスポンシブにするため FV の画像のポジションは一つ一つ position: absolute で指定しています。最初はラップトップとモバイルを決め、それから少しずつ画面を動かしながらCSS の calc() を用いて滑らかに変わるようにしました。どうしても最適な計算がわからなくてある角度によってはちょっと厳しいところもあるため、画面の縦横比によって柔軟に位置を動かせるようにするのは今後の課題となりそうです。

 


Credits

[ Animation ]

株式会社ファニムビ(動画制作)

[ Website ]

Direction: 大石淳司
Web Design : 廣戸勇樹

CONTACT

masuda google maps

698-0025
島根県益田市あけぼの西町3-14

0856-25-7651

0856-25-7653

tokyo google maps

151-0063
東京都渋谷区富ヶ谷2-21-15,
松濤第一ビル 1F

03-6804-7896