Webサイトの画面構成をどう共有する？ワイヤーフレームの作り方

サイトの構成、口で説明してもクライアントとイメージがずれてしまうなぁ。デザインの前に、画面の形を一緒に決められないかなぁ。

出来上がってから直すと、手間がかかりますよね。

ワイヤーフレームとは？

まずは、ワイヤーフレームが何かを確認しましょう。

「ワイヤーフレーム」は、画面のどこに見出し・画像・ボタンを置くかを、線と箱だけで描いた設計図です。色や写真を入れる前に配置を決めるので、後から大きく直すことが減ります。

何から描く？

しくみが分かったら、描く順番を確認しましょう。

最初にページの一覧を作り、各ページに載せる要素を書き出します。それから、要素を画面のどこに置くかを箱で描きます。

どう意見をもらう？

描く順番が分かったら、意見のもらい方を考えましょう。

画像で送ると、どこの話か伝わりにくくなります。同じ図をURLで開いてもらい、その場で直したり書き込んだりしてもらうと、ずれが少なくなります。

どのツールが候補？

意見のもらい方が分かったので、ツールの候補を見ていきましょう。

• Figma
• Adobe XD
• draw.io

「テンプレートがあるか」と「相手が参加しやすいか」の2つの基準で絞りましょう。内容や料金は変わるため、各公式サイトで最新の内容を確認してください。

テンプレートはある？

1つめの基準は、テンプレートがあるかどうかです。

ワイヤーフレーム用の型があれば、一から描くより早く始められます。

相手が参加しやすい？

2つめの基準は、相手が参加しやすいかどうかです。

クライアントに新しくアカウントを作ってもらうのは手間です。アカウントなしで見たり直したりできるかを確認しましょう。

共有しながら作るなら？

前の章の2つの基準、「テンプレートがあるか」と「相手が参加しやすいか」に照らすと、候補を一つに絞れます。

PR

今回の想定は、小さな制作チームで、クライアントと画面構成を一緒に決めたい人です。この用途には、私はCacooをおすすめします。

選ぶ理由は、2つの基準を両方満たしているからです。Cacooにはワイヤーフレームのテンプレートがあります。図はURLで共有でき、招待したメンバーはアカウントがなくても閲覧や編集に参加できます。パスワードや公開期限も設定できます。

一方で、使えるのはパソコンのブラウザだけです。

いくらかかる？

費用を、実際の数字で確かめましょう。

2026年10月14日確認の公式料金（税抜）は、スペースプランが月額18,000円、年払いで180,000円です。ユーザー数は無制限で、30日間の無料トライアルがあります。

✓ 1年使う例

• 条件：チームで1年使い、年払いを選ぶ
• 年払い：180,000円×1年
• 月払いとの差：18,000円×12か月＝216,000円より36,000円少ない
• 合計：180,000円（税抜）

※ 上の公式料金から計算した例です。機能に制限のあるフリープランもあります。

始める前の注意は？

金額が分かったら、始める前の注意も確認しましょう。

Cacooはパソコンのブラウザで使います。途中で解約しても返金はありません。

まずは無料トライアルで、クライアントと一度やりとりしてみましょう。

作る手順は？

注意点を押さえたら、作ってみましょう。

1. 30日間の無料トライアルを始める
2. ワイヤーフレームのテンプレートを選ぶ
3. ページの一覧と、各ページの要素を書き出す
4. 要素を箱で配置する
5. URLでクライアントを招待し、意見をもらう

✓ 打ち合わせで使う例

• 条件：クライアントとトップページの構成がまとまらない
• 進め方：打ち合わせ中に同じ図を開いてもらい、箱の位置をその場で動かして決める
• 理由：話しながら一緒に動かすと、言葉だけより早くイメージがそろうため

Cacooの公式サイト

まず何をする？

まずは、作るサイトのページの一覧を書き出してみましょう。

一覧があれば、ワイヤーフレームを描き始められます。

あわせて読みたい：Web会議で話がかみ合わない？画面に書きながら話し合う方法