フォームと機能–トップワイヤーフレームツールのガイド

1487年、レオナルドダヴィンチは、ミラノ公爵ルドヴィーコスフォルツァの後援を受けて設計された、「戦闘車両」と呼ばれる概略図を描きました。 機械は意図的に正しく機能しないように設計されていましたが、エンジニアのグループが2010年に再作成しました。ダヴィンチの回路図は、基本的なワイヤーフレームの最も初期の例の1つです。

ワイヤーフレームという用語は、Webデザインの世界で採用されるずっと前から、何十年もの間使用されてきました。 ワイヤーフレームは元々、詳細を必要とせずにオブジェクトの設計を説明するためにコンピューター支援設計（CAD）ソフトウェアで使用されていました。 その結果、ワイヤーでできているように見える青写真ができました。エルゴ、最終的にはワイヤーフレームになりました。

しかし、設計におけるワイヤーフレームとは何ですか、そしてそれを持つ目的は何ですか？

デジタルデザインのワイヤーフレームは、活版印刷のスタイル、色、グラフィックス、およびインタラクティブな要素を取り除いた視覚的なガイドまたはページの概略図であり、デザインプロセスの特定のポイントを表します。 その目的は、コンテンツの機能、動作、および優先順位を表すページレベルのレイアウトのアイデアを示すことです。

デザイナーはワイヤーフレームを使用して、基礎となる概念構造をサイトまたはアプリ画面のビジュアルデザインに接続します。 ワイヤーフレームには3つの異なるタイプがあります。

• 忠実度が低い-詳細があまりない初期段階の描画。 忠実度の低いワイヤーフレームは、多くの場合、手描きのスケッチ、またはアイデアを表す線や形状です。
• Mid-fidelity-より多くのコンポーネントの詳細を表示し始め、コンテンツのレイアウトと全体的なページ構造に焦点を当てたワイヤーフレーム。
• 高忠実度-動作特性とコンテンツレイアウトに焦点を当てた、コンポーネントのより詳細で高レベルのレンダリングを表す後期（反復後）の図面。

デジタルデザインにおけるワイヤーフレームの進化は、もう1つのUXアーティファクトであり、成果物であるワイヤーフローです。 ワイヤーフローは、ワイヤーフレームとフローチャートの組み合わせであり、UXデザイナーが別の目的でゆっくりと1つに統合した、2つのアーティファクトです。Webアプリなどの製品のタスクフローを表すインタラクションを示し、追跡するためです。

設計者がワイヤーフレームで遭遇する問題は、ユーザージャーニーを伝えることです。 ユーザージャーニーを表示するためのより複雑な方法がありますが、ワイヤーフレームのシンプルさにそれらを含める傾向があります。 そのための便利なツールは、ワイヤーフレームマップです。

ワイヤーフレームマップは、ワイヤーフレームとユーザージャーニー（またはユーザーフロー）を組み合わせて、ワイヤーフレームを使用した製品のユーザージャーニーを示します。

トップワイヤーフレーミングツール

設計者は、使用するワイヤーフレーミングツールを決定する際に多くの選択肢があります。 新しいツールが継続的に市場に参入しているため、追いつくのが難しい場合があります。 探すべき優れたワイヤーフレーミングツールのいくつかの特徴は次のとおりです。

• さまざまな忠実度（低から高）を生成する機能
• 使いやすく、頻繁に更新される安定したソフトウェア
• 組み込みのテンプレート、シンボル、およびアドオン機能を備えた標準のUIコンポーネント

このガイドのツールの中には、ワイヤーフレーミングに重点を置いているものもあれば、ワイヤーフレーミングとプロトタイピング、およびモックアップ機能のバランスをとろうとしているものもあります。 1つのツールを他のツールよりも（または複数を一緒に）使用することを選択することは、設計者の好みに帰着します。

Balsamiq

Balsamiqは、忠実度が低く、使いやすいワイヤーフレーミングツールであり、使いやすさと象徴的な「手描き」の外観が好まれています。 ドラッグアンドドロップエディタですばやく簡単に使用できる、事前に作成されたテンプレートのセットが付属しています。 設計者は、独自のアセットを追加してレイアウトをカスタマイズできます。

基本的なプロトタイピングは、モックアップをリンクして、プロジェクトをフルスクリーンプレゼンテーションモードまたはエクスポートされたPDFとして表示するときのユーザビリティテスト用の簡単なクリックスルーエクスペリエンスを作成することで実現できます。

Balsamiqは、デスクトップバージョン（WindowsおよびMac）、クラウドサービス、またはGoogleドライブ、Confluence、およびJIRAのプラグインとして提供されます。

Moqups

Moqupsは、ワイヤーフレーミングに焦点を当てたもう1つのクリエイティブなコラボレーションツールですが、プロトタイピングにも使用できます。 Balsamiqとは異なり、これは純粋にWebベースであり、Webおよびモバイルアプリケーション用のワイヤーフレームを作成することを目的としています。

MoqupsとBalsamiqの主な違いは、ワイヤーフレームの忠実度です。 Balsamiqは「手描き」の外観を生み出しますが、Moqupsは、iOS、Android、Bootstrapなどのモバイルアプリやウェブデザイン用のフルカラーのステンシルとキットを提供します。

Moqupsは、他のいくつかの点でBalsamiqと区別されます。 このソフトウェアは、有限のオブジェクト編集とページ管理を可能にし、設計者が「マスター」オブジェクトを定義できるようにします。これにより、反復プロセス中にワイヤーフレームに変更を加える際の時間を大幅に節約できます。

たとえば、デザイナーは特定のサイズ、形状、色のマスターボタンオブジェクトを作成します。 このボタンは、ワイヤーフレーム全体で複数回使用されます。 後の反復プロセスで、デザイナーがボタンの色を変更する必要がある場合、すべてのボタンオブジェクトを変更するのではなく、一度変更するだけで、すべての子ボタンオブジェクトがすぐに影響を受けます。

ピドコ

Pidocoは、基本的な双方向性を備えた忠実度の低い成果物に焦点を当てた最高のワイヤーフレーミングツールです。 また、クラウドベースであり、再利用可能なコンポーネントを利用し、より堅牢なクリックスルーワイヤーフレームエクスペリエンスでBalsamiqやMoqupsと区別されます。

Pidocoは、モバイルビューが組み込まれているため、モバイルアプリやウェブデザインに役立ちます。デザイナーは、さまざまな画面サイズでアプリページがどのように表示されるかを確認できます。 もう1つの組み込み機能は、エクスポートおよび仕様機能です。 これにより、設計者はプラグインや拡張機能を必要とせずに、ワイヤーフレームからプロトタイプ/モックアップに移行できます。

Picocoは見た目も使い心地も忠実度が低いですが、より複雑なデザインツールに通常見られるいくつかの機能が含まれています。 これは、無駄のないUXを実行していて、フィードバックサイクルを短くしてすばやく反復する必要がある設計者に適しています。

グリフィー

Gliffyは、BalsamiqやMockupsとは異なるいくつかの独自の機能を備えた、忠実度の高いワイヤーフレーミングツールです。 ユニークな機能の1つは、ワイヤーフローを作成する機能です。 Gliffyには、ステンシル、マインドマップ、およびビジネスプロセスモデリングが含まれるフローチャートおよびダイアグラム作成機能が組み込まれています。

他のワイヤーフレーミングツールと同様に、Gliffyは形状、アイコンのライブラリ、およびアトラシアンのConfluence、Slack、Basecamp、Trello、WordPressにネイティブにワイヤーフレームを共有する機能を提供します。

これは比較的新しいUXワイヤーフレーム設計ツールですが、静的なワイヤーフレームを超えた単純な統合と機能を探しているプロのデザイナーの大規模な加入者ベースを誇っています。

Wireframe.cc

Wireframe.ccは、Balsamiqによく似た基本的なワイヤーフレーミングツールです。 それは多くの気を散らすツールバーやアイコンのないすっきりとしたインターフェースを持っています。 他の多くのツールとは異なり、マウスでワイヤーフレームを「スケッチ」することができます。

Wireframe.ccは、ステンシルのライブラリと、オブジェクトのクリーンで単純な処理を提供します。 無駄のないUXを操作するときにWireframe.ccが提供する便利な要素は、各ワイヤーフレームページのURLであるため、フィードバックのためにすばやく簡単に共有できます。

純粋に忠実度の低いワイヤーフレーミングに焦点を合わせているため、プロトタイピングやインタラクティブ機能は組み込まれていません。

気まぐれ

ワイヤーフレームの「Googleドキュメント」と呼ばれるWhimsicalは、OmniGraffleやVisioなどの作図ツールを模倣しています。 主な焦点はワイヤーフレーミングとフローチャートであるため、プロトタイピング/モックアップには焦点を当てておらず、ワイヤーフローを作成するための優れた候補となっています。

Gliffyと同様に、Whimsicalは忠実度の高いワイヤーフレーミングツールであり、構成可能な要素（ボタン、入力、チェックボックスなど）の大規模なライブラリが含まれています。

同じワイヤフレームドキュメントで同時に無制限にコラボレーションできることは、リモート設計チームにとって優れた組み込み機能です。

Adobe XD

Adobe XDは、そのシンプルなインターフェイス、他のアドビ製品との深い結びつき、使いやすさ、プラグインや拡張機能に依存する必要性を減らす組み込み機能により、最近デザイナーの注目を集めています。

AdobeXDでワイヤーフレームを作成する方法は2つあります。 線や図形を使用してオブジェクトや要素を作成することも、behance.netやXDリソースなどのソースから作成済みのUIキットを使用して作成することもできます。

Adobe XDの時間節約機能の1つは、「マスター」コンポーネント（SketchではSymbolsと呼ばれる）を作成する機能です。これは、マスターからインスタンス化されたすべてのコンポーネントが変更を継承するため、変更を加えるときに役立ちます。

XDをワイヤーフレーミングツールとして使用するもう1つの利点は、マウスをクリックするだけでプロトタイピングモードに切り替えることができることです。 プロトタイピングモードはXDに組み込まれており、バックグラウンドで機能するため、設計者はワイヤーフレームからプロトタイプに移行するときに時間を無駄にすることはありません。

スケッチ

UX / UIデザイナーに人気のあるデザインツールであるSketchは、ベクター編集、プロトタイピング、コラボレーションのためのプラットフォームを提供し、その機能を拡張する何百ものプラグインのライブラリが増えています。

Sketchのワイヤーフレーミングは、キット/テンプレートと描画ツールを使用するAdobeXDによく似ています。 Sketchは、一度定義して複数回使用できる再利用可能なコンポーネントであるシンボル（ボタンなど）を多用します。 インスタンス化されたシンボルは、「マスター」シンボルに加えられた変更もすべて受けます。 これは、ワイヤフレーミングプロセス全体で行う必要のある変更が多数あるため、設計者にとって有利です。

Sketchを使用すると、設計者は忠実度の高いワイヤーフレーム、プロトタイプ、およびモックアップを作成できます。 これはクラウドベースのアプリではなく、潜在的な欠点の1つは、macOSでのみ機能することです。

UXPin

UXPinは、インタラクティブな状態、ロジック、およびプログラムコンポーネントをサポートする最高のワイヤーフレームツールであり、設計者は条件付きの相互作用、変数、および式をコーディングできます。

UXPinは、ワイヤーフレーミングをはるかに超えており、主にUIコンポーネントライブラリ、シンボル、ベクター描画ツール、および共同編集を使用したプロトタイピングに重点を置いています。

Windows、macOS、およびクラウド/ブラウザのバージョンがあります。 忠実度の高いワイヤーフレーミングの場合、UXPinはSketchやAdobeXDとほとんど同じように機能します。 Balsamiqのようにドラッグアンドドロップではありませんが、単一のエコシステム内にとどまりたいと考えている設計者にとって、プロトタイピングとモックアップを次のレベルに引き上げることができます。

マーベル

ワイヤーフレーミングとプロトタイピングを容易にするもう1つの人気のあるデザインツールであるMarvelは、低忠実度から高忠実度のワイヤーフレームを作成するための使い慣れたドラッグアンドドロップインターフェイスを設計者に提供します。

すべてのアセットが含まれているため、Marvelはアドオンや拡張機能を必要としません。 プラットフォームは完全にクラウドベースであるため、他の設計チームのメンバーやクライアントとワイヤーフレームをすばやく簡単に共有できます。

デザイナーがワイヤーフレーミングにMarvelを選択する理由の1つは、Jira、Sketch、Confluence、Dropbox、Slackなどの他のプラットフォームとの統合です。 開発者、リモート設計チーム、およびクライアントとのコラボレーションのために、この機能は設計者の時間を大幅に節約します。

マーベルには、ペンと紙のワイヤーフレーミングスケッチをインタラクティブなiPhoneとAndroidのプロトタイプに変換するのに役立つPopという製品もあります。 Popを使用すると、デザイナーはスケッチの写真を撮り、それらをインタラクティブなワイヤーフレームに変えることができます。

Axure RP

Axure RPは長い間使用されており、静的なワイヤーフレーム（および高度にインタラクティブなプロトタイプ）を作成するための優れたツールです。 WindowsとmacOSの両方で動作しますが、クラウドベースではありません。

ワイヤーフレーミングは、ドラッグアンドドロップコンポーネントの膨大なライブラリを使用して実行できますが、Axure RPは、ワイヤーフレーミングをはるかに超える複雑なツールです。 設計者は、Axure RPのプログラム機能を使用して、完全に機能するアプリケーションを反映した機能を備えた高度なプロトタイプを作成できます。

Axureの高い学習曲線を考えると、静的なワイヤーフレームにのみ使用することは意味がありません。 ただし、高度に洗練された機能的なプロトタイプを作成することが目標である場合は、製品設計者にとって最適なツールになります。

Toptalデザイナーのお気に入りのワイヤーフレームツール

私たちは、プロのデザイナーが使用しているワイヤーフレーミングツールとその理由を知るために、いくつかのToptalデザイナーに連絡を取りました。 これが彼らが言わなければならなかったことです。

「私のお気に入りはAdobeXDとUXPinです。 迅速なワイヤーフレームの作成やアイデアのテストが簡単で、そこから実際に同じプラットフォームで設計やプロトタイプを作成できるため、XDをお気に入りとして選び始めています。」 -マイケル・クレイグ

「私のお気に入りはポップです。とても速いからです。 とにかく私はいつも紙にワイヤーフレームを描くので、それはうまく機能し、何も二重に扱う必要はありません。 また、明らかにローファイであるため、「ソリューションに恋をしない」こと全体に適していると思います。」 -ニコラ・ラシュトン

「私はデザイン作業にほとんどいつもAxureを使用しています。 これは、非常に複雑な、包括的な設計作業のための非常に過小評価されているツールです。」-Andi Omtvedt

「私は実際にはもうワイヤーフレーム自体を使用していません。ツールは忠実度の低いプロトタイプを作成するのに十分な強度があると思うので、最初のワイヤーフレームとより良いビジュアルをほぼ組み合わせています。 今年の1月からFramerXを採用していて、とても気に入っています。」 -チャーリーウィリアムズ

概要

洗練されたプロトタイプを作成する能力を考えると、ワイヤーフレーミングはまだ関連していますか？ 一部のプロの設計者は、ワイヤーフレームは過去の遺物であると主張しますが、他の設計者は、設計プロセスに対する継続的な重要性を断固として擁護します。

今日、設計プロセスを容易にするワイヤーフレームツールが豊富にあります。 ワイヤーフレーミングから始まり、プロトタイプ作成機能も備え、多くの場合完全に機能するモックアップを作成するハイブリッド製品にトレンドが移行しているにもかかわらず、純粋にワイヤーフレーミングに焦点を合わせ続けるものもあります。

低忠実度の成果物から中程度または高忠実度の成果物に進化しましたが、ワイヤーフレーミングは確実になくなることはありません。

Toptal Designブログでさらに読む：

• ワイヤーフレームマッピング：スコープクリープを回避する方法
• ワイヤーフレームの死。 ストレートからハイフィデリティまで！
• デザインツールの対決– Adob​​e XDとSketch（2019）
• これらのトップUXツールであなたの技術をマスターする
• トップデザイナーが使用する10のUX成果物