はじめに
この記事は、2023年11月9日に開催されたデザインエンジニアリングMeetup! Vol.0で発表する内容です
内容
導入
こんにちは、私はQiita株式会社の出口 裕貴です。
普段は、QiitaのPdM 兼 デザイングループのマネージャーをしています。
私は、デザイン, フロントエンドに関連する情報を中心に発信しているので、よかったらXのフォローしていただけると嬉しいです。
早速ですが、みなさん最近Qiitaを見ていますか？
最近Qiitaでは、ユーザー体験の向上に力を入れています。
例えば、ダークモード対応したり、投稿プロセスの改善などの取り組みを行っています。
実はこれらの改善は、Qiitaのデザイナーが役割を拡大し、デザインエンジニアとして、デザインから、開発・リリースまで携わっています。
話すこと
今回は、デザイン組織がデザインエンジア組織として役割を拡大することになった背景や具体的な取り組みについてお話ししたいと思います。
今日の話を聞いて、デザイナーとエンジニアがデザインエンジニアとして、役割を拡大していく参考になればと思います。
以前のデザインGは
以前のデザインGの業務範囲は以下のような感じでした。
- プロダクトの改善
- → PdMからの受託
- イベントのクリエイティブ作成
- → マーケからの受託
- Qiitaのコーポレート関連のクリエイティブ作成
- → 広報からの受託
このような仕事の中で、インハウスのデザイナーとして、会社に貢献できいるのか疑問に思うようになりました。
そのため、僕たちは社内受注ではなく、インハウスデザイナーとして、会社に貢献するために、次のようなことを考えました。
会社に貢献するために考えたこと
それは、「ユーザーが触るのは、画面にレンダリングされたWebページで、完璧なデザインデータを作っても意味がない」というものです。
言い換えれば、デザイナーがデザインだけに専念していては、ユーザーへの価値提供はできないので、事業や成果への貢献はいつまで経ってもできないということです。
今では、これがQiitaのデザイナー共通の価値観・スタンスになっています。
こういうことがあり、Qiitaのデザイナーは、自ら開発に携わり、ユーザーへの価値提供していくことになりました。
役割を広げていく
とはいっても、はじめから、影響範囲の大きいプロジェクトを進めた訳ではなく、できる範囲のところから少しずつ役割を広げていきました。
1ステップ目は、理解期です。 理解期やったことは、こちらです。
- コードレビュー
- 手元で開発環境を立ち上げて、自分達の作ったデザインの通り、開発されているのかのチェック。
- HTML, CSSの知識はあったため、適切なDOM構造になっているかや、適切なスタイルが当たっているか等もチェックしています
- 軽微なマークアップ・スタイリングの変更
- 「これくらいなら僕らがやっちゃいますね」みたいなコミュニケーションをとり、エンジニアの仕事を巻き取る形で進めていました
- わからないことはエンジニアに聞くようにしていました
- Gitとか, Reactとか
2ステップ目は、成長期です。成長期でやったことは、こちらです。
- イベントページの作成(1ページ〜数ページ)
- フェードインやパララックス、ライブライリー使って、いろんな表現に挑戦した
- ペアプロ・ペアレビュー
- 成長期になると、メンバー間の理解度の差が出るので
- エンジニアとペアプロ・ペアレビューを積極的に行った。
3ステップ目は、成熟期です。成熟期でやったことは、先ほど紹介した、
- プロダクトの改善
- ユーザー体験の向上ためのプロジェクト
このようステップを経て、社内受注のようなデザイン組織がデザインエンジニア組織として役割を広げていきました。
まとめ
1つ目は、職種の役割を広げていくには、１人では難しいということです。
職種間で同じ価値観・スタンスを持つところから始め、複数人を巻き込んでいくのがいいと思います。
2つ目は、少しずつやることを増やしていきましょう。
できる人が率先してやっていては、職種の役割は広がりません。
関係者と足並み揃えて進めていくのがいいと思います。
最後に、ユーザーが直接触るプロダクトを作り、ユーザーに価値提供しているデザインエンジニアは、プロダクトの価値を提供することにおいて不可欠な存在だと僕は思います。
最後まで読んでくださってありがとうございます！
普段はデザインやフロントエンドを中心にQiitaに記事を投稿しているので、ぜひQiitaのフォローとX(Twitter)のフォローをお願いします。