ワイヤーフレーム の作成ガイド【実例もご紹介】
ワイヤーフレームはデザインプロセスの重要な部分であり、デザイナーは通常、情報アーキテクチャ、レイアウト、構造、主要なナビゲーション要素の特定、画面遷移などの作業のほとんどをここで完了させます。
ワイヤーフレームで完成度が高ければ高いほど、モックアップやハイファイプロトタイピングの段階で行う作業は少なくなり、デザインプロセスが効率化されます。
UXPinには、フォーム、シェイプ、アイコン、ダミーコンテンツなどの UI デザインの要素が組み込まれており、デザイナーはワイヤーフレームをゼロから数分で作成できます。無料トライアルにサインアップして、初めてのインタラクティブなワイヤーフレームをUXPinでデザインしてみましょう。
UXデザインにおけるワイヤーフレームとは？
ワイヤーフレームとは、デジタル製品やWebサイトの構造を表すものであり、円、四角、長方形、三角形など、UI 要素を表す「図形」と、CTA、ヘッダー、価格、説明などの重要なコピーを除く「テキスト」を表す行で構成されています。
ワイヤーフレームには、UI デザインに関する以下の4つの重要な問いに答える必要があります。：
- ビジネスゴールとユーザーニーズを達成するために、どのようなUIコンポーネントとコンテンツが必要なのか？
- コンテンツの配置や優先順位はどうするか？
- 画面のレイアウトは？
- 主要なナビゲーション要素やCTAは何か？
ワイヤーフレームは、ワイヤーフレームUI を使って多くのデザインアイデアを反復するプロセスです。この初歩的なデザインによって、デザイナーは、モックアップやHi-Fi のプロトタイプに取りかかる前に、UX（ユーザーエクスペリエンス）の基本的な問題を簡単に特定や修正することができます（ここで特定や修正をされずに後に「変更」となると、はるかに多くの時間とリソースが必要になります）。
ワイヤーフレームとモックアップの違い
『ワイヤーフレーム』は、一般的に、色やフォント、グラフィック、その他の視覚的なデザイン要素を含まないため Lo-Fi（低中忠実度）デザインと呼ばれます。
一方、『モックアップ』は、最終的なUIの正確なグラフィック表現（またはスクリーンショット）を提供する、Hi-Fi（高忠実度）デザインです。
デザイナーがワイヤーフレームを作成する理由
ワイヤーフレームは、色やタイポグラフィー、画像、その他のコンテンツの選択に気を取られることなく、ユーザーが必要としているものを絞り込むことができるため、デザインプロセスには欠かせないものです。
ワイヤーフレームを作成することで、製品の市場投入までの時間を大幅に短縮し、コストのかかるデザインの失敗を避けることができます。というのも、デザイナーは、色、フォント、コピーにこだわることなくワイヤーフレームを使ってデザインアイデアを検証し、ステークホルダーに伝えることができるため、プロジェクトの開始時にデザインに関する決定が少なくてすむのです。
情報アーキテクチャとナビゲーション
ワイヤーフレームは、デジタル製品のナビゲーションと情報アーキテクチャにとっても重要です。デザイナーは、Hi-Fi のモックアップを作成する前に、これに関する決定を固めるといいでしょう。
例えば、忠実度の高い１０ステップのユーザーフローをデザインしたところ、それが６ステップで実現できることがわかった時を想像してみてください。これは４ステップ分のリソースを浪費することになり、納期に間に合わなかったり、予算オーバーになったりする可能性がありますよね。
アイデアの共有
デザイナーは、アイデアの共有や、チームメンバーやステークホルダーからのフィードバックの収集にワイヤーフレームを使い、さまざまなレイアウトを検討して要素を動かし、UX とビジネスにおいての目標に最適な結果になるものを決定します。たとえば、デザイナーはマーケティングチームと協力して、特定の CTA のために折り返しの上にスペースを確保することもあります。
ワイヤーフレームの作成法
ワイヤーフレーム作成に必要なもの
ワイヤーフレームを設計する際には、以下のような重要な UXアーティファクトが必要になります：
- ユーザーペルソナ：デザイン対象となるユーザーグループの確定
- ユーザージャーニーマップ：ペルソナがデジタル製品とどのように関わるかをハイレベルに視覚化したもの
- サイトマップまたは情報アーキテクチャ（既存製品向け）：製品の画面とそのつながりを視覚的に表現したもの
- ビジネス目標：バナー、フォーム、CTAなど、組織が必要とする要素や機能
スケッチを始めるのは、調査を総合的に判断し、ユーザーニーズとビジネスゴールを確定した後にのみしましょう。
このような文書で、デザインプロセスのガイドとなり、デザインに必要な機能、要素、資産、コンテンツがわかり、さらに重要なことに、何が不要なのか がわかります。
ユーザーフローの確定
ユーザーフローは、図形と線で構成された高度なフローチャートです。それぞれの図形は画面や決定を表し、線はモバイルアプリのサインアップ完了のように、一連の流れにおけるユーザーの進行と方向性を示します。
チームでは、ユーザーフローを視覚化して各ステップを確定するのに、よくホワイトボードと付箋紙（デジタルでもアナログでも）を使います。その際、付箋紙を動かして、さまざまな可能性を試しながら、シナリオを色々と検討します。たとえば、ユーザーフローの入口は１つだけとは限りませんよね。
このプロセスでは、ユーザーがどのようにユーザーフローを移動するのか、必要な画面や各ステップでユーザーが行うべき決定を明確に定めたマップを得ることを目指します。
紙のスケッチをする
ユーザーフローが決まれば、ワイヤーフレームの作成ができます。デザイナーは通常、紙とペンを使ってワイヤーフレームを作成しますが、この方法には、以下のように３つの利点があります：
- デザインツールを使うより早くて安い
- スケッチはより共同的
- 気が散ることなく問題に集中できる
ワイヤーフレームのスケッチの目的は、できるだけ多くのデザインアイデアをテストすることであり、そのベストプラクティスがいくつかあります。スケッチは、おそらくデザインプロセスの中で最もクリエイティブな部分であり、デザイナーは既成概念にとらわれない考えを持つよう奨励されます。「最悪のアイデア」という UX のアイデア出しの方法もあるほどです。
例えば、同じ結果を得るために多くのアイデアを検討する、一般的なペーパーワイヤーフレームで「クレイジーエイト」という手法があります。デザイナーは８分間で1つの画面の８つのバリエーションをスケッチし、最適な選択肢を選んで反復します。
スケッチ作業の最後には、各スクリーン用のコンテンツと機能のプレースホルダーを含むレイアウトが完成しているはずです。ちなみに、クロスプラットフォームの製品やレスポンシブWebサイトをデザインする場合は、モバイル、タブレット、デスクトップなど、各スクリーンサイズに対応したバージョンが必要になります。
スケッチ中にできるだけ多くのことを完成させるようにしましょう。スケッチ段階で色々たくさんするほど、残りのデザイン工程が早く進みます。
デジタルフレームワークの作成
紙のワイヤーフレームをデザインツールにコピーし、UXPin のようなプロダクトプロトタイプ用のデジタルデザインツールで再現します。
デザイナーは、ワイヤーフレームが一貫性を持ち、視覚的に魅力的であることを確認するために、スペーシング、サイジング、アライメントを見ます。また、より分かりやすく、より文脈のあるものにするために、CTA や見出しなどのコピーを追加することもあります。
Lo-Fi のプロトタイプとテスト
Lo-Fi のプロトタイプにより、デザイナーは、ユーザーフローのテストや、正しいナビゲーション要素があることの確認、さらに基本的なユーザビリティの問題の解決ができるようになります。
プロトタイプをステークホルダーに提示してフィードバックを求め、そのデザインがユーザーのニーズを十分に満たし、ビジネスのゴールを達成できると確信するまでイテレーションを行います。
デザイナーはこのワイヤーフレームを完成させた後、UIモックアップ、Hi-Fi のプロトタイプへと進みます。
UXPinは最先端のプロトタイピングツールです
UXPin は、デザイナーがプロトタイプをすぐに始めるのに必要なものを全て提供しており、プラグインや拡張機能を必要とする他のデザインツールとは違って、ワイヤーフレームやモックアップを構築するための機能をすぐに利用できます。
ユーザーフロー
ユーザーフローは、UXPin に内蔵されたデザインライブラリのひとつで、デザイナーがフロー図やマップ情報アーキテクチャをデザインできるようにするものです。ユーザーフローライブラリには、アクション、決定、矢印、ジェスチャー、メッセージアイコンなど、フロー図の作成に必要な要素が全て含まれています。
チームメンバーは、UXPin のコメント機能を使ってコメントや注釈をつけながら、さまざまなバリエーションを試すことでユーザーフローを共同で作成することができます。- これはリモートのデザインチームにピッタリですね。
内蔵された要素
UXPin の要素のライブラリには、ワイヤーフレームをサッと作成するためのシェイプ、フォーム、アイコン、テキストが含まれています。画像ベースのデザインツールとは異なり、UXPinのフォームエレメントは完全に機能するため、デザイナーは最小限の労力でインタラクティブなワイヤーフレームを作成することができるのです。
UXPinのインタラクティブなフォーム要素には、以下のようなものがあります：
- テキスト入力
- ボタン
- セレクトリスト
- チェックボックス
- ラジオボタン
また、UXPinは、名前、住所、日付、eコマース製品などの正確なダミーデータを要素に入力するコンテンツとデータの機能も提供します。 – ダミー文章はもういらないですね。
簡易型ワイヤーフレームツール
UXPinは、デスクトップ、タブレット、モバイル、ウェアラブルに対応した複数のキャンバスサイズを提供しており、デザイナーは、ワイヤーフレーム要素を一から描く代わりに、クイックツールメニューから要素を選択してレイアウトを作成できます。
そしてデザイナーは、コンポーネントやワイヤーフレームテンプレートを含むワイヤーフレームデザインシステムをUXPinで作成し、チームメンバーと共有することで、今後のプロジェクトのために貴重な時間とリソースを節約することができます。
インタラクティブなLo-Fi ワイヤーフレームのプロトタイプ
デザイナーは通常、インタラクティブな機能はHi-Fiプロトタイプの段階に残しておきますが、UXPin のインタラクティブなコンポーネントを使えば、例えば UXPin のテキスト入力を使ったユーザーの名前とメールの取り込みや、同意書のチェックボックスのテストなど、ワイヤーフレームの段階でより高度な実験を行うことができます。
内蔵されたデザインライブラリの活用
UXPinのライブラリ内蔵のデザイン（iOS、Material Design、Bootstrap、Foundation）を使えば、デザイナーはワイヤーフレームから忠実度の高いモックアップやプロトタイプを簡単に作成することができます。
そしてこの内蔵ライブラリによって、デザイナーは時間のかかるワイヤーフレームの変換作業に取り掛かる前に、インタラクションを含むアイデアのテストと反復を行うことができます。
Hi-Fi のプロトタイプ
UXPin はコードで動くため、デザイナーは他のデザインツールでは不可能なインタラクティブ性と機能を追加することができます。このような強力な機能によって、プロトタイプの作成範囲が拡大され、デザイナーはデザインプロセスにおいて、より多くの問題の解決やビジネスチャンスの特定ができるのです。
- ステート： １つのコンポーネントに対して、それぞれ異なるプロパティとインタラクションを持つ複数のステートバリアントを作成
- 変数：ユーザーの入力データを取得し、個別化されたダイナミックな UXの実現に変数を使用
- エクスプレッション：複雑なコンポーネントや高度な機能をコードレスで作成するための、Javascriptのような機能
- 条件付きインタラクション：複数の結果を持つ動的なプロトタイプを作成して、最終製品のエクスペリエンスを正確に再現するのに、ユーザーとのインタラクションに基づいた『if-then』 と 『if-else』 の条件の設定
世界最先端のプロダクトデザインツールで、ワイヤーフレームやプロトタイプの作成力を強化しませんか。顧客のためのより良い UX をデザインすべく、無料トライアルで UXPin の機能をぜひご体験ください。
