本記事は 【Advent Calendar 2024】 14日目の記事です。
🌟🎄 13日目② ▶▶ 本記事▶▶ 15日目 🎅🎁
こんにちは。Webディレクター7年目の坪井です。
実は1年間、もともと一緒にお仕事をさせていただいていた、とある会社に出向していました。（1年も離れていると、ネットコムの環境をすっかり忘れていて、慣れるまで時間がかかりそうです。）
出向期間中は、システム設計にWebディレクターが参画し、UI/UX検討と開発を同時に進めていく…という「デザインとシステムの協業」を経験することができました。
デザインとシステムが密に連携することで
- プロジェクトにどんな効果をもたらしたか
- Webディレクターとして勉強になったこと
を実際の経験をもとにお伝えしたいと思います。
※この記事で指す「デザイン」とはユーザーインターフェース（UI）とユーザーエクスペリエンス（UX）の設計や改善に関する活動となります
こんな人におすすめ
- Webディレクターやデザイナーとシステムエンジニアの協業にどんな効果があるのか知りたい方
- UI/UX視点を取り入れた開発プロセスに興味がある方
はじめに
プロジェクトの概要
今回参画したのは、とても大きなシステムのリプレイスを検討するプロジェクトです。
簡単にまとめると以下の課題がありました。
- 機能数が多すぎて複雑
- 画面表示が遅い
- システムが複雑で改修に時間を要する
- 使いやすいとは言えない画面構成
今回は満を持して裏側のデータ構造から新しく作り直すことになりました。
ユーザーが実際に触る画面も含め、すべて一新します。
初めはシステムエンジニア達で画面案を検討していたようなのですが
「UI/UXを専門としているメンバーが考えたほうがいいだろう」
…ということで、私が出向して、UI/UX担当として参加することになりました。
私には以下のようなことを期待されていました。
- 出向先のビジネスを理解し、技術的な話についてこれる
- コミュニケーション能力が高く、適切な情報発信ができ、よく聞いてくれる
- アウトプットが早く、作り直しを厭わない
出向先のチーム構成はタイトルにもある通り、システムエンジニアばかりです。
その中に、1人Webディレクターの私が参画する形でした。
私はHTML、CSSを少し触ることができる程度でがっつりプログラミングはできません。
お役に立てるのかとっても不安でした…………
デザインとシステムが密に連携したことによる２つの効果
こんな不安を抱えながら始まったプロジェクトですが、
1年間の参画で、プロジェクトに良い影響が現れたり、Webディレクターとして学びになったことがありました。
それぞれについてお話します。
１）プロジェクトにもたらした効果
机上のイメージを絵にし共通認識をつくれたこと
機能が多く、考慮事項も多く、要件も決まり切っていないものすべてを踏まえて画面を作るのは難しいです。
1つの画面について話しているはずが、各々イメージしているものが異なると、話も逸れていきます。
まずは少しでも会話の土台になるように、必ず必要になる画面をピックアップしてワイヤーフレーム*1を書いていきました。
今見ると、とても拙いワイヤーフレームです。
しかし、これを作ったからこそ、机上で話していた画面や機能のイメージがチーム内で共通のイメージとなり、チーム内外から意見が出やすくなりましたし、自分も話すときに意見を出しやすくなったと思います。
エンジニアの「～～みたいな感じ」を画面に起こして認識が違うところをすぐにブラッシュアップして…がスピード感をもってできました。
関係各所と話すときにお互いのサポートができたこと
作成した画面をプロジェクトの関係者に説明するとき、開発畑の方に説明するシーンもあれば、開発には詳しくない操作担当者に説明するシーンもあります。
私は、操作担当者に見た目や使い勝手のことを説明することはできますが、
システムの事を詳しく知りたい方に、詳しいシステムの話をするのはなかなか難しいです。
そんな時、協業していたエンジニアが代わって説明してくださることがありました。
逆に、デザインについてエンジニアの言い回しでは伝わりづらい部分は、私がフォローするといったようにエンジニアとWebディレクターそれぞれの知識を生かして、プロジェクトの関係者にサポートができていたと思います。
お互い大事にしている部分や困ることを知れたこと
エンジニアは実装目線で、WebディレクターはUI/UX視点で話します。
はじめはお互い譲れない気持ちが強くぶつかることも多かったと思います。
話していくうちに、エンジニアが気にしてほしいポイントが理解できました。
以下のようなことを話すことが多かったです。
- 表示しているデータはどこで管理しているデータか
- ○○システムから持ってくるデータなのか、それとも別システムから持ってくるデータなのか、それとも…？
- 画面内に管理先が異なるデータが複数あるとどんどん実装が複雑になる
- システム全体を通して整合性がとれているか
- 似たような画面が増えないか、管理コストが増えないか？
同じチームですぐに話せる関係性であり、1から作っていくからこそ慎重に進めていたため、エンジニアが困ることをより理解できたと思います。
ユーザーの使い勝手を考えるとあれもこれも…と機能を追加したくなる時もありますが、何年も使うシステムであればあるほど、シンプルでわかりやすい画面にしておくことが重要であると理解しました。
もちろん、それでもどうしても必要な表示やほしい機能はあるので、何度も話し合いました。
次第にエンジニアからも「ユーザーが使うってなるとこの機能はほしいよね」みたいな会話が出てくるようになったときは嬉しかったですね。
２）Webディレクターとして勉強になったこと
サポートを得て深くシステムを理解できたこと
今回は裏側のデータ構成の理解を進めることになりました。
データ構成をそこまで理解しなくても画面検討に影響がないプロジェクトもありますが、
今回は今稼働しているシステムのデータの扱い方とは大きく差が出てきてくるため、理解しておく必要がありました。
データの扱い方は、説明を受けるとシンプルで理解した気になるのですが、実際に画面に描き起こすとなると詰まる…ということがあり苦戦しました。
同じチームだと近い距離で気軽に話せるため、何度も話したり、ホワイトボードでイメージをすり合わせる作業を行い、徐々に理解を深めることができました。
今となっては、エンジニアと話すときに詰まることが減ったので、めげずに理解しようとする気持ちが大事だと感じました。
開発のリアルを知れたこと
環境を整えたり、技術選定したり、コードを書いたり、ログを見たり…
開発者って本当にいろいろなことを考えて、調べて、システムを作り上げているんだなと改めて知ることができました。
弊社にも開発者はたくさんいますが、こんなに毎日近くで話したことはなかったので新鮮でした。
出向中はエンジニアの勉強会にも分からないなりに参加していたのですが、こんなことを毎日調べて勉強して作り上げているんだなと毎回尊敬しましたし、刺激にもなりました。
協業をしてみた結果
私自身、出向前に「よし！デザインとシステムの協業をするぞ！！」と意気込んでいたわけではありませんでした。やるべきことをやっていくと自然とこのような協業ができていた、という結果でした。
複雑なシステムであればあるほど、デザインとシステムで密に連携することが大事だと再認識することができました。
まとめ
画面をお見せすることはできませんでしたが、デザインとシステムの協業がどのようにできたか、どんな効果があったかが少しでも伝わっていると嬉しいです。
複雑なシステムを作る際は、デザインとシステムがお互いを理解し、協力することでより良いシステム作りができると思います。
おまけ：出向してよかったこと
今までずっと1つのチームに所属していたので、自分のスキルや能力がどの程度かを客観的に把握する機会が少なかったのですが、新しい環境で自分の力量を試すことができ、自信にも繋がりました。
また、出向先は原則毎日出社だったこともあり、チームの皆さんとすぐに仲良くなれました。テレワークでなまった体で大変でしたが、新参者としては出向先の皆さんの顔や名前を覚えることができて助かりました。
チームに馴染むスピードが速かったり、出向先のシステム利用者と気軽に話せたりしたのは出社のおかげだと思っています。
違う会社の文化を知れたり、プロジェクト外の方とも仲良くなれたことも出向ならではですね。
*1:画面の設計図のようなもの
