Webサイトやアプリの画面を作ろうとして、いきなり色や写真を選び始め、あとから「この情報を置く場所がない」と作り直した経験はありませんか。
そんな手戻りを防ぐために、デザインの前に描くのがワイヤーフレームです。
この記事では、ワイヤーフレームとは何か、デザインカンプやプロトタイプとの違い、書く内容と描き方の約束、作り方の6つの手順、Figmaで描くコツを、PC・スマホ・LPの見本を使って初心者向けに解説します。
ワイヤーフレームの基本
まずは、ワイヤーフレームとは何か、似た言葉とどう違うのか、なぜ作るのかを押さえましょう。
ワイヤーフレームとは
ワイヤーフレームとは、Webページやアプリの画面の「どこに・何を・どの順番で置くか」だけを、線と箱で描いた画面の設計図です。
英語では「wireframe」と書き、ワイヤー(針金)で作った骨組みのように、色や飾りを省いて骨格だけを見せることからこう呼ばれます。
現場では略して「ワイヤー」と呼ぶこともあります。
家づくりにたとえると、壁紙や家具を選ぶ前に描く「間取り図」にあたります。
デザインツールのFigmaの解説ページ「ワイヤーフレームとは?」でも、ワイヤーフレームはチームが要件をそろえて話し合うための基本的な設計図とされ、ラフな段階(低忠実度)のワイヤーフレームはグレースケール(白・灰色・黒だけの色)とシンプルな箱で描くと紹介されています。
デザインカンプ・プロトタイプとの違い
ワイヤーフレームは、デザインカンプやプロトタイプと混同されやすいですが、決めることと作る順番が違います。
デザインカンプとは、色・書体・写真まで入れて、完成したときの見た目を再現したデザインの見本のことです。
プロトタイプとは、ボタンを押すと次の画面へ移るなど、実際の操作を試せるように作った試作品のことです。
| 種類 | 決めること | 見た目 | 作るタイミング |
|---|---|---|---|
| ワイヤーフレーム | 何を・どこに・どの順番で置くか(構造) | 灰色の箱と線、文字だけ | 最初(載せる情報を決めたあと) |
| デザインカンプ | 色・書体・写真・装飾など完成時の見た目 | 本番とほぼ同じ | ワイヤーフレームが固まったあと |
| プロトタイプ | 押したとき・画面を移るときの動き | 灰色の箱のままでも、本番に近くてもよい | 動きを確かめたい段階(どちらのあとでも作れる) |
つまり、ワイヤーフレームで「構造」を、デザインカンプで「見た目」を、プロトタイプで「動き」を決める、と役割を分けて考えると整理しやすくなります。
なぜワイヤーフレームを作るのか
ワイヤーフレームを作る一番の理由は、作り直しの手間を減らすためです。
色や写真を入れたあとで情報の順番を変えると、デザインをほぼ最初から組み直すことになりますが、灰色の箱なら数分で並べ替えられます。
また、見た目の要素がないので、確認する人も「この色が好きかどうか」ではなく「必要な情報がそろっているか」「順番は分かりやすいか」に集中して意見を出せます。
さらに、完成したワイヤーフレームは、デザインやコーディングを担当する人への指示書にもなります。
小さな手間で大きな手戻りを防げるので、1ページだけの小さなサイトでも描いておく価値があります。
ワイヤーフレームに書く内容
ここでは、ワイヤーフレームに何を描き、それぞれの要素をどう表すかを紹介します。
ページの基本構造を箱で並べる
ワイヤーフレームは、まずページを大きな区画に分け、上から順に箱で並べるところから始めます。
多くのWebページは、ヘッダー(ロゴやメニューを置く一番上の区画)、メインビジュアル(大きな画像とキャッチコピー)、コンテンツ(本文や商品情報など中心になる区画)、サイドバー(関連リンクなどを置く横の細長い区画)、フッター(会社情報などを置く一番下の区画)という、ほぼ共通の構造でできているためです。
すべてを毎回使う必要はなく、たとえば申し込みに集中してほしいページではサイドバーを置かないなど、ページの目的に合わせて選びます(各部の役割と選び方はWebページの基本構造とは?で詳しく解説しています)。
大きな区画が決まったら、その中に見出し・文章・画像・ボタンを置いていきます。
見出し・画像・ボタンの描き方の約束
ワイヤーフレームでは、要素ごとに描き方の約束を決めておくと、誰が見ても同じ意味に読み取れます。
同じ灰色の四角が、ある場所では画像を、別の場所ではボタンを表していると、見る人が迷ってしまうからです。
よく使われる描き方は次のとおりです。
決まった書き方の規格があるわけではないので、チームや自分の中で一度決めたら、すべてのページで同じ描き方を守ることが大切です。
箱だけでは伝わらないこと(「ボタンを押すと申し込みフォームへ移る」「画像は毎月入れ替える」など)は、箱の横に注釈(説明のメモ)として書き添えます。
色や書体はまだ決めない
ワイヤーフレームの段階では、色や書体、写真は決めずに、白・灰色・黒だけで描きます。
色が付いていると、話し合いが「青より緑がいい」といった見た目の好みにそれてしまい、構造の問題が見落とされやすくなるためです。
目立たせたい要素を示したいときは、色ではなく、灰色の濃さや箱の大きさで差をつけます。
一方、見出しやボタンの文言は、できるだけ本番に近いものを書き入れましょう。
「見出し」「テキスト」とだけ書いておくと、実際の文章を入れたときに文字数が合わず、箱に収まらないことがよくあるからです。
ワイヤーフレームの作り方の手順
ここからは、ワイヤーフレームを作る流れを6つの手順で紹介します。
全体の流れは次のとおりです。
- ページの目的とターゲットを決める
- 載せる情報を書き出す
- 情報に優先順位をつける
- 手書きでラフを描く
- ツールで清書する
- 共有して確認し、直す
手順1:ページの目的とターゲットを決める
最初に、そのページで「誰に」「何をしてもらいたいか」を1行で書き出します。
目的によって、目立たせるものも、置くべき区画も変わるためです。
たとえば「初めて訪れた人に、無料相談を申し込んでもらう」と決まれば、申し込みボタンを目立つ位置に何度か置く、という方針が自然に決まります。
目的からレイアウトを逆算する考え方は目的から逆算するレイアウトの決め方で解説しています。
手順2:載せる情報を書き出す
次に、ページに載せたい情報を、思いつくかぎり付箋やメモに書き出します。
この段階では順番や重要度は気にせず、「サービスの特徴」「料金」「導入事例」「よくある質問」「問い合わせ先」のように、抜け漏れなく並べることを優先します。
サイト全体を作る場合は、先に必要なページの一覧(サイトマップ)を作り、ページごとにこの作業を行います。
手順3:情報に優先順位をつける
書き出した情報に、手順1の目的にとって大事な順に番号を振ります。
Webページは上から順に読まれることが多く、上にあるものほど見てもらいやすいので、この番号がそのままページの並び順の土台になります。
目的に関係の薄い情報は、思い切って別のページに回すか、削ることも検討しましょう。
読む人の視線がどう動くかを踏まえた並べ方は視線誘導とは?で解説しています。
手順4:手書きでラフを描く
並び順が決まったら、紙とペンで、ざっくりとしたラフ(下書き)を何パターンか描きます。
手書きなら1パターンを数分で描けるので、「特徴を横に3つ並べるか、縦に積むか」といった案を気軽に比べられるためです。
このとき、PCの横長の画面だけでなく、スマホの縦長の画面でも描いておくと、あとで並び順に困りません(スマホの画面から先に考える進め方はモバイルファーストとは?で解説しています)。
手順5:ツールで清書する
一番よいラフが決まったら、Figmaなどのツールで清書します。
ツールで描くと、箱の大きさや間隔を正確にそろえられ、修正や共有もしやすくなります。
清書の段階では、画面を縦に区切った列(カラム)を目安に箱の端をそろえると、整った印象になります(列の考え方は2カラムとは?、列と余白の設定はグリッドと余白の関係とは?で解説しています)。
手順6:共有して確認し、直す
清書したワイヤーフレームは、依頼主やチームの人に見てもらい、意見をもらって直します。
自分では分かりやすいと思っていても、初めて見る人には情報の場所が分からないことがあるからです。
確認してもらうときは、「必要な情報がそろっているか」「目的の行動(申し込みなど)までの流れは自然か」の2点に絞って聞くと、見た目の好みの話にそれにくくなります。
ここで構造を固めてから、デザインカンプの作成へ進みましょう。
ワイヤーフレームを作るツールとFigmaで描くコツ
ワイヤーフレームは、紙でもデザインツールでも作れます。
ここでは代表的な道具と、Figmaで描くときの基本操作とコツを紹介します。
ツールの選び方
ツールは、作る段階と、誰と共有するかで選びます。
| ツール | 向いている場面 | 気をつけること |
|---|---|---|
| 紙とペン(手書き) | ラフで何パターンも比べたいとき | サイズを正確にそろえにくく、離れた人との共有に向かない |
| Figma | 清書・共有・そのままデザインカンプへ進めたいとき | 最初は操作を覚える時間がかかる |
| PowerPoint・Keynote | 使い慣れたソフトで手早く作りたいとき、資料として渡したいとき | Web用の画面サイズや、列にそろえる機能は自分で工夫が必要 |
迷ったら、ラフは紙、清書はFigmaという組み合わせがおすすめです。
PowerPointでは、Microsoftのサポートページ「図形を追加する」のとおり、「挿入」タブの「図形」から四角形などを描き、図形を右クリックして「テキストの追加」を選ぶと、箱の中に文字を入れられます。
Figmaで画面の枠と箱を描く
Figmaでワイヤーフレームを描くときは、まず「フレーム」で画面の枠を作り、その中に四角形と文字を置いていきます。
フレームとは、Figmaのキャンバス(作業スペース)の上に作る、1つの画面にあたる枠のことです。
- キーボードの
FまたはAを押すか、ツールバーで「フレームツール」を選びます。 - 右サイドバーのプリセット(あらかじめ用意されたサイズの一覧)から、「デスクトップ」や「スマホ」の中のサイズを選びます。
キャンバス上をドラッグして、好きな大きさで作ることもできます。 - キーボードの
Rを押して長方形ツールを選び、フレームの中をドラッグして、ヘッダーや画像の箱を描きます。
塗りは灰色にしておきます。 - 見出しやボタンの文言を文字で入れ、手順4のラフと同じ並び順になるように配置します。
フレームの作り方とプリセットの種類は、Figmaヘルプ「Figmaデザインのフレーム」、長方形ツールはFigmaヘルプ「シェイプツール」で確認できます。
PC用とスマホ用のフレームを横に並べて描いておくと、同じ内容が両方の画面でどう並ぶかを見比べながら作業できます。
オートレイアウトで並べ替えを楽にする
Figmaでワイヤーフレームを描くなら、「オートレイアウト」を使うと、並べ替えや追加がぐっと楽になります。
オートレイアウトとは、フレームの中の要素を、決めた向きと間隔で自動的に並べてくれる機能です。
並べたい要素を選んでShift+Aを押すか、右サイドバーの「オートレイアウトを追加」を押すと設定でき、並べる向きは「垂直」(縦に積む)と「水平」(横に並べる)などから選べます(Figmaヘルプ「オートレイアウトのガイド」)。
同じヘルプでは、枠と中身のあいだの余白を「パディング」、要素同士の距離を「間隔」と呼び、数値で指定できると説明されています。
たとえば、ページの各セクションを垂直のオートレイアウトで縦に積んでおけば、セクションの順番を入れ替えたり、途中に1つ足したりしても、下の要素が自動でずれて、間隔もそろったままになります。
箱の端をそろえる目安の線(レイアウトガイド)の設定方法は、グリッドと余白の関係とは?で解説しています。
共有とテンプレートの活用
Figmaで描いたワイヤーフレームは、ファイルを開いて右サイドバーの「共有」を押すと、ほかの人に見てもらえます。
Figmaヘルプ「ファイルとプロトタイプを共有する」によると、権限を「閲覧のみ」にした相手でも、ファイルにコメントを書き込めるので、手順6の確認をFigmaの中で進められます。
ゼロから描くのが大変なときは、テンプレートを使う方法もあります。
Figmaには、ユーザーが作ったファイルを公開・共有する「Figmaコミュニティ」という場があり、ワイヤーフレーム用の部品をまとめたファイルも公開されています。
コミュニティのファイルは、自分の下書きに複製して使います(Figmaヘルプ「Duplicate Community files」(英語))。
ただし、テンプレートの形に合わせて情報を当てはめるのではなく、手順1〜3で決めた目的と優先順位に合わせて、部品を並べ替えて使いましょう。
ワイヤーフレームの例
ここでは、架空の「Web制作の相談サービス」を例に、PCのトップページ、スマホのページ、LPのワイヤーフレームを見てみましょう。
どれも、この記事で紹介した描き方の約束(×印の箱は画像、枠で囲んだ文字はボタン、灰色の線は本文)で描いています。
PCのトップページの例
トップページは、サイトの入り口として「何のサイトか」を伝え、各ページへ案内する役割を持ちます。
見本Aでは、目的である「無料相談」のボタンを、ヘッダーとメインビジュアルの2か所に置いています。
特徴は3つの箱を横に並べ、事例とお知らせは重要度に合わせて幅を変えています。
スマホのページの例
スマホでは画面の幅が狭いため、PCで横に並べていた要素を縦1列に積み直します。
見本Bでは、見本Aと載せている情報は同じですが、特徴の箱を縦に積み、画像を小さくして文字の横に置いています。
メニューは三本線のボタン(ハンバーガーメニュー)にまとめ、限られた画面の上部をキャッチコピーと申し込みボタンに使っています。
LPの例
LP(ランディングページ)とは、広告などから訪れた人に、申し込みなど1つの行動をしてもらうための縦長のページです。
見本Cでは、ほかのページへ移るメニューやサイドバーを置かず、上から読み進めるうちに申し込みたくなる順番で情報を並べています。
申し込みボタンは、ページの上と最後の両方に置き、読み終えた人がすぐに行動できるようにしています。
実践のポイント
ワイヤーフレームを作るときに陥りやすい失敗と、よくある疑問をまとめます。
注意点・よくある間違い
- ワイヤーフレームの段階で色や写真を入れ、作り込みすぎてしまうことがあります。
見た目の話にそれやすく、直すのにも時間がかかるので、白・灰色・黒だけで描きましょう。 - 「見出し」「テキスト」とだけ書いて、実際の文言を入れずに進めてしまうことがあります。
本番の文章が箱に収まらないことがあるので、文言はできるだけ本番に近いものを書き入れましょう。 - PCの画面だけを描き、スマホでの並び順を考えないまま進めてしまうことがあります。
同じ内容をスマホの縦長の画面でも描き、並び順を確かめておきましょう。 - 同じ灰色の箱が、場所によって画像だったりボタンだったりと、描き方がばらばらになることがあります。
描き方の約束を決め、箱だけで伝わらないことは注釈で書き添えましょう。 - 完璧に仕上げてから見せようとして、共有が遅れることがあります。
構造の問題は早く見つけるほど直しやすいので、ラフの段階でも一度見てもらいましょう。
よくある質問
- Q. ワイヤーフレームは英語で何と言う?
A. 英語でも「wireframe」です。
ワイヤーフレームを作る作業は「wireframing」と呼ばれ、英語の資料を探すときはこの言葉で検索すると見つけやすくなります。 - Q. Figmaは無料のプランでもワイヤーフレームを作れる?
A. 作れます。
この記事で紹介したフレームとオートレイアウトは、Figmaのヘルプで「すべてのプラン」で利用できると案内されています。
プランごとの細かな違いは変わることがあるので、使う前にFigmaの公式サイトで確認しましょう。 - Q. ワイヤーフレームとデザインカンプは、両方作る必要がある?
A. 小さなサイトでも、両方作るのがおすすめです。
ワイヤーフレームで構造を固めてからデザインカンプに進むと、見た目を作り込んだあとの大きな作り直しを防げます。
自分1人で作る小さなページなら、手書きのワイヤーフレームから直接デザインに進んでも構いません。 - Q. どこまで細かく描けばいい?
A. 最初は、区画の並び順と、見出し・画像・ボタンの位置が分かれば十分です。
確認を重ねて構造が固まってきたら、文言や注釈を足して、デザインやコーディングの担当者が迷わない程度まで書き込みます。 - Q. ワイヤーフレームの参考を探すには?
A. 好きなWebサイトを1つ開き、ページを区画に分けて、灰色の箱で描き写してみるのが近道です。
実際のサイトを分解すると、情報の並べ方の型が見えてきます。
配置の考え方の全体像はWebレイアウトとは?で解説しています。
まとめ
ワイヤーフレームとは、色や飾りを入れる前に、どこに何をどの順番で置くかを線と箱で描いた画面の設計図です。
ワイヤーフレームで構造を、デザインカンプで見た目を、プロトタイプで動きを決める、と役割を分けると、大きな作り直しを防げます。
作るときは、目的とターゲットを決め、情報を書き出して優先順位をつけてから、手書きのラフで案を比べ、Figmaなどで清書して共有する、という順番で進めましょう。
レイアウトの基本から順に学びたいときは、デザイン初心者のためのレイアウト学習ロードマップも参考にしてください。
まずは、作りたいページの目的を1行で書き、載せたい情報を5つ書き出してから、紙に灰色の箱でラフを1枚描いてみましょう。
