デザイナーと デベロッパー の連携においての課題と解決方法
デザイナーと デベロッパー の間のギャップで、ワークフローが遅くなったり、製品の市場投入がしにくくなることがよくあります。デザインチームと開発チームの強力な連携がなければ、製品を完成させて消費者に届ける前に、多くの間違いを直さなければならないことになるでしょうからね。
デザイナーと デベロッパー 間のギャップに目をつぶる必要はありません。本記事でお話するヒントは、両者の距離を縮め、プロセスを改善し、より良いユーザー体験につなげるためのものになります。
おすすめ記事：Coding Designers and Design Collaboration with Developers – 2020 Design Trends with Joe Cahil
デザイナーと デベロッパー が同じ部品を使うデザインシステムを作る
デザイナーと デベロッパー が同じコンポーネントを使うデザインシステムを作成することは、チーム間のギャップを埋めるのに最も重要なことです。デザインシステムは、製品の以下のような承認を含め、デザインとコーディングのフェーズで必要なものをすべて提供する必要があります：
- タイポグラフィ
- カラー
- アイコン
- フォトグラフ
- GIF
- サウンド
- インタラクティブ要素
デザイナーとデベロッパーが同じデザインシステムを使うことで、使用するフォントと色や、ボタンやフォームのコーディング方法を決めるような無駄な時間を省くことができ、制作の各ステップを改善することができます。従来、企業は製品の構築に画像ベースのアプローチを採用しており、デザイン システムの維持に多くの労力を費やす必要があるため、このアプローチでは大変なのです。これだとデザインチームが作業を終えた後に、デベロッパーはコンポーネントを機能させる方法を探す必要がありますが、コードベースのアプローチでは、デザイナーとデベロッパーがいつでも再利用可能な「信頼できる唯一の情報源（Single source of truth）」を利用できるようにすることで、このギャップをなくすことができます。
デザインシステムでの準備はいいですか？コード化されたコンポーネントの技術である UXPin Mergeで、さらに一歩進みましょう。UXPin Mergeは、GITのレポジトリからUXPin エディタにコード化されたコンポーネントをインポートし、同期させることができますよ。
インポートされたコンポーネントは、デベロッパーが開発プロセスで使うコンポーネントと全く同じです。つまり、コンポーネントには、エンドユーザーが体験する実際の製品と同じような外観、感触、機能（インタラクション、データ）があり、デザインシステムと整合性があり、生産可能であるということです。それは、デザインと開発のギャップが埋まるのはもちろん、デジタル製品のデザインとコーディングの両方にかかる時間が大幅に短縮され、市場投入までの時間が早くなるということです。
おすすめの記事：デザインツールはイメージベースからコードベースへ
ウェブデザイナーとフロントエンドのコミュニケーションを高める
デザイナーと開発チームには、簡単に連絡を取り合える方法が必要ですが、少し前までは、チーム間のコミュニケーションを上げる方法は限られており、ワークスペースの共有やSNSグループへの参加などくらいしかありませんでした。
今日では、チームメンバーがリモートで仕事をしている場合でも、以下のアプリのような連絡と連携を高めるツールが豊富に揃っています：
対面での会話に代わるものが必要なときは、以下のようなビデオ通話アプリなどを使うといいでしょう：
コミュニケーションがしやすくなると、それに伴ってチームメンバー同士の会話も増えます。連絡を取り合って仕事上の関係を築くのに必要なツールを設けましょう。
製品デザインのブレーンストームにデザイナーや デベロッパー を招く
チームメンバーは、製品についての重要なブレーンストームのセッションからしょっちゅう外されてしまいます。プロジェクトマネージャーは、開発チームのリーダーくらいは招待して、製品にある機能を追加する際の課題についてのインサイトを得ようと考えているかもしれませんが。
より多くのデザイナーやデベロッパーがブレーンストームに参加することで、仲間意識が高まり、アイデアが共有され、全員が参加しなければ見逃してしまうかもしれない革新的なコンセプトを発見することができるのです。
そのような話し合いをより成功させるには、次のような方法があります：
- ユニークなスキルを持つ多様な参加者を選ぶ
- セッションのルールを決め、参加者が集まる前にそのルールを伝える
- 時間を気にしなくていいようにタイマーをセットしておく
- アイデアを話してもらうときは、順序よく進める（不意打ちは緊張させるだけ）
- あらゆるアイデアをとかく書き留める
- 進行役がフィードバックを提供し、グループが気に入ったアイデアを議論できるように、その日または週の後半にフォローアップのミーティングを予定する
さらに、製品開発の初期段階から多くの人に参加してもらうことで、社内での役割に関係なく、みんな何かしらの役に立てることを各部門に示すことができるのです。
UXデザイナーとフロントエンドエンジニアが互いの役割について学ぶことを促す
UXデザイナーとフロントエンドエンジニアは、一緒に仕事をする時間が長くなければ、製品作りにおけるそれぞれの役割についてあまり知らないかもしれません。だとしたら、他のグループが行う基本的な用語や作業の種類をチームに紹介することで、デザインプロセスにおけるコミュニケーションのギャップを埋めることができます。
だからといって、全員がスキルセットを共有する必要はありません。ただ、コミュニケーションをとって他の人が貢献していることの本質を理解するのに、十分な知識が必要なのです。
デザイナーに必要な知識
ウェブデザインチームは、HTMLの基本的なスキルは必要かもしれませんが、コードを学ぶ必要はありません。ただし、デベロッパーが使う一般的なツールは知っておく必要があり、それには、次のようなプログラミング言語が含まれます：
- PHP
- JavaScript
- Java
- CSS
Web開発に欠かせないJQueryのようなツールを知ることで、デザイナーは自分の依頼に関わる仕事の多さを理解することができ、デベロッパーの仕事に対して、より深い敬意を抱くようになるはずです。
フロントエンドとバックエンドの デベロッパー に必要な知識
デベロッパーは、デザインのインタラクティブなコンポーネントへの変換のために、多くの技術的な知識とコーディングスキルが必要です。なのでデベロッパーの中には、「デザイナーの方が仕事が少ない」と誤解している人もいるかもしれません。
もちろん、デザイナーにも、製品の使いやすさや人気の高さに貢献する、以下のような並外れたスキルがあります。デザイナーには長年の経験があることを、コーダーは知っておくべきです：
- WCAG（ウェブ・コンテンツ・アクセシビリティ・ガイドライン）に沿ったユーザーインターフェースの作成
- 製品のターゲット市場にアピールするタイポグラフィの選択
- さまざまな視覚要素をより大きな全体の一部のように感じさせる、詳細なスタイル ガイドに従うこと
みんなが同僚の専門性のレベルを理解することで、チーム全体の尊敬とチームワークの向上が見られるかもしれませんよ。
おすすめ記事：コードを学ぶ事なくコードベースデザイナーになる方法
UXPin Mergeを使い、デザイナーとデベロッパーのギャップを埋める
UXPin Merge は、コードベース独自のアプローチで製品のデザインとプロトタイプを実現します。画像ベースの要素の代わりにライブコードを使用するツールを選択することで、デザイナーと開発者の間のギャップを埋め、デザイナーと開発者に等しく適用されるデザインシステムの強みを活かすことができます。
UXPin Merge へのアクセス権をリクエストして、チーム間の連携を促すコードベースのデザインの利点をぜひご体験ください。
