Webディレクター2年目の私が、初めてワイヤーフレームを作成してみて考えること
1. 駆け出しWebディレクター、初めてワイヤーフレーム作成をする
初めまして。クライマークスに入社して2年目のWebディレクター、K野です。ほぼ未経験からのスタートで、元々は運用業務を担当していた私が、今年の春からWebディレクターとしてのデビューを果たし、制作案件に関わるようになりました。
そしてつい先日まで、初めてのワイヤーフレーム作成に取り組んでいました！この記事では、その時の苦労や学びを備忘録としてまとめてみたいと思います。
私のような駆け出しのWebディレクターさんには特に、「あーわかるわかる！」という部分があるかもしれません。
1-1. 今回の案件について
今携わっている案件はサイトの規模が大きいため、要件定義はプロデューサーやプロジェクトマネジャーが事前に行っています。
ディレクターの担当領域は、「情報設計（ワイヤーフレームの作成）」からでした。サイト全体で約90ページのワイヤーフレームを作成したのですが、そのうち30ページが私の担当です。
2. 頭で理解している「ワイヤーフレーム」と、実際には違った
ワイヤーフレームの定義や役割は理解しているつもりでしたが、作成する前にもう一度、調べるところから始めてみました。
ワイヤーフレームとは・・
Webページのレイアウトやコンテンツの配置を定めた設計図
ワイヤーフレームがなければ、ページの情報に抜け漏れがでたり、機能の整合性が取れなくなり、大きな手戻りが発生する可能性が高い。
Web制作の工程でとても重要な役割を果たす。
作成の手順などもおさらいして、
「なるほど、簡単ではなさそうだけどできそう」なんて思っていました。
しかし実際は、単純に作るという「作業」では済まないことがたくさん出てきます。
どんな点に苦戦したり、難しさを感じたのか、4つあげてみます。
3. 作ってみてわかったこと・大変だったこと
3-1. 点と点だったものが、線で繋がった
ワイヤーフレーム着手時に参考にする資料として、プロデューサーやコピーライターがクライアントと協議の上で作成した、要件定義書やコンテンツ整理・拡充用のリストなどがありました。
それらの資料を作り上げる過程では、抽象的・概念的な部分も多く、サイト規模も大きいことから、私は全てを理解しながら案件の進行についていくことができませんでした。
しかし、ワイヤーフレームを作るにあたり、それらの資料を見返した時に、
「ここで必要な資料を作っていたのか！情報が整理されて揃っている！」
とやっと気付きました。
同時に、資料の内容もすんなりと頭の中に入ってきました。
要件定義とそれに伴って作成される資料の役割は明白ですが、初めて制作案件に入った私には、それらがどう連動していくのかがわかりませんでした。
「ワイヤーフレームを作る」というタスクを通して、資料の目的や内容の理解が進み、点でバラバラだったものが、線で繋がった瞬間だったのです。
そういった意味では苦戦したというよりも、発見に近いかもしれませんね。
3-2. 情報整理と優先順位づけの難しさ
作り始めてから難しいと感じたのは、情報の整理をした上で、優先順位をつけて画面設計することでした。
各ページの目的を理解し、ユーザーにとってわかりやすいページになるよう、さまざまな工夫が求められます。
また、自分なりに仮説をたてて設計しようとし、
「Aのページに来たら、きっとあの情報もみたいはずだから、Bのページへの導線をおこう」と考えてみるのですが、
「じゃあその仮説の根拠になる情報や数値はどこかにある？お客さんに理由の説明はできる？」と聞かれ、ぐうの音も出なくなります。
これは今後ワイヤーフレームを作る時も引き続き難しく感じる点だと思います。
正解が1つではないからこそ、悩むところです。
アウトプットを繰り返しながら精度をあげていきたいと考えています。
3-3. 「なぜこの設計なのか」の答えを持っていなければいけない
ワイヤーフレーム作成中は、次のような問いかけをよく受けました。
「その設計、お客さんに説明して、納得してもらえる？」
「どうしてここは、この作りにしたの？」
最初は他社サイトをとにかくたくさんみて、このページが良さそう！という感じで作成していたので、問いには答えられるはずもありません・・・。
「用意された原稿通りに作るのはただの作業者。情報設計におけるディレクターの役割を果たしていないことになる。」
と言われた時にはハッとしました。
「設計の意図や理由を説明できなければいけないのか！」ととても基本的なことに気づいてからは、「なぜこの設計にするのか？」を自問自答しながら作るようになります。
いつの間にか問いかけに答えられることが優先の画面設計に偏り、本来の設計ではないことに気づいて作り直したり・・・。
そんなことを繰り返し、30ページを作り終わる頃には「なぜ？」と考えを廻らせながら作成することに少し慣れていた気がします。
まだまだ未熟ですが。
3-4. 誰がみてもわかりやすいワイヤーフレームにすること
ワイヤーフレーム作成も後半に差し掛かってくると、社内確認やクライアントレビューが始まります。そこで私が意外にも苦戦したのは、
「誰がみてもわかりやすいワイヤーフレームにすること」でした。
各ページに、設計意図やCMSの仕様に関することなどをメモとして追記するのですが、そのメモの入れ方について時折指摘を受けました。
自分の作成物や文章がわかりやすいと考えていても、他の人に見せると案外わかりにくいということが多かったので、より客観視するように意識しました。ChatGPTを使って文章を添削してもらったりもしました。
この点は日頃の業務でも同じだと思うので、注意を払うようにしています。
また、今回はワイヤーフレームを提出した後に、クライアントからさまざまな意見やフィードバックがでました。
「ワイヤーフレームになって初めてページのイメージが沸きました」
というクライアントの言葉通り、目に見える形になって初めて、「このページはもっとこうしたい」というアイディアが出しやすくなるようです。
この時に気づいたのは、ワイヤーフレームは、プロジェクトに関わる人たちのコミュニケーションツールの役割も担っているということです。
ワイヤーフレーム上で、私たちはクライアントと何度もやりとりを重ね、各ページを完成させていきます。メールやチャットなどのコミュニケーションツールの一つとして、Web制作では「ワイヤーフレーム」が肩を並べているようなイメージです。
だからこそ、誰が見ても容易に理解ができて、その後の制作がより円滑に進むような完成物にするべきだと感じました。
4. 活かすべき学びと、今後への意気込み
以上、ワイヤーフレーム作成で苦戦したり、難しいと感じた点4つでした。
ワイヤーフレーム作成のプロセスや情報設計における考え方は、他の業務でも活かすことができ、Webディレクターというポジションではないとしても、とても重要なスキルだと考えています。
また私には「なぜ？」を意識して自分の力で考え、答えを導き出す力が足りていないことも、よく認識できました。
日常の業務でも「なぜ？」を積み重ねて、本質や要点を押さえたアウトプットができるよう、訓練をしていこうと思います。
5. まとめ
最近は新しい案件にメインディレクターとして入り、リニューアルの提案を行っています。
提案から手がけてみると、全てのタスクが後のワイヤーフレーム作成と密接に関わっていることをより理解できます。
ワイヤーフレーム作成は、Webサイトの方向性に大きな影響を与える重要なパートです。今は思うようにいかずに悩むことが多いですが、経験を積んで、設計のやりがいや楽しさを堪能できるようになりたいものです。
最後までお読みいただき、ありがとうございました！