【翻訳】プロフェッショナルなワイヤーフレームの作成法8選（Nick Babich, UX Planet, 2022）

ワイヤーフレームは、紙やデジタルツールで作成された未来のインターフェイスの低忠実度のビジュアライゼーションです。ワイヤーフレームの目的は、デザイナーがコンテンツや機能要素を画面上にどのように配置すべきかを理解するのを助けることです。

この記事では、ワイヤーフレームを最大限に活用するための8つのヒントを紹介したいと思います。

1. ワイヤーフレームを始める前に、ターゲットユーザーのフローをマップ化する

ワイヤーフレームを作成する前に、何画面をデザインする必要があるのか、そしてユーザーがどのように操作するのか、明確なアイデアが必要です。その際、参考となるユーザーフローがあれば、より理解が深まります。ボックスや矢印などのシンプルなオブジェクトを使って、フローを可視化することができます。例えば、以下にチェックアウト体験のためのシンプルなユーザーフローを示します。

ユーザーフローについてもっと知りたい方は、こちらの動画をご覧ください。

2. コアとなる画面のワイヤーフレームを先に作成する

ユーザーフローにとって最も重要な画面を選びましょう。そうすることで、デザインを反復しやすくなります。

3. 適切なフィデリティレベルを選択する

フィデリティとは、ビジュアルアセットが持つリアリズムのレベルのことです。ワイヤーフレームは、通常、低忠実度と中忠実度で作成されます。低忠実度のワイヤーフレームには、最低限のデザインの詳細が含まれています。

中忠実度のワイヤーフレームは、よりモックアップに近い外観です。

低忠実度のワイヤーフレームは、デザインプロセスの初期段階、つまり、さまざまなデザインの方向性を探り、できるだけ多くのアイデアを視覚化したいときに適しています。

中忠実度ワイヤーフレームは、特定のソリューションを深く掘り下げたいときに作成すべきものです。ミディアムフィデリティワイヤーフレームは、他のデザイナーやデベロッパーとのディスカッションの際にも非常に役に立ちます。

4. 注意を引くために色を使う

ワイヤーフレームは伝統的に白黒またはグレースケールで作成されますが、1つか2つの対照的な色を使用して視覚的なアクセントを作り、見る人の注意を特定のオブジェクト（CTA：アクションへの呼び出しボタンなど）に向けることが可能です。次の例では、対照的な色を使用してインタラクティブな要素を強調しています。

5. 中忠実度のワイヤーフレームでは、ダミーテキストを避けるようにする

デザインプロセスの初期段階では、明確な視覚的階層、つまり明確な構造を持つレイアウトを作成することが目標になります。この段階ではコンテンツに注目するのではなく、それをどのように見せるかを考えなければなりません。しかし、きちんとした視覚的階層を作ったら、プレースホルダーのテキストを製品で実際に使用するコピーに置き換え始めるべきです。

この段階でダミーテキストを避けるべき理由は、Lorem Ipsum *1はあなたのデザインをレビューする人にあまり伝わらないからです。その結果、ワイヤーフレームをレビューする際に、あなたのデザインを簡単に誤解してしまう可能性があります。

機会があれば、ダミーテキストを本当のテキストに変えてください。画像：Nick Babich

6. クリックできるワイヤーフレームを作成する

ワイヤーフレームは、静的なデザイン成果物です。デザインを個々の画面の集合体として出荷することも可能ですが、そこからフローを作成したり、クリック可能なバージョンのワイヤーフレームを作成したりする方がずっとよいでしょう。クリックできるワイヤーフレームは、チームがシナリオの詳細を理解するのを容易にします。つまり、製品の機能を全体的に考えさせるのです。例えば、フローを進めていくと、スムーズなジャーニーを実現するために、いくつかの画面の間に中間状態を導入する必要があることに気づきます。

Figmaでクリッカブルワイヤーフレームを作成する。画像：Pranava Tandra

7. ワイヤーフレームに注釈をつける

プロダクトデザイナーとして、私たちはチームメンバーやステークホルダーにコンテキストを提供し、デザインの意思決定を伝える必要があります。ワイヤーフレームをチームに提示する予定がある場合は、常に注釈を入れた方がよいでしょう。注釈は、コンテキストを作成し、重要なアイデアを迅速に伝えるのに役立ちます。ただし、短点のアノテーションを使用するようにしてください。もし、コンセプトをより詳細に議論する必要がある場合（例えば、段落のある文章を書く必要がある）、ワイヤーフレーム上ではなく、デザインドキュメントで行う方がよいでしょう。

8.ワイヤーフレームキットを使用する

ミッドフィデリティのワイヤーフレームをゼロから作成するのはやめましょう。専用のワイヤーフレームキットを使って、作業をスピードアップさせましょう。ここでは、2つのキットを紹介します。

Figmaワイヤーフレームキット：ワイヤーフレームをデザインするのに必要な要素を集めた無料のUIキットです。
Platforma：Platformaは、300以上のスクリーンを含む有料のUIキットです。このキットはSketch、Figma、Adobe XDで利用可能です。
Wires Wires：Wires Wiresは、モバイルとWebの2つの無料ワイヤフレームUXキットです。モバイル用テンプレート170個、ウェブ用テンプレート90個、コンポーネント240個を内蔵しています。これらのキットはAdobe XDで利用可能です。