UXデザインのワイヤーフレームとは？ワイヤーフレームの役割やおすすめの作成方法

UXデザインを実現したいなら、ワイヤーフレームの作成はその根幹をなす工程です。ワイヤーフレームの役割と、ワイヤーフレームを作成するおすすめの方法についてご紹介します。

UXデザインにおけるワイヤーフレームとは？

UXデザインとは、サイトやサービスなどのプロダクトを顧客満足の高い状態で作成することです。ワイヤーフレームとは具体的にどのようなものなのでしょうか？

ワイヤーフレームは、青写真とか構成図といった日本語で訳され、UXデザインの工程のなかの1つです。UXデザインの主な6つの工程は以下の通りです。

UXデザインのための6ステップ

この中でワイヤーフレームがどこに位置するかというと、4.カスタマージャーニーマップの作成を終えて、5の表層段階と呼ばれるプロトタイプの作成にとりかかる前の準備段階にあたります。プロトタイプ作成のための設計図にあたるものが、ワイヤーフレームです。

ワイヤーフレームはフィードバックを得て何度もブラッシュアップされるべきものです。なのであまり最初から固まらずに、ラフスケッチのような感覚で作成をはじめるのがコツです。

初期の段階のラフスケッチのようなものを「忠実度の低いワイヤーフレーム」、段々と輪郭がはっきりとした肖像画のような精密なものを「忠実度の高いワイヤーフレーム」と呼びます。

Webサイトにおけるワイヤーフレームは、ユーザーの流れを把握し、ナビゲーションをスムーズに行えるかを決める大変重要な役割を担っています。具体的には、Webサイトの構造を図で表したものになります。

トップページの上にはロゴがあり、パララックスで新着情報が自動スライドし、その下にはメニューバーがあり、メインメニューにはタイトルの下に著者名があり、本文。右側にはサイドメニュー、上から新着記事、人気記事が並びます。

メニューバーの「インフォメーション」をクリックすると、プレスリリースが上から新しいもの順に並びます。「メンバー」をクリックすると社員が紹介され、左から社長、専務、スタッフ。「ブログ」をクリックするとスタッフのブログが新しいものから順に表示されます。

メニューバーの下には必ずパンくずリストを入れて、ユーザーが常に自分の位置を把握できるように。モバイル向けには右上にハンバーガーメニューやタブ型メニューを用意します。

このようなWebページ間の構造を断層的に表したり、Webページごとのコンテンツのレイアウトを記したものが、Webサイトにおけるワイヤーフレームです。

ワイヤーフレームを作成するおすすめの方法を2つご紹介します。

UI・UXデザインには欠かせない存在がプロトタイピングツール。Adobe XDやPrott、InVision、Sketchなど、すでにどれかお持ちであれば、かなり質のよいUIキットサンプルが入っているため、コストもかからずおすすめです。

Adobe XDは無料のUIキットが世界中で配布されていますので、さらにデザインの幅がひろがるでしょう。

プロトタイピングツールを持っていない場合、もしくはオリジナリティを強く打ち出したい場合は、コーディングして作る方法もあります。しかし、変更されることがほとんどのため、そのたびにコードを修正、追加しているとコストが余分に必要となり、あまりおすすめできません。

そこでご紹介したいのが、次のワイヤーフレーム作成のための初心者向けデザインツール3選です。

登録が必要で一部機能は有料ですが、無料でもワイヤーフレーム作成に十分に使えるためおすすめです。どのツールの中にもサンプルが入っていますので、サンプルをもとにカスタマイズすると簡単に作成できます。

忠実度の低いワイヤーフレームを作成したら、そこがスタートです。ユーザーの行動が目的を果たすために自然に流れるようナビゲーションできるか、ユーザーがストレスを感じないか協議を重ねましょう。

ワイヤーフレームを共有したら、スタッフ間で何度もディスカッションしフィードバックして作り変え、忠実度を高める必要があります。ちなみに、InVisionならディスカッション時にリアルタイムにコメントを書き込めたり、音声通話もでき便利です。

ワイヤーフレームがしっかりと煮詰まったのち、モックアップ作成を経てプロトタイプの作成へと進み、ユーザーテストを経てフィードバックを繰り返し、プロトタイプが固まった最終段階でコーディングへと進むことが、もっともコスパの良い手法でしょう。

ワイヤーフレームの役割と、おすすめの作成方法をご紹介しました。ワイヤーフレームはUXデザインを実現するための基礎となる大切な工程です。ユーザビリティを意識したワイヤーフレームを作成することで、UXなプロトタイプへとつなげていきましょう。