Webディレクターの私が考える「伝わるワイヤーフレーム」の作り方

投稿日: 2026-01-03

こんにちは！Webディレクターの渡邉です。今回は、プロジェクトの土台作りに欠かせないワイヤーフレームについて、私が日頃から大切だと感じていることから、具体的な作成ステップ、そして関係者とのコミュニケーションで心がけていることまで、実務経験を交えながらご紹介できればと思います。

なぜワイヤーフレームを作るの？私が考えるその理由

私は、ワイヤーフレームをWebページの「設計図」のようなものだと捉えています。デザインの細かい見た目の話はいったん置いておいて、「どこに」「何を」配置するのか、情報や要素の骨組みを整理することに集中するためのものです。

私がワイヤーフレームを作る理由は、主に以下の3つです。

関係者みんなのイメージを揃えたい：お客様、デザイナー、エンジニアなど、関わる人みんなが「こんな感じのページになるんだな」と具体的にイメージしやすくなると思っています。
手戻りをなるべく減らしたい：デザインや開発に進む前に、ページの骨組みの段階で「ここはもっとこうしよう」と気づいて修正できます。デザインが完成した後に大きな変更をすると、みんなが大変になってしまいます。
ページの使いやすさを先に考えたい：ユーザー役になって「情報を見つけやすいかな？」「迷わずに押せるかな？」といったことを、早い段階で考えられます。

良いワイヤーフレームは、プロジェクトをうまく進めるための「道しるべ」のようになり、その後のデザインや開発の作業がとてもスムーズになる、と私は感じています。

【ステップ1】ツールを開く前の「前準備」が大切

私は、いきなりツールを開いてワイヤーフレームを作り始めるのではなく、まず目的や情報を整理する「前準備」から始めるようにしています。

目的とターゲットを考えてみる

まず、そのWebページで「誰に」「何を伝えて」「どうしてほしいか」を自分の中でハッキリさせます。

このページのゴールは？：商品の購入、問い合わせなど、ユーザーにしてほしい最終的な行動を考えます。
見てくれるのはどんな人？：年齢や性別、普段どれくらいPCやスマホを使うかなどを想像し、その人はどんな情報を求めているかな？と考えます。

ここがフワッとしていると、誰の心にも響かない、使いづらいページになってしまうかもしれません。

ページに載せる情報を整理する

次に、ページに載せたい情報をすべて書き出して、順番を整理していきます。

載せたい情報をすべて書き出す：メインの写真、キャッチコピー、サービス紹介、お客様の声、よくある質問など、思いつく限りの要素をリストアップします。
優先順位をつける：書き出した要素の中で、「ユーザーが一番知りたいこと」「こちらが一番伝えたいこと」はどれかを考えて、順番をつけます。

この情報整理が、ワイヤーフレームの骨格になると私は考えています。

【ステップ2】私が実践しているワイヤーフレームの作り方

準備が整ったら、いよいよワイヤーフレームを作っていきます。私は「手書き→デジタルツール」の2段階で進めることが多いです。

1. 手書きでざっくり描いてみる

まずは紙とペンで、本当に簡単なラフスケッチを描いてみます。

こうする一番の理由は、考えすぎずに、気軽に、素早くアイデアを形にできるからです。頭の中のイメージをサッと描き出して、「こんな配置はどうかな？」「あ、こっちのパターンもいいかも」と、自由にレイアウトを検討できます。

2. デジタルツールで形にする

ラフスケッチで大体の方向性が決まったら、デジタルツールで具体的にしていきます。

私が使っているツール

ワイヤーフレーム作成ツールは色々ありますが、専用のツールにこだわらず、使い慣れたもので作るのも良いと思っています。

PowerPoint / Keynote：私は普段、PowerPointを使って作ることが多いです。スライドでページごとに管理しやすく、図形機能を使って手軽に要素を配置できる点が便利だと感じています。プロジェクトによっては、お客様との共有のしやすさもメリットだと感じます。
Figma：ブラウザ上で使えて、共同作業もしやすい人気のツールです。部品（コンポーネント）を使い回せるので、効率的に作ることもできます。
Adobe XD：Figmaと似た感覚で使えるツールで、こちらも人気があります。

要素を配置していく

ワイヤーフレームは、主に以下のような箱や線を使って、要素を配置していきます。

ヘッダー/フッター：ロゴやメニューなど、どのページにも共通して表示される部分です。
メインコンテンツ：そのページの主役となる情報です。一番伝えたいことから順番に並べるのが基本かなと思います。
画像/動画：とりあえず「×印をつけた四角（プレースホルダー）」で場所だけ確保しておきます。
テキスト：「見出しはここ」「本文はこれくらい」と、大体のボリュームがわかるようにします。見出しや短いキャッチコピーは実際の言葉を入れておくと、グッとイメージが湧きやすくなります。
ボタン：ユーザーに何か行動してほしい場所に置く、大切な要素です。

スマホでの見え方を意識する

最近は、PCよりスマートフォンでWebサイトを見る人の方が多いので、「モバイルファースト（スマホでの見え方を優先する考え方）」を意識するようにしています。

ワイヤーフレームの段階から、PCとスマホの両方のレイアウトを用意しておくと、後から「スマホだと見づらい…」となるのを防げます。

【ステップ3】みんなに「伝わる」ための、ちょっとしたコツ

ワイヤーフレームは、関係者のみんなに意図がきちんと伝わってこそ、意味があるものだと私は思います。そのために、いくつか心がけていることがあります。

デザインではなく「骨組み」の話だと伝える

ワイヤーフレームは、あくまで骨組みです。なので、私は色やフォントといったデザイン的な要素は、なるべく入れないようにしています。見た目の話が混ざると、「この色、好きじゃないな」というように、本来確認したいことから話が逸れてしまうことがあるからです。

「なぜ？」を説明できるようにしておく

「なぜこのボタンはここにあるの？」と聞かれた時に、「多くのユーザーは、まず料金を知りたいと考えたので、ページの最初の方に料金プランを置きました」というように、自分なりの考えや理由を説明できるように心がけています。

デザイナーさんやお客様への伝え方

デザイナーさんへ：「このボタンを目立たせて」とだけ言うのではなく、「サービスの申し込みを促す一番大事なボタンなので、他のボタンよりも少し強く見えるように工夫してもらえますか？」と、目的や背景を一緒に伝えるようにしています。
お客様へ：「これはまだ骨組みの段階です」と前置きした上で、「載せる情報に抜け漏れはないでしょうか？」「ユーザーが迷わず目的を達成できそうでしょうか？」のように、何を確認してほしいのかを具体的にお伝えすると、スムーズに進むことが多いです。

まとめ

ワイヤーフレームは、Webサイト制作という長い道のりをみんなで乗り切るための「道しるべ」のような存在だと、私は考えています。

少し地味な作業に思えるかもしれませんが、この段階でしっかり情報整理とイメージ共有をすることで、その後のデザインや開発の作業が驚くほどスムーズに進むのを、何度も経験してきました。

私もまだまだ勉強中ですが、これからも丁寧なワイヤーフレーム作りを心がけて、より良いプロジェクトに繋げていきたいと思います。