アプリデザインは少し恐ろしい作業になることがあります。特に初心者や新しいデザイナーと作業する場合です。生産段階の用語は混在し、互換的に使用される傾向があります。企業にとって、各段階が何を意味するかを知ることが重要であり、デザイナーから何を期待すべきかを知る必要があります。デザイナーはワイヤーフレーム、モックアップ、プロトタイプを理解し、その専門的評価を守り、クライアントに必要なものを提供する必要があります。以下が必要です。
ワイヤーフレーム
多くの人が学校で学ぶのは、概要の構造です。主題があり、それに対して変数が提示され、論文に形式と秩序を与えます。実際には詳細は提示されません。単に論理的な順序でアイデアを並べるだけで、後で整理できます。ワイヤーフレームは概要作成と非常に似ています。これはWebまたはアプリデザインの最も基本的な骨格です。ここでレイアウトと順序を概念化します。これはページの具体的な形ではなく、ページの概念化であることに注意してください。グラフィック用のシンプルなボックス、テキスト用のプレースホルダー、ナビゲーション用の四角形が使用されることがあります。
注意すべきは、いくつかのワイヤーフレームには詳細レベルが異なることです。あるものは画像用にXが入ったボックスの概要のみを持ち、他のものは指定された領域に何が入るかの詳細な記述を持つことがあります。市場には多くのワイヤーフレームツールがありますが Balsamiq が私たちの最も好ましいものです。
モックアップ
これはアプリデザイナーの2番目のステップです。モックアップは使用されるアプリの静的表現です。ワイヤーフレームが設計されるアプリのレイアウトを提供するのに対し、モックアップは潜在的なクライアントに美術的要素と視覚的詳細を適切な場所に提供します。これは磨かれた画像です。モックアップはインタラクティブではありません。これは、あなた（またはあなたのクライアント）が最初の画面しか見ないべきではないことを意味するものではありません。モックアップはすべての画面が見られるように配置されるべきですが、ストーリーボードのような流れでなければなりません。
プロトタイピング
モックアップとプロトタイプの主な違いは、ユーザーインタラクションと体験です。ワイヤーフレームが一連の形状といくつかの一般的なテキストであり、モックアップが詳細な美術的要素であるのに対し、プロトタイプはコードとレイアウトのわずかな調整を除けばデザインに最も近いものです。これはクライアントがアプリの感触を得るために意図されています。サイトまたはアプリのテストと再テストは良いプロトタイプにとって最重要です。このステップのインタラクション変数のため、デザイナーはHTML、XHTML、CSS、Java、PHPに関する基本的（プロジェクトの複雑さによっては広範な）知識を理解する必要があります。
クライアントとデザイナーの両方がプロトタイプが完成品ではないことを理解することは重要です。しかし、プロトタイピングは最後の段階であり、これはユーザー/パートナー/投資家に提示できるクリック可能な初期バージョンの製品をもたらします。
クライアントは、プロトタイピングに割く時間はモックアップまたはプロトタイプよりも大幅に多いことに注意すべきです。幸い、KFG Internationalでは48時間以内にプロトタイプを準備できます！アプリまたはウェブデザインプロトタイプへの変更は「即時修正」ではなく、MVP製品で行われた変更ほど努力がかかるわけではありません。
業界のためのツール
ご覧の通り、ワイヤーフレーム、プロトタイプ、またはモックアップを構築または購入する際には考慮すべき多くの変数があります。これらのレイアウトのいずれかを作成したい場合は、適切なソフトウェアとそれを実行するための知識が必要です。
ワイヤーフレームは3つのオプションの中で最も簡単で安価であり、 Balsamiq、Pencilとペーパー、または基本的な形状とテキストを許可する任意のコンピュータプログラムを使用して作成できます。標準的なPaintプログラムよりも少し洗練されたものを使用することをお勧めします（できるだけ配置ツールを持つプログラムが好ましいです）。
モックアップには、画像、グラフィックを編集し、テキストを変更し、複雑なデザインを作成する能力が必要です。そのような用途の業界標準ソフトウェアは Sketch, Figma またはAdobe製品です。教育面では、UIとUXの基本を理解し、最適なレイアウトを得る必要があります。
プロトタイピングにはまったく別のツールセットが必要です。Photoshop、Illustrator、またはより高度な視覚ソフトウェアプログラムが必要になるだけでなく、コーディング手段も必要になります。 Sketch, Axure、そして InVision は使用できるプログラムのいくつかです。他にも他のプログラムがあり、ニーズに合ったものを見つけることをお勧めします。
任意のデザインまたはレイアウトにおいて、デザイナーはさまざまなブラウザでワイヤーフレーム、モックアップ、またはプロトタイプをテストすべきです。これはサイトまたはアプリがライブである必要があることを意味するものではありません。ソフトウェアにはプレビュー機能が一般的にあり、それが利用できない場合はクラウドプレビューが可能です。専門家は、ユーザビリティと一貫性を確保するために、さまざまなブラウザでワイヤーフレーム、モックアップ、およびプロトタイプをテストして表示することを推奨します。
まとめ
3つの異なる用語には類似点がありますが、これらは交換可能ではなく、クライアントと購入者は注文に課せられる義務と期待を理解すべきです。サイトまたはアプリデザインを作成する際には、常に基礎から始め、より複雑な側面へと進むことが有益です。ワイヤーフレームから始めて、モックアップを作成し、プロトタイプを作成して、将来の製品またはサービスの最高のプレゼンテーションを得ましょう。