1. トップページ
  2. コラム
  3. ワイヤーフレームのメリットと、初心者にも分かりやすい作成方法まとめ

2021年10月21日

ワイヤーフレームのメリットと、初心者にも分かりやすい作成方法まとめ

サイト制作時は、ワイヤーフレームが基本となり、デザインや開発といった実装が進んでいくため、円滑なサイト制作進行には「ワイヤーフレーム」は必要不可欠なものとなります。

このコラムではワイヤーフレームのメリットと作成時のステップについて説明していきます。
ワイヤーフレームのテンプレートの用意もあるので、ぜひダウンロードして、ご活用ください。

資料ダウンロード

ワイヤーフレームとは

ワイヤーフレームとは、WFとも略されて使われることもありますが、Webサイトの構成を線や枠、テキストで表現した設計図のことを指します。
つまり、【どこのページ】に【どんな要素】を【どのように配置するのか】を考えながらWebサイト全体を設計したもので、サイトを運用、構築するうえで非常に重要な存在となります。

サイトマップとは

ワイヤーフレームを作成する際に「サイトマップ」についても耳にしますが、サイトマップと呼ばれている中にもHTMLサイトマップ、XMLサイトマップ、サイトマップ構成図の3つがあります。
それぞれのサイトマップについて説明します。

・HTMLサイトマップ:Webサイトに訪れたユーザーが目的のページを見つけるために使われることが多く、よくWebサイトのページ下部にテキストリンクで設置されています。
ユーザービリティ向上が目的となります。

・XMLサイトマップ: Webサイトの情報をいち早く検索エンジンにお知らせすることを目的としたURLリストです。SEOの効果を得るためには必須です。

・サイトマップ構造図:Webサイト制作時に想定されるコンテンツを階層に分けて表示し、サイト全体を俯瞰して整理できる構成図です。つまり、Webサイト全体を一目でわかるように表現したものです。

ワイヤーフレーム作成時は、サイト全体像を把握するという意味で3つ目の「サイトマップ構造図」が非常に重要になってきます。

ワイヤーフレーム3つのメリット

ワイヤーフレームはWebサイトの設計図になり、重要であることはわかりましたが、サイト制作者としてはワイヤーフレームを作成することのメリットについても理解しておく必要があります。
3つのメリットについてそれぞれ説明します。

1つ目:要件が可視化され、漏れ防止が可能
Webサイト内にはさまざまなコンテンツや機能、導線が含まれます。ワイヤーフレームはその1つ1つの要素をどのように配置するのか、また、機能としてはどのようなものを盛り込むのか、その際の動作はどのようになるのか、ということを考えながら作成していきます。
つまり、作成したワイヤーフレームは実サイトでの動作に近しいものが出来上がってきます。
そのため、ワイヤーフレーム作成後は、要件と照らし合わせ、抜け漏れがないか、また導線として矛盾がないかという確認を行うことで、後から大幅な修正が発生しません。

せっかく作ったワイヤーフレームと要件の照らし合わせを怠ると要件の抜け漏れがあり、サイトリリース間近、最悪の場合リリース後に、コンテンツ、機能不足や不具合といった想定外のことが発生し、リリースに大きな影響を与えることになりますので、ワイヤーフレーム作成後は必ず確認を入れるようにしてください。

2つ目:精緻な工数見積もりが可能
機能や導線などが含まれているワイヤーフレームを使って、デザイナーやエンジニアにサイト設計を説明することで、精緻に作業工数を見積もってもらうことが可能となります。また、説明の際に、デザイナーやエンジニア視点からの意見も聞けるため、ワイヤーフレームの精度も上がります。

各関係者の工数を把握することで、リリースまでの全体スケジュールを作成し進行管理(※)することも可能となります。

テキストや口頭での説明の場合、各担当がイメージするものが異なったり、また要件が正しく伝わっていなかったりすることで、工数見積もりが大雑把となります。
大雑把になった結果として、スケジュール遅延や機能不足、要件と違うものが実装され、トラブルになりますので、必ずワイヤーフレームを使って説明するようにしてください。

3つ目:関係者との認識齟齬が発生しづらい
Webサイト制作ではプロダクトオーナー、ディレクター、デザイナー、コーダー、エンジニアと多くの関係者が関わることがあります。その時にワイヤーフレームが共有資料となり、サイトの規模、各コンテンツの内容、導線、また、機能が可視化され、関係者全員が同じ認識で実装を進めることができます。

各自のちょっとした認識のずれは、あとで大きなずれとなりトラブルにもなりかねません。
そのため、修正や更新があった際は、必ず関係者全員に周知し、関係者が修正や更新内容を把握できている状態にしておくことも重要となります。

ワイヤーフレーム_準備編

メリットの後は、ワイヤーフレームを作成する際のステップについて紹介していきます。

STEP1 Webサイトのゴール、目的の把握
Webサイトのゴール、目的がずれてしまっていては、想定されるコンテンツや機能もずれてきます。
最初にWebサイトのゴール、目的をプロダクトオーナーにしっかりと確認をとり、把握してください。

STEP2 必要要素の洗い出し
ゴール、目的を把握した後は、Webサイトに必要な要素を洗い出していきます。
手書きでもマインドマップを使ってもいいですが、漏れのないように想定されるものはすべて洗い出しておくことが重要です。

要素を洗い出した後に、それらを似た要素同士をグルーピングしていきます。
グルーピングした要素が同じページに入ることが一般的です。

STEP3 サイトマップ作成
グルーピングしたものを階層化して、サイトマップを作成していきます。
サイトマップが完成すると、何階層あるのか、全部で何ページ規模のサイトなのか、といったサイトの全体像が見えます。

ここで、要素の漏れがないかチェックを必ず入れてください。

STEP4 優先度決め
影響度・重要度をもとにワイヤーフレームを着手するページの優先度を決めていきます。
一般的にTOPページが一番重要であり、TOPページの設計が間違っていると、他のページの設計にも大きく影響し、最悪のケースとしては最初から作り直しということになりかねません。
まずはTOPページを優先的に着手し、次に、影響度が高い、重要なページからワイヤーフレームを作成できるように優先度を決めておきます。

ここまででワイヤーフレーム作成のベースが整いました。

ワイヤーフレーム_作成編

後半ではワイヤーフレームの作り方や作成後のSTEPについてご説明していきます。

STEP5 ワイヤーフレームの作成
決めた優先度で一番優先度が高いページのワイヤーフレームから作成します。
サイトマップは完了しているので、各ページにどのような要素が必要か把握できている状態です。
ここからは【どの要素】を【どこ】に【どのように配置するのか】を考えていきます。
この際、見出しテキスト、画像の配置、テキストは何文字程度なのか、といったことを考慮しておくと、ページ全体のボリュームも把握でき、矛盾が発生しづらく、スムーズにワイヤーフレーム作成を進めることができます。

STEP6 関係者へ説明
優先度が高いページのワイヤーフレームの作成が完成したら、次のワイヤーフレームに着手するのではなく、このタイミングで関係者に説明をします。
ここでの説明を省いてしまうと、

・実装が難しい機能追加があることがあとから発覚する
・想定ゴール要件が満たされていないことが判明する

ということが発生し、ワイヤーフレームを作り直すという事態になります。

このようなことが起きないためにも、優先度が高いページについては、ワイヤーフレーム作成後は、関係者への説明の場を持ち、認識を統一させ、必ず内容の承認をもらうようにしましょう。

STEP7 他ページのワイヤーフレーム作成
承認後は、同様に優先度が高いものから作成し、また、承認をもらうようにしましょう。

ある程度、優先度が高いページのワイヤーフレームの承認が取れた後は、残りのページをまとめて作成し、確認を取りながら、サイト全体のワイヤーフレームを完成させてください。

すべてのページのワイヤーフレームが完了したら、最後にサイトマップと照らし合わせ、漏れがないか確認することを忘れないようにしましょう。

ワイヤーフレーム作成時の3つの注意点

次に作成していただく際に意識していただきたい点について説明します。

1.デザインの細部まで作りこまない
ワイヤーフレームはあくまでもWebサイトの設計図となります。ページ内に想定されている要素を【どこに】【どのように配置するのか】を理解できることが重要でありデザインが重要ではありません。
ワイヤーフレーム作成時にデザインを気にしすぎると本来必要な要素を見落とす可能性が高いため、デザインはワイヤーフレームが完了した後、デザイナーにお任せしましょう。

2.新しい機能はエンジニアに確認
既存の機能を使う場合は問題ないですが、新たな機能を盛り込む場合は、ワイヤーフレームに反映させる前に、エンジニアに確認を取ってください。
新機能ありきでワイヤーフレームを作成し、その機能の実装が困難だった場合、機能や導線を新たに考える必要がでてくる可能性があります。

3.デバイスごとにワイヤーフレームは作成
BtoCなのか、BtoBなのか、もしくは、対象ターゲットの閲覧がPCとSPどちらが多いのかを把握し、対象ユーザーが多いワイヤーフレームから作成してください。
また、PCを作成し、SPには同じように配置をしてください、というような依頼をしてしまうと、意図していない配置、機能になる可能性が高いため、少なくとも重要なページについては、デバイスごとにワイヤーフレームを作成するようにしましょう。

ワイヤーフレームテンプレートダウンロード

ワイヤーフレームをどのように作成したらいいのか分からないという方はぜひこちらのテンプレートをダウンロードし、ご活用ください。

資料ダウンロード

まとめ

ワイヤーフレームのポイント、そして作成時のステップについてご説明いたしました。
要素をしっかりと洗い出し、サイトマップを活用しつつ、漏れのないワイヤーフレームを作成し、円滑なプロジェクト進行を行ってください。

一覧に戻る

多岐にわたる専門分野のクリエイターが在籍。
各専門クリエイターの特徴を紹介をしております。

詳細はこちら

プロフェッショナルデジタル人材チームとの
お取組みの事例を紹介いたします。

詳細はこちら