Webサイトの制作時は、「ワイヤーフレーム」を作ることが一般的です。
この記事では、ワイヤーフレームの基本的な知識から、ワイヤーフレームの作り方、制作に使えるツールまで解説します。
ワイヤーフレームとは?なぜ必要なのか
ワイヤーフレーム(wireframe)は、日本語に直訳すると「線」と「枠」で構成された図という意味になります。
ワイヤーフレームとは、Webサイト制作時にヘッダーやメニュー、メインコンテンツなどの基本的な要素をどこにレイアウトするのか可視化するための設計図です。
デザインや色などの装飾は後回しにして、まずは基本的な構造を決めるために作成します。
Webサイト制作を進めるうえで、ワイヤーフレームは非常に重要な役割を持っているのです。
その理由を以下で詳しく解説します。
情報の整理と配置決定
Webサイトを制作する際、まずはどのようなレイアウトとイメージで作成していくのか大まかな形を考える必要があります。
思いつきで、あれこれコンテンツを配置したWebサイトは、ユーザビリティも悪く、使いやすいサイトにはなりません。
事前に、Webサイトに掲載する情報の内容と順序を整理する必要があり、そのためにワイヤーフレームを作成することになります。
ワイヤーフレームは、ボタンの配置はユーザーにとって使いやすいか、資料請求フォームに飛ぶ導線には問題がないかなど、UI/UXの観点から検証するためにも重要な設計図になります。
関係者との認識統一
Webサイトを一緒に作成するメンバーや、クライアントとの認識をあわせるうえでも重要な資料になります。
文章での説明だけでは伝わりにくいレイアウトなどの意図も、視覚的な図面があれば誤解を防ぎやすくなるものです。
ワイヤーフレームがあれば、クライアントとの打ち合わせで具体的なイメージを共有できるだけでなく、修正箇所の指示も明確になるでしょう。
ワイヤーフレーム作成の手順
ワイヤーフレームの重要性がわかったところで、具体的な作成手順を見ていきましょう。
初めて作る方でも迷わないよう、以下5つのステップに分けて解説します。
- 必要な要素を洗い出す
- サイトマップを作成する
- レイアウトを設計する
- 実際にワイヤーフレームを作る
- レビューとフィードバックを受ける
各ステップの内容を以下で詳しく解説します。
ステップ1|必要な要素を洗い出す
まずは、Webサイトに必要な要素をすべて書き出していきます。一般的には、以下のような要素が必要になります。
- ロゴ
- メインビジュアル
- ヘッダー
- フッター
- ナビゲーションメニュー
- 見出し
- 本文
- 画像
- ボタンリンク
- お問合せフォーム
ほかにも細かな要素はありますが、Webサイトで何を実現したいのかといった目的から逆算し、目的を実現するために必要な構成要素を整理することが重要です。
ステップ2|サイトマップを作成する
サイトマップ(ディレクトリマップ)とは、Webサイトの構造を示す図です。エクセルやスプレッドシートなど、情報を構造化させて管理するツールに書き起こすことが一般的です。
Webサイト内に設置されるすべてのページタイトルやURLをまとめ、どのページがどのように関連しているのか全体像を把握するために作成します。
たとえば、コーポレートサイトを作成するなら「トップページ→企業情報→会社概要→アクセス」といった流れで、すべてのページをまとめます。
サイトマップを作成する前にワイヤーフレームを作ってしまうと、ページの追加や削除のたびにワイヤーを作り直さなければいけません。
ワイヤーフレームを作る前に、必ずサイトマップを作るようにしましょう。
ステップ3|レイアウトを設計する
サイトマップを作成したら、どのページのワイヤーフレームを作成するのかを決め、レイアウトを設計します。
制作するWebサイトのなかで重要な役割を果たすページ、たとえばトップページや企業情報ページなどを優先して作成するとよいでしょう。
レイアウトは、ある程度大枠を決めておけば制作しやすくなります。レイアウトは「MUUUUU.ORG」や「Web Design Clip」などのギャラリーサイトを参考にするのもオススメです。
以下に代表的なレイアウトの例を紹介するので、参考にしてください。
シングルカラムレイアウト(1カラムレイアウト)
縦一列にコンテンツを配置するタイプのレイアウトです。
画面を横いっぱいに使うため、見やすくインパクトを与えたいWebサイトに採用されるケースが多くあります。
ユーザーに与える情報を誘導しやすい点も特徴のため、広告用のランディングページなどにも採用されています。
(例)
グリッドレイアウト(タイル型レイアウト)
コンテンツをタイル状に並べるレイアウトです。
一度に複数のコンテンツが視界に入るため、コンテンツ量の多いWebサイトにも適しています。
また、全体的に整ったレイアウトになるため、ショッピングサイトなど商品を整列して見せたいWEBサイトなどに多く採用されています。
(例)
>> オーエイチアーキテクチャー – 京都の注文住宅、建築設計、店舗デザイン事務所OHArchitecture
マルチカラムレイアウト
マルチカラムは、縦方向に二つ以上のブロックで構成されるレイアウトです。
PC画面などで見る場合は一画面に情報を多く掲載できるためユーザーのUI的にも効率がいいレイアウトとも言えます。
ポータルサイトやショッピングサイト、ブログサイトなど多くのWEBサイトに採用されています。
多くのサービスや商品を紹介するECサイトやネットショップに適しています。
(例)
>> 地域文化商社 うなぎの寝床 | 福岡八女 通販・オンラインショップ
フルスクリーンレイアウト
メインのコンテンツを画面いっぱいに配置するレイアウトです。
レイアウトの考え方としてはシングルカラムレイアウトと同様ですが、こちらは要素を画面幅いっぱいに広げることが特徴です。
縦方向にスクロールして要素を配置する一般的なサイト構成もあれば、トップビジュアルのページを起点に他ページへはリンクで繋ぐようなサイト構成もあります。
写真やデザインを効果的に使ったインパクト重視のサイトが多く、ユーザーに強く印象付けるためのブランドサイトなどに向いているレイアウトだともいえます。
(例)
>> BRAND|Root-バッグ・カバン・雑貨 通販サイト-
ステップ4|実際にワイヤーフレームを作る
レイアウトが決定したら、実際にワイヤーフレームの制作に入ります。
コンテンツエリアとメインビューに分けてレイアウトを考えましょう。
メインビューにはキャッチコピーなど、サイトを印象付けるコンテンツを入れる
コンテンツエリアには、サイトマップにあるすべてのページをコンテンツエリアに入れるのではなく、ユーザーにとくに見てほしい情報を優先的に配置します。
また、サイト内の導線も考慮し、ヘッダーやフッターなどのナビゲーションリンクから、他のページに飛べるようにコンテンツを配置することもポイントです。
ワイヤーフレーム作成時には、専用のツールを用いて作成すると効率的です。
オススメのツールについては「ワイヤーフレーム作成に役立つツール」の章で解説しています。
以下の記事でも、AdobeXDを使用したワイヤーフレームの作り方を紹介しているので、あわせて参考にしてください。
【AdobeXD】ワイヤーフレームの作り方解説!便利なテンプレートも紹介!
ステップ5|レビューとフィードバックを受ける
ワイヤーフレームが完成したら、チーム内で共有して内容をブラッシュアップしていきます。
フィードバックを受けると、作成中には気づかなかった改善点が見つかるでしょう。
より効果的なWebサイトにするためにも、フィードバックを反映しながら改善する工程は重要な作業になります。
ワイヤーフレーム作成に役立つツール
ワイヤーフレームの作成手順がわかったところで、実際に役立つツールについて解説します。
目的や予算、スキルレベルに応じて最適なツールを選びましょう。
以下のツールは、ワイヤーフレーム作成でよく使用されるものです。
ツール名 | 主な特徴 | 料金体系 |
Figma | ブラウザベースで共同編集可能 | 無料プランあり |
Adobe XD | Adobe製品との連携が優れている | 有料のみ |
Miro | ホワイトボード形式で直感的 | 無料プランあり |
Office製品 | 操作に慣れている人が多い | 要ライセンス |
以下で各ツールの特徴を解説します。
Figma
ブラウザベースのUIデザインツールである「Figma」は、多くのデザイナーに選ばれている人気ツールです。
MacやWindows、Linuxなど、OSを問わず利用できる点が特徴です。
リアルタイムでの共同編集が可能なため、チームメンバーと同時に作業を進められます。
また、豊富なプラグインでカスタマイズできる点や、作成したデザインコンポーネントを簡単に再利用できる点も魅力です。
料金プランは、3つのプロジェクトまで作成可能な無料プランと、無制限のプロジェクト作成や高度な機能が利用できる有料プランが用意されています。
以下の記事では、Figmaの使い方を詳しく解説しているので、ぜひ参考にしてください。
【実戦形式】Figmaの使い方徹底解説!実際のWebデザインを作成してみよう!
Adobe XD
「Adobe XD」はAdobe製品のUI/UXデザインツールで、IllustratorやPhotoshopを使用している方にオススメのツールです。
高速な動作と直感的な操作感が特徴で、オフラインでも利用可能です。
プロトタイプ作成機能も充実しており、画面遷移やアニメーションの確認もスムーズに行えます。
ただし、2025年現在は無料プランが廃止され、有料サブスクリプションのみの提供となっています。
Adobe XDの使い方は、以下の記事を参考にしてください。
【AdobeXD】ワイヤーフレームの作り方解説!便利なテンプレートも紹介!
Miro
オンラインホワイトボードツールとして知られる「Miro」は、アイデアの視覚化やチーム内での共有に優れています。
豊富なテンプレートを利用でき、直感的な操作性も特徴です。
リアルタイムでのコラボレーションが可能で、プレゼンテーション機能も搭載されています。
料金体系には、3つの編集可能なボードまで利用できる無料プランと、無制限のボード作成が可能な有料プランがあります。
PowerPoint・Word・EXCEL
一般的にワイヤーフレーム作成用のツールとしてはあまり使用されませんが、制作会社にラフなイメージを伝える際などに活用できます。
多くの人が操作に慣れており、基本的な図形描画も可能で、特別な学習が不要という利点があります。
また、無料の代替手段として、GoogleドキュメントやGoogleスライドなども利用可能です。
このように、それぞれのツールには特徴があります。
予算や用途、チームの状況に応じて、最適なツールを選択することをオススメします。
ワイヤーフレームは手書きでも作れる?
ここまで、さまざまなデジタルツールを紹介してきましたが、ワイヤーフレームは手描きでも作成できます。
とくに、初めてワイヤーフレームを作成する方や、ツールの操作に不安を感じる方にとって取り組みやすい方法だといえます。
ただし、一般的に制作会社が作成する場合は専用ツールを使用することがほとんどです。
手描きでの作成は、主に以下のような場面で活用されます。
- 制作会社に事前にイメージを伝えたい場合
- 無料のWeb制作ツールで自分でサイトを作る場合
- アイデアを素早くスケッチしたい場合
鉛筆やペンを使ってノートにスケッチする方法や、タブレットなどを用いて描くことも可能です。
デジタルでの手描きには「concepts」などのアプリも活用できます。
ワイヤーフレーム作成の注意点とポイント
最後にワイヤーフレーム作成時に注意しておきたい重要なポイントを解説します。
以下の点に気をつければ、効果的なワイヤーフレームを作成できるでしょう。
- デザインを作り込みすぎない
- 明確なナビゲーションかをチェックする
- 必要な要素が漏れていないか確認する
それぞれの注意点とポイントを以下で詳しく解説します。
デザインを作り込みすぎない
ワイヤーフレームの本来の目的は、情報設計と認識の共有です。
この段階で色使いやフォント、細かいビジュアルデザインまで作り込んでしまうと、情報設計以外の部分に目がいってしまい、かえって本質的な議論がしづらくなります。
モノクロで簡素なデザインにすることで、サイトの構造や機能性に焦点を当てた議論がしやすくなります。
明確なナビゲーションかをチェックする
ワイヤーフレームでは、デザインの作り込みは不要ですが、ナビゲーションは作り込む必要があります。
サイトマップを作成する段階で、どのページからどこに飛ぶのか、ボタン操作のフローなどを丁寧に考えましょう。
ワイヤーフレームを作成する前に、明確なナビゲーションかをチェックしておけば手戻りを防ぎスムーズにWebサイト制作が進みます。
必要要素が漏れていないか確認する
必要な要素の漏れは、あとからの修正で手間やコストが発生する原因となります。
そのため、ワイヤーフレーム作成前に洗い出した要素が漏れていないか最終確認することが重要です。
ワイヤーフレーム作成の手順で解説した、「ステップ1|必要な要素を洗い出す」の段階で、優先度の高いコンテンツを整理し、わかりやすくマークしておくことをオススメします。
まとめ
ワイヤーフレームとは、Webサイトやアプリの設計図として、情報の整理や関係者との認識統一に欠かせないものです。
この記事ではワイヤーフレームの基本を解説しましたが、効果的なWebサイトを制作するには、専門的な知識と経験が必要となります。
PENGINのような専門の制作会社に相談すれば、効率的にWeb制作を進められるでしょう。
Webサイト制作でお困りの方は、ぜひPENGINまでお気軽にご相談ください。