エンジニアとのアニメーションの連携。 #1day1design-08

抽象的になりがちな、どこか難しい内容。

エンジニアさんに。
いざ！デザインを作った！動きを伝えないと！…ていうときに、「じゃあどういう動きにしたいのか」を昨今テレワークが押し寄せている中、弊社もリモートでビデオ通話なり音声通話なりで、mtgしているんですが。

その中で「アニメーション」という、なんとも言語化しにくい部分をいかに伝えるか、で最近右往左往しております…。

なんとかXDでパワーポイントに「こんな感じで…」ていう、紙芝居な絵コンテを作ってお伝えはしているんですが。やはりなかなか難しい…最近のお悩みの課題です。

そんな中で、エンジニアさんに連携する際に「あ、いい感じにアニメーションつけときますよ」なんて素敵な言葉とともにめちゃめちゃいい感じに仕上げていたこのサイト。

鈴乃屋ゆかたコレクション2021｜きもの鈴乃屋

スライドの動きだったり…マウスオーバーに追従して要素が動いているように見えたり…スクロールした際の商品名の英字をドラマチックに見せてくれたり…。

自分はうまくコーディングできないので、いつも土下座する勢いでエンジニアさんに依頼するんですが…本当にアニメーションまでやってしまうエンジニアさんの仕事の幅の広さ…毎度感服です。

おかげさまで尊敬している「bookma!」に掲載いただいたので、エンジニアさんに感謝…感謝です…。

bookma

ということで、７日目。（あれ、８日目じゃないか…？

今回作成したデザイン。

ベースにさせていただいたデザイン様。

Typography UI — Project 76

デザインルールについて。

デザインを作ってみて。

・今回は最初に作ったときと同じ用に、pinterestでぐっときたデザインをトレースさせていただきました。今回は画像からだったので、正確なフォント・文字サイズ・余白…とトレースできていない部分があるのですが。そのあたりを自分なりに「これはどうかなぁ」というので意識して対応。

・英字を縦に配置する、ていうのがやっぱりアクセントとしてかっこいい。あと写真のドロップシャドウがすごい個性的でキレイ。真似しようと思ってツールいじっていたんですが、PhotoshopのとXDで結構違うんですが。XDって細かく設定できないわりに、簡単に設定できるようになっているのでこれはこれで良き。感覚的に扱えるのがXD、細かく設定できるのがPhotoshop、ていう立ち位置なのがよくわかる。

終わりに。

画像からトレースをしているので、１つ１つ手探りで調べるのが楽しい…。

検証ツールでササッと！わかるのはすごい便利でいいんですけど、「このフォントなんなんだ…？」と１つ１つ確かめながらするのが良い…、ただ時間がかかるので今の時間になっちゃう…。

うまくタイミングを見極めて明日も頑張っていきたいところ。

明日も頑張ろう、わたし。