ビジュアルつよつよエンジニアになりたいZennBaba🚀ビジュアルつよつよエンジニアになりたい2022/06/23に公開・約3,100字ツイートWebideaちょっと飛躍したタイトルを付けましたが、「デザイナーさんにヒアリングしよう」と言う内容です。私は普段、Webのフロントエンドエンジニア(以下エンジニア)をしています。デザイナーさんが作ったページデザインを形にしていくのですが、うちの会社ではアニメーションやインタラクションの担当はあいまいです。先輩エンジニアにサポートでミーティングに入ってもらった時に、「めっちゃ色々話してる・・・!!!!」と気づきがあったのでメモ兼ねて記事にさせてもらいます💪(プロジェクトに関わる部分や具体例が出せず、わかりにくい部分あるかもしれません。ご了承ください🙏🥺)ヒアリングが甘い🍬ヒアリングがぼやっとしていた時の私は、こんな質問していました。ホバーどうなりますか?アコーディオンですか、モーダルですか?表示アニメーションどうしますか?メインビジュアルって動きますか?何か参考サイトとかありますか?デザイナーに質問するのが大事とは思っていても、明確な部分しか聞けない&受け身・・・できあがったデザイン、指示されたアニメーションを100として制作することが多く、デザインの「画」以上のものは作れない状態。自分の言葉で理解しないと、出来上がったものの良し悪しが判断できず、ブラッシュアップにつなげられませんでした。ヒアリングというか、必要最低限の確認をしている感じかもしれません。前提をきく🌱デザインのベースになる考え方を共有してもらいます。デザインコンセプトターゲットプロジェクトのゴール(このサイトで何をしたいのか?)ここで聞いたポイントを、キーワードを出していきます。このとき、ただキーワードを出して終わりで、はなく、デザイナーさんに言われた言葉を、自分の言葉に変えて聞き返すのが大事です。私の場合だと、似てる言葉やカタカナ(英語)を日本語に言い換えたりして、微妙なニュアンスを近づけていくのがいい気がしています。「堅実」というキーワードから、「かたい」「実直」「誠実さ」「緻密さ」「重い/軽い」などをだし、どのニュアンスが合っていて、どのニュアンスは違うのか・・・?とかそこからイージングや、キーになるモチーフを取り上げて、共通認識をかためていきます。前提を確認できたら、デザインの中にある要素を分解して、それぞれの役割を聞いていきます。「KVにある動画」「タイトルのテキスト」「装飾的なテキスト」などに分解し、それぞれの重要性や印象の役割をわける。ブラッシュアップの時の軸を確認🌷さらに、ブラッシュアップするときの軸になるポイントも確認します。プラスアルファの演出を持たせた時に、ユーザーにどういう印象を与えたいのか?優先順位も確認する。基本的に前提で出てきたキーワードがベースにはなるのですが、その中で特に強調したいポイントや、演出的になっても問題ない部分を確認しておきます。以下は可読性よりも印象付けが強くなりやすい部分なので、リッチな演出を組み込みやすい・相談しやすい部分の気がします。ローディング・オープニングアニメーションセクションの切り替わりブラッシュアップ自体は、プロジェクトのスケジュールなどもあるので、マストではないと思いますが、見据えて考えられると、素敵ですよね。(精進します)ヒアリング後、自分の言葉でまとめ直す自分メモとかでいいです。人に説明できるので、ブラッシュアップや、意見のぶつかりが(建設的に)できてクオリティアップにつながります。(あと、私は勝手に迷子になりがちなので、最初の咀嚼が後々の馬力につながったりもします笑)そのほかヒアリング以外でも勉強になった、つよつよエンジニア先輩のポイントそろえる部分と、分ける部分を考える出てきたキーワードを表現に落とす時に、役割を分けて考え、適した使い分けを提案していました。タイトルなど)クライアントのモチーフなどを使えないか?デザインの中に全く出てきていなかったのですが、「クライアントらしさ」を演出するポイントとしてロゴやコーポレートカラーをアニメーションに混ぜ込めないか?という考えをされていました。使うのはデザイン的にありかなしか?の確認も。明確にタスクとして持っておくことで、エンジニアはちゃんと動くような気がします。笑あと、デザイナーさんも気にしてくれている気がします。分担することで、逆にお互いに協力していく流れが生まれていました。自分で説明できるレベルで理解する演出ってぶっちゃけなくてもページはできるじゃないですか・・・そんな中でいろんな人に納得してもらうために、「価値を説明できる」必要があります。そのために、デザイナーさんにヒアリングし、自分の言葉にしてく。説明できることで、演出に価値や意味がもたせられるってことですね。クライアントに説明する場が有/無関係なく、そのスタンスで作っていくのがの大事だな、と思いました。次のお仕事のときに、演出に対しての心構えがちょっとだけ広がるポイントになってると、いいな!!ツイートBabaいきるのへたくそ。ぽんこつだけどエンジニアとして修行中です。バッジを贈って著者を応援しようバッジを受け取った著者にはZennから現金やAmazonギフト券が還元されます。約3,100字Babaいきるのへたくそ。ぽんこつだけどエンジニアとして修行中です。バッジを贈るバッジを贈るとは?目次ヒアリングが甘い🍬ヒアリングするときのポイント前提をきく🌱ページデザインを分解する🧩ブラッシュアップの時の軸を確認🌷ヒアリング後、自分の言葉でまとめ直すそのほかそろえる部分と、分ける部分を考えるクライアントのモチーフなどを使えないか?エンジニアの方で演出を担当する部分を明確に持たせてもらう自分で説明できるレベルで理解するつみかさねZennエンジニアのための情報共有コミュニティAboutZennについて運営会社お知らせ・リリースGuides使い方Publicationよくある質問LinksTwitterGitHubメディアキットLegal利用規約プライバシーポリシ。