webディレクターが作るワイヤーフレームとは何なのか？

2024年9月17日 22:19

こんにちは、webディレクター／UXデザイナーの六地蔵です。

今回は、webディレクターが作るワイヤーフレームとは何なのか？について書いていきたいと思います。

ワイヤーフレームとは、情報優先度の指示書である

僕は、webディレクターが作成するワイヤーフレームとは、「情報優先度の指示書」だと考えています。

webディレクターは、一番ユーザーやプロダクトに精通している人であり、そのwebディレクターがwebサイトの情報の優先度を決めるべきだと考えています。

実際に、webディレクターに情報設計を求める現場は多いでしょう。

webサイトにはあらゆる要素があり、その優先度を文章で伝えるのはほぼ不可能です。
それをビジュアルの形で、どこに・どんなサイズで置くのかを示すことが出来れば、UIデザイナーは指定された情報優先度に応じて画面を作っていくことができるのです。

ワイヤーフレームは、「情報優先度の指示書」と言いました。つまり、これが1番目立って、その次これで、その次これで、、、、というように、情報の優先度が定義できていればOKなのです。

にもかかわらず、何を勘違いしたか綺麗な見た目のビジュアルデザインを作ってしまう人が驚くほど多いです。

1px単位での調整や適切な色遣いは、UIデザイナーには必要ですが、webディレクターには不要です。それは、UIデザイナーがやりますから。

必要以上の見た目の作り込みは、工数のムダであり、それなら別のことに時間を使うか、もしくは早く退勤した方がマシです。

ワイヤーフレームは、情報優先度の定義書であり、ビジュアルデザインではないことに重々気をつけるべきです。

だからこそ、ワイヤーフレームは出来るだけ雑に作るべきだと僕は考えています。

基本的に必要なことは、以下の2点です。
①情報の優先度が定義できている
②画面のパターンが網羅できている

①に関しては散々書きましたから、②について少し補足を。
webサイトには、条件によってUIが変わる場合があります。

分かりやすいのは、未ログインとログインの違い。未ログインには無い要素がログイン時にはあったり、その逆だったり。
画面の構成や要素が変わる場合は、それぞれに情報設計が必要なため、ワイヤーフレームは2パターン作成すべきです。

この2点さえ抑えられていれば、基本的にワイヤーフレームはOK。
見た目を綺麗に整えたくなる気持ちは分かりますが、それはUIデザイナーがプロなのでお任せして、webディレクターは別の仕事に時間を割きましょう。

では、今日はwebディレクターが作成するワイヤーフレームについて書きました。
皆様、お疲れ様でした。六地蔵でした！