Webサイト制作で「ワイヤーフレーム」という言葉を耳にしたことはありませんか？

Webサイトやアプリの制作に欠かせない土台となる存在がワイヤーフレームです。

ワイヤーフレームを活用することで、個人でもチームでもより効果的なサイト設計ができるようになります。

ですが、「ワイヤーフレームはどうやって作ればいいの？」「専門的な知識やツールが必要そうでハードルが高い…」など思う人も多いはず。

今回の記事では、ワイヤーフレームの基本的な意味や作り方、活用できるツールについて解説していきます！

ワイヤーフレームとは

ワイヤーフレームとは、Webサイトのレイアウトやコンテンツ配置を示す設計図のようなものです。

英語の“wire”は「針金・線」、”frame”は「枠・骨組み」という意味で、その名のとおりシンプルな線や枠でWebサイトの構成を表現することを指します。

デザイン要素を加える前の下書きのような状態だとイメージするとわかりやすいかもしれません。

Webサイトに限らず、多くのものづくりの現場にとって設計図は必要不可欠な存在です。

「寝室はここ、キッチンとリビングはここ」と考えるように、Web制作でもページのどこに何のコンテンツを置くかを決めるために作成するのがワイヤーフレームです。

モックアップ・プロトタイプとの違い

ワイヤーフレームと混同されやすいものとして「モックアップ」や「プロトタイプ」などの言葉があります。

慣れないうちは違いがわからず混乱してしまうこともあるかもしれませんが、実際にはそれぞれ役割が異なります。

モックアップ

モックアップとは、Webサイトのデザインの見本です。

ワイヤーフレームの骨組みに色やフォント、画像などのビジュアル要素を加えて、完成イメージを静止画として再現したものを指します。

あくまで画像としてデザインを確認するためのもので、リンクやボタンをクリックしても動作はしない状態です。

デザインカンプと呼ばれることもあります。

プロトタイプ

モックアップに実際の動作を付け加えた試作品がプロトタイプです。

プロトタイプではリンクやボタンなどが実装され、ページの切り替えなどもできるようになっています。

完成前にユーザーの操作感をテストし、問題点の検証や改善などを行います。

まずワイヤーフレームで骨組みを決め、その後モックアップでデザインを作り込み、必要に応じてプロトタイプで検証するのが一般的な流れです。

ワイヤーフレームを使うメリット

実際にワイヤーフレームを使うことで、どれだけのメリットがあるのでしょうか？

ここではホームページ制作でワイヤーフレームを活用する主なメリットを紹介します。

イメージの共有ができる

ワイヤーフレームがあれば、発注側（クライアント）と制作側のイメージ共有がスムーズになります。

クライアントにいきなり完成品を提供しても、クライアントの希望や理想と大きく異なっていれば大幅な作り直しが必要となってしまうかもしれません。

しかし、まず短時間で作れるワイヤーフレームをクライアントに共有すれば、認識の違いがないかの確認を取ってから本デザインに取り掛かれるので安心です。

さらにワイヤーフレームがあればデザイナーとコーダーなど、制作側のチーム内でもコミュニケーション不足によるずれを防ぎ、共通認識をもって進めることができます。

作業が効率化できる

「ワイヤーフレームをわざわざ作るのは手間だし、ワイヤーフレームを作ると作業が遅くなってしまうのでは」と思う人もいるかもしれません。

しかし、実際にはワイヤーフレームを使った方が作業を効率化することができるんです。

ワイヤーフレームによってサイト構成を事前にしっかり決めておくと、その後のデザイン作業やコーディング作業を効率的に進めることができます。

結果として制作工程の無駄が減り、スケジュール通りに進行がしやすくなります。

また、同じワイヤーフレームでもデザインを変えれば全く違うサイトに見せることができるため、複数のサイトを制作する際にはさらに時短効果を発揮できるでしょう。

作り直しや修正を減らせる

これまでの話とも関連しますが、ワイヤーフレームを作成すると後工程での作り直しや修正を大幅に減らせます。

完成してからの作り直しが発生してしまうと、実質倍の制作作業を行うのと同じことです。

または一部の箇所の修正だったとしても、サイトの構造によっては結局大幅な作り直しを行わないといけない場合もあります。

作り直しや修正が発生すれば人件費も予定より多くかかり、クライアントの不満にも繋がってしまうかもしれません。

ワイヤーフレームの段階で「載せるべき情報は何か」「それらをどこに配置するか」を検討・確認しておけば、後になってこういったトラブルを極力防ぐことができます。

また、ワイヤーフレームは制作前のチェックリストの役割も果たします。

関係者への確認を繰り返しつつ構築することで、全員の認識をしっかりワイヤーフレームに落とし込むことができます。

さらに「ワイヤーフレーム完成後のサイト構造の修正は別途費用が必要」と規約に定めておけば、予想外のコスト負担も防げて安心です。

安定した品質のサイトが作れる

ワイヤーフレームを活用すると、ホームページの品質も安定しやすくなります。

理由は、設計段階でサイトの骨組みをしっかりと検討しているためです。

ワイヤーフレームを作らずいきなりデザインや構築から始めてしまうと「あの機能が欲しい」「ここは色を変えたい」などの思い付きに左右されてしまいます。

そのため、せっかく作ったサイトも行き当たりばったりな内容になり、品質や動作にムラが出てしまうことも。

一方でワイヤーフレームの段階でしっかり計画性をもって制作を進めれば、そのようなトラブルや問題を極力防ぐことができます。

結果としてユーザーにとって使いやすく質の高いページを構築できるというわけです。

また、ワイヤーフレームをテンプレート化しておけば効率化だけでなく、品質の面でも安定したサイト作りに役立つでしょう。

ワイヤーフレームの作り方

ワイヤーフレームは基本的なステップを踏めば初心者でも取り組めます。

ここからはワイヤーフレームの作り方を5つの手順に沿って解説します。

コンテンツの内容を考える

まず最初に、ページやサイトにどんなコンテンツが必要かを書き出します。

書き出す方法はメモ帳のようなアプリでも問題ありませんし、紙を使ってもOKです。

「メニューが欲しい」「商品一覧を載せたい」「問い合わせフォームをつけたい」など様々な希望をピックアップします。

ここではデザインや構造のことは気にせず、どういったものが必要かをリストアップすることに集中してください。

あとで足りないと気づいて焦ることを防ぐため、同じ業種の競合サイトを見てどんなコンテンツが載っているか調べてみることがおすすめです。

企業サイトであれば会社概要や沿革、通販サイトであればカートや会員システムなどが必要となるでしょう。

クライアントがいる場合は希望をしっかりヒアリングしてください。

また、ペルソナを設定した場合は「来訪したユーザーが何を求めているか」をシミュレーションすることも重要です。

並び順の検討

次に、リストアップしたコンテンツ要素の優先順位や表示順を決めていきます。

どの情報をページのどの位置に配置するか、大まかな順番を考えていきましょう。

一般的にWebサイトを開いたときに最初に見えるエリアをファーストビューと呼びます。

ユーザーの目にまず入る部分なので、特に重要な要素はファーストビューに配置すると効果的です。

また、問い合わせなどのフォームはフッター近くへの配置が一般的です。

その他のコンテンツの並び順を決める場合は、ユーザー目線の流れを意識することが大切です。

たとえばLP（ランディングページ）であれば、「注意→興味→欲求→記憶→行動」などのユーザー心理をあらわした法則に沿って作るのが鉄則です。

「最も伝えたいことは何か」「ユーザーが知りたい順番はどうか」を考えながら配置順を仮決定しましょう。

ここで決めた優先順位が、このあとのレイアウト決めへと繋がっていきます。

レイアウトの決定

コンテンツの内容と並び順が決まったら、次は各要素をどの位置に配置していくかのレイアウトを決めていきます。

一番簡単な方法は、まず先ほど決めた並び順の通りに縦にコンテンツを詰んでいきます。

そして、そのコンテンツの中にある項目をどのような形で配置するかを検討します。

ひとつのコンテンツの中には「見出し」「画像」「テキスト」「ボタン」など様々な要素が含まれます。

まずはそれぞれの要素を個別のブロックだとイメージして考えてみてください。

たとえば見出しのブロックを一番上にして、画像とテキストのブロックを横並びで中段に。

ボタンを下段に配置するというのが要素のレイアウトの考え方です。

【例】

この時にどの要素をどのくらいのサイズで配置するかもざっくり決めておきましょう。

さらに、同じレイアウトでもデバイスによって見やすさは異なります。

PCでは横並びにしていた要素をスマートフォンでは縦並びにするというような切り替えもレイアウト決めでは非常に重要です。

レイアウトが悪いと見辛いページになってしまうため、必ず「目立たせたい要素が目立っているか」「ユーザー目線で見やすいか」という点を心がけましょう。

ラフ案を作成

レイアウトが決まれば、実際にワイヤーフレームのラフ案を作成していきます。

ワイヤーフレームのラフ案は、専用のツールを使う人もいれば手書きで行う人もいます。

特に指定がなければ自分のやりやすい方法で問題がありません。

ただしラフ案は書いたり消したりすることが多いため、紙に書く場合はボールペンではなく鉛筆やシャープペンシルなどを使うことがおすすめです。

また、ラフ案は基本的に文字と四角などのシンプルな記号のみで構成します。

思い描いたレイアウトの通りに四角を書き、その中に「ボタン」「写真」など書く程度のもので問題ありません。

実際にラフ案を書いてから、思っていたレイアウトがイメージと違ったり上手く当てはまらないと感じることも多いです。

場合によってはレイアウトも調整しながらラフ案を仕上げていきましょう。

仕上げ（ツールなどで清書）

ラフ案が固まったら、最後にワイヤーフレームの仕上げを行います。

手書きでラフ案を作成した場合も、仕上げは専用ツールなどを使ってワイヤーフレームを作ることをおすすめします。

ワイヤーフレームはクライアントやチーム内で共有することが多く、見やすく綺麗なデジタルデータである方が良いからです。

専用ツールであればワイヤーフレームを作るための機能が豊富なため、ツールで清書してもそれほど時間はかかりません。

伝えたいことがあればメモやコメント機能などを活用するといいでしょう。

仕上げが完了すればワイヤーフレームの完成です！

ワイヤーフレーム作成のポイント

より良いワイヤーフレームを作るためには、いくつかのポイントやコツがあります。

ここからはワイヤーフレームを作る際に意識しておきたいポイントを紹介します。

レスポンシブ対応を意識

ワイヤーフレーム作りに忘れてはいけない最初のポイントはレスポンシブ対応です。

多くのユーザーはPCだけでなくスマートフォンやタブレットを使用してWebサイトにアクセスします。

そのため、ワイヤーフレームを作成する時はレスポンシブデザインを前提にします。

たとえばPCでは横並びに配置したメニュー項目も、スマホでは縦並びのハンバーガーメニューにする、といった変更が必要です。

ワイヤーフレーム作成時から「このブロックはスマートフォンではこう変化させよう」と意識しておくと、後のデザインやコーディングが楽になるでしょう。

特に近年ではスマートフォンでのアクセス比率がPCよりも高い傾向にあるため、モバイル表示優先でレイアウトを考えてみることもおすすめです。

わかりやすくシンプルに

ワイヤーフレームは凝ったデザインをする必要はありません。

むしろ誰が見ても一目で構成がわかるシンプルさが求められます。

細かい装飾や色付けはせず、基本的には最低限の図形とテキストで作成するようにしましょう。

テキストや画像部分も内容が決まっていなければダミーで問題ありません。

ワイヤーフレームの作成ツールの中には自動的にダミーテキストや画像を表示してくれるものがあり便利です。

実現可能なレイアウトかを確認

ワイヤーフレームを考える時は、そのレイアウトが実際に実装可能かどうかも意識しましょう。

せっかく良いデザインのワイヤーフレームを仕上げても、コーディング時に実装が難しいものであればボツになってしまいます。

たとえばレスポンシブデザインであれば、PCとスマートフォンの切り替えがうまくいかないという問題はよく起こりがちです。

特に複雑なレイアウトや動的コンテンツを導入する場合は、実装した際の動作を思い浮かべながらワイヤーフレームの内容を検討することが大切です。

競合サイトの分析やテンプレートを活用

ゼロから完璧なワイヤーフレームを作ろうとすると、かなりの知識や労力が必要となってしまいます。

効率化やクオリティ向上のためには、競合他社のサイトを参考にするのも有効なポイントです。

まず同業種で人気のWebサイトをいくつかピックアップし、レイアウトや構成を分析してみましょう。

他にも自社サービスを利用しそうなユーザー層が好む系統の大手サイトをチェックすることもおすすめです。

良いワイヤーフレームの例を知ることで、自分のサイトの構成案にも活かせます。

完全にそのまま真似するのは良くありませんが、定番や流行のレイアウトを知るのには非常にいい手段です。

さらに、ワイヤーフレームの作成ツールにはあらかじめテンプレートが用意されている場合があります。

このようなテンプレートを活用することで、さらに効率的に美しいワイヤーフレームを作成することができるでしょう。

おすすめのワイヤーフレーム作成ツール

ツール名	特徴	向いている人
Figma	ブラウザベースで利用 リアルタイム共同編集 プロトタイピング機能充実 豊富なプラグイン	チームで作業する人 UI/UXデザイナー リモートワーク中心の環境
Adobe XD	音声プロトタイピング対応 自動アニメーション機能 Creative Cloudとの連携	Adobe製品を既に使っている人 シンプルなUIを好む人
Cacoo	日本製ツール 直感的な操作 リアルタイム共同編集	日本語環境を重視する人 チームで作業する人 シンプルな機能で十分な人
Sketch	Mac専用 直感的な操作 デザインシステム構築に強い 豊富なプラグイン	Macユーザー デザインシステムを重視する人 ローカル環境での作業を好む人
Canva	テンプレート豊富 ドラッグ&ドロップで簡単操作	デザイン初心者 ビジュアルプレゼンを重視する人 本格的なワイヤーフレームは不要な人

ワイヤーフレームは紙とペンでも作ることができますが、専用のデザインツールを使うとさらに便利です。

ここではおすすめのワイヤーフレーム作成ツールをいくつか紹介します。

Figma

Figmaは世界的に人気のデザインツールで、ワイヤーフレーム作成にも最適です。

ソフトのインストールなどは必要なく、ブラウザ上で簡単に使用することができるのが人気の理由のひとつです。

ワイヤーフレーム作成に必要な機能はほとんど揃っているため、要素を選んで配置するだけで直感的にレイアウトを作れます。

さらにFigmaにはワイヤーフレームの作成に便利な無料のツールやUIのプラグインなども豊富です。

何かワイヤーフレームの作成ツールを試してみたいという場合にはFigmaからはじめてみるといいでしょう。

Adobe XD

Adobe XDはAdobe社が提供するUI/UXデザインツールで、ワイヤーフレームからプロトタイプまで一貫して作成できるソフトです。

普段からPhotoshopやIllustratorなどAdobeのソフトを使っている人には、このAdobeXDがおすすめです。

Photoshopで加工した画像を配置したり、Illustratorのアイコン素材を読み込んだりと、他のAdobeソフトとの連携もスムーズです。

また、XDではシンプルな図形やテキストを使ってワイヤーフレームをさくさく描けるほか、プロトタイプとして動作を実装することもできます。

他にもリピートグリッド機能やコンポーネント機能など、効率的にワイヤーフレームを作成できる機能が豊富です。

Cacoo

Cacooは日本のヌーラボ社が提供するオンラインコラボレーションツールです。

もともとはフローチャートなどあらゆる図を描けるサービスですが、ワイヤーフレーム用の図形テンプレートも豊富に用意されています。

操作も直感的で、オブジェクトを選んでサイズを変えたり文字を入力したりするだけのため、デザイン初心者でも扱いやすいはずです。

また、複数メンバーで同時編集できるリアルタイムコラボレーション機能や、変更履歴の管理機能なども備わっており、チームでのワイヤーフレーム作成にも適しています。

「高度なデザイン機能はいらないから手早くワイヤーフレームを描きたい」という場合にピッタリのツールといえるでしょう。

Sketch

SketchはMac専用のデザインアプリケーションです。

プロのデザイナーにも愛用者が多く、直感的な操作で使いやすいことから初心者にもおすすめのツールです。

必要な図形やテキストを配置していくだけで、美しいワイヤーフレームを作ることができます。

Sketchには豊富なプラグインとコミュニティがあり、ワイヤーフレーム用のテンプレートやアイコン集なども数多く提供されています。

残念ながらWindowsでは使用できないのですが、MacユーザーでワイヤーフレームからUIデザインまで一つのツールで済ませたい方にはSketchがおすすめです。

Canva

Canvaは近年日本でも大きなシェアを伸ばしているデザインツールです。

バナーやSNS画像、スライドや動画など様々なデザインを豊富なテンプレートから簡単に作成することができます。

さらにCanvaではワイヤーフレームを作成することも可能です。

専門知識がなくてもドラッグ＆ドロップでデザインができるので、ワイヤーフレームも直感的に作れてしまいます。

それを選んでテキストを書き換えたりブロックを増減したりすれば、自分のサイト用のワイヤーフレームが完成します。

ただしCanvaはあくまでデザインツールなので、他の専門ツールに比べるとワイヤーフレーム特有の細かな機能は弱いです。

それでも「とりあえず簡単なページ構成を作ってみたい」といった用途には十分でしょう。

無料プランでも多くのテンプレートが利用できるため、気軽に試してみてください。

おまけ：ワイヤーフレーム作成に使える有名ツール

ワイヤーフレームは専門のデザインツール以外にも、身近なソフトで作成することも可能です。

「専門ツールを入れるのはハードルが高い…」と思う場合は、以下のようなソフトで試してみることをおすすめします。

Excel／Googleスプレッドシート

デザインソフトを触ったことがない人でも、ExcelやGoogleスプレッドシートなどなら触ったことがあるという人は多いはず。

意外かもしれませんが、これらの表計算ソフトでもワイヤーフレームを作ることができます。

四角だけで構成できる簡易的なサイトであれば、セルの結合や罫線などを使ってワイヤーフレームのように仕上げることが可能です。

また、図形の挿入を使えばさらに多様なデザインを表現することもできます。

PowerPoint／Googleスライド

PowerPointやGoogleスライドなどのプレゼンテーションソフトもワイヤーフレーム作成に使うことができます。

これらのソフトは図形の描画機能が優れており、ワイヤーフレームの作成とも相性がいいです。

縦長のサイトの場合はページ設定を変えれば対応することができます。

共有も手軽でそのままプレゼンテーションに使うこともできるため、デザインは苦手でもこれらのソフトは使えるという人にはおすすめの選択肢といえるでしょう。

さいごに

ワイヤーフレームは手間に感じるかもしれませんが、ホームページ制作において非常に重要な役割を担っています。

デザイナーを目指す人はもちろん、そうでなくとも簡単なワイヤーフレームを描けるようになっておけば自分のイメージを伝える時に役立つかもしれません。

初心者のワイヤーフレームの学び方としては、人気があるWebサイトの構成を模写して再現するという方法がおすすめです。

いくつか真似していくうちに、使い方はもちろん、よく使われる構成パターンなども覚えることができます。

まずは自分にあったワイヤーフレーム作成ツールをみつけて、ぜひチャレンジしてみてください。