ワイヤーフレーム作成とは？

ワイヤーフレームなしでウェブサイトやアプリをデザインしようとしたことがあるなら、ワイヤーフレーム作成のプロセスが重要である理由をご存知でしょう。ワイヤーフレームがなければ、チームは実現しようとすることを視覚化することができず、ユーザーフローの順序付けや、画面に配置する内容を把握することもできません。

「実際に必要なのは、“これは最も重要なのか？”というような大まかなフィードバックなのに、ビジュアルに対するコメントを受け取るとイライラさせられます」とFigmaのアドボカシーディレクター、Tom Lowryは述べています。優れた製品とサイトのデザインは、賢明なワイヤーフレームデザインから始まります。Figmaのプロのヒントとワイヤーフレームツールを活用して、ワイヤーフレーム作成の各段階をマスターしましょう。

ワイヤーフレームとは？

ワイヤーフレームは、チームが要件に沿って足並みを揃え、UXデザインに関する建設的で焦点を置いた会話を行うために役立つ基本的な設計図です。ワイヤーフレームをアプリ、ウェブサイト、その他の最終製品の骨格であると考えることができます。ワイヤーフレームは、デザインチームとステークホルダーに、重要なウェブページ、コンポーネント、機能の基本的なアウトラインを示します。

• 画面レイアウト
• ナビゲーションバー
• UXおよびUIデザインのコンポーネント
• インタラクティブな要素

デザインの初期段階では、忠実度の低いワイヤーフレームは、画像や動画のプレースホルダーとしてロレム・イプサムテキストとシンプルなボックスに依存します。これにより、デザインチーム、コピーライター、その他のチームメンバーが基本機能に集中し、正しい方向に向かって足並みを揃えることができます。

クリーンでシンプルなワイヤーフレームデザインから始めることで、UI/UXデザイナーは反復の余地を持つことができます。視覚デザインの詳細でユーザーを混乱させることなく、コアUX/UIエレメントに関するユーザーテストを行うことで早期フィードバックを収集できます。デザインチームは、究極のユーザーエクスペリエンスを目指して、さまざまなコンセプト、ユーザーフロー、テンプレートを試行します。

3種類のワイヤーフレームデザイン

UXデザインの可能性は無限に思えるかもしれませんが、ほとんどのワイヤーフレームデザインは3つの基本的な忠実度に分類されます。3つのすべてのワイヤーフレームデザインを作成して、最終製品まで進むことができます。

1. 低忠実度のワイヤーフレームは、レイアウト、ナビゲーション、情報アーキテクチャに重点を置いた基本的なワイヤーフレームです。インターフェースの外観を示し、主要なUIデザイン要素を用いてユーザーフローを示します。物理的なホワイトボードのスケッチは、初期段階のワイヤーフレーム作成に役立ちますが、共有、保存、修正は必ずしも簡単ではありません。Figmaのオンラインワイヤーフレーム作成ツールを使えば、低忠実度のワイヤーフレームをすばやく作成、共有、反復できます。
2. 中忠実度のワイヤーフレームは、デザイナーが最終デザインを反復し、形作るのに役立ちます。デザインチームは、ユーザーフローやUIデザイン要素に対するさまざまなアプローチを試しながら、コア機能と主要なインタラクションをマッピングし、アノテーションやコンテンツを追加できます。これにより、チームはビジュアルデザインコンポーネントを追加する前に、最終的なワイヤーフレームデザインの枠組みを確定できます。
3. 高忠実度のワイヤーフレームは、インタラクティブで視覚的なデザイン要素を備えた初期の製品モックアップのように見えますが、低忠実度プロトタイプの機能はありません。デザインプロセスのこの段階で、フォント、色、ロゴなどのブランド要素を追加することを検討してもよいでしょう。そうすることで、ユーザーテスト用に最終製品の外観や使用感を捉えることができます。

ワイヤーフレーム段階をスキップするタイミング

多くのデザインチームは、低忠実度のワイヤーフレームから始めて、そこから進化する必要があると考えています。これは、新しい製品概念を探索し、主要なコンポーネントの調整や反復を行い、ビジュアルデザインの詳細を後で追加する場合は理に適っています。しかし、Tomによると、高忠実度のワイヤーフレームデザインにそのまま飛ぶべきケースもあります。

「確立されたデザインシステムがあり、探索しているデザインが既存のものと似ている場合、視覚デザインの詳細について会話が大きく脱線することはないでしょう」とTomは説明しています。「このような場合、忠実度の高いアイデアを探索することは、同程度に迅速で効果的です。」

ワイヤーフレームデザインにおける7つのベストプラクティス

効果的なワイヤーフレームは、ナプキンに描いたスケッチのように単純なものから、静的な製品モックアップのように複雑なものまでさまざまです。これらのベストプラクティスをワイヤーフレームデザインに適用することで、より迅速にチームと協調し、最適なアプローチで前進できます。

1. デザイン目標を特定する。

スケッチやワイヤーフレームテンプレートに手を加える前に、デザイン目標を決定します。ユーザーのニーズを考慮し、目標を達成するためにユーザーに取ってもらいたいアクションを考慮します。役に立つ製品の購入や、教育に関するニュースレターに登録することで、ユーザーが問題を解決するのを支援できるかもしれません。ワイヤーフレームのデザインが目標達成に貢献できるように、この目標の下にチームを協調させます。

2. ワイヤーフレームに適したサイズを選択する。

ワイヤーフレームは、ターゲットオーディエンスが使用する画面のサイズに合わせる必要があります。当然のことながら、ウェブサイトやアプリケーションは、ノートパソコンとモバイルデバイスでは異なって見えます。これを念頭に置いた場合、各画面タイプの標準的なワイヤーフレームサイズは以下の通りです。

• モバイル: 幅393ピクセル、高さ852ピクセル
• 11インチタブレット: 幅834ピクセル、高さ1194ピクセル
• デスクトップ: 幅1440ピクセル、高さ1024ピクセル

3. ワイヤーフレームデザインをシンプルに保つ。

ワイヤーフレームを作成する際は、グレースケールの色を使用し、フォントを制限し、グラフィックをボックスに置き換えます。設計図が最も基本的なレベルでユーザー要件を満たしていることを確認してください。スペルミスや配色のような細部に注意を向けると、ユーザーエクスペリエンスの不具合を見逃す可能性があります。初期段階のシンプルなデザインには、省略されたプレビューやカードで十分でしょう。しかし、コンテンツが豊富なインターフェースに関しては、「ロレム・イプサム」プレースホルダーテキストの代わりに実際のコンテンツを使用することをTomは推奨しています。「ユーザーインターフェースに情報アーキテクチャを適用し始めると、メニュー項目を1-2-3-4と並べるだけではあまり役に立たないので、実際のコンテンツを使用した方がいいでしょう」と彼は説明しています。

4. デザインの一貫性を維持する。

ワイヤーフレームは注意をそらしたり、混乱を招いたりしてはいけません。類似のコンポーネントは、理解や反復、コーディングが簡単になるように、すべてのワイヤーフレームで同じように見える必要があります。関連する2つのコンポーネント間にわずかな違いがあっても、デザインが異なると、ページや反復において開発者に不確実性をもたらす可能性があります。

5. ナビゲーションを明確にする。

ユーザーフローはスムーズで直感的であるべきです。情報アーキテクチャをワイヤーフレームに適用する場合、ナビゲーションや経路案内の手がかりでサポートが必要な箇所を考慮しましょう。ユーザーがサイトマップを参照しなければならない場合は、ナビゲーションと情報アーキテクチャの改善が必要です。

6. ワイヤーフレームにこだわりすぎない。

忠実度の高いワイヤーフレームであっても、所詮は最終製品になるまでに変更が必要な下書きです。デザインチームがワイヤーフレームデザインを完成したところで、開発者や他のクリエイティブチームメンバーと協力して機能の追加を開始します。

7. ワイヤーフレーム作成ツールを活用する

デザインチームには、共有、保存、オンラインでモックアップに変換できるワイヤーフレームが必要です。Figmaのワイヤーフレームキットには、初心者からデザインのプロまで、誰でも簡単にカスタマイズされた高精度のワイヤーフレームを作成できるドラッグ＆ドロップデザインツールが備わっています。

ワイヤーフレームデザインのチェックリスト

ワイヤーフレーム作成プロセスは、デザインと開発のサイクル全体で計画、構築、コラボレーションするのに役立ちますが、完了のタイミングはどう判断すればいいでしょうか？ワイヤーフレーム作成のやる事リストからこれらのアクション項目をチェックできたら、ワイヤーフレームはモックアップや高精度なプロトタイプの準備が整ったことになります。

ワイヤーフレームが完成したら、最初の作業範囲を見直しましょう。最終製品のアウトラインを作成したところで、見積もりをさらに正確にすることができるかもしれません。プレースホルダーを含む単なるスケッチであっても、ワイヤーフレームには次の内容が示されるべきです。

• ユーザーのニーズを満たすために必要な画面とは
• コンバージョンファネルを通じたユーザーフロー
• ナビゲーションや整理など、使いやすさに関する考慮事項
• 各画面の主な目標とユーザーフロー
• 主要なUIデザイン要素、各画面のコンテンツとインタラクティブ機能
• デザインコンポーネントが組み合わさって画面テンプレートを形成する方法

デザインチームがデザインプロセスを開始する時点では、最終製品の外観や機能について正確に把握していない場合があります。初心者はワイヤーフレーム作成プロセスを飛ばし、既存のモデルに依存してデザインを作成する誘惑に駆られるかもしれませんが、それでは創造力に欠けた、役に立たないユーザーエクスペリエンスにつながる可能性があります。。ワイヤーフレームは、ユーザーのニーズに創造的な注意を向け、設計と開発のプロセス全体でチームが足並みを揃えるのに役立ちます。Tomは以下のように述べています。「ワイヤーフレームは、人々が何かを洗練するために多くの時間を費やす前に、プロジェクトの初期段階を確認するのを可能にします。組織内のより多くの関係者を早期から連携させることで、後々の時間を節約できます。」

最終製品は初期のワイヤーフレームとは劇的に異なる可能性がありますが、それは良いことです！ワイヤーフレームを作成することで、自由に実験し、変更を加え、リスクを冒して新しい概念を試すことができます。概略的なフレームワークがあれば、デザインプロセスの後半では調整が難しいワークフローやデザイン要素を簡単に修正できるようになります。試行錯誤しながらワイヤーフレームを作成することで、最終的なデザインは見た目も使いやすさも改善されます。

ワイヤーフレームは、使いやすさを最優先し、以下のようなユーザーエクスペリエンスに不可欠な要素に創造的な注意を払うことができます。

• ユーザーフローとシナリオ
• 潜在的な障害に対するUXデザインの修正
• ナビゲーションとウェイファインディングの機能
• 画面テンプレートに組み込まれた情報階層

ワイヤーフレームの成功度を見分ける方法

定量的なデータなしでは、ワイヤーフレームの成功度を測定するのは簡単ではありませんが、適用可能な定性的指標がいくつかあるとTomは述べています。彼は、調整されたユーザーテストを行い、ユーザーが「操作につまづいたり、次に何をすればわからなくなる」ことなく、説明なしでユーザーエクスペリエンスを完了できるかどうかを確認することを推奨しています。

ワイヤーフレームの成功を示すもう1つの兆候は、ステークホルダーとの連携です。「クリエイティブなセッションを終えた後に望む通りのフィードバックを受け、自信を持って次のステップに進めると感じたなら、ワイヤーフレームは真に成功したと言えるでしょう」とTomは語っています。

しかし、ステークホルダーがコアユーザーのニーズではなく、細かい部分や美学的な要素に焦点を置いている場合は、「ワイヤーフレームの忠実度を下げるべきだという合図かもしれません。必要なフィードバックを得られるまで、共有する成果物の洗練度をある程度下げてみましょう。」

Figmaでワイヤーフレームデザインを作成し、カスタマイズする

チームがUX/UIデザインを一緒に考え、ブレインストーミングするにはワイヤーフレームが必要です。Figmaのワイヤーフレームキットで始めましょう。共同作業が可能なFigmaのデザインプラットフォームでアイデアを検証し、デザインワークフローを加速させ、Figmaの無料のウェブサイトワイヤーフレームキットでウェブデザインプロジェクトを開始しましょう。

さらなるインサイトやインスピレーションを得るために、TomはFigmaコミュニティへの参加を推奨しています。「私たちのコミュニティは、ワイヤーフレームのアイデアやUIテンプレートを豊富に共有しています。」