デザイナー-デベロッパーハンドオフ – 2023年ガイド
デベロッパーハンドオフとは何ですか？従来の仕組みから、今日の主要な標準ツールの機能、課題への解決策まで学びましょう。
Jason Beres 1min read スタートアップであれ、確立された大手テック企業であれ、その中間のどこかであれ、アイデアから市場投入までの製品を実現するために、多くのハンドオフ、行き来、イテレーションを経ずに製品を成功させることは事実上不可能です。
摩擦の主な原因は、デザイナーとデベロッパーが製品を作成する際に従来はまったく異なるタスクを実行することです。したがって、最も成熟した製品チームでさえ悩まされることが多いハンドオフの1つが、デザイナーとデベロッパー間のハンドオフです。
今日は、デザインからデベロッパーへのハンドオフについて深く掘り下げ、以下のような解決策の使用方法を説明します：
- 機能横断的なチーム間でのクリーンで優れたコミュニケーション
- リッチなUIキットと開発機能を備いた自動化ツールの使用
- すべてのデザインアセットが存在する場所など、詳細を明確にして、チームがそれらを迅速かつ簡単に追跡できるようにする
ですから、これらのハンドオフを処理する方法についてのあらゆることを学びたい場合は、このガイドがあなたのためのものです。
App Builderを試す App Builderを試す App Builderを試す
デベロッパーハンドオフとはどこで問題が発生するのか？
デベロッパーハンドオフは、デジタル製品の開発プロセスの中で、最も重要でありながら同時に最も苛立たしい段階であることが多いです。つまり、デザインまたはプロトタイプがデベロッパーの実装の準備ができたときです。
デザイナーとデベロッパーのハンドオフの問題の1つは、用語そのものにあるかもしれません。「ハンドオフ」という言葉は、デザインがデベロッパーに引き継がれ、製品を実現するのはデベロッパーの責任になることを示唆しています。ただし、ユーザーがそれを使用するまで、デザインは完成していません。したがって、デザイナーとデベロッパーがデザインおよび開発フェーズ全体にわたってコミュニケーションを取ることが不可欠です。
従来のワークフローでは、デザイナーは発見段階と開発の間の孤立した環境で作業を行い、ブリーフに基づいてピクセルパーフェクトなモックアップを作成します。その後、クライアントの承認後、それらを壁越しにデベロッパーに投げます。このプロセスは多くの問題を抱えています。デザイナーは完璧に測定されたデジタルソリューションを作成し、一貫して製作されることに多大な努力を払っていますが、デザインとデザインシステムは開発システムにはスムーズに変換されません。
問題の一部は、デザイナーがUIに対して実行する作業が多いほど、デベロッパーに通知する必要があるということです。したがって、たとえばSketchデザインファイルを引き継いで、デベロッパーに任せるだけでは不十分です。デザイナーは、すべての動く部分をどのようにレイアウト、スペース、スタイル、色付け、操作する必要があるかなどを説明するデザイン仕様を提供する必要があります。最終的にアプリをピクセルパーフェクトに仕上げるために、これがこれまでの唯一の方法でした。それでも、デベロッパーがIDEの中に入ると、かなりの実装が必要になります。
デベロッパーは通常、HTMLとCSSでコーディングする習慣がありません。これは退屈な作業であり、UIのみを表しています。ウェブアプリを機能させるバックグラウンドにはかなりのコードがあり、すべてのデベロッパーがUIマークアップの記述を学ぶ能力または関心があるわけではありません。彼らがこの立場に強いられた場合、急な学習曲線はプロジェクトにさらに多くの時間を追加し、結果として生じる修正とデバッグにより、コストが管理不能になります。
デザイナーとデベロッパーのコミュニケーションの改善
長年にわたり、デザイナーとデベロッパー間の衝突を詳細に分析してきた結果、改善がより迅速で、対立が少なく、よりスムーズなハンドオフを実現できる領域を特定しました。適切なコミュニケーションはほぼすべての関係において重要です。ですから、スムーズなデザイン-デベロッパーハンドオフのために必須であるのは当然です。コミュニケーションの失敗は、あらゆる種類の問題や誤解につながる可能性があります。同じ目標に対する異なる解釈さえもあり、これは混乱または明らかに悪いUXにつながる可能性があります。製品チームにそのような時間はありません。
デザイナーとデベロッパー間の不十分なコミュニケーションが引き起こす一般的な問題は：
- デザイナーとデベロッパー間の不要な複数のフィードバックループ
- 予期しない品質保証の問題、または予想以上に時間がかかるQA問題
- 重複するスキルを活用できないこと
- チームの協力を容易にする可能性が高い新しいツールを適切に活用できなかったこと
デザインシステムを使用する
「デザインシステムは投資です。多くの企業は、デザインシステムがない場合の非効率性が耐えられないほど苦痛になるまで、デザインシステムに焦点を当てている人を採用しません。」
– Diana Mounter、GitHub
デザインシステムは、簡単に言えば、ソフトウェアコンポーネントとして実現される、意図的に厳選されたUXパターンとブランドスタイルガイドのインベントリです。このシステムを再利用したり、ソフトウェアアプリケーションを構築するためにコンテキスト化したりできます。デザインシステムは、コンテンツ作成の音声とトーンガイダンス、ページテンプレート、またはユーザーフローを含むように拡張することもできます。各組織の特定のアプリケーションドメインと使用コンテキスト用に手作りされています。何よりも、これはアプリケーション構築時に製品チームの単一の情報源として機能し、デザインと開発間の協力契約を表しています。
デザインシステムがないと、デザイナーは自分の作業を制限する明確なパラメータがありません。彼らは創造的になりすぎて、不完全なユーザー体験と開発者の不満につながる矛盾を作成する可能性があります。このすべてがハンドオフプロセスを妨げます。
デベロッパーを早期に関与させる
前述のように、チームが犯す一般的な間違いは、デザイナーに最初にその仕事をさせるのを待ってから、製品デザインをデベロッパーに渡すことです。これは混乱を招くだけでなく、少し失礼です（「これで完成です。それでは。」）。
ハンドオフをより成功させるために、ベストプラクティスはデベロッパーを早期に参加させることです：
- 初期のアイデア出し討論にプロジェクトのリード開発者（最低限UI開発者）を含める
- 画面設計とインタラクション設計が説明されるすべての会議に開発を含める
- エージェンシーの場合は、クライアントとの電話会議に開発を含める
- デザイン要素がウェブアプリケーションまたはモバイルアプリケーション対デスクトップアプリケーションにどのように変換されるかについてのデベロッパーからの見識を求める
- デベロッパーが初期デザイン案を確認する機会を与え、コードに関する潜在的な問題が調整しやすい時点で特定できるようにする
ランチを食べるか、リモートの集合をする
誰もが孤立した環境で作業するのではなく、少なくとときどきみんなを一緒に集めましょう。チーム全体がランチを一緒に食べることを奨励することは、自然発生的なアイデア共有に向けた重要なステップです。さらに、物理的に可能であれば、同じ機能に取り組んでいるチームメンバーを同じ部屋に配置することを検討してください。
デザイナーとデベロッパーが異なる場所で作業している場合は、随時仮想会議を設定して、彼らが彼らの作業の進捗について議論できるようにしましょう。少しの人間的相互作用があなたの職場環境と製品の成果にもたらすことができるものは驚くべきものです。
さらに、デザイナーとデベロッパーをプロセスの早期段階で関与させることが、完全なデザインからコードへのシステムでどのように大幅に強化できるかについても説明します。
デザインファイルと必要なアセットをすべて提供する
各デザイナーの責任の一部は、デベロッパーを成功させることです。
それを達成するのに役立つ最初のことの1つは、デベロッパーに必要なすべてのデザインファイルとアセットを提供することです。計画に戻ります。Dropbox、Google Drive、または別のツールを使用してこれをすべて実行することに合意しましたか？これらのアセットがどこにあるかを通知し、欠落している部分、質問、または懸念に対処するために、コミュニケーションのラインを開いたままにしてください。
ハンドオフミーティングをする
ハンドオフミーティングを行うことは、デザインチームと開発チーム間での適切なハンドオフを実行するための最も効果的な方法の1つです。これはすべてを明るみに出し、気になる質問に対処し、チーム全体を今後の作業に興奮させ、やる気を起こさせるための優れた方法です。両側からの厄介な問題や質問をすべて整理し、開発、品質保証、および発売フェーズで来ることに備えてください。明確なタイムラインと期待値を設定し、各フェーズがゴールラインを越えることを確保するのに責任を持つ具体的な個人に名前を付けます。
学習するための新しいリソースを提供することで、基本的なスキルと概念についての相互理解を促進することを検討してください。たとえば、これはデザイナーがコーディングの基礎を学んで、いくつかのデザインが機能的なコードに変換できない理由をより深く理解するように促します。同時に、これはデベロッパーがデザインについてより詳しく学び、異なるデザイン要素がどのように使用されるかを理解するのに役立ちます。
Figmaデベロッパーハンドオフ
Figmaなどのツールはスムーズなデベロッパーハンドオフを約束していますが、実際にはそうではありません。FigmaデベロッパーハンドオフまたはSketchデベロッパーハンドオフの問題は、開発者にとって本当に重要なことの中で最も複雑でない部分を実行しているということです。デベロッパーハンドオフツールでは、開発者の目標は開発時間を最小化し、複雑なUIのコーディング時間を削減し、チームの生産性を加速することです。FigmaまたはSketchのこれらのデベロッパーハンドオフスキームのほとんどは、純粋に画面上の特定のUI要素のHTML又はCSS（または「マークアップ」）のコピー＆ペーストです。デベロッパーは、UI要素のレイアウト、位置付け、デザインツールから「手渡された」UI要素のコードが正しいことを確認することを含め、複雑な画面コードを書く必要があります。
FigmaまたはSketchでのデベロッパーハンドオフがどのように見えるかの典型的な例
ローコードApp Builder™では、FigmaデベロッパーハンドオフまたはSketchデベロッパーハンドオフと同じコンセプトが得られますが、読み続けると、私たちのツールがこのデベロッパーハンドオフを別のレベルに引き上げることがわかります。
App Builderのコードマークアップ/レッドラインツールがどのように見えるかの例。
App Builderデベロッパーハンドオフ
前述のように、デザインからデベロッパーへのハンドオフを改善するための重要な部分は、デザインをHTMLコードに効率的に変換することです。多くのデザインプラットフォームはデザイン部分に専念し、プラグインやその他の回避策を使用してデベロッパー用にデザインファイルを準備しています。
しかし、デザインからコードへに焦点を当てた完全なプラットフォームを持つとしたらどうでしょう。つまり、デザインとプロトタイピングを可能にするだけでなく、わずか1回クリックでフル、ピクセルパーフェクトなAngularコードを生成する単一のデジタル開発プラットフォームです。
Sketchを例として使用してこれがどのように見えるでしょうか？
App BuilderとSketchのUIキットを使用すると、Sketchで作成したすべてのもの（Figmaでも利用可能）はデザインシステムを使用するため、すべてのスタイルとテーマの仕様は実際のAngularコンポーネントと一致します。ボタンをクリックするだけで、デザインから高品質のHTML、CSS、およびAngularコードを生成できます。
App Builderはデザインからコードへ移行するための2つのオプションを提供します：
- Visual Studio Codeプラグインを使用して、コンポーネントまたは画面を選択し、クラウドベースのサービスでコードを生成し、既存のAngularアプリにそれを挿入させます。
- Sketchファイルを直接App Builderのワークスペースにドラッグして、WYSIWYGデザイナーを使用してデザインの編集を続けるか、単に1クリックでコードを取得します。
開発者が本当に欲しいもの – 即座にアプリで使用できるプロダクション対応コード。
Sketchコード出力の一部は次のとおりです：
- すべてのSketchアセットはプロジェクトファイルからインポートされます
- すべてのデザインがHTML出力用にレイヤー化されているわけではないため、HTML出力の高品質のために必要に応じてデザイン要素を分析して再構成するツールを使用することが重要です。
- デザイン要素を_button_、input、または_select_などのHTML要素に変換でき、要素を視覚的に編集、グループ化、および手動で整理できます。
- デザインを公開して他の人と共有でき、誰もがHTML/CSS出力をダウンロードできます。
- HTMLとCSSのみに依存しており、出力でJavascriptを使用または想定していません。デベロッパーは出力HTMLをAngular、React、VueJS、または他のフロントエンドライブラリで使用できます。
App Builderが目立つ理由は、_私たちのコードの品質_です。Infragristicsは、最高品質のUIコンポーネントを生成するという課題に対する新参者ではありません。私たちはこれを30年以上続けています。Fortune 500企業向けのコンポーネントを構築しており、リアルタイムの金融取引を処理し、大規模インフラの電力変換を実行し、ストリーミングIoTデータをサポートするグリッドとチャートに毎日依存しています。
私たちはクリーンなプロダクション対応コードを生成します。これは使用可能で、デバッグ可能で、時間の試練に耐えることができます。そしてあなたはパッケージ全体を取得します。デザインツールの互換性、デザインシステム、UIキット、プロトタイピング、ユーザーテスト、および100％のプロダクション対応コード生成。
障壁を打ち破る
企業が、より良いアプリをより迅速にリリースすることは、ハンドオフの障壁を減らすことを意味することを認識しているため、多くの活動が起こっています。新しいアプローチは「ハンドオフ」の概念を禁止し、デザイナーとデベロッパーが以前により一層早く協力し始めることに焦点を当てるべきです。対面またはリモートの集まり、より多くのコミュニケーション、問題の解決、デザインシステムやデザインからコードへのソフトウェアなどのツールを使用して、出荷までの時間を大幅に短縮してください。特にデザインからコードへのソフトウェアは、デザイナーとデベロッパーが参照できる1つの場所を提供することで、誤コミュニケーション、エラー、フラストレーションレベルを低下させるのに役立ちます。そしてそれは、利害関係者とテスターとユーザーを含むデジタル製品デザインプロセスのすべての人が、最終製品に最終的に役立つことができ、すべての人が満足できるようにします。
当社のWYSIWYGApp Builderがデザインからコードへの加速化にどのように役立ち、デザイナーとデベロッパーハンドオフの約束をどのように提供するかを確認するには、このクイックビデオを見て、試用版にサインアップするか、この包括的なApp Builderの製品概要とチュートリアルを以下で見て、その機能と機能のすべてを学び、それを開始してください。
ご質問があれば、jasonb@infragistics.comにメールを送信して、一緒に議論しましょう。
