ワイヤーフレームとは？ 初心者向けガイド

公開: 2022-08-02

ワイヤーフレームとは？ 簡単に言えば、UX (ユーザー エクスペリエンス) デザイン プロセスの最も重要な側面の 1 つです。 ユーザー エクスペリエンス デザインの複雑な世界に触れたことがあれば、少なくとも「ワイヤーフレーム」という言葉を耳にしたことがあるでしょう。

しかし、ワイヤーフレームとは正確には何であり、なぜ UX デザイン プロセスの重要な部分なのでしょうか?

このガイドでは、ワイヤーフレームとは何かを正確に学びます。 まず、ワイヤーフレームの構成を示し、ワイヤーフレームが全体的なデザイン プロセスにどのように適合するかを説明します。 また、ワイヤーフレームに含めるべき機能についても学びます。

その後、さまざまなワイヤーフレーム タイプと、独自のワイヤーフレームを作成するために必要なツールを紹介します。

最後に「ワイヤーフレームって何？」という疑問から抜け出します。 独自のワイヤーフレームを簡単に作成して使用できるようになります。

では、見てみましょう。

ワイヤーフレームとは？

「ワイヤーフレームとは何か?」という単純な質問から始めましょう。

実際には、建築家が使用する設計図とそれほど違いはありません。 これは、デザイナーが最終製品を構築するために使用するアプリまたは Web ページの 2 次元のアウトラインです。 ワイヤーフレームの目的は、デザイナーにページの概要を明確に示すことです。

  • レイアウト
  • 構造
  • ユーザーフロー
  • 意図された動作
  • 情報アーキテクチャ
  • 機能性

ワイヤーフレームは、ほとんどの場合、デザイン プロジェクトの最初のコンセプトを表します。 そのため、グラフィック、色、スタイリングなどは最小限に抑えられています。

場合によっては、紙に手書きでワイヤーフレームをスケッチすることもあります。 他のワイヤーフレームはデジタル領域で作成されます。 それは、特定のワイヤーフレームに必要な詳細に大きく依存します。 また、Web ページまたはアプリの最終的なデザインにどの程度の詳細が含まれるかにも依存します。

つまり、ウェブページが詳細になるほど、ワイヤーフレームもより詳細にする必要があります。

ワイヤーフレームの手法は、UX デザイン チームによって最も頻繁に使用されます。 このプロセスを経ることで、プロジェクトが開発者に引き渡されて構築される前に、すべての関係者 (利害関係者) がページのどこに情報を配置するかについて合意に達することができます。

開発者に引き渡す前にプロジェクトをワイヤーフレーム化すると、多くの場合、将来の頭痛の種が大幅に軽減されます。 これは、プロジェクトの最初の設計図 (ワイヤーフレーム) が、常に最終結果がどのように見えるかの最初の基準点になる可能性があるためです (そうあるべきです)。

ワイヤーフレーム

ワイヤーフレームに最適な時期はいつですか?

ほとんどの場合、ワイヤーフレーム化のプロセスは、探索段階と呼ばれる製品ライフ サイクルの段階で行われます。

探索段階は、設計者が次の段階にあるときです。

  • アイデアのコラボレーション
  • ビジネス関連の要件の特定
  • プロジェクト全体の範囲をテストする

つまり、Web ページをワイヤーフレーム化すると、プロジェクトの全体的なデザインの開始点として使用される最初のイテレーションが得られます。

ワイヤーフレームは、将来のサイト ユーザーに提示して、デザインの有効性に関するフィードバックを得ることができるため、価値があります。 ユーザーからのフィードバックに基づいて、プロジェクトのデザイナーは、モックアップやプロトタイプなど、より詳細なデザインの反復を構築します。

そこから、プロジェクト全体が展開され始めます。

ワイヤーフレームが便利な理由

ワイヤーフレームが設計プロセスにもたらす 3 つの重要な目的と利点があります。

  1. 安価で簡単に作成できます。
  2. それらは、Web サイトまたは Web ページの特定の機能を定義し、さらに明確にするのに役立ちます。
  3. エンド ユーザーに焦点を当てた設計プロセスを維持します。

物事をさらに分解するために、これらの重要なポイントをそれぞれ詳しく見ていきましょう。

1. 安価で簡単に作成できる

デザイン チームがプロジェクトを開始するときに、なぜこれほど多くのワイヤーフレームを作成するのでしょうか? 答えは簡単です。非常に簡単に作成でき、費用もほとんどかかりません。 実際には、ペンと紙があれば、まったくお金をかけずに、新しいワイヤーフレームの詳細をスケッチすることができます。

デジタル ワイヤーフレームに関しては、さまざまなツールがすぐに利用できるため、独自のデジタル ワイヤーフレームをわずか数分で構築できます。

これらのツールについては、このガイドの後半で詳しく説明します。

ワイヤーフレームの利点の 1 つは、基本的なルック アンド フィールです。 おわかりのように、洗練された製品をフィードバックのためにユーザーに提示する際の問題は、プロジェクトがすでに完了しているように見えると、人々が自分の本当の意見に正直になる可能性が低いことです。

しかし、ワイヤーフレームを使用してページ レイアウトの絶対的なコアを公開すると、明らかな問題点や欠陥がより簡単に特定され、指摘されます。 これらの問題は、再開発に多額の費用や時間を費やすことなく、設計チームが修正できます。

結局のところ、製品設計プロセスの後期になるほど、ワイヤーフレームの段階で簡単に変更できたはずの変更を行うのが難しくなり、コストも高くなります。

2. ウェブサイトまたはウェブページの特定の機能を定義し、さらに明確にするのに役立ちます

Web デザイナーがクライアントにアイデアを伝えるとき、クライアントは常に技術的な理解を十分に持っているとは限りません。 デザイナーは「行動喚起」や「ヒーロー イメージ」などの言葉をよく使いますが、多くのクライアントはその言葉を理解していません。

特定のページ機能をワイヤフレーム化することで、デザイナーはそれらの機能がどのように機能するか、およびそれらが果たす正確な目的をクライアントにより明確に伝えることができます.

また、ワイヤーフレームを使用すると、利害関係者は、ページの各機能に割り当てる必要があるスペースの量を理解できます。 このプロセスは、ビジュアル デザインをサイトの情報アーキテクチャに関連付けるのに役立ち、ページの全体的な機能を明確にします。

ワイヤーフレームでページのすべての機能を確認すると、これらの機能がどのように連携して機能するかをよりよく理解できるようになります。 ワイヤーフレームのプロセスは、ページの残りの要素とうまく機能していないことがわかった場合、いくつかの機能を削除するきっかけになることさえあります.

これにより、ワイヤーフレーム作成プロセスが進むにつれて、プロジェクトの利害関係者の間で大きな意見の相違が生じる可能性があります。 しかし、設計プロセスの後半でコードの書き直しが必要になるよりも、これらの不一致が今発生する (そして解決される) 方がはるかに優れています。

3. ワイヤーフレームはデザインプロセスをエンドユーザーに集中させる

ワイヤーフレームはコミュニケーションに最適なデバイスです。 これは、ユーザーからの貴重なフィードバックを促進し、デザイナー間のアイデア共有を促進し、利害関係者間の重要な会話を開始するためです。

デザイン プロセスの初期段階でユーザー テストを実施することで、ワイヤーフレームはより正直なユーザー フィードバックを促進します。 成功するコンセプトと最終製品の開発に役立つ主要な問題点をより適切に特定します。

ワイヤーフレームは、Web デザイナーがユーザーが提案されたインターフェースとどのように対話するかを正確に確認するための非常に貴重な方法です。 収集された洞察は、ユーザーにとって直感的に見えるものをデザイナーに示します。 設計者は、ユーザーのフィードバックに基づいて、使いやすく快適な最終結果を作成できます。

どのような種類のワイヤーフレームを使用できますか?

ワイヤーフレームには 3 種類あります。 ワイヤーフレームのタイプは、ワイヤーフレームに含まれる詳細度によって決まります。

1. Lo-Fi ワイヤーフレーム

これは必要最小限の、Web ページの非常に基本的な表現です。 ほとんどの場合、デザインの出発点として機能します。

このため、通常、ローファイ ワイヤーフレームは非常に粗いものになります。 それらは、ピクセル精度、グリッド、またはスケールの感覚なしで作成されます。

ローファイ ワイヤーフレームの目的は、レイアウト全体の邪魔になる詳細を省略することです。 次のものが含まれます。

  • ブロック形状
  • モック コンテンツ (見出しとラベルのフィラー テキスト)
  • シンプルな画像

Lo-fi ワイヤーフレームは、会話を進めたり、ユーザー フローをマッピングしたり、ナビゲーション レイアウトを決定したりするために使用されます。 簡単に言うと、lo-fi ワイヤーフレームは、クライアントや利害関係者が同じ部屋にいて、会議中に何かをすばやく作成したい場合に最適なソリューションです。

また、いくつかの異なるコンセプトを検討していて、プロジェクトの方向性を決定したいデザイナーにも最適です。

2. Mid-Fi ワイヤーフレーム

これは、デザイン プロセスで最も一般的に使用されるワイヤーフレームです。

mid-fi ワイヤーフレームは、ページ レイアウトのより完全な表現を表示します。 タイポグラフィや画像などは含まれませんが、特定のコンポーネントについてはより多くの詳細が示されています。 また、ページの機能がより明確に定義され、分離されています。

ほとんどの場合、mid-fi ワイヤーフレームには、本文コンテンツと見出しを分けるさまざまなテキストの重みがあります。 mid-fi ワイヤーフレームはまだ白黒ですが、デザイナーはデザインのさまざまな要素を紹介するためにさまざまなグレーの色合いを使用することがよくあります。

Mid-fi ワイヤーフレームは、Balsamiq や Sketch などのデジタル ワイヤーフレーム ツールで作成されます。

WordPress サイトの所有者は、Kadence Blocks プラグインの Wireframe Blocks 機能を使用すると、最も簡単にワイヤーフレームを作成できます。 それについては後でもう少し。

3. Hi-Fi ワイヤーフレーム

最後になりましたが、ハイファイ ワイヤーフレームです。 これらには、ピクセル固有のレイアウトがあります。 たとえば、ローファイ ワイヤフレームには、おそらく「lorem ipsum」というテキスト フィラーと、画像の配置を示す X で満たされた灰色のボックスがあります。 ただし、ハイファイ ワイヤーフレームには、完全に記述されたコンテンツと、ページに掲載される実際の画像が含まれます。

Hi-Fi ワイヤーフレームに含まれる詳細は、インタラクティブ マップやメニュー システムなどの複雑なデザイン コンセプトを文書化し、調査するのに理想的です。 Hi-Fi ワイヤーフレームを組み立てるには時間がかかるため、デザイン サイクルの後半の段階で使用する必要があります。

ワイヤーフレームには何が含まれていますか?

ワイヤーフレームに含まれる機能の数は、忠実度が低、中、高のいずれであるかによって大きく異なります。 ただし、一般的に言えば、すべてのワイヤーフレームに含まれる主な要素は次のとおりです。

  • 検索フィールド
  • 共有ボタン
  • ロゴス
  • ヘッダー
  • Lorem ipsum プレースホルダー テキスト

Hi-Fi ワイヤーフレームには、連絡先情報、ナビゲーション システム、フッターも含まれます。

画像やタイポグラフィは、lo または mid-fi ワイヤーフレームに含める必要はありません。 ただし、多くの設計者は、情報の階層を表現したり、ヘッダーの配置場所を示したりするために、テキストのサイズ変更を試します。

従来、ワイヤフレームは常にグレースケールで作成されていました。 このため、デザイナーは、明るい色を示すために明るいグレーの色合いを使用してグレースケール シェーディングを試すこともあります。 グレーの暗い色合いは、大胆な色を示します。

ハイファイ ワイヤーフレームでは、一部のデザイナーが色を追加する場合があります。 ほとんどの場合、赤と紺に限定されます。

赤色の使用はエラー メッセージまたは警告を示し、濃い青色は後でアクティブなリンクになるものを表します。

ワイヤーフレームは常に 2 次元です。 このため、ホバー状態、ドロップダウン、表示/非表示機能を使用するアコーディオンなど、提案されたデザインのインタラクティブな機能を紹介するのにあまり役立たないことを覚えておくことが重要です。

モバイル ワイヤーフレーム vs ウェブサイト ワイヤーフレーム

このガイドを読んでいるほとんどの人は、デスクトップのワイヤーフレームについて考えていて、モバイルのワイヤーフレームについてはあまり考えていないでしょう。 しかし実際には、モバイル ワイヤーフレームには独自の特別な配慮が必要です。

それを知った上で、モバイルのワイヤーフレームとウェブサイトのワイヤーフレームの違いは正確には何ですか?

1. ワイヤーフレームのサイズ

デスクトップ Web サイトとモバイル サイト/アプリには明らかなサイズの違いがあるため、それぞれのレイアウトを考慮する必要があります。

たとえば、デスクトップ Web サイトにはワイド スクリーンがあります。 このため、デスクトップ サイトのワイヤーフレームは、いくつかの異なる列にまたがるレイアウトを備えている可能性があります。

ただし、モバイルでは、通常、ワイヤーフレームは 1 つまたは 2 つの列に制限されます。 これは、ユーザーに無限スクロールが表示されるかどうか、または下に追加のコンテンツを表示する目的でページごとに表示されるアイテムの数を減らすかどうかを決定する必要があることを意味します.

2.行動

もう 1 つの重要な違いは、デスクトップ サイトまたはモバイル アプリ/サイトの全体的な動作です。 デスクトップ サイトでは、サイト ユーザーはトラックパッドまたはマウスを使用して Web ページをナビゲートします。 さらに、ユーザーは興味のある機能をクリックして、詳細情報を表示できます。

デスクトップでは、ユーザーは特定の要素にカーソルを合わせてサイト メニューを表示することもできます。

ただし、ユーザーがモバイルを使用している場合、ユーザーは機能を開くために画面をタップする必要があります。

これは、モバイル向けにワイヤーフレームを作成する場合、ユーザーが特定のボタンをタップして特定の目標を達成するよう促す方法について、より批判的に考える必要があることを意味します。

3. 相互作用

モバイル サイトやアプリでのユーザーの操作は、デスクトップ サイトでの操作とは大きく異なります。

サイトのモバイル バージョンは、デスクトップ サイトと同じ方法でデータとコンテンツを取得しますが、モバイル アプリとサイトには、多くの場合、ユーザーがオフラインで使用するためにコンテンツをダウンロードするオプションがあります。

モバイル向けのワイヤーフレームを作成するときは、モバイルとデスクトップでインタラクションがどのように異なるかを考慮してください。

WordPress のワイヤーフレーム

考えられるすべてのものに対応する技術が豊富にある今日の状況では、Web デザイナーは高度なワイヤーフレーム作成プログラムやツールを多数使用できます。

全体として、Sketch はおそらくワイヤーフレーム作成の最も有名なツールです。 ベクター デザイン シェイプとアートボードの組み合わせを使用して、Web デザイナーがピクセルベースのキャンバス上に独自のワイヤーフレームを作成できるようにします。

ただし、WordPress ユーザーにとって、ワイヤーフレームに最適なツールは、Kadence Blocks プラグインの新しいワイヤーフレーム ブロック機能です。

Kadence Blocks の Wireframing Blocks は、サイトの構築をガイドするのに役立つ、クリーンで事前に構築されたセクションを提供する WordPress ブロックの新しいセットです。 何よりも、すべて natvie WordPress ブロック エディター内から直接実行できます。

ワイヤーフレーム ブロックは、次のような 30 を超えるさまざまなワイヤーフレーム ブロックをユーザーに提供します。

  • コンテンツ
  • 料金表
  • フッター
  • お客様の声
  • カード
  • カウントダウン
  • ポートフォリオ
  • フォーム
  • もっとたくさん

WordPress サイトの所有者として、ネイティブの WordPress ブロック エディター以外でワイヤーフォーミングを行う必要はありません。 Kadence Blocks の Wireframe Blocks は、WordPress でワイヤーフレームを作成するために必要な唯一のツールを提供します。

そして、これまで以上に使いやすくなりました。

新しいワイヤーフレーム ブロックは、無料の Kadence Blocks プラグインで利用できます。 ワイヤーフレーム作成プロセスで何ができるか見てみましょう。

ワイヤーフレームとは？ 今、あなたは知っています！

「ワイヤーフレームとは？」 10分以内で説明。

ワイヤーフレームは、見過ごされがちなもののように思えるかもしれません。 ただし、デザイナーは、サイトの重要なページのナビゲーションとレイアウトに関連するクライアント、利害関係者、およびユーザーからの明確なフィードバックを得ることができます。

そして、ワイヤーフレームの段階でクライアント、利害関係者、ユーザーの承認を得ることができれば、自信を持ってプロジェクトを進めることができます。ユーザーとクライアントが承認するものを作成していることがわかります。愛。

無料の Web サイト ワイヤーフレーム ライブラリを使用して Kadence ブロックをダウンロードする

美しいデザインで魅力的なコンテンツを作成するのが好きなら、Kadence Blocks はネイティブの WordPress エディターでクリエイティブになるためのツールを提供します。 さらに、次の Web デザインを開始するためのブロックのワイヤーフレーム ライブラリなど、サイトに簡単に含めることができる多数の事前構築済みコンテンツをお楽しみください。 インスピレーションと迅速な開発に最適です。

ダウンロード中