Webディレクター

Web制作に必要なワイヤーフレームとは?【作成する際の6つのポイント】

2020年10月17日

 

悩む人
Webサイト制作に必要なWF(ワイヤーフレーム)って何...?作るポイントを理解しておきたい

 

こんな悩みに答えようと思います

 

記事の内容

  • WF(ワーヤーフレーム)とは?
  • WF(ワイヤーフレーム)が必要な理由
  • ワイヤーフレームの制作の流れ
  • ワイヤーフレームの書き方・ポイント

 

本記事の執筆者

本記事を書いている僕は、Webディレクターとして約5年間働いています。

 

Web業界で働いていると「WF(ワイヤーフレーム)」という用語を聞くことが多々あると思います。

 

ワイヤーフレームは、Webサイトを公開するまでに必要な作業工程でして、特に、Webディレクターとして働くと避けて通れない仕事の1つです。

 

本記事では、「ワイヤーフレームとは?」「ワイヤーフレームを作成する際のポイント」について、紹介します。

 

 

 

WF(ワーヤーフレーム)とは?

 

まずは、WF(ワイヤーフレーム)とは何かについて、紹介します。

 

ワイヤーフレームとは、簡単に言うとWebページのレイアウトを決めるために作成する設計図のことです。

 

WF(ワイヤーフレーム)』=『家の図面』とイメージしやすいかもしれません
KEI

 

例えば、土地に新しく新居を建てるときなんかは、図面を元に家を建設していくと思います。

 

Webサイトも同様でして『ページのレイアウト』『必要な情報』などを整理する必要があります。

 

ワイヤーフレームで、具体的に決めていくのは以下です。

 

ワイヤーフレームを作るポイント

  • ページの中の情報の優先度を検討
  • 必要な情報の洗い出し
  • 各要素(ボタン、テキスト、画像など)の配置の確認
  • ページのレイアウトの確認

 

など、

Webサイトを制作する前に、WF(ワイヤーフレーム)を作成して、上記の点を整理していきます。

 

ワイヤーフレームで情報が抜け漏れてたりすると、その後の制作工程に大きな影響を与えるので、結構重要な工程だったりします。
KEI

 

次の項目でワイヤーフレームが必要な理由を具体的に深掘りして説明していきます。

 

WF(ワイヤーフレーム)が必要な理由

WF(ワイヤーフレーム)が必要な理由

 

上記でも説明しましたように、WF(ワイヤーフレーム)は、サイトを公開するまでの作業工程の1つです。

 

WF(ワイヤーフレーム)が必要な理由として、以下になります。

 

  1. プロジェクトメンバーへの共有
  2. クライアントへの説明

 

1つずつ、詳しく解説していきます。

 

①:プロジェクトメンバーとの認識の共有

 

WF(ワイヤーフレーム)は、プロジェクトメンバーにWebサイトの方向性を説明するために使います。

 

なぜなら、制作現場のデザイナーやコーダーは、WF(ワイヤーフレーム)をもとに、Webサイトを制作するからです

 

例えば、デザイナーであれば、WF(ワイヤーフレーム)をもとに、装飾したりレイアウトを作成し、コーダーであればボタンクリック後の遷移先ページURLを設定したりして、サイトを設計していきます。

 

他にも、

  • 配置順の理由
  • レイアウトの意図
  • コーディング時の実装方法(JS, PHPなどの使用言語)

 

などをWFで記述して、メンバーに共有します。

 

「デザイナー」や「コーダー」など制作現場の人から、「サイトの画面の大きさは何pxにする?」「ここのボタンを押した後のページ先は?」と聞かれたときに、すぐに答えられるようにWFには細く要件を盛り込みます。

 

そうすることで、メンバーとの認識漏れなくプロジェクトを円滑に進めることができます。

 

その②:クライアントへの企画説明・必要な情報の確認

 

クライアントとの認識の合意を取るためにも、WFを作成する意味があります。

 

クライアントにも作成の意図・目的を説明します。

 

クライアントに説明する内容(一例)

  • 追加した要素
  • レイアウト構成
  • サイト全体の完成イメージを共有
  • 掲載する情報に漏れがないかの確認

 

基本的な流れとして、クライアントからの合意を得てから、制作スタッフに決定したWFの説明をします。
KEI

 

ワイヤーフレーム制作の流れ

ワイヤーフレームの制作の流れ

 

では、具体的にワイヤーフレームを作るまでの流れを解説します。

 

  • STEP1:掲載する情報を整理
  • STEP2:情報のレイアウトを検討
  • STEP3:用紙を使って下書き
  • STEP4:下書きを元にツールで作成

 

step
1
掲載する情報を整理

 

はじめに、掲載する情報を整理していきます

 

掲載する情報を整理するのに、まずは必要な情報をひたすらピックアップしていきます。

 

例えば、『会社情報』のページを作成する場合、

 

  • 事業紹介
  • 会社概要
  • 役員一覧
  • 組織図
  • 実績

 

など、そのページに必要な情報をひたすらピックアップしていきます。

 

ピックアップをしたら『ピックアップした情報が本当に必要か?』『類似した情報があればグルーピングができるのではないか?』『優先順位はどうするか?』など検討して、レイアウト作成をしていきます。

 

step
2
情報のレイアウトを検討

 

情報のピックアップが終われば、レイアウトを具体的に検討していきます。

 

レイアウトでは、精査した情報を元に、

  • 情報の配置順
  • 配置の仕方(画面上での見せ方)

 

など、決めていきます。

 

特に、配置順では「縦2列で見せるのか?」「横2列で要素を配置して見せるのか?」など細かく配置の仕方を検討する必要があります。

 

KEI
レイアウトを検討する際に、ベンチマークとするサイトや、最新トレンドを取り入れたサイトを参考にすると、サイトの方向性がイメージしやすくなりますよ!

 

また、サイトには、

  • グローバルナビゲーション
  • ヘッダー
  • フッター

 

といった、ユーザーがページ内を回遊してもらうために必要なナビゲーションを置く必要があるのかも検討して、レイアウトを作成します。

 

step
3
用紙を使って下書き

 

精査した情報をもとに、簡単に下書きをしていきます。

 

用紙を使わず直接ツールで作成してもOKですが、簡単なラフ案を手元におきながら作成できるので、WFを書きやすくなります。

 

step
4
下書きを元にツールで作成

 

下書きをもとに、ツールで作成します。

 

主に以下のツールで作成していきます。

 

 

制作会社によって使うツールは異なると思いますが、「Microsoft PowerPoint(パワーポイント)」を使って、作成する会社が比較的多いのかなと思います。

 

また、最近では『Adobe XD』でWFを作成するディレクターも多いと思います。

デザイナーが「Adobe XD」を使ってデザイン作成する場合もありますし、複数人で同時に作業する場合なんかは、「Adobe XD」が重宝しますよ!

 

KEI
制作会社や各企業のやり方・進め方があると思うので、一概にこの流れで進めるといったことはなさそうですが、大まかに上記のような流れでWF(ワイヤーフレーム)を作成していく感じです。

 

ワイヤーフレームの書き方・ポイント

ワイヤーフレームの書き方・ポイント

 

最後に、ワイヤーフレームの書き方・ポイントを紹介します。

 

  1. 色をつけない
  2. 作成した根拠を細かく書く
  3. 共通パーツを先に作る
  4. スマホサイトのWFも作成する
  5. ユーザーを想像して作成する
  6. ベンチマークとする競合サイトをチェック

 

1つずつ詳しく解説していきます。

 

①:色をつけない

 

WFは、「必要な情報の精査」、「情報の優先順位」など、あくまでサイトの設計図を決定するフェーズです。

 

なので、画面設計書に凝った色を入れる必要はありません。(基本的に白黒でOKです)

 

KEI
色の指定をするのであれば、WF内に色の方向性を記載しておけば十分です。

 

②:作成した根拠・意図を細かく書く

 

WFで大事なのが、作成した根拠・意図を細かく書くことです。

 

作成した意図を細かく書くことで「クライアント」「デザイナー」双方に認識のズレがなくなるからです。

 

また、記載しておけば、エビデンスとして残せるので、設計の方向性が変わりそうなときは、始めに作成したWFを見返すことができます。

 

クライアント
この要素をページの上においた根拠って何だったけ?
お送りしたWFのP.20にページ上においた根拠を記載していますので、制作意図を改めて説明しますね。
KEI

 

ざっくりで恐縮ですが、こんな感じでクライアントに聞かれても返答ができるように、「設計の意図」をいつでも確認できるようにしておくのがポイントです。

 

③:共通パーツを先に作る

 

共通パーツ(ボタン、ナビゲーション)を先に作成することで、画面設計書の作成がスムーズに進行します。

 

というのも、1つのサイトを複数人でWF作成することがあり、共通パーツを先に作っていないことで、各々が自由なパーツを作ってしまう可能性があるからです。

 

共通パーツを先に作っておくことで、メンバー間での認識のズレなく進行ができ、制作スタッフも迷わず作業を始められます

 

④:スマホサイトのWFも作成する

 

決まった定義はありませんが、スマホサイトからWFを作成することをおすすめします。

 

なぜなら、スマートフォンの利用率が増加しているからです。

 

我が国では、スマートフォンは2010年ころから普及が始まった。スマートフォンの個人保有率は2013年から2017年の間に全体で10%以上増加している(図表4-2-1-3)。

引用:総務省:インターネット利用の広がり

 

今後もスマートフォンの需要は拡大して、スマフォから流入してくるユーザーも増えていくと考えられますので、スマートフォンを中心としたサイト設計を考えるのが大切です。

 

⑤:ユーザーを想像して作成する

 

WFを作成しようと思うとき、構成がなかなか思い付かないときがあると思います...

 

サイトを利用する人は、「どんなユーザー層なのか?」「ユーザーのページ内での流れは?」などの視点を意識して作成してみてください。

 

ペルソナ設定」、「Googleアナリティクス」、「キーワードチェックツール」などのツールを活用して、徹底的にユーザーインサイトを分析して、サイト設計していくことをおすすめします。

 

⑥:ベンチマークとする競合サイトをチェック

 

ベンチマークとするサイトをみて、WFの設計をしてみましょう。

 

KEI
ベンチマークとするサイトを見ることで、機能やデザインの傾向、同じ業界のサイトの雰囲気をイメージしやすくなります!

 

ベンチマークのサイトを丸パクリするのはダメですが、設計に悩んだらサイトをみてみることをおすすめします。

 

まとめ:WF制作に必要なワイヤーフレームとは?

 

ここまで、「Web制作に必要なワイヤーフレームとは?」「ワイヤーフレームの書き方・ポイント」について、紹介しました。

 

最後に今回紹介しました「ワイヤーフレームの書き方・ポイント」を掲載します。

 

  1. 色をつけない
  2. 作成した根拠を細かく書く
  3. 共通パーツを先に作る
  4. スマホサイトのWFも作成する
  5. ユーザーを想像して作成する
  6. ベンチマークとする競合サイトをチェック

 

冒頭でも書きました通り、WF(ワイヤーフレーム)作成は、メンバー間での認識の共有に使う資料です。

 

ポイントをいくつか紹介しましたが、WF(ワイヤーフレーム)作成で大切なのは、場数を踏み慣れていくことも大切だと思います。

 

いろんなサイトのWF(ワイヤーフレーム)を作成していき、作るポイントだったり、構成だったりが何となく理解していきます。

 

WFを作成する際に、本記事が何か参考になりましたら、幸いです

 

今回は以上です。

最後まで読んでいただき、ありがとうございました!

 

 

  • この記事を書いた人

keiblog

当ブログは、『シンプルで見やすい記事を発信!』をモットーに「ブログ・WordPress」などWebに関する役立つ情報を発信していきます。【経歴】アメリカ留学▶︎ 2015年ヨーロッパバックパック▶︎Webディレクター就職(歴6年)(コーディング・SEOが好きです!)▶︎ブログ開設

-Webディレクター