ワイヤーフレームとは？Web制作に重要な理由や作成の流れ・ツールを紹介｜Webサイト制作 / CMS・MAツール｜LeadGrid（リードグリッド）

Webサイトやアプリの制作において、「ワイヤーフレーム」という言葉をよく耳にすることがあります。ワイヤーフレームはWeb制作の現場では欠かせない重要な設計図となるものですが、初めて聞く方には少し馴染みがないかもしれません。

この記事では、ワイヤーフレームの概要や作成方法、効果的な作り方のコツをご紹介します。さらにおすすめのツールについても詳しく解説しますので、機能的かつ魅力的なWebサイト制作に役立てましょう。

なお、ワイヤーフレーム作成だけでなくWebサイト制作全体の流れや費用感を知りたい方は、こちらも記事もご覧ください。

関連記事：【制作会社が解説】Webサイト制作の流れと進め方8ステップ！

関連記事：Web制作の料金相場を紹介！サイト別・依頼先別でわかりやすく解説

関連記事：Webサイト制作の見積もりで気をつけるべき点は？費用の内訳項目も

ワイヤーフレームの基礎知識

はじめに、ワイヤーフレームの基礎知識について解説します。

ワイヤーフレームとはWebページやアプリの骨組みを示す設計図

ワイヤーフレームは、Webサイトやアプリの画面構成を示した「設計図」です。英語で「wire（線）」と「frame（枠）」という言葉が組み合わさっていることからも分かるように、線と枠を使って画面の基本的な構造やレイアウトを表現したものになります。

ワイヤーフレームでは、サイトやアプリのページに「どのような要素を」「どのような順序で」「どのように配置するか」を視覚的に表現します。色や装飾などの詳細なデザイン要素は含まず、情報の配置や構造に焦点を当てるのが特徴です。

デザインの「下書き」と誤解されることもありますが、ワイヤーフレームの本質は「情報設計」を可視化することにあります。ユーザーに伝えたい情報を整理し、それをどのように画面上に配置すれば最も効果的にコミュニケーションできるかを検討するためのツールなのです。

ワイヤーフレームは誰が作成するのか

ワイヤーフレームは、プロジェクトの規模や体制によって作成者が異なります。一般的には、以下のような立場の人がワイヤーフレームを作成します。

• Webディレクター：プロジェクト全体を統括する立場として、情報設計とワイヤーフレーム作成を担当することが多い
• UIデザイナー：ユーザーインターフェースの専門家として、使いやすさを考慮したワイヤーフレームを作成
• 情報設計者（IA）：情報アーキテクチャの専門家として、情報構造を重視したワイヤーフレームを作成
• UXデザイナー：ユーザー体験全体を設計する立場から、ユーザーの行動フローを考慮したワイヤーフレームを作成

小規模なプロジェクトでは一人の担当者が複数の役割を兼ねることもありますが、 大規模なプロジェクトでは専門家がそれぞれの視点からワイヤーフレームの作成や検討に関わることが一般的です。

ワイヤーフレームとデザインカンプ、モックアップ、プロトタイプの違い

ワイヤーフレームと似た概念としてよく挙げられるものに、デザインカンプ、モックアップ、プロトタイプなどがあります。これらは混同されやすいので、違いを明確にしておきましょう。

• デザインカンプ：完成イメージに近い、色や画像、フォントなどを含めた視覚的なデザイン案
• モックアップ：実際の製品に近い外観を持ち、場合によっては一部の機能を試すことができるもの。Webサイトの場合、実際のページ遷移などの一部の機能を実装したものをモックアップと呼ぶことがある
• プロトタイプ：実際の機能性を持たせた試作品。ユーザーが操作できる状態のもの

ワイヤーフレームはこれらと比較すると、より初期段階で作成される「骨組み」であり、全体のレイアウトと情報構造を示すことが目的です。

ワイヤーフレームの目的と役割

ワイヤーフレームはWeb制作のプロセスにおいて重要な役割を果たします。ここでは主な目的と役割について解説します。

クライアントとの合意形成ツールとして

ワイヤーフレームは、クライアントとWeb制作者が同じビジョンを共有するための共通言語として機能します。抽象的な要件や希望を具体的な形で示すことで、認識のずれを早期に発見し、修正することができるでしょう。

また、ワイヤーフレームの段階で変更を加えることは、デザインやコーディングの段階で変更するよりもはるかに容易であり、コストも抑えられます。そのため、プロジェクトの初期段階でクライアントとの合意形成に使用することにより、後工程での大幅な修正を防ぐことができます。

情報設計の可視化ツールとして

ワイヤーフレームの役割は、情報設計（情報アーキテクチャ）を視覚化することです。Webサイトに掲載する情報の種類、量、優先順位を整理し、それらをどのように配置するかを検討することで、使いやすく効果的なサイト構造を設計することができます。

ワイヤーフレームを通じて情報設計の問題点を早期に発見し、改善することができるのです。

デザイン・開発への橋渡しとして

ワイヤーフレームは、情報設計からビジュアルデザイン、そして開発へとつなぐ橋渡しの役割も果たします。デザイナーにとっては、何をどこに配置すべきかの指針となり、開発者にとっては、必要な要素や機能を把握するための資料となるのです。

明確なワイヤーフレームがあることで、デザイナーはレイアウトや構造に悩む時間を減らし、クリエイティブな表現に集中できます。また、開発者は必要な機能や要素を事前に把握できるため、効率的な実装計画を立てることができるでしょう。

ワイヤーフレーム作成の基本的な流れ

ワイヤーフレーム作成の基本的な流れは以下の4ステップです。

1. Webページに必要な情報をピックアップ

2. 情報の優先順位を決める

3. レイアウトを決める

4. 手書きでラフを作り、ツールで清書する

より詳細な作り方はこちらの記事で解説しています。ぜひご覧ください。

関連記事：Webサイトのワイヤーフレームの作り方｜無料テンプレートも紹介

1. Webページに必要な情報をピックアップ

はじめに、ページに必要な要素を全て洗い出します。例えば、企業サイトのトップページであれば、以下のような要素が考えられます。

• ヘッダー（ロゴ、グローバルナビゲーション、検索窓など）
• メインビジュアル
• 企業情報
• サービス・製品情報
• お知らせ・ニュース
• 採用情報
• お問い合わせ
• フッター（サイトマップ、著作権情報など）

2. 情報の優先順位を決める

続いて、洗い出した要素に優先順位を付けます。ユーザーにとって最も重要な情報、クライアントが最も伝えたい情報を上位に設定し、それに基づいてレイアウトを検討します。

優先順位の高い情報はページの上部や目立つ位置に配置することが一般的です。

3. レイアウトを決める

優先順位に基づいて、要素をどのように配置するかを決めます。一般的なWebサイトのレイアウトパターンには以下のようなものがあります。

• シングルカラムレイアウト：一列に情報を縦に並べるシンプルな構成
• マルチカラムレイアウト：2〜3列に情報を配置する構成
• グリッドレイアウト：格子状に情報を配置する構成
• フルスクリーンレイアウト：画面全体を使った大きな視覚表現を用いる構成

モバイルファーストの考え方が主流の現在では、まずスマートフォン向けのシンプルなレイアウトを検討し、そこからデスクトップ版へと展開していくアプローチも一般的です。

4. 手書きでラフを作り、ツールで清書する

レイアウトの大枠が決まったら、まずは手書きのスケッチから始めるのが効率的です。この段階では完璧さを求めず、アイデアを素早く視覚化することを目指します。

ラフスケッチで方向性が定まったら、デジタルツールを使って清書し、詳細を詰めていきます。テキストの概要、画像の内容、ボタンのラベルなど、実際のコンテンツをイメージしやすくするための情報を盛り込みましょう。

最後に、作成したワイヤーフレームをチーム内やクライアントとレビューし、フィードバックに基づいて修正します。この段階で十分に検討することで、後工程での大幅な変更を防ぐことができます。

ワイヤーフレーム作成の際の注意点

ワイヤーフレーム作成時に注意すべき点は以下の通りです。

• デザインに凝り過ぎない

• ターゲットユーザーのニーズやユーザーシナリオを考慮する

• 情報の優先順位を明確にし、レイアウトに反映させる

• ユーザビリティやアクセシビリティを意識する

デザインに凝り過ぎない

ワイヤーフレームの目的は情報設計の可視化であり、美しいデザインを作ることではありません。色や装飾にこだわり過ぎると、本来の目的を見失ってしまう恐れがあります。

また、デザインに凝り過ぎると修正の手間が増え、試行錯誤のスピードが遅くなってしまいます。ワイヤーフレームは何度も修正することを前提として、効率的に作成できるレベルの詳細さに留めるべきです。

ターゲットユーザーのニーズやカスタマージャーニーを考慮する

ワイヤーフレーム作成時には、ターゲットユーザーのニーズやカスタマージャーニーを考慮することが重要です。

カスタマージャーニーとは、ターゲットユーザーが商品・サービスを知るところから、実際に購入し利用し、購入後に継続する、もしくは周りの人に商品・サービスのレビューを行う部分までの道筋のこと。これを考慮することによって、ユーザーが求める情報や機能を適切に提供できるワイヤーフレームが作成できます。

関連記事：BtoBカスタマージャーニーとは？メリットや作成方法を詳しく解説

カスタマージャーニーマップを作成する際は、ペルソナ設計が非常に重要となります。このペルソナ設計について、LeadGridチームが実際にクライアント向けに開催しているワークショップの内容をベースに、実際の設計方法を紹介する「ペルソナ設計入門ガイド」を無料公開していますのでこちらも合わせてご活用ください。

情報の優先順位を明確にし、レイアウトに反映させる

ワイヤーフレームでは、情報の優先順位を明確にすることが大切です。

最も重要な情報や機能は目立つ位置に配置し、次に重要なものはその次の位置に配置することで、ユーザーが求める情報や機能を効率的に探せるようにしましょう。

ユーザビリティやアクセシビリティを意識する

ワイヤーフレーム作成において、ユーザビリティやアクセシビリティを意識することが重要です。ユーザビリティはユーザーがWebサイトやアプリを使いやすいかどうかを測る指標であり、アクセシビリティは障がいのあるユーザーを含むすべてのユーザーが情報や機能にアクセスできるかどうか、を評価する指標を指します。

両方の観点からワイヤーフレームを設計することで、より多くのユーザーにとって使いやすいWebサイトやアプリケーションが作成できます。

関連記事：ウェブアクセシビリティとは？2024年義務化における具体的な対応例を解説

効果的なワイヤーフレーム作成のコツ

効果的なワイヤーフレーム作成のコツは以下の通りです。

• シンプルな線や図形で要素を表現する

• ユーザーが迷わずに目的を達成できるナビゲーションを考える

• CTAを目立たせる

シンプルな線や図形で要素を表現する

効果的なワイヤーフレーム作成のためには、シンプルな線や図形で要素を表現することが重要です。これによりワイヤーフレームが見やすくなり、情報構造や機能の理解が容易になります。シンプルな表現にすることで、デザインやカラーに気を取られることなく、ワイヤーフレームの本質にフォーカスできます。

ユーザーが迷わずに目的を達成できるナビゲーションを考える

ワイヤーフレーム作成では、ユーザーが迷わずに目的を達成できるナビゲーションを考慮することが重要です。ナビゲーションメニューはわかりやすく、アクセスしやすい位置に配置し、サブメニューやボタンも適切に設置して、ユーザーがストレスなく操作できるようにしましょう。

なおユーザーが迷わずに目的を達成しやすいナビゲーションのひとつとして「UIの一貫性」があります。UIの一貫性とは「他の類似サイトと使い勝手を合わせること」「使用デバイスごとの振る舞いに合わせる」「サイト内でUIを統一すること」です。

「サインイン」が「ログイン」と同じ意味で使われているサイトで混乱したことはないでしょうか？このように、「サイト独自の使い勝手の良さ」よりも「使い方を意識せずに使える」ことがひとつのユーザビリティの高さになります。

CTAを目立たせる

CTAは目立つ位置に配置し、ユーザーが簡単にアクションを実行できるように設計しましょう。これにより、Webサイトやアプリケーションの目的を達成しやすくなります。また商材にもよりますが、CTAは一つだけではない場合も多々あります。

初心者におすすめのワイヤーフレーム作成ツール

デザイン初心者や本業デザイナーではない方にもおすすめできる、ワイヤーフレーム作成ツールは、次の3つです。

• Figma

• Sketch

• cacco

ちなみにワイヤーフレームに対応したソフトとして有名な「Adobe XD」は、母体であるAdobeがFigmaを買収した関係からか現在新規の受付は終了しているため、含んでいません。

Figma

▲出典：Figma

Figma（フィグマ）は、Webベースのベクターグラフィックスエディタで、UI/UXデザインやワイヤーフレーム、プロトタイプの作成に適した機能を提供しています。クラウドベースのプラットフォームであるため、ブラウザ上で利用でき、OSを問わずにアクセス可能です。

Figmaの大きな特徴は、リアルタイムでの共同編集が可能であることです。これにより、デザイナーは他のチームメンバーと同時に作業ができ、効率的なコラボレーションが実現されます。実際にLeadGridチームでもワイヤーフレームの作成やレビューをはじめ、カスタマージャーニーやペルソナ策定など、汎用的に利用しています。

さらにFigmaはプラグインが豊富で、デザインワークフローのカスタマイズや拡張が容易です。デザインの再利用を助ける「コンポーネント」機能や、複数の画面サイズに対応したデザインを効率的に作成できる「オートレイアウト」機能など、高機能なツールが揃っています。

Figmaの詳細はこちら

Sketch

▲出典：Sketch

Sketch（スケッチ）は、デザイナー向けのベクターグラフィックスエディタで、WebサイトやアプリケーションのUI/UXデザインに特化した機能を提供しています。Mac専用のアプリケーションでありWindowsの方は利用不可である点がデメリットとはなりますが、シンプルな操作性と高いパフォーマンスが特徴です。

Sketchでは、ワイヤーフレームやプロトタイプの作成が容易で、デザインの再利用や共有が可能な「シンボル」機能や、複数の画面サイズに対応したデザインを効率的に作成できる「リサイジング」機能が備わっています。

またデザインのバージョン管理や、共同でレビューが可能な「Sketch for Teams」機能を利用すれば、スムーズなコミュニケーションが実現されます。

Sketchの詳細はこちら

cacoo

▲出典：cacoo

Cacoo（カクー）は、クラウドベースの図形描画ツールで、チームでのリアルタイムコラボレーションを可能にします。ユーザーは、ワイヤーフレームやフローチャート、マインドマップなど、さまざまなタイプの図を作成・編集することができます。Webブラウザ上で動作するため、専用のソフトウェアをインストールする必要はありません。

Cacooは、直感的なドラッグ＆ドロップ操作で簡単に図形を配置・編集できるため、初心者でも手軽に利用できます。また、チームメンバーが同時に図を編集できるリアルタイムコラボレーション機能が特徴で、オンラインでのチームワークを効率化します。コメント機能や通知機能も備えており、円滑なコミュニケーションが可能です。

Cacooの詳細はこちら

Miro

▲出典：Miro

Miroはデジタルホワイトボードを提供するオンラインツールで、ワイヤーフレーム作成にも適しています。

最大の特徴はチームでのリアルタイム編集機能点です。複数のメンバーが同時に作業できるため、アイデア出しから情報設計、ワイヤーフレーム作成までをシームレスに進められます。また豊富なテンプレートやワイヤーフレーム用の部品が用意されており、ドラッグ＆ドロップで直感的に配置できる点も支持されているポイントです。

遠隔チームや複数の関係者と協力しながらワイヤーフレームを作成したいプロジェクトに特に役立つツールといえるでしょう。

Miroの詳細はこちら

Balsamiq

▲出典：Balsamiq

Balsamiqは手書き風のスケッチ感覚でワイヤーフレームを作成できるツールです。最大の特徴は、意図的に「ラフな見た目」を実現していることで、この手描き風のデザインにより、レビュー時にカラーや装飾などのデザイン要素ではなく、情報構造やレイアウトに集中した議論が可能になります。

また、作成したワイヤーフレームはPDF形式やPNG画像で簡単に書き出せるため、メールやチャットでの共有もスムーズです。シンプルな機能に絞られているため学習コストが低く、「とにかく速く」ワイヤーフレームを作成したいチームや、クライアントと早い段階で合意形成を図りたいプロジェクトに特に適したツールといえるでしょう。

Balsamiqの詳細はこちら

ユーザーファーストなワイヤーフレームでスムーズなWebサイト制作を

この記事ではWebサイト制作に必須となるワイヤーフレームについて、概要や作り方のコツ、ツールについて紹介しました。この記事の内容を参考に、スムーズなWebサイト制作を進めましょう。

またこの記事や「ワイヤーフレームの作り方」の記事を読んで「Web制作はプロに任せよう」と思った方。Webサイト制作の際はデザイン性に定評のあるLeadGridまでご相談ください！

LeadGridは株式会社GIGがWebサイト制作の際に利用するCMSで、デザイン性の高さに提供があります。企業やサービスのブランディング・価値観をデザインに落とし込んだWebサイトを、綿密なヒアリングの上ご提案いたします。

LeadGridの詳細はこちらから

LeadGridの制作事例はこちらから

お問い合わせはこちらから