🚀

ビジュアルつよつよエンジニアになりたい

2022/06/23に公開

ちょっと飛躍したタイトルを付けましたが、「デザイナーさんにヒアリングしよう」と言う内容です。笑

私は普段、Webのフロントエンドエンジニア(以下エンジニア)をしています。
デザイナーさんが作ったページデザインを形にしていくのですが、
うちの会社ではアニメーションやインタラクションの担当はあいまいです。
(デザイナーさんやエンジニアさんによっても違いますし、プロジェクトでのアニメーションの重要性にもよります)

「アニメーションとか提案できたらもっといいものが作れそう・・・」とは思うものの、
どうしたらいいのか、何を学んだらいいのか漠然と悩んでいたのですが、
先輩エンジニアにサポートでミーティングに入ってもらった時に、「めっちゃ色々話してる・・・！！！！」と気づきがあったのでメモ兼ねて記事にさせてもらいます💪
(プロジェクトに関わる部分や具体例が出せず、わかりにくい部分あるかもしれません。ご了承ください🙏🥺)

ヒアリングが甘い🍬

ヒアリングがぼやっとしていた時の私は、こんな質問していました。

ホバーどうなりますか？
アコーディオンですか、モーダルですか？
表示アニメーションどうしますか？
メインビジュアルって動きますか？何か参考サイトとかありますか？

デザイナーに質問するのが大事とは思っていても、明確な部分しか聞けない&受け身・・・
できあがったデザイン、指示されたアニメーションを100として制作することが多く、デザインの「画」以上のものは作れない状態。
また、ちゃんと自分の言葉で理解しないと、出来上がったものの良し悪しが判断できず、ブラッシュアップにつなげられませんでした。

ヒアリングというか、必要最低限の確認をしている感じかもしれません。
これらの質問自体は間違ってるわけではないのですが、ブラッシュアップするときに闇雲にジタバタしてしまいがちでした🌩

ヒアリングするときのポイント

デザイン自体の説明だけではなく、「前提をきちんと聞いて、そこから深堀りしていく」 のが大事。
できれば、デザインが固まる前(クライアント確認前)とかに話して広げられると◎

前提をきく🌱

デザインのベースになる考え方を共有してもらいます。

デザインコンセプト
ターゲット
プロジェクトのゴール(このサイトで何をしたいのか？)

ここで聞いたポイントを、キーワードを出していきます。

このとき、ただキーワードを出して終わりで、はなく、
デザイナーさんに言われた言葉を、自分の言葉に変えて聞き返すのが大事です。
私の場合だと、似てる言葉やカタカナ（英語）を日本語に言い換えたりして、微妙なニュアンスを近づけていくのがいい気がしています。
「堅実」というキーワードから、「かたい」「実直」「誠実さ」「緻密さ」「重い/軽い」などをだし、どのニュアンスが合っていて、どのニュアンスは違うのか・・・？とか

そこからイージングや、キーになるモチーフを取り上げて、共通認識をかためていきます。
⚠️ここは経験則もあるので、やっぱり日々のインプットはだいじ
「ポップさ」を出したいので素早いイージングや角丸のモチーフが相性がいいかも、とか「重厚感」を出したいから余韻を大事にしたイージングを、とか

ページデザインを分解する🧩

前提を確認できたら、デザインの中にある要素を分解して、それぞれの役割を聞いていきます。

たとえば、「KVにある動画」「タイトルのテキスト」「装飾的なテキスト」などに分解し、
それぞれの重要性や印象の役割をわける。

ブラッシュアップの時の軸を確認🌷

さらに、ブラッシュアップするときの軸になるポイントも確認します。

プラスアルファの演出を持たせた時に、ユーザーにどういう印象を与えたいのか？
優先順位も確認する。

基本的に前提で出てきたキーワードがベースにはなるのですが、その中で特に強調したいポイントや、演出的になっても問題ない部分を確認しておきます。

また、以下は可読性よりも印象付けが強くなりやすい部分なので、リッチな演出を組み込みやすい・相談しやすい部分の気がします。

ローディング・オープニングアニメーション
セクションの切り替わり

ブラッシュアップ自体は、プロジェクトのスケジュールなどもあるので、マストではないと思いますが、見据えて考えられると、素敵ですよね。(精進します)

ヒアリング後、自分の言葉でまとめ直す

自分メモとかでいいです。
改めて、 自分の言葉でまとめて、人に説明できる状態にしておく のがだいじ。

そうすることで、 「なんでこう実装したか？」 を人に説明できるので、
ブラッシュアップや、意見のぶつかりが(建設的に)できてクオリティアップにつながります。
(あと、私は勝手に迷子になりがちなので、最初の咀嚼が後々の馬力につながったりもします笑)

そのほか

ヒアリング以外でも勉強になった、つよつよエンジニア先輩のポイント

そろえる部分と、分ける部分を考える

出てきたキーワードを表現に落とす時に、役割を分けて考え、適した使い分けを提案していました。

そろえる
- 細かいホバー時の表現など
- 統一感を出したいポイント
分ける
- 差別化したい部分
- キーワード1とキーワード2で伝えたい印象が違う場合とか
  - アニメーションを分ける
  - 使い所をわける (メインビジュアル, 背景, タイトルなど)

クライアントのモチーフなどを使えないか？

デザインの中に全く出てきていなかったのですが、「クライアントらしさ」を演出するポイントとしてロゴやコーポレートカラーをアニメーションに混ぜ込めないか？という考えをされていました。
もちろん、使うのはデザイン的にありかなしか？の確認も。

エンジニアの方で演出を担当する部分を明確に持たせてもらう

デザイナーさんに「MVの演出はエンジニアにやらせてください！」と言っちゃう。

特別指示がなかったからよしなにアニメーションをつけがちだったのですが、
明確にタスクとして持っておくことで、エンジニアはちゃんと動くような気がします。笑
あと、デザイナーさんも気にしてくれている気がします。
分担することで、逆にお互いに協力していく流れが生まれていました。

自分で説明できるレベルで理解する

演出ってぶっちゃけなくてもページはできるじゃないですか・・・
そんな中でいろんな人に納得してもらうために、「価値を説明できる」必要があります。

言い換えると、
「実装したものに対して『なぜこの演出をしたか』をクライアントやデザイナーに説明できる」
必要があると。

そのために、デザイナーさんにヒアリングし、自分の言葉にしてく。
説明できることで、演出に価値や意味がもたせられるってことですね。

クライアントに説明する場が有/無関係なく、そのスタンスで作っていくのがの大事だな、と思いました。
(わたしは「なんとなくこっちのがいいじゃん」みたいな感じで生きてきたので、進化しなくては)

つみかさね

このポイントを抑えたら速攻つよつよになるわけではないので、模索し続けていきましょう・・・👀
次のお仕事のときに、演出に対しての心構えがちょっとだけ広がるポイントになってると、いいな！！