コンピュータプログラミングの歴史の大部分において、アプリケーションのコードを作成するプログラマと、それらのアプリケーションのユーザーエクスペリエンス（UX）を設計するデザイナーの間には、溝が存在していました。これら2つの分野は、訓練方法も使用するツールも大きく異なります。プログラマはテキストエディタや統合開発環境（IDE）を使用してコードを記述するのに対し、デザイナーはウィジェットのレイアウトや潜在的なインタラクションをスケッチすることがよくあります。EclipseやNetbeansなどの一部のIDEにはUIデザインコンポーネントがありますが、ウィジェットのデザインよりも配置に重点が置かれている場合が多いです。オープンソースのデザインアプリケーションであるPenpotは、共同設計およびプロトタイピングプラットフォームです。デザイナーと開発者が使い慣れたワークフローを使用して簡単に共同作業できるようにする新しい機能セットを備えています。Penpotのデザインインターフェースにより、開発者は設計プロセス中に調和のとれたコードを記述できます。これは他のツールでは不可能なことです。前回の発表以来、Penpotは大きく進化しました。その最新機能は、Penpotの使用体験を向上させるだけでなく、オープンソースのPenpotアプリケーションを同様のプロプライエタリツールの域を超えています。

ペンポットをプロトタイプとして使用する

アプリケーションのベストプラクティスを設計する際によくある問題の一つは、設計時点ではアプリケーションがまだ存在していないことです。デザイナーは、ビジュアライゼーションやストーリーボードを用いて、デザインチームやプログラマーが目標を理解できるように支援することができます。しかし、これは反復的でフィードバック主導のプロセスです。開発者がUXデザインの実装を開始すると、コードへの実際の変更に合わせてデザインも変化していきます。

Penpotを使えば、Webアプリやモバイルアプリの「使える」プロトタイプを作成できます。ボタンに特定のアクションを関連付けたり、ユーザー入力に基づいてレイアウトを変更したりできます。これらはすべて、プロジェクトのコードが完成する前から実行できます。

しかし、この点で最も重要な点はシミュレーション機能ではありません。Penpotでアプリケーション設計を行う際に、開発者が最終プロジェクトで使用できるレイアウトデータが用意されています。Penpotは優れた描画・レイアウトツールであるだけでなく、コーディングプロセスに必要な情報も提供します。

Penpotは、属性、色、タイポグラフィといったデザイナー特有の要素を視覚的に表示するだけでなく、コード出力をデザインワークスペースに直接統合します（Webブラウザの開発者ツールと同様）。デザイナーと開発者は、デザインとフロントエンド開発のための同じスペースを共有し、必要な形式で仕様を入手できます。

現在のPenpotインターフェースの画像

メモリロック解除

多くのオンラインデザインツールは、独自の技術を用いて高度な機能を提供していますが、その代償として、ブラウザからアクセスできず、実行のみ可能なアプリケーションになってしまうという欠点があります。しかし、PenpotはオープンなWeb標準を採用し、Webブラウザ上でレンダリングされます。つまり、Penpotはブラウザが利用可能なメモリを最大限に活用できるため、スケーラビリティを備えた初のオンラインプロトタイピングおよびレイアウトアプリケーションとなっています。より多くのオプション、モックアップ、そしてより広いスペースを提供できます。さらに、メモリ不足を心配することなく、より多くの共同作業者にデザインスペースを提供できます。

セルフホストとSaaS

Penpotはオープンソースなので、クラウドでの使用がワークフローに合わない場合でも、必ずしもクラウドで使用する必要はありません。コンテナ内でPenpotをセルフホストしたり、ワークステーション上のローカルアプリケーションとして使用したり、組織内のサーバーでホストしたりすることも可能です。

オープンソースデザイン

以前、Penpotの紹介記事を書きましたが、それ以来、このアプリケーションはますます進化しています。プログラマーや関連スタッフを設計プロセスに巻き込みたい方は、ぜひPenpotをお試しください。