はじめに
本資料は、Webサイト制作で重要な「ワイヤーフレーム」の作成方法と、代表的な作成ツールの特徴をやさしくまとめたガイドです。実務で使えるポイントに絞り、手順やツール選びのヒントを具体例を交えて説明します。
目的
ワイヤーフレームの役割を理解し、企画段階から実装段階へスムーズに進めることを目的としています。デザインの前に画面構成を固めることで、修正コストを減らしチームの意思疎通を円滑にします。
本資料で学べること
- ワイヤーフレームとは何か（簡単な定義と具体例）
- 作成の基本手順（ステップごとの実践的なやり方）
- 主なツールの特徴と利用環境（初心者向けのおすすめも含む）
想定読者
- Web制作に関わる企画担当、デザイナー、エンジニア
- 初めてワイヤーフレームを作る方や、ツール選びに迷っている方
読み方のポイント
章立てに沿って順に読めば、実務ですぐ使える知識が身に付きます。まずは第2章でワイヤーフレームの基本を押さえることをおすすめします。ご不明点があれば、各章の具体例を参考に進めてください。
ワイヤーフレームとは何か
定義
ワイヤーフレームは、Webサイトやアプリの設計図のようなものです。色や画像、最終的なデザインを入れる前に、ページの構成要素（見出し、ナビゲーション、本文、ボタン、フォームなど）を配置して、情報の流れや優先順位を視覚化します。
主な目的
- 画面ごとのレイアウトを早く検討する
- ユーザーの動線や操作の流れを確認する
- デザイナー・開発者・クライアント間で認識を合わせる
具体例で考える
トップページのワイヤーフレームでは、ロゴとグローバルナビ、メインビジュアルの代わりに枠、紹介文、商品一覧のカード、フッターを四角やラベルで示します。問い合わせフォームなら、入力フィールドの配置と必須項目の並びを図で表します。
サイトマップとの違い
サイトマップはページ間の構造（どのページがあるか、どこへつながるか）を示します。一方でワイヤーフレームは個別ページの中身と見せ方に焦点を当てます。
作成者と使い方
主にUXデザイナーや情報設計者が作りますが、プロジェクトによってはPMや開発者が作ることもあります。早い段階で共有し、フィードバックを受けながら改訂します。
ワイヤーフレーム作成の基本手順
1. 準備フェーズ（サイトマップ作成と情報整理）
目的とターゲットを明確にし、ページに載せるコンテンツを洗い出します。まずページ一覧（サイトマップ）を作り、各ページの役割と優先度を決めます。例：トップ／一覧／詳細／問い合わせ。成果物はページリストと優先度表です。
2. 設計フェーズ（優先ページの特定とテンプレート作成）
重要なページを選び、共通レイアウトのテンプレートを作ります。よく使うテンプレートは一覧型、詳細型、フォーム型です。テンプレートにはナビ、見出し、CTA（行動喚起）などの配置を決め、手描きやデジタルで低精度のスケッチを作成します。
3. レイアウト決定フェーズ（各ページのレイアウト決定）
各ページで情報の重要度に応じた配置を決めます。視線の流れ（上→下、左→右）を意識し、グリッドを使って調整します。レスポンシブ対応が必要なら、主要な幅（スマホ・タブレット・PC）ごとの崩れ方も想定しておきます。注釈で動きや挙動を示すと共有が楽になります。
4. 制作フェーズ（実際のワイヤーフレーム作成）
低解像度のワイヤーフレームから作り、レビュー→修正を短いサイクルで回します。必要に応じてクリック可能なプロトタイプにして、操作感を確認します。最終成果物は注釈付きワイヤーフレームと、場合によっては簡易プロトタイプです。チェックポイントは可読性、操作の流れ、優先度の明確さです。
主要なワイヤーフレーム作成ツール
概要
代表的なツールにはFigma、Adobe XD、Sketch、Adobe Cacoo、Moqups、Wireframe.cc、Miro、Balsamiq、Pencil Projectなどがあります。これらはクラウド型やデスクトップ型として提供され、特徴や対応環境が異なります。
クラウド型とデスクトップ型の違い
- クラウド型：ブラウザやオンライン同期で共同編集や共有が簡単です。インストール不要でチーム作業に向きます。
- デスクトップ型：動作が安定しオフラインで作業できます。プラグインやローカル資源を使いたい場合に便利です。
代表的なツールと特徴（簡潔に）
- Figma：クラウドで同時編集が可能。プロトタイプやプラグインが豊富でリモートチームに強み。
- Adobe XD：Adobe製でデザインとプロトタイプを統合。アセット共有がしやすいです。
- Sketch：Mac向けで動作が軽快。プラグインで機能拡張できます。
- Adobe Cacoo：図やフロー図の作成に向く。共有とコメント機能が充実。
- Moqups：ブラウザ完結でシンプル。素早くモックを作るときに便利です。
- Wireframe.cc：極めてシンプルなインターフェース。初心者やラフ作成向け。
- Miro：ボード型コラボツール。ワイヤー作成とブレインストーミングを同時に行えます。
- Balsamiq：手書き風ワイヤーでアイデア出しに適します。
- Pencil Project：無料でオープンソース。オフラインで使える選択肢です。
選び方のポイント
- 共同作業の要否、対応OS、学習コスト、プラグインやテンプレートの有無、コストを比較して選んでください。用途に合わせて試用版で感触を確かめると安心です。
Figmaの特徴
概要
Figmaはクラウド上で動くデザインツールです。Webブラウザで開けるため、場所や端末を問わずワイヤーフレーム作成ができます。直感的な操作でページを素早く組み立てられ、多数の画面を効率よく管理できます。
主な特徴
- リアルタイムの共同編集：複数人が同時に編集・コメントできます。
- コンポーネントとスタイル：ボタンやヘッダーを部品化して使い回せます。
- プロトタイピング機能：リンク設定や簡単なアニメーションで動きを確認できます。
- プラグイン：アイコンや写真を自動で追加する拡張が豊富です。
- バージョン管理：編集履歴をさかのぼって復元できます。
利点
チームでのやり取りがスムーズになり、デザインの統一も保ちやすくなります。開発者への引き渡しも簡単で、要素のサイズや色が確認しやすいです。テンプレート化により、多ページのワイヤーフレームを短時間で作れます。
活用例
ワイヤーフレーム作成→チームレビュー→プロトタイプで動作確認→修正を繰り返しながら最終デザインへ移行するワークフローに向いています。
注意点
インターネット接続が必要な場面が多く、オフライン作業は制限されます。高機能ゆえに最初は操作に慣れが必要です。
Adobe XDの特徴
概要
Adobe XDはAdobe社が提供するワイヤーフレーム・デザイン・プロトタイプ作成ツールです。PCやスマートフォン向けのテンプレートが揃い、直感的な操作で画面設計を進められます。多くの制作現場で使われている実務向けのツールです。
主な機能
- デザイン編集：図形やテキストを並べて画面を作ります。レイヤーやグリッドも使えます。例：ログイン画面を短時間で作成できます。
- ワイヤーフレーム作成：簡易な線画から詳細な画面まで段階に応じて作れます。
- プロトタイプ：画面遷移や簡単なアニメーションを設定して、実際の操作感を確認できます。
- 共同編集と共有：同時編集や共有リンクで、チームやクライアントとやり取りできます。
テンプレートとコンポーネント
テンプレートで端末ごとのサイズをすぐに用意できます。ボタンやヘッダーはコンポーネント化して再利用すると効率が上がります。例えば、ボタンを一つ直せば全画面に反映できます。
プラグインと連携
IllustratorやPhotoshopとの連携に優れ、外部プラグインでアイコンやダミーデータを追加できます。用途に合わせて機能を拡張できます。
導入と活用のコツ
操作はシンプルで学習コストは低めです。初めはテンプレートとコンポーネントを活用し、プロトタイプで早めに動作確認すると完成度が上がります。無料プランで試してから有料プランに移るのが無難です。
Sketchの特徴
概要
SketchはMac専用のUIデザインツールで、ワイヤーフレームの作成に向いています。操作が直感的で初心者でも始めやすく、画面の共通部品をまとめて扱えるため作業が効率化します。
主な特徴
- アートボードで複数画面を並べて設計できます。例：スマホとタブレットの画面を横並びで比較可能です。
- シンボル（共通部品）を作成すると、ヘッダーやボタンを一度直すだけで全画面に反映します。
- ベクターデータを扱うため、拡大しても画質が劣化しません。
- プラグインが豊富で、プロトタイプ連携やアセット書き出しを追加できます。
長所
- Macに馴染む操作感で作業スピードが出せます。
- コンポーネント管理が強く、デザインの一貫性を保ちやすいです。
- デザインから実装への橋渡し（画像やスタイルの書き出し）がスムーズです。
短所
- Mac専用のためWindows環境では使えません。
- 複数人の同時編集は他のクラウド系ツールほど強くありません。
- 最初は用語（シンボルやアートボードなど）を覚える必要がありますが、実例を真似すれば習得できます。
導入に向くケース
- 社内がMacで統一されている企業やチーム。
- ワイヤーフレームからビジュアルデザインまで同じツールで進めたい場合。
- 細かいコンポーネント管理と一貫性が重要なプロジェクト。
使い方のヒント
- プロジェクトの初期段階でシンボルを作ると修正が楽になります。
- 必要な機能はプラグインで補い、作業フローに合わせて選んでください。
- 他ツールと併用する場合は、SVGやPNGなど書き出し形式を統一するとスムーズです。
Adobe Cacooの特徴
概要
Adobe Cacooはクラウドベースの図作成ツールです。PCだけでなくiOSやAndroid向けのワイヤーフレームも作れます。ブラウザで開いてすぐ編集できるので、インストール不要で始めやすいです。
主な機能
- 豊富なテンプレートと図形: ボタンやフォーム、画面レイアウトのテンプレが揃っています。初めてでも形を組み合わせるだけで作れます。
- リアルタイム共同編集: 複数人が同時に編集・コメントできます。会議中にアイデアを反映しやすいです。
- 編集権限とプロジェクトフォルダ: 閲覧・編集の権限を細かく設定でき、フォルダで資料を整理できます。情報共有がスムーズになります。
- バージョン管理とコメント: 履歴を戻せるので誤って消しても安心です。コメントで意思決定の記録を残せます。
- エクスポート: PNGやPDFなどに書き出せ、開発ドキュメントに添付しやすいです。
利点と活用例
チームでの画面設計やワークショップに向いています。たとえば、デザイナーとエンジニアが同時に画面の配置を調整したり、クライアントにテンプレートを使って早く提案資料を作ったりできます。
注意点とコツ
- 無料プランは機能制限や図の数に制限があるため、必要に応じてプランを検討してください。
- 大きな図面は表示が重くなることがあるので、ページを分けて整理しましょう。
- テンプレートを基にカスタマイズし、共通のコンポーネントを作ると作業が速くなります。
Moqupsの特徴
概要
Moqupsはブラウザ上で使えるワイヤーフレーム・プロトタイプ作成ツールです。インストール不要で、直感的な操作により短時間で画面設計ができます。フォントやアイコン、豊富なテンプレートを備え、チームでのアイデア出しにも向いています。日本語のUIやドキュメントが弱い点に注意が必要です。
主な特徴
- ドラッグ&ドロップで図形やコンポーネントを配置できます。具体例：ボタンや入力欄を画面に素早く置けます。
- 多彩なテンプレートとアイコン集で、デザインの土台をすぐに作れます。
- リンクを設定して簡易プロトタイプを作成できます。画面遷移の確認が容易です。
- 複数人で同時編集でき、コメントでフィードバックを回収できます。
- SVGやPNGで画像をエクスポートできます。開発資料として渡しやすいです。
長所
- 学習コストが低く、非デザイナーでも扱いやすいです。
- ブラウザベースなので環境依存が少なく、共有が簡単です。
- テンプレートが豊富でワークの立ち上げが速いです。
注意点
- 日本語UIや日本語フォントのサポートが限定的です。日本語文書を多用する場合は表示崩れに注意してください。
- 高度なアニメーションや細かいデザイン調整は苦手です。精密なビジュアル作成は別ツールを検討してください。
- 無料プランは機能制限があります。チームで本格利用する際は有料プランが必要になる場合があります。
使い方のポイント
- テンプレートを活用してワイヤーフレームの骨組みを早く作り、後から要素を調整してください。
- コメント機能でクライアントやチームの意見を集約し、変更履歴を追いやすくしてください。
- エクスポート形式を事前に決めておくと、開発やレビューの流れがスムーズになります。
Wireframe.ccの特徴
概要
Wireframe.ccはブラウザ上で素早くワイヤーフレームを作成できるシンプルなツールです。ユーザー登録が不要で、ページにアクセスしてすぐに描き始められます。操作は直感的で、初心者でも扱いやすいです。
長所（メリット）
- 手早く形を作れる：四角や線、テキストをドラッグやクリックで配置できます。ボタンや画像の枠をざっくり作る時に便利です。
- 学習コストが低い：複雑なメニューがないため、初めての人でも迷いません。
- 共有が簡単：作成後に共有用のリンクを発行してチームやクライアントとすぐに共有できます。
- すぐ使える無料プラン：まず試したい時に手軽です。
短所（デメリット）
- 機能は最小限：細かなデザイン調整や高度なコンポーネントは少なめです。詳細なプロトタイプには向きません。
- カスタマイズ性が限定的：細かいスタイル設定や複雑なインタラクションは作れません。
基本的な使い方（簡単な手順）
- ブラウザでWireframe.ccにアクセスします。
- マウスやトラックパッドで四角を描き、テキストを直接入力します。
- 要素を移動してレイアウトを整えます。
- 完成したら共有リンクを生成するか、画像として書き出して保存します。
利用シーンの例
- アイデア出しのラフ作成
- 初期段階のワークショップやミーティングでの説明資料
- クライアントに概念を見せるための簡易図
料金と導入のポイント
無料プランで試した後、機能を増やしたければ月額16ドルのプロプランを検討します。まずは簡単なワイヤーフレーム作成や共有を目的に使うと、手間をかけずに効果を実感できます。
Miroの特徴
概要
Miroはブラウザ上で動くホワイトボード型のツールです。豊富なテンプレートやライブラリを使い、短時間でワイヤーフレームの骨組みを作成できます。付箋や図形、コネクタを自由に配置して画面遷移やユーザーフローを視覚化できます。リアルタイムで複数人が編集できる点が特に強みです。
主な特徴
- テンプレート：ワイヤーフレーム、ユーザーフロー、サイトマップなどの雛形が揃っています。例：ログイン画面やダッシュボードのテンプレート。
- コラボレーション：同時編集、コメント、投票機能で合意形成が早まります。
- 図形ライブラリ：ボタンや入力欄などのUIパーツをドラッグ＆ドロップで配置できます。
- フレーム機能：画面ごとにフレームを作って管理し、プレゼン用に並べ替えできます。
活用例（具体例）
- リモートのワークショップで付箋を使いながら要件を整理する。
- デザイナーと開発者が同じボードで画面遷移を確認する。
- ステークホルダー向けに短時間でプロトタイプの骨格を提示する。
使い方のポイント
- 既存テンプレートをベースにカスタマイズすると効率が上がります。
- フレームごとに画面を分けると編集や共有が楽になります。
- コメントに担当者を割り当てて課題管理を行うと抜けが減ります。
注意点
- 大きなボードは動作が重くなることがあります。
- 専用のワイヤーフレームツールに比べ、細かなUI設計機能は限定的です。
- オンライン接続が前提なのでオフライン作業は難しい点に留意してください。
Balsamiqの特徴
概要
Balsamiqは手書き風のラフなワイヤーフレーム作成に特化したツールです。画面構成や情報の流れを素早く表現できます。デスクトップ版は一度限りの購入で89ドル、クラウド版は月額9ドルから利用可能です。
主な特徴
- 手書き風の見た目：見た目に気を取られず構造に集中できます。
- コンポーネントライブラリ：ボタンやフォームなどのUIパーツをドラッグで配置できます。
- 速い作業感：プレーンな線とラフな表現で短時間に案を量産できます。
- デスクトップとクラウド：オフラインで使うデスクトップ版と共有しやすいクラウド版を選べます。
- 書き出し機能：PNGやPDFでエクスポートし、資料に貼り付けられます。
利点
初心者でも扱いやすく、会議での早い合意形成に向きます。見た目の細部にこだわらないため、チームでアイデアを出し合う初期段階に適します。
制限事項
高精度なインタラクションやデザインシステムの管理には向きません。プロトタイプで細かいアニメーションやレスポンシブ調整が必要な場合は別ツールが有利です。
使い方のコツ
- まず紙に描く感覚でラフを作り、重要なスクリーンだけ詳細化します。
- シンボル機能で繰り返し使う要素をまとめると作業効率が上がります。
- ステークホルダー向けにはPNGで出力し、説明を添えて共有すると伝わりやすいです。
