ソフトウェア開発ツール入門 – デザイナーのためのクイックガイド
デザイナーとしてソフトウェア開発ツールについて学ぶことは、デザインプロジェクトの改善やエンジニアとの連携を強化する方法を見出すことにつながり、また、このような積極的な取り組みは、デザインプロジェクトにおける取り組みへの賛同を高めることにもつながります。
そのいい例が、Delivery Hero社の製品チームが、マシュマロデザインシステムへの賛同を得るのにフロントエンドの負債を活用した方法です。彼らは、エンジニアがコンポーネントを開発する方法や、フロントエンドの負債を増大させるエラーを理解することで、ステークホルダーが拒否できないビジネスケースを提示したのです。
本記事では、デザイナーとエンジニアの連携を促す11のソフトウェア開発ツールをご紹介します。- 中にはデザインプロセスを改善できるものもありますよ！
世界最先端の連携デザインツールで、製品開発ワークフローを効率化し、プロトタイピングを強化しましょう。この革新的なコンポーネント主導型プロトタイピング技術の詳細とアクセスリクエストの方法については、Merge のページをぜひご覧ください。
ソフトウェア開発ツールのよくある使用例
エンジニアが利用できるツールは大量にあり、技術スタック、ワークフロー、製品、組織の規模などによって異なります。エンジニアがプログラミングツールを使う理由としては、以下がよく挙がります：
- IDE（統合開発環境）：コードを書くため
- 開発フレームワーク：React、Bootstrap、Angularなど
- テスト：コードのエラーを評価・修正するため
- レポジトリのホスティング：プロジェクトのホスティング、パッケージマネージャ、開発ツールなど
- 自動化：タスクとワークフローの自動化
- プロトタイプ：UIとコンポーネントのプロトタイピング
このようなツールとその機能を理解することで、デザインチームは協力して解決策を見出すことができるのです。
一般的なソフトウェア開発ツール11選
1. GitHub
GitHubは、エンジニアが開発プロジェクトの構築、ホスト、共有、文書化、拡張、連携を行うためのソフトウェア開発管理プラットフォームです。同様のプラットフォームはいくつかありますが、GitHubは圧倒的に規模が大きく、最も広く利用されています。
GitHubは、初心者やホビーユーザーからエキスパートや多国籍企業組織まで、あらゆるタイプのデベロッパー向けに個人および公共（オープンソース）でのホスティングを提供しています。
大抵のデザイナーはGitHubを使うことはないでしょうが、UXPin Mergeを使ったコンポーネント駆動型のプロトタイピングなど、デザインプロセスに大きな利益をもたらすことができます。
エンジニアが開発に使用するのと同じものである既製の UI コンポーネントをデザイナーがプロトタイピングやテストに使用できるように、MergeはGitHub などのレポジトリから UXPin に React コンポーネント ライブラリを同期します。詳細とアクセスリクエストの方法については、Merge ページをご覧ください。
2. Storybook
Storybookで、ソフトウェア開発チームはUIコンポーネントやインターフェースを単独で構築できるようになります。また、他のプログラマと連携したり、リリース前に見込み客やステークホルダーを招待してUI要素をひと通り見てもらうことも可能です。
Storybookは、デザインファイルを元にデベロッパーがコンポーネントを共有できるため、デザイナーとエンジニアの連携にとてもいいツールです。
たとえば、デザインチームが複数のステートを持つ新しいボタンを作成し、それがどのようにコードに変換されるかを知りたいとします。そうなると、エンジニアはStorybookでコンポーネントを作成し、デザイナーがボタンを単独でプレビューできるようにリンクを共有することができます。
デザインチームにとってのもう一つの大きな利点は、StorybookがUXPin Mergeと統合し、デザイナーがプロトタイプとテストのためにStorybookコンポーネントライブラリをインポートできることです。UXPinのGit統合はReactにしか対応していないのに対し、StorybookではVue、Ember、Angularなど、より多くのフロントエンド技術に対応できます。
3. Jira
Jira は、ソフトウェア開発、特にアジャイルチームで広く使用されているプロジェクト管理ツールであり、この重要なDevOpsツールは、連携と生産性を上げながら、エンジニアリングのワークフローを効率化します。
Jira はAtlassian製品群の一部であり、それによってエンジニアリングチームが複数のツールを統合してワークフローを拡張・最適化できるようになります。また、生産性向上ツールである Trello と統合し、組織全体のタスクやプロジェクトの調整が可能になります。
4. BitBucket
BitBucketもAtlassianの製品で、GitHubと同様の機能がありますが、企業は主にプライベートのレポジトリに使用しています。このプラットフォームは企業のソフトウェア開発向けに構築されており、ワークフロー、課題追跡、テスト、パイプライン管理、統合などを最適化するためのツールや機能を備えています。
BitBucketはJiraの問題IDを通じてJiraと同期し、チケットの更新やTrelloでつながった部門を跨いだチームへの通知など、多くの運営タスクを自動化し、DevOpsやDesignOpsの仕事をシンプルにします。
5. Docker
Dockerは、仮想コンテナ環境を通じてWebやモバイルのアプリを開発・配備するためのソフトウェア開発ツールです。Dockerを使用することで、iOS、Windows、Android、Linuxなど、複数のOSや環境で同じようにアプリケーションを確実に実行できるようになり、エンジニアがiOSなどの特定のコンテナを変更する必要がある場合でも、他の環境に影響を与えることはありません。
このプラットフォームを跨いだ管理ソリューションは、ソフトウェアはシステムにとらわれず、コードを削減しながら、展開と保守が簡単になるということです。
コンテナの概念は、技術的な知識が乏しい人にとっては複雑に見えるかもしれないので、Dockerの基礎知識を得るために、TechSquidTVのKyleによるこのビデオをチェックすることを強くお勧めします。
6. Visual Studio Code
Visual Studio Code（VS Code）は、Microsoft社が提供する人気の高い無償のIDE（統合開発環境）またはコードエディタです。IDEに組み込まれたGit（バージョン管理システム）により、エンジニアはGitHubやBitBucketなどのSCM（ソースコード管理）ツールやプラットフォームに接続することができます。
VS Codeは、Javascript、Python、Java、PHP、HTML、TypeScriptなど、多くのプログラミング言語用の他のソフトウェア開発ツールと統合するための拡張ライブラリーを豊富に提供しています。
7. Microsoft Azure
Microsoft Azureは、アプリの構築、管理、拡張、実行のためのツール、リソース、サービスを備えたクラウドソフトウェア開発プラットフォームです。
AzureはMicrosoft 365と統合されており、それによってスタートアップからエンタープライズまで、組織全体の連携が可能になります。
8. GitLab
GitLabは、DevOpsライフサイクルの各段階に対応したツールやサービスを備えた、包括的なエンドツーエンドの製品開発ワークスペースです。また、デザイン管理の機能も備えており、製品、UX、エンジニアリングの各チームメンバーがワイヤーフレーム、モックアップ、プロトタイプ、その他のデザインアーティファクトを共同で作成するためのツールでもあります。
UXPin Mergeを使用するデザイナーは、改善されたGitLabのStorybook統合からもメリットを得られます。エンジニアは、製品の Storybook にコンポーネントを追加でき、それでStorybook は Merge を介して UXPin と同期され、デザインシステムのコンポーネントのリリースと更新が効率化されます。
9. Bootstrap
Bootstrapは、エンジニアがWebサイトやWebアプリケーションのプロトタイプを作成する際によく使用する、レスポンシブフロントエンドフレームワークです。このフレームワークには、包括的なCSSグリッドシステムとJavascriptプラグインがあり、すぐに使えるスタイリングと機能性を備えています。
Bootstrapは多くのデザインツールのプラグインとして利用でき、すべてのUXPinプランで標準装備されています。UXPin Mergeのユーザーは、UXPinのnpm統合を使用してReact Bootstrapコンポーネントをインポートすることで、プロトタイプをさらに高度なものにすることができます。
このような既製のBootstrapコンポーネントにより、デザイナーはプロトタイプを速やかに作成でき、ゼロからデザインするのではなく、問題解決に集中することができます。エンジニアは、同じReact Bootstrap npmのパッケージをインポートし、UXPinからJSXの変更をコピーしてフロントエンドの開発を開始することができるため、デザイナーはデザインをエンジニアに引き継ぐことができます。
10. Chrome DevTools
Chrome DevToolsは、Google Chrome用のデバッグ・Webページ閲覧ツールです。エンジニアはJavascriptのデバッグやCSSの編集をリアルタイムに行い、コードを書く前と書いた後の変化を可視化することができます。
Chrome DevToolsは比較的簡単に使えるので、デザイナーはエンジニアと協力して、特にWebサイトやWebアプリの品質保証の際に変更を提案することができます。
デザイナーにとって便利なもう一つの機能は、アセットを含むページのロードパフォーマンスをテストする機能です。デザイナーは、画像や動画など、問題のあるアセットを特定し、代替案を繰り返し検討して、エンジニアが性能を最適化できるようにします。
ちなみにAppleのSafariブラウザには、Webインスペクタという同様のツールがあります。
11. AWS
Amazon Web Services（AWS）は、Webサイトやデジタル製品向けのデータストレージ、コンテンツ配信、デベロッパー向けサービスの包括的なプラットフォームです。AWSの最大の特長は、26の地域、84のゾーンにまたがる広大なサーバーネットワークにあり、企業は世界中のどこでも顧客に最も近い場所で製品を提供できるようになります。
また、AWSにはDevOpsサービスや、コードの記述、実行、デバッグのための強力なWebベースのテキストエディター、Cloud9 IDEがあります。このプラットフォームの料金プランには、プロトタイプを構築するためのAWS Free Tierがあり、スタートアップ企業に手頃な価格で市場参入を提供します。
UXPin Merge – デザイナーとエンジニアのための最高のソフトウェア開発ツール
Hi-Fiプロトタイプは、デザイナーやエンジニアにとっての課題です：
- デザイナー：デザインツールを使っても十分な忠実度や機能性が得られない
- エンジニア：プロトタイプの製作に時間がかかりすぎ、テストできる内容が限られる
デザインチームが、エンジニアが最終製品を作るときに使うものと同じものである既製のコンポーネントを使ってプロトタイプを作成できるように、製品開発チームはUXPin Mergeで、レポジトリからUXPinのデザインエディタにデザインシステムを同期させることができます。
デザインチームは Merge コンポーネントをドラッグ＆ドロップして新しい UI を構築し、それによってゼロから構築するのではなく、製品や機能に集中することができます。Merge コンポーネントはデザイン システムによって確定されたプロパティを持つ完全な対話型であり、すべてのプロトタイプの凝集性と一貫性を保証します。
このドラッグ＆ドロップのソリューションは、UXのスキルやデザインツールの経験が浅いエンジニアや製品チームにも最適です。筆者たちが、TeamPasswordの小さなスタートアップからPayPalのエンタープライズレベルまで、この方法が有効であることを確認しています。
デザインチームがない小規模なパスワードマネージャであるTeamPasswordは、ソフトウェア開発プロセスを確約する前に、UXPin Mergeを使ってユーザーインターフェースのプロトタイプとテストを行っています。
PayPal の社内製品開発チームは、新製品のプロトタイプ作成とテストに Merge を使用しています。UX チームは Microsoft Fluent を使用して、製品チームに承認されたコンポーネントを与えるための UI テンプレートを含んだデザイン システムを構築しました。
UXPin Mergeへの切り替えは非常にうまくいき、PayPalの製品チームは、経験豊富なUXデザイナーが画像ベースのツールを使用して以前行っていたよりも8倍速く1ページのプロトタイプを作成することができるようになりました。
世界最高のソフトウェア開発ツールを使用して、デザインと開発間のギャップを埋め、顧客のためにより良いユーザー エクスペリエンスをデザインしましょう。詳細とアクセスリクエスト方法については、Merge のページをご覧ください。
