🏮

デザイナーと開発者の共同作業を容易にするために

2021/05/07に公開

(原文) Making It Easier for a Designer and Developer to Collaborate on Projects

デザイナーと開発者の間のギャップは、しばしばワークフローを遅らせ、製品を市場に投入することを困難にします。デザインチームと開発チームのコラボレーションがうまくいかないと、製品を完成させて消費者にリリースするまでに、多くのミスを修正しなければならないことが多くなります。

設計者と開発者の間のギャップを容認する必要はありません。以下のヒントは、デザイナーと開発者の距離を縮め、プロセスを改善し、より良いユーザーエクスペリエンスを実現します。

デザイナーと開発者が同じコンポーネントを使用するデザインシステムを作る

デザイナーと開発者が同じコンポーネントを使用するデザインシステムを構築することは、チーム間のギャップを埋めるためにできる最も重要なことです。デザインシステムは、製品の承認を含め、デザインやコーディングの段階で社員が必要とするものをすべて提供する必要があります。

タイポグラフィ
色
アイコン
写真
GIF
音
インタラクティブ要素

デザイナーと開発者が同じデザインシステムを使うことで、どのフォントや色を使うか、このボタンとこのフォームをどのようにコード化するかなどに時間を費やすことなく、制作の各段階を改善することができます。従来、企業がこのアプローチに苦労していたのは、イメージベースのアプローチで製品を作っていたため、デザインシステムを維持するために多くの労力を費やす必要があったからです。デザインチームが作業を終えた後、開発者はコンポーネントを機能させる方法を見つける必要があります。コードベースのアプローチでは、デザイナーと開発者が、いつでも再利用できる真の単一情報源にアクセスできるため、このギャップが解消されます。

デザインシステムの例を見る

デザインシステムの準備はできましたか？コード化されたコンポーネントのテクノロジーであるUXPin Mergeでさらに一歩先へ。UXPin Mergeは、GITリポジトリからUXPinエディタにコード化されたコンポーネントをインポートし、同期させることができます。

インポートされたコンポーネントは、開発者が開発プロセスで使用するコンポーネントと100％同一です。つまり、コンポーネントの外観、操作性、機能（インタラクション、データ）は、エンドユーザーが体験する実際の製品と同じようになり、デザインシステムとの一貫性が保たれ、生産にも対応できるようになるのです。つまり、デザインと開発のギャップを埋めるだけでなく、デジタル製品のデザインとコーディングの両方にかかる時間が大幅に短縮されるため、市場投入までの時間を短縮することができるのです。

ウェブデザイナーとフロントエンド開発者のコミュニケーションを改善する

デザイナーチームと開発チームの間では、簡単にコミュニケーションをとる方法が求められています。少し前までは、チーム間のコミュニケーションを改善する方法は限られていました。ワークスペースを共有したり、ソーシャルメディアのグループに全員を追加したりすることができました。

しかし今日では、チームメンバーが遠隔地で働いている場合でも、コミュニケーションとコラボレーションを改善するための十分なツールがあります。最適な選択肢としては、以下のようなアプリケーションがあります。

対面での会話に代わるものが必要な場合は、以下のようなビデオ会議アプリを利用できます。

コミュニケーションが容易になれば、チームメンバーがお互いに話し合う可能性も高まります。彼らが連絡を取り合い、プロとしての関係を築くために必要なツールを提供しましょう。

製品設計のブレーンストーミングにデザイナーや開発者を招待する

チームメイトは、重要なブレインストーミングセッションから取り残されてしまうことがよくあります。プロジェクトマネージャーは、開発チームのリーダーを招待して、製品に特定の機能を追加する際の課題を把握してもらおうと考えるかもしれません。

より多くのデザイナーと開発者がブレーンストーミングに参加することで、仲間意識を高め、アイデアを共有し、全員が参加しなければ見逃してしまうような革新的なコンセプトを発見することができます。

ブレインストーミング・セッションをより成功させるには、以下のような方法があります。

ユニークなスキルを持つ多様な参加者を選ぶ。
セッションのルールを決め、参加者が集まる前にそのルールを伝えておく。
タイマーを設定して、誰も時間を気にしなくていいようにする。
アイデアを出してもらう際には、秩序あるプロセスを踏む（誰かを驚かせると、かえって緊張してしまう）。
すべてのアイデアを、批判せずに書き留める。
その日または週の後半にフォローアップミーティングを予定し、ファシリテーターがフィードバックを提供し、グループが気に入ったアイデアについて話し合えるようにする。

さらに、製品開発の初期段階から多くの人に参加してもらうことで、社内での役割にかかわらず、誰もが有益なものを提供できることを部署に示すことができます。

UXデザイナーとウェブ開発者がお互いの役割を知るように促す

UXデザイナーとウェブ開発者は、普段から一緒に仕事をしていないと、製品開発におけるそれぞれの役割についてあまり知らないかもしれません。基本的な用語や他のグループが行う作業の種類をチームに紹介することで、デザインプロセスにおけるコミュニケーションのギャップを埋めることができます。

だからといって、全員が同じスキルを持つ必要はありません。しかし、全員がスキルを共有する必要はありません。ただ、コミュニケーションをとり、他の人がどのような仕事をしているのかを把握できるだけの知識が必要なのです。

デザイナーのための知識

ウェブデザインチームは、コードの書き方を学ぶ必要はありません。基本的なHTMLのスキルは身につけておいたほうがいいかもしれませんが、開発者が使う一般的なツールは知っておくべきです。例えば、以下のようなプログラミング言語です。

PHP
JavaScript
Java
CSS

JQueryのようなウェブ開発に欠かせないツールを知ることで、デザイナーは自分が依頼された仕事の量を理解することができます。そして何よりも、開発者の仕事に対する敬意が深まるはずです。

フロントエンドとバックエンドの開発者のための知識

開発者は、デザインをインタラクティブなコンポーネントに変えるために、多くの技術的な知識とコーディングスキルを必要とします。開発者の中には、デザイナーの仕事は自分よりも少ないと勘違いしている人もいるかもしれません。外部から見ると、デザイナーはAdobe Photoshopで遊んでいるだけのように見えるかもしれません。

もちろん、デザイナーは製品の使いやすさや人気に貢献する素晴らしいスキルを持っています。コーダーは、デザイナーが長年の経験を持っていることを知るべきです。

WCAG（Web Content Accessibility Guidelines）に準拠したユーザーインターフェースの作成。
製品のターゲットとなる市場にアピールするタイポグラフィを選択する。
多様なビジュアル要素が全体の一部であるかのように感じられるよう、詳細なスタイルガイドに従う。

誰もが同僚の専門性のレベルを理解することで、チーム内での敬意とチームワークが向上するかもしれません。

おすすめの記事: コードを学ばなくてもコードベースのデザイナーになれる

UXPin Mergeを採用してデザイナーと開発者の間のギャップを埋める

UXPin Mergeは、製品のデザインとプロトタイピングにコードベースのユニークなアプローチを提供します。画像ベースの要素の代わりにライブコードを使用するツールを選択することで、デザイナーと開発者の間のギャップを解消し、デザイナーと開発者に等しく適用されるデザインシステムの強みを活用することができます。

UXPin Mergeへのアクセスをリクエストして、チーム間のコラボレーションを促進するコードベースのデザインの利点を体験してください。