以前、Webサイトのワイヤーフレームの作り方 ― FigmaやXDを開く前の３ステップという記事を書きました。

この記事ではワイヤーフレームを作成するとき、FigmaやXDを開いて手を動かす前に、情報設計をどのように整理し、考えていくかについてまとめています。記事内でWebサイトでワイヤーフレームを作成するときに注意したい点として、下記のように書きました。

情報の優先度、情報の量、情報の回遊性といったIA（情報設計）を考え抜くことはワイヤーフレーム作成において最も重要です。IAを考え抜いたその後に、FigmaやXDを使ってワイヤーフレームを形にしていきます。では実際にワイヤーフレームを形にしていくとき、どのような工程で進めていくと良いか。

今回は、以前の記事の続編として、FigmaやXDを開いた後に、どのようにワイヤーフレームを作成していくかを書いていきます。

ここでは、メディアサイト的な要素を持ち合わせた、ある企業のコーポレートサイトのTOPページのワイヤーフレームをつくることを仮定して進めていきます。※FigmaやXDの操作方法については触れません。

1. 情報優先度の通りにワイヤーフレームを作成する

前ステップで考えた「TOPページ」の情報優先度は、下記のように設定しています。

メディアサイト的な要素があるため、運用によって日々更新される記事・情報が優先度の上位に集まり、ユーザーに「今、何が起きているか」を伝えることを重要視した情報設計となっています。コンバージョンとしてSNSと問い合わせへの導線を設定しています。

上記の優先度の通りにワイヤーフレームを形にすると、次のようになりました。このワイヤーフレームをA案とします。

ワイヤーフレームとして「デザイン」を想起できる形にすると、テキスト情報だけで考えるのとは、また違う視点で見直すことができ、気になる箇所が浮かび上がってきます。そうした気になる箇所を洗い出し、ブラッシュアップするのが次のステップとなります。

2. 気になる箇所をリストアップし、解決案を作成する。

ワイヤーフレームA案の気になる箇所をリストアップすると、次のようになりました。

赤文字で記載した「気になる箇所」の解決のために、情報要素の入れ替えや削除を行い、表示順を変更したワイヤーフレームB案を作成します。

ワイヤーフレームB案は次のようになりました。

B案では、ABOUTとBUSINESSのセクションをページ上部へ移動し、MAGAZINEとNEWSのセクションをページ下部へ移動しました。またSOCIALのセクションを削除し、グローバルナビゲーションの順序を合わせて変更しています。

次は、A案を作成したときと同じように、B案を作成して気になる箇所を再び洗い出します。このワイヤーフレームの作成→気になる箇所を洗い出す→ブラッシュアップするという工程を繰り返して、いくつかの案を作成していきます。

ワイヤーフレームB案の気になる箇所をリストアップすると、次のようになりました。

B案に対してリストアップした「気になる箇所」を解決するために、次はC案を作成します。

ワイヤーフレーム「C案」は次のようになりました。

C案では、B案で弱くなってしまった「今、何が起きているか」を優先度高く伝えたいという元々の意図を取り戻すため、MAGAZINEとNEWSに強調表示する要素を追加しました。またSNSへの導線をフッターに追加しています。

次は、再度同じようにC案を作成して、気になる箇所をまたリストアップします。このブラッシュアップの工程を繰り返すことで、ワイヤーフレームの精度を上げると同時に「こっちの方がよいかもしれない」という可能性を広げていきます。

ワイヤーフレームC案の気になる箇所をリストアップすると、次のようになりました。

同じようにC案に対してリストアップした「気になる箇所」を解決するために、次はD案を作成します。ブラッシュアップが進み、C案、D案くらいになってくると、気になる箇所が「◯◯かもしれない」といった他の可能性への考慮となってきます。

ワイヤーフレーム「D案」は次のようになりました。

D案では、MAGAZINEのセクションをページ上部に移動し、BUSINESSに強調表示できる要素を追加しています。またページ下部のINFORMATIONのセクションを削除しています。

私たちは実際のプロジェクトでも多くの場合で、TOPページのワイヤーフレームはA案からD案の４案程度を作成します。この４案は「情報の見せ方が異なる４案」ではなく「情報の量と優先度が異なる４案」となっていることが大切です。つまり見せ方・レイアウトについてはデザインで考える、情報設計についてはワイヤーフレームで考えることを、徹底して分けて進めることが肝心です。

3. 情報のまとまりごとの優先度を明確にする。

最後に情報のまとまりごとの優先度を明確にします。情報のまとまりごとの優先度とは、各セクションの中での情報要素の重み付けです。例えば、ワイヤーフレーム上で、まだ優先度が分かりにくい箇所をリストアップすると次のようになります。

フォントのサイズやウエイトを調整して、１つのセクション内における情報の優先度を分かりやすくします。

調整した案は次のようになりました。

情報のまとまりが「意味するもの」は、記事タイトルに集約されるため、日付や記事カテゴリといった属性情報の優先度を下げ、タイトルを強調するように調整しました。

ワイヤーフレームの変遷

ここまでのワイヤーフレームの変遷をまとめると、次の図のようになります。

ワイヤーフレームの作成に慣れている方であれば、このようにA,B,C,D…,と細かく、いくつもの案を作成していくのは時間の無駄ではないかと思われるかもしれません。一気に最適解を目指した「最終案」を作成したほうが効率的なことは、私もその通りだと思います。それでも、私たちがこうしてワイヤーフレームを成長させるようにブラッシュアップしていく工程を、全て開示しながら作成するのは、プロジェクト自体をクライアントやプロジェクトメンバーと、一緒に考え、作っていきたいという想いが強くあるからです。

Webサイト制作においてクライアントから「ワイヤーフレームを見慣れていないので、ワイヤーフレームでは判断がつかない」と言われることは度々あります。しかし、それは「判断するにあたってワイヤーフレームで考えるべきポイント」が共有されていないからではないでしょうか。

今回のように、事前に作成した情報優先度のリストをシンプルに落とし込んだA案から、どのような考え方でブラッシュアップをしていきD案となったか。その制作過程を共有することは「ワイヤーフレームで考えるべきポイント」は何か、そして「どのような考え方のもとに情報設計を行っているか」についての理解を助けてくれます。

ワイヤーフレームで考えるべきポイントを振り返ってまとめると、概ね次のようになります。

やはり情報の量、情報の優先度、情報の回遊性が大切ですね。

ワイヤーフレームを作る目的は「Webサイトの完成形のなんとなくのイメージ」を描くためのものではありません。次ステップとなるデザインに入る前に、クライアントやプロジェクトメンバーなど様々な視点から、多くの意見を引き出し、より良い情報設計を共に考えるためのものです。

前回の記事では下記にように書きましたが、

ディレクター、デザイナーといった肩書にとらわれずに、クライアントやプロジェクトメンバーも含めて意見を出し合い、テンプレートのような型にはまったワイヤーフレームでよし、としないためのワイヤーフレーム作成をできるのが良いですね。

🤫