テック系創業者たちは、最初のプロトタイプを作るためにこれらの 5 つのリソースを活用しています

私の名前はマリーナ・チェルニショワです。プロダクトデザイナー兼メンターです。以前の記事で「 予算が足りない？フルタイムのデザイナーなしで最初のMVPを構築するには、これらのデザイン手法を活用」では、初期段階のスタートアップには必ずしもフルタイムのデザイナーが必要ではない理由と、理論的な観点から最初のプロトタイプの設計にどのように取り組むべきかについて説明しました。この記事では、より実践的な側面を見ていただきたいと思います。創業者や初期の技術起業家が最初のプロトタイプを構築するために使用できる便利なリソースを紹介します。

自分で製品を完全にデザインする興味と時間があるなら、Figma を学ぶことをお勧めします。Figma はクラウドベースのデザイン ソフトウェアで、主にプロジェクト開発ステップの前にアイデアを描き、デザインし、プロトタイプを作成するために使用されます。このツールを使用すると、デザイナーは Web ブラウザーを介して共同でレイアウトを作成したり、画像を追加したり、色やフォントを試したりすることができます。Figma は強力なツールですが、同時に非常に使いやすく、チーム メンバー全員のコミュニケーションに非常に役立ちます。

Figma に加えて、FigJam と Figma Slides を使用すると非常に便利です。FigJam は、共同チームワーク用に特別に設計されたホワイトボード ツールです。これにより、チームはリアルタイムで共同作業し、アイデアを視覚化し、一緒にブレインストーミングを行うことができます。Figma Slides は、デザイナーとそのチーム向けにカスタマイズされたプレゼンテーション ツールです。FigJam と Figma Slides は、すでに Figma を使用していて、すべてのデザイン、ホワイトボード、プレゼンテーションを 1 つのエコシステムにまとめている人にとって便利です。

ワイヤーフレーム

ワイヤーフレームは、Web サイト、アプリ、ソフトウェア インターフェイスなどのデジタル製品の大まかな図式的な視覚表現です。前回の記事では、ユーザー フローとは何かについて説明しました。ユーザー フローとは、ユーザーが特定のタスクや目標を達成するために製品や Web サイトを経由する経路を図示した視覚的な図です。* ユーザー フローに基づいて、ワイヤーフレームの最初のシンプルなバージョンを作成できます。

ワイヤーフレームは、あなたやチームが製品の設計を始める前に、製品の構造を理解するために必要です。ワイヤーフレームは、色、フォント、アイコンなどのデザインのニュアンスに惑わされることなく、チームが要件を一致させ、UX デザインの会話を集中的かつ建設的に保つのに役立ちます。

ワイヤーフレームは、非常に多様な方法で実現できます。詳細度の高いものから低いものまであります。以下に基本的な例をいくつか示します。

• 左の画像（コンテンツブロックを含むワイヤーフレームのような UI）
• 右の画像 (グラフと詳細なコンポーネントを備えた高忠実度の UI)

できるだけシンプルなものから始めることをお勧めします。つまり、メイン画面を大まかなヘッダーとボタンで配置し、テキストにあまりこだわらないことです。

Figma で作業する場合、テンプレートを使用して、現実的なサイズのフレームをすぐに作成できます。

よりリアルなインターフェース要素を備えたより詳細なワイヤーフレームを作成するには、ワイヤーフレーム用の既製のFigmaアセットを使用すると、多くの時間を節約できます（たとえば、この図書館）。

この段階では、色やフォントなどの細かいことに注意を払わずにプロトタイプを作成し、友人に見せることができます。モバイル アプリの場合は、携帯電話からリンクを開いて、よりリアルに見せることができます。すべての画面間で必要な遷移がすべて行われ、ユーザーが戻ったりアクションをキャンセルしたりできるかどうかを確認することが重要です。

既製のコンポーネントライブラリ

すべてをゼロから設計する必要はありません。Figma コミュニティで既製のアセットを調べて、製品の設計に使用すれば非常に役立ちます。

Figma には、Material UI などの利用可能なライブラリが多数あります。これらのライブラリには、アイコンのセットから既に組み立てられたページまで、多くの便利な要素が含まれています。

要素には通常、すべての状態 (ホバー状態、選択状態、警告、説明など) がすでに含まれています。インターフェイスの抽象化全体は、たとえばボタンとテーブルが入ったモーダル ダイアログなどの小さなコンポーネントから組み立てることができます。要素自体に加えて、マージンや間隔などを正しく使用する方法についての説明がある場合もあります。これらのライブラリには、開発者が使用できるコンポーネントやレイアウト全体が開発されています。

必要であれば、将来的に独自の要素を追加できます。たとえば、チャートが必要な場合は、別のライブラリから取得できます。非標準の要素が必要な場合は、最初から設計し、すべての状態とともにライブラリに追加できます。

既製のグラフィックアセット

イラスト、アイコン、アニメーションなど、バランスのとれた適切にデザインされたグラフィックにより、どんな製品もより成熟した、思慮深いものに見えます。

これに余分な時間を費やす必要はありません。既製のセットも使用できます。さまざまなスタイルと色のセットがたくさんあります。 Figmaコミュニティまたはスプラインコミュニティ3D グラフィックが好きなら。多くの場合、大規模なセットは商用利用には有料ですが、かなり手頃な価格です。

これらのアセットは、製品内だけでなく、マーケティング資料、ソーシャル ネットワークの画像、プレゼンテーション デッキにも使用できます。さまざまなプレゼンテーション テンプレートが用意されており、自分のスタイルに合わせて変更できます。

参考文献とインスピレーション

さまざまな製品のユーザーフローやスクリーンショットを収集するプラットフォームはいくつかあります。ページフローまたは翻訳元競合他社の分析やインスピレーションを得るために、これらを調べることができます。これらは、特定の機能に取り組んでいて、チェックアウトやアイテムのお気に入りへの保存などの一般的な UX パターンであることがわかっている場合に非常に役立ちます。カテゴリ別に参照したり、キーワードで特定の機能を検索したりできます。

スムーズなユーザー エクスペリエンスを実現するには、既存のソリューションに頼る方が常に効果的です。既存のソリューションはユーザーにとって明確で馴染み深いからです。革新的な機能に取り組んでいる場合でも、他の領域から意味が似ているパターンをいつでも使用できます。

結論

今日のデジタル市場は非常に競争が激しく、ユーザーは優れた UX と UI を体験しています。製品開発の初期段階であっても、これを「装飾」のための不必要な時間の浪費として無視するのではなく、競争上の優位性として活用するようにしてください。

私の意見では、デザインがまったくないことと、各画面の完璧なデザインに多くの時間を費やすことの間にはバランスがあります。簡素化と不要な手順やアクションの回避によりスムーズな UX を実現でき、許容できる UI は非常にシンプルでありながら魅力的なものになります。

重要なのは、既製のソリューションの使用をためらわず、ユーザーフローの作成など、設計前の手順を省略しないことです。この場合、間違いを犯したり時間を無駄にしたりするリスクが大幅に軽減され、リソースを節約でき、モチベーションにも影響しません。