新しく作った拠点紹介ページのエンジニアとデザイナーの奮闘記
はじめに。
Relicでフロントエンドエンジニアをしているよーじです。
今回は、Relicの地方拠点を紹介するページを作成した際に、エンジニアとデザイナーの両者の想いを汲み取る方法について紹介したいと思います。
僕は、Relicの本社ではなく、和歌山市の開発拠点である和歌山イノベーションラボで働いています。
和歌山イノベーションラボでの雰囲気を知りたい方は、以下のnoteをぜひ読んでみてください！🙌
地方拠点紹介ページ作成開始！！
現在、Relicの地方拠点は和歌山以外にも福岡・富山・島根にもあり、地方拠点がどんどん増えていっています。
Relicのコーポレートサイトの会社概要ページにも地方拠点を紹介していますが、
・どんな拠点なのか？
・どんな人が働いているのか？
など、より詳細な拠点の雰囲気を知ることができませんでした。
そこで、コーポレートサイトにより詳細に地方拠点を知ることができるページを作ろう！！！ということで地方拠点紹介ページを作成することになりました。
今回、作成した地方拠点紹介ページです！
Relicの各拠点を知ることを拠点一覧ページと、和歌山イノベーションラボと、Growth Studio @ Shirahamの拠点をより詳細に知ることができる拠点紹介ページがあります。
エンジニアとデザイナーの想い
これから地方拠点紹介ページを作成することになりましたが、エンジニア・デザイナーともに、地方拠点紹介ページへの想いがありました。
🧑💻エンジニア
デザイナーの意図を汲み取ったページにしてやるぞ！！
🧑🎨デザイナー
エンジニアにとって開発しやすいデザインにするぞ！！
ただ実際に地方拠点紹介ページを作成していくと…
🧑💻エンジニア
ここのデザイン、もっとこんな感じにデザインしてくれたら、もうちょっと開発しやすいねんけどな〜
🧑🎨デザイナー
なんかcssのフレームワークを使っているからどうこう言ってたけど、どんなデザインにしたらいいんや
なかなか両者の思いを汲み取ることは難しいことがわかりました。
なぜ、両者の想いを汲み取ることが難しいのか？
エンジニアもデザイナーも専門性が高いため、よりこだわって開発するとなるとお互いの想いを理解することが難しいことがわかりました。
MTGなどの口頭でのコニュニケーションでは、お互いの想いをプロダクトに反映することは難しいです。
では、どうすればいいのでしょうか？
僕は、誰が見ても理解できるようにわかるように、参考サイトやスクリーンショットを使ってどうしたいのか？を相手に見せることが重要なのかなと思いました。
実際にどうした？
誰が見ても理解できるように、実際にしたことは「フィードバックシートの活用」です。
Googleスプレットシートで、エンジニア・デザイナーの想いを可視化しました。
フィードバックシートの活用しては、２回あり、デザイン編と開発編です。
デザイン編は、地方拠点紹介ページのデザイン案をデザイナーに作成していただいた際に使用したフィードバックシートになります。
開発編は、デザインをもとにエンジニアが開発して、地方拠点紹介ページの関係者に確認していただく際に使用したフィードバックシートになります。
デザイン編、開発編のそれぞれどのようなフィードバックシートに構成になっているか見ていきましょう。
デザイン編
先ほども説明させていただきましたが、デザイン編ではデザイナーが作成した地方拠点紹介ページ案を見て、どのデザインを採用するのかを決めるためのフィードバックシートになります。
フィードバックシートの構成は、以下になります。
該当デザイン
デザイナーに3案作成していただいたので、どのデザインに対するフィードバックなのか？を選択する項目になります。
意見カテゴリー
意見カテゴリーでは、良かった点、改善点、相談箇所の３つのカテゴリーから選べるようにしています。
デザイナーに何が良くて、何を改善してほしいのか？を理解してもらうためです。相談箇所は、デザイナ案についてMTGを実施したのでMTGの際に相談したいというカテゴリーになります。
内容
実際にどのようなフィードバックなのかを記載します。内容の部分では、スクリーンショットなどを使って、デザイナーにどのようなデザインにしてほしいのかを具体的にイメージできるような伝え方をするのがポイントになります。
記入者名
誰が入力したのかわかるように記入者名を入力できるようにします。
以下が実際に使用したフィードバックシートになります。
デザイン編ポイント
デザイン編のフィードバックシートでのポイントは、意見カテゴリーです。「良かったとこ」「改善」「相談」の3つのカテゴリーを掲載することで、デザイナーさんにどのようなデザインが良くて、どこを改善してほしいのかが明確になりやすいです。
フィードバックシートを活用しての効果
フィードバックの活用で、２つの効果がありました。
①スクショを使うことで、デザインの知識がない人でもどんなデザインにしてほしいのか意図を伝えることができる
②デザインのFBでは、改善点だけ伝えるのではなく、良かったところも伝えると何を改善してほしくて何が良かったのかも理解してもらえる
では、次に開発で使用したフィードバックシートについてです！！
開発編
開発編では、STGにデータをアップした際に、デザイナー含めデザインの意図にあった開発ができているかを確認しました。
フィードバックシートの構成は、以下になります。
セクション
ページの構成にある１コンテンツごとに意見を詳細に記入できるようにセクションごとに分けて意見をいただきました。
内容
内容では、デザイン編でも同様でどのようなフィードバックなのか？を記載できるような箇所になります。
修正担当者
フィードバックをいただいても誰が修正するのか明確になっておらず、宙ぶらりんになるようなことを防ぎたかったです。なので、フィードバックを見返した際に、誰が修正するのかまで記載できるようにしました。
以下が実際に使用したフィードバックシートになります。
開発編ポイント
開発編のポイントでは、セクションごとに分けてフィードバックをいただけるようにしたことです。ページ単位で、フィードバックをいただこうと思うとフィードバックの管理の煩雑になるので、エンジニア側でデザイナーがフィードバックを書きやすいような環境を作ることができました。
フィードバックシートを活用しての効果
①修正担当者の列を作成したことでフィードバックシードを見た際に誰が修正するのかを明確にすることができました。また画像の修正などでは、デザイナーが修正するのかエンジニアが修正するのかがあやふやになることも防げたと思います。
②セクションごとに意見を記載していただけるので、細かい所までデザイナーさんの意見をいただけた。
まとめ
今回のフィードバックシートを使って思ったことは、
「誰が見ても意図を汲み取ることができるように可視化することが重要」
だと思いました！
今回のフィードバックシートは、一つの方法でしかないので、他により良い方法があればその方法を使ってエンジニアとデザイナーのコミュニケーションを円滑にできればと思います。
採用のお知らせ
株式会社Relicでは、エンジニア・デザイナーを積極的に採用中です。
またRelicでは、地方拠点がありますので、U・Iターンも大歓迎です！🙌
少しでもご興味がある方は、Relic採用サイトからエントリーください！