Webサイトを作るとき、いきなりデザインソフトを開いて見た目から作り始めていませんか。私もWeb制作を始めたばかりの頃はそうでした。けれど経験を重ねるほどに、最初に「設計図」をきちんと描いておくことが、結局いちばんの近道だと痛感するようになったんです。その設計図にあたるのが、今回のテーマであるワイヤーフレームです。
ワイヤーフレームというと、なんだか専門的で難しそうに聞こえるかもしれません。でも、やっていることは「どこに、何を、どう並べるか」を線と箱でざっくり描くだけ。色も写真もいらない、いわばWebページの間取り図のようなものです。これがあるかないかで、完成までのスムーズさが本当に変わってきます。
実はこの記事、もともとは「Wireframe Showcase」という、ワイヤーフレームと完成サイトを見比べられる海外の便利なギャラリーサイトを紹介していました。ところが今回あらためて確認したところ、そのサイトは現在まともにアクセスできない状態になっていました。残念ですが、こういうことはWebの世界では珍しくありません。そこで今回は思い切って、サービス紹介ではなく「ワイヤーフレームそのものの作り方と、今ちゃんと使えるツール」を軸に、まるごと書き直すことにしました。
この記事を読むと、ワイヤーフレームが何のために必要なのか、どんな手順で作ればいいのか、そして2026年の今あらためて選ぶならどのツールがおすすめなのかが、ひと通りわかります。さらに、もとの記事のテーマだった「ワイヤーフレームと完成サイトを見比べる」という視点も、今のリソースに置き換えて活かす方法を紹介します。これから自分でサイトを作ってみたい方も、制作会社とのやり取りで設計図の話が出てきて戸惑っている方も、ぜひ最後まで読んでみてください。きっと「あ、そういうことか」とスッキリするはずです。
ワイヤーフレームとは？Webページの「間取り図」
ワイヤーフレームとは、Webページのどこに何を配置するかを、線と枠だけでシンプルに示した設計図のことです。見出しはここ、画像はこのあたり、ボタンはこの位置、といったレイアウトの骨組みを、色や装飾を省いて描いていきます。英語の wireframe（針金の枠組み）という名前のとおり、中身を詰める前の「枠」を組む作業ですね。
なぜわざわざこんなものを作るのか。一番の理由は、見た目の良し悪しに気を取られる前に、情報の優先順位と配置を冷静に決められるからです。いきなりデザインから入ると、色やフォントが気になってしまい、「そもそもこのページで一番伝えたいことは何か」という肝心な部分がぼやけがちになります。ワイヤーフレームの段階なら、装飾という化粧を落とした状態で構成だけを検討できるので、議論がブレません。
制作の現場でも、ワイヤーフレームはクライアントやチームと完成イメージを共有するための共通言語になっています。「トップにキャンペーンのバナーを置いて、その下に新着情報を3つ並べましょう」と口で説明するより、ざっくりした図を1枚見せたほうが、話が一気に早く進むんですよね。私も打ち合わせでは、まずこの1枚を画面に映すところから始めることが多いです。
ワイヤーフレームの作り方を5ステップで
では実際に、どんな手順で作っていけばいいのでしょうか。難しく考える必要はありません。次の5ステップで進めれば、初めてでも形になります。
1. 必要な情報を洗い出す
まずは、そのページに載せたい要素をぜんぶ書き出します。ロゴ、メニュー、見出し、本文、画像、問い合わせボタン、フッター……思いつくものを付箋やメモにどんどん並べる感覚です。ここで漏れがあると後で構成がガタつくので、いったん欲張って全部出し切るのがコツです。
2. 優先順位をつけて並べる
次に、洗い出した要素に優先順位をつけます。そのページで一番見てほしいものは何かを決め、上のほう・目立つ位置に置いていきます。人の目は基本的に上から下、左から右へ流れるので、大事なものほど上に、という原則を意識すると自然なレイアウトになります。
3. 大まかなレイアウトを描く
優先順位が決まったら、いよいよ枠を描いていきます。最初は紙とペンの手描きで十分です。きれいに描こうとせず、四角と線でざっくり「ここがヘッダー、ここがメイン、ここがサイドバー」と区切るだけ。手を動かしながら考えると、頭の中の構成が整理されていきます。
関連記事：グリッドデザインとは？初心者にもわかるWeb制作の整列と余白の基本＆CSS Grid入門
4. ツールできれいに清書する
手描きで方向性が固まったら、ツールを使ってデジタルで清書します。共有やフィードバックがしやすくなりますし、後から修正するのもラクです。どのツールを使うかは次の章でじっくり紹介します。
5. 見直して整える
最後に、全体を眺めて違和感がないかチェックします。情報が多すぎないか、押してほしいボタンが埋もれていないか、スマホで見たときに縦並びにして破綻しないか。この段階で迷ったら、実際に公開されている似たジャンルのサイトをいくつか見比べてみると、自分の構成に足りないものが見えてきます。完成サイトを参考にする、という発想はこの見直しの工程でこそ生きてきます。
関連記事：ホームページリニューアルで失敗しないコツ。自己満足のデザインにしない方法
今どきのワイヤーフレーム定番ツール
ここからが、今回いちばんお伝えしたいところです。ワイヤーフレーム作成のツール事情は、ここ数年でかなり様変わりしました。昔の記事をそのまま参考にすると、すでに役割を終えたツールを選んでしまうこともあるので、2026年の今の状況を整理しておきます。
Figma：まず選んでおけば間違いない定番
今のワイヤーフレーム作りで最初に名前が挙がるのがFigma（フィグマ）です。ブラウザ上で動くデザインツールで、インストール不要、複数人で同時に同じ画面を編集できるのが大きな強み。打ち合わせをしながらリアルタイムで線を引いていける手軽さは、一度味わうと手放せません。
うれしいことに、個人で使う範囲なら無料プランでも十分に始められます。ワイヤーフレーム用のテンプレートやUIパーツも豊富に公開されているので、ゼロから箱を描かなくても、部品を並べていく感覚で形にできます。さらに2025年には「First Draft」など、テキストの指示からワイヤーフレームのたたき台を生成するAI機能も加わり、最初の一歩がぐっと軽くなりました（こうしたAI機能は有料プラン向けですが、手描き清書なら無料で十分です）。迷ったら、まずFigmaから触ってみるのをおすすめします。
参考リンク：Figma Community：Webサイト用ワイヤーフレームテンプレート
Adobe XDは新規利用の検討対象から外してOK
少し前までワイヤーフレームの定番として紹介されることが多かったのがAdobe XDです。ただ、これから始める方は基本的に選ばなくて大丈夫。Adobeは2023年に単体製品としての販売を終了し、現在は不具合修正中心のメンテナンス状態で、新機能の開発も止まっています。すでにCreative Cloudで使っている方が継続利用する分には問題ありませんが、これから新しく覚えるツールとしては、Figmaなど開発が続いているものを選んだほうが安心です。古い解説記事でXDがすすめられていても、今の状況はこうだと知っておいてください。
参考リンク：Adobe Community：Adobe XDの提供状況について
Cacoo：日本語で使いやすい作図ツール
もともとこの記事の旧版で私が「愛用しています」と書いていたのがCacoo（カクー）です。日本のヌーラボが提供している作図ツールで、こちらも今も現役。ワイヤーフレームはもちろん、フローチャートやサイトマップなど、Web制作で必要になる図をまとめて描けるのが便利です。日本語のインターフェースで迷いにくく、テンプレートも用意されているので、図を描くこと自体に慣れていない方でも入りやすいと思います。チームでの共同編集にも対応しています。
参考リンク：Cacoo（ヌーラボ）
diagrams.net（旧draw.io）：完全無料で手軽に
「とにかくお金をかけずに、サクッと枠を描きたい」という方にはdiagrams.net（旧draw.io）がぴったりです。ブラウザだけで使えて完全無料、アカウント登録なしでもすぐ描き始められる手軽さが魅力。作ったデータはGoogleドライブやローカルに保存できます。デザイン性を追い込むツールというより、構成をパッと図にするのに向いているので、ワイヤーフレームの初期段階の整理に重宝します。
参考リンク：diagrams.net（drawio）
ワイヤーフレームと完成サイトを見比べて学ぶ
さて、この記事の旧版のテーマだった「ワイヤーフレームと完成サイトの比較」。紹介していたサイトは使えなくなってしまいましたが、設計図と完成形を見比べて学ぶという発想自体は、今でもとても有効です。やり方を今のリソースに置き換えてみましょう。
一番手軽なのは、Figma Communityのワイヤーフレームテンプレートを眺めることです。プロが作った構成例が無数に公開されているので、「ECサイトはこういう並びが多いんだな」「ランディングページはこの順番で要素を積み上げるのか」と、生きた手本として参考になります。気に入ったものは複製して、自分用に作り替えてしまうのもアリです。
もうひとつおすすめなのが、気になる完成サイトを開いて、自分で逆向きにワイヤーフレームを描いてみる練習です。よくできたサイトを見ながら「ここはヘッダー、ここはメインビジュアル、その下に3カラム」と骨組みだけを抜き出してみる。これを何本かやると、優れたサイトがどんな設計の上に成り立っているのかが、肌感覚でわかるようになります。完成形からワイヤーフレームへ、という逆算は、ギャラリーサイトに頼らなくてもできる、なかなか効く勉強法ですよ。
日本語で作り方や参考例をまとめて学びたいなら、定番の解説記事に目を通しておくのも近道です。
参考リンク：Webクリエイターボックス：ワイヤーフレームの作り方
まとめ：まず1枚、設計図を描いてみよう
長くなりましたが、最後にぎゅっとまとめます。ワイヤーフレームはWebページの間取り図であり、見た目に入る前に「どこに何を置くか」を冷静に決めるための設計図です。これを最初に1枚用意しておくだけで、その後の制作が驚くほどスムーズになります。
覚えておきたいポイントは、次のとおりです。
- ワイヤーフレームは色も写真もない「枠」だけの設計図
- 作り方は、情報を洗い出す→優先順位をつける→レイアウトを描く→清書→見直しの5ステップ
- ツールは今ならまずFigma。Adobe XDは新規には選ばなくてOK
- 日本語で手軽に使うならCacoo、無料でサクッとならdiagrams.net
- 完成サイトから逆にワイヤーフレームを描いてみると、設計のコツがつかめる
もともと紹介していた「Wireframe Showcase」が使えなくなっていたのは残念でしたが、ワイヤーフレームを学ぶ環境は、当時よりむしろ充実しています。無料で高機能なツールが揃い、参考になるテンプレートもいくらでも手に入る今は、始めるのにいい時期だと思います。
まずは紙とペンでもFigmaでもかまいません。作ってみたいページを思い浮かべて、四角と線で1枚だけ描いてみてください最初はうまく描けなくても大丈夫。手を動かすうちに「ここはもっと上のほうがいいかな」と、自然と構成が見えてきます。その小さな1枚が、あなたのサイト作りの確かな第一歩になりますよ。
