ワイヤーフレームとは?|作る目的と作り方、おすすめのワイヤーフレーム作成ツール5選

最終更新日 

ワイヤーフレーム」もしくは「ワイヤー」とは、Webサイト制作をするうえで重要な設計図です。
一目でどんな情報がどこにどのように配置されているかがわかるもので、サイト制作でもアプリ開発でも必須となります。
Webサイトの見栄えや仕上がりの良し悪しを決める土台であり、自作する場合も制作会社に委託する場合もとても重要な役割を担う資料と言えるのです。
ここではワイヤーフレームの作成目的と作り方、おすすめの作成ツールを紹介します。

ワイヤーフレームとは?意味を簡単に解説

ワイヤーフレームとは、Webサイト制作における設計図です。
どのような情報をどこに配置にするか、簡略化してわかりやすくまとめたベース資料と言えます。
ワイヤーフレームの役割は、スタート時に情報ブロックの配置を決め、おおまかなイメージを固めることです。
Webサイト制作フローの最初に登場する資料であり、自作するにしろ委託するにしろ、大切な指針であることを覚えておきましょう。

ワイヤーフレームと混同しやすいキーワード

ワイヤーフレームと混同しやすいものに、ディレクトリマップとデザインカップ、サイトマップとがあります。
それぞれ見ていきましょう。

ディレクトリマップ

Webサイト全体の情報配置を一覧にまとめたものです。
ワイヤーフレームはページごとのレイアウト図ですが、ディレクトリマップはサイト全体の構造図です。
ツリー形式で階層ごとにURLを書き出すスタイルが一般的で、階層構造を理解するのに非常に役立ちます。

デザインカップ

クライアントに見せるためのデザイン見本です。
完成したときにどのようになるかイメージを視覚的に伝えるためのものであり、関係者の意思疎通のために作成するワイヤーフレームとは目的が異なります。

サイトマップ

サイトの全体像であり、制作時ではなく運用時に使用するものです。
ユーザー用のHTMLサイトマップと検索エンジン用のXMLサイトマップとがあり、仕様も使われるタイミングも完全にワイヤーフレームとは異なります。

Web制作におけるワイヤーフレーム作成の目的

ワイヤーフレームの一番の目的は、Web制作を効率的に進めることです。
複数人員が関係する場合は意思疎通のため必須となり、1人で制作する場合にも方向性を見失わないためには必要となります。
個別作業を進めていると全体像を見失い、おおもとの道から逸れていくことにもなり得ます。
そんなときにもワイヤーフレームがあればすぐにベースに立ち戻ることができるため、無駄な修正が起こりにくくなるのがメリットです。

情報設計

ワイヤーフレームを作成する最大の目的が、Web制作でもっとも重要となる「情報設計」です。
ワイヤーフレームで漠然とレイアウトを決めることで必要な情報が明確になり、情報整理ができるのが大きな目的です。

意思疎通

Web制作は複数人数が手分けして行うことも多く、ゴールからブレないものに仕上げるためにワイヤーフレームは欠かせません。
ワイヤーフレームには、作業者の意思をまとめる道しるべとして設置する目的もあります。

アイディアの練り込み

ワイヤーフレームという形でアウトプットすると、アイディアを客観的に俯瞰することができるようになります。
それをたたき台としてさらに良いアイディア出しにつなげることも可能であり、企画目的でいくつかワイヤーフレームを作成する手法もあります。
クライアントに提示するようなシチュエーションでは、ワイヤーフレームを社内でたたき、より良い提案をまとめることが有効です。

ワイヤーフレームの基本的な作り方|作成の手順を解説

それではワイヤーフレームの基本的な作り方を解説します。
特に決まった方法があるわけではありませんが、アイディアを効率的にまとめる方法を紹介します。

ステップ1:サイトマップ作成

サイトマップを作成しましょう。
まずサイトの全体像が決まらないと、その中のどのページのフレームワークなのかがわかりにくくなります。
どれくらいのボリュームになるか、必要なページが何ページあるかをまとめてください。

ステップ2:ワイヤーフレーム化するページ決定

大前提としては、すべてのページのワイヤーフレームを作成するのが理想ですが、同じ構成のページが複数ある場合すべて作成していくのは効率的ではありません。
TOPやそれに準ずる重要ページをピックアップし、ワイヤーフレーム化するのが一般的です。

ステップ3:ワイヤーフレーム作成

ワイヤーフレームを作成します。
いくつかの要素に分けてコンテンツを設計し、どこに何を置くかを決めていきましょう。
TOPであれば一番上にヘッダー、一番下にフッターを配置し、上から順にメインビュー、各コンテンツエリアを配置するのが一般的です。
コンテンツは見せたいコンテンツから順に並べ、わかりやすく配置するのがコツです。

ワイヤーフレームを作る際に便利なおすすめツール5選

ワイヤーフレームは、作成作業自体はさほど難しいものではありません。
ノートに手書きでも可能ですし、エクセルやパワーポイント、イラストレーターなどさまざまなツールで作成することができます。
ここでは使いやすいワイヤーフレーム作成ツールを5つ紹介します。

Cacoo

ワイヤーフレームはもちろん、フローチャートやプレゼン資料なども作れるオンライン作図ツールです。
チームで共同作業をする際にも使いやすい機能が揃っており、リアルタイムで図を編集、共有できます。
ビデオ通話やチャットでブレインストーミングや会議、プレゼンテーションなどができるので、メンバーがどこにいてもスムーズに作業を進められます。
テンプレートが豊富なのも魅力です。

画像·出典:Cacoo公式サイト

Moqups

操作が簡単でドラッグドロップで扱うことができるうえ、スマートフォンでも同様の作業が可能です。
図形や各パーツが揃っているので簡単にサイトイメージを形成し、完成したイメージはPDFやPNGなどでダウンロードできます。
サイト内はすべて英語表記となるので注意が必要です。

画像·出典:Moqups公式サイト

Prott

Prott はコードなどがわからなくてもプロトタイプが作れるサービスです。
こちらのサービスでは用意されたパーツを組み合わせるだけでワイヤーフレームを作ることができます。
直感的な操作だけで作成が可能なので、どなたでもできるでしょう。

画像·出典:Prott公式サイト

Google スライド

プレゼン資料作成ツールとしてよく知られるGoogle Slideですが、ワイヤーフレーム作成にも便利なツールです。
魅力はスライド機能でプレゼンしやすいことで、社内会議やクライアントへの提案時にそのまま見せることもできます。

画像·出典:Google スライド公式サイト

Justinmind

イラストレーターで作成したデータをコピーアンドペーストすると、そのまま編集することができます。
ワイヤーフレームにはイベント要素を追加したり編集したりすることが可能です。
簡単な操作でマウスオンアニメーションやスワイプ、リンクアニメーションなどもできるため、モックアップ機能もあります。

画像·出典:Justinmind公式サイト

ワイヤーフレーム作成時の注意点とは?

ワイヤーフレーム作成で失敗する最多例が「作り込みすぎ」です。
結論からすれば、デザイン要素をワイヤーフレームに入れる必要はまったくありません。
目的は情報設計ですので、どんな情報をどこにどれだけ配置するかに重点を置いてください。
ワイヤーフレームは線と文字で構成すべきであり、そうした意味ではスタートが手書きであるのは正解です。
また、スマートフォン版はPC版とは別に作ってください。
画面比率も異なり横幅も狭いため、フレームワークはまったく違うものを一から作成するつもりで行いましょう。
そして競合サイトはどんどん分析し、良い点はどんどん吸収して活かしてください。

適切な手順でワイヤーフレームを作成しよう

ワイヤーフレームはWebサイト制作のスタート時に必須のものであり、サイトの設計図とも言えるものです。
どこにどのような情報を掲載するか土台を決めるものですので、もっとも重要とされる情報設計が目的であることを忘れないようにしてください。
失敗する要因は作り込みすぎることですので、ワイヤーフレームはテキストと線で構成するようにしましょう。
最初は手書きする人が多いですが、まずはアイディアを見える化し、必要な情報をまとめることに徹してください。

    この記事が役に立ったらいいねやTweetをお願いします!

    執筆者  STRATE編集部

    リード情報をお求めの企業様へ
    STRATE[ストラテ]に貴社サービスを掲載しませんか?

    まずは無料で掲載