株式会社BesoでUIUXデザイナーをしているTommyです。
このシリーズも3つ目となります。

3ヶ月目の2022年6月のキーワードは、大きく3つが挙げられます。

イラストアニメーション
カンピロバクター
色

イラストアニメーションをつくる

前回の2ヶ月目の記事で書いたのですが、Besoが手がけるプロダクトZoooUのブランドコンセプトが決まったのを踏まえて、ZoooUでどんなことができるのか、その紹介動画を作りました。

制作の流れは以下になります。

個人で受ける映像制作案件ではクライアントに提出することもあり、絵コンテをしっかり作ることが多いのですが、今回は社内での認識合わせが目的なので、手軽に手書きレベルにとどめました。

今回、自分としては初めての全編イラストアニメーションで、どのように準備すればよいか手探りだったのですが、

イラレでアニメーションに使う素材を用意しながら、イラレ内で素材をカット順に並べて見せるのが、社内の他のメンバーにはどんな映像になるかのイメージを共有しやすいことがわかりました。（見せた時の反応がよかった）

実際に作ったのがこちらです！

ラストのZoooUのロゴマークとなるゾウさんの動きが
個人的には1番のこだわりポイントです笑

動画制作を進める間に、実は。。

この動画の制作期間中、大きな動きが実はありました。

デザイナーが増える
4月からBesoで働き始めていましたが、プロダクトのUIUXにとどまらず、動画のような販促プロモーションに関わる制作物もあり、早々に業務量の多さと本社にて1人でまわす限界を感じていました。

そこで、デジハリの知り合いをBesoに誘っていたのですが、ありがたいことに入社を決めてくれて、6月からジョインしてくれました！

そのジョイン初日に異変が生じる
迎えたジョイン初日、いつも通り出社して無事に入社の手続きを進めたのですが、突如、腰に重さを感じ、悪寒が走りました。

ん、なんか変だな

と思いつつも仕事はそのまま行い、ただやっぱ体調変だし、ということで、この日は昼過ぎに帰宅しました。
夕方にミーティングがありオンラインで出たのですが、この時体温を測ると38.5℃…

あ、コロナなったかも…
ともちろん思いました。

翌日、予約が取れたので近所の内科に駆け込み、PCRを受けました。
結果は陰性でホッとしたのですが、この時点で39.8℃まで熱は出ていたので、とりあえず解熱の点滴をしてもらい帰宅しました。

コロナ陰性ではあったので、解熱が効いているうちに実家に戻ったのですが、その頃からお腹の調子が悪くなりました。
ちょっと何か食べたらすぐにトイレに駆け込む感じです。。

そんなトイレ行脚を繰り返す中で、思い出します。

あ、そういえば週末、鶏の生刺し食べたわ

実家近くの病院に再度行き、カンピロバクターで薬をもらってようやく快方に向かうのですが、1週間ぐらいはお腹が壊れていた感じです。

もう、鶏の生肉は食べない、と誓いました。

Besoに入ってくれたのに、初日からいきなりごめん、といった感じでした。

色とカラーパレット

色立体を知る

新しく入ったデザイナーは、色のことをよく知っていて、特に色の理論と言いますか、理論的にこの色の組み合わせがいい、といったあたりに造詣が深いです。

そういうわけで色のことを教えてもらう機会があり、そこで初めて色立体なるものがあることを知りました。

色立体、なんだそれは？？
（ちなみにアマゾンで模型が買えるようです。）

そのデザイナーの説明を聞きながら理解したのが、明度・彩度・色相を以下のように3次元的に配置しているもの、ということです。

イメージ図こんな感じです↓

カラーパレットでの疑問

ちょっと色についての理解が深まった、
と思いながらイラレやFigmaのカラーパレットを使う中で、疑問に思ったのがこちらでした。

「一番下は000000の黒がずっと続くのなんで？」

他の箇所は、何かしら6桁の数字が変わると思うのですが、一番下だけは
どこを選んでも000000

これはどういうことでしょうか？

Figmaとかでカラーパレットを使おうとして開けると、最初は"Hex"として6桁の数字で色指定ができるようになっていると思います。

このHexをHSBに変えてみます。

すると、気づくと思います。
真ん中の数字が変化している！

HSB：H＝色相（Hue）, S＝彩度（Saturation）, B＝明度（Brightness）なので真ん中の数字は彩度の数字になるのですが、
同じ黒でも、実はHSBとしては彩度が変化していることになります。

Hexによる16進法の6桁でみると何が違いかわからないが、HSBで見ると
彩度が違う、これがカラクリでした。
（明度が0なので結局のところ黒は黒なのですが…）

ところでそういえば、

色相・彩度・明度、って

…

色立体ですよね！

ここまできて、
あ、カラーパレットって色立体のとある面のことか、と悟りました。

ぐるっと360℃まわる色相は平面ではどうしようもないので、
便宜上カラーパレット近くのバーになっています（Figmaでは）。

色相の角度によって、パレットとして表示する面を変化させている
感じですね。

色立体の考え方からカラーパレットの仕組みがわかり、ようやく色と
カラーパレットと友達になれた、そんな気がした3ヶ月目でした。

最後までお読みいただき、ありがとうございました！

参考：今回の記事の内容に関連するもの