ワイヤーフレームとは？作り方、ツール、作成のポイントを解説！

「ワイヤーフレームとは何かを知りたい」

「ワイヤーフレームのつくり方やおすすめの作成ツールが知りたい」

このような考えをお持ちではありませんか？

今回は、ワイヤーフレームの目的や作り方とあわせて、おすすめの作成ツールや作成時の注意点を解説します。

ワイヤーフレームを活用すると、より効率よく迅速にWebページ作成が可能です。

また、SEOで重要なUI（ユーザーインターフェース）やUX（ユーザーエクスペリエンス）も、ワイヤーフレーム作成時に検討できます。

さらにSEOに強いウェブサイトやコンテンツを作成したい方は、SEOに強いAIライティングツール「トランスコープ」もあわせてご活用ください。

ワイヤーフレームとは？

ワイヤーフレームはWebページに「どのような要素を、どのような順番で、どこに配置するか」を表現した設計図です。

色は付けずモノトーンで作成し、四角い枠や簡易的なテキストで構成されます。

そのため、「ワイヤーフレームを見てもイメージが湧かない」ともいわれますが、ワイヤーフレームは「Webページの見た目のイメージ」を確認するためではなく「要素設計」を確認するために作成します。

デザインを詰める前にワイヤーフレームでしっかりと要素構成を確認することで、デザインやコーディングに入ってからの追加・修正を防げ、効率的にWebページを作成可能です。

ワイヤーフレームはいつ、だれが作る？

ワイヤーフレームはサイト全体の設計後、ページのデザインやコーディングに入る前の段階で作成します。

Webサイト作成の主なフローは、以下のとおりです。

1. リサーチ・分析
2. ペルソナ設計
3. サイトマップ作成
4. ワイヤーフレーム作成
5. モックアップ・プロトタイプ作成
6. コンテンツ・デザイン作成
7. コーディング・実装

ワイヤーフレーム完成後は、モックアップ・プロトタイプの作成に進みます。

作成する人は特に限定されておらず案件によって異なりますが、一般的にはWebディレクターが作成します。

Webサイト作成にChatGPTを活用して効率化したいと考えている方は、ウェブサイト制作に活用できるChatGPTプロンプト16選もあわせてご覧ください。

モックアップ・プロトタイプとの違い

ワイヤーフレームと似たものに、モックアップ・プロトタイプなどがあります。

それぞれの特徴は、以下のとおりです。

モックアップはデザインの確認、プロトタイプは操作性の確認に用いられます。

ワイヤーフレームの目的

ワイヤーフレームを作成する目的は、以下の2つです。

1. クライアントやプロジェクトメンバーとの認識のズレをなくす
2. アイデア出し・議論の「たたき台」として活用する

それぞれ解説します。

1.クライアントやプロジェクトメンバーとの認識のズレをなくす

ワイヤーフレームの目的の1つ目は、クライアントやプロジェクトメンバーとの認識のズレをなくすことです。

Webサイトの制作には、ディレクター・プロジェクトマネージャー・ライター・デザイナー・エンジニア・コーダーなど複数のメンバーが関わります。

そのため、プロジェクトの初期段階でWebページの完成イメージを共有し、メンバー間で認識のズレをなくすことが重要です。

ワイヤーフレームで掲載する情報や大まかなレイアウトを確認しておくと「イメージと違う」という事態を防ぎ、制作後半での追加・訂正といったトラブル予防につながります。

2.アイデア出し・議論のたたき台として活用する

ワイヤーフレームの目的の2つ目は、アイデア出し・議論のたたき台として活用することです。

ワイヤーフレームは色やデザインの要素が含まれておらず、シンプルな線とテキストのみで作成されているため、ページに掲載する情報や配置、導線に意識を集中できます。

そのため「ユーザーに必要なコンテンツ」や「使いやすい導線」について、アイデア出し・議論する「たたき台」として最適です。

ワイヤーフレームを活用し十分に議論しておくことで、後々の行程がスムーズになります。

ワイヤーフレームで確認すべき5つのポイント

ワイヤーフレームで確認しておくべきポイントは、以下の5つです。

1. ページに掲載する要素の網羅性
2. 要素の優先順位
3. ページレイアウトの大枠
4. 要素の掲載サイズやボリューム
5. 他ページへのリンク導線

それぞれ解説します。

1.ページに掲載する要素の網羅性

ワイヤーフレームで確認すべきポイントの1つ目は、ページに掲載する要素の網羅性です。

きちんと構成を練らずイメージだけでWebページを作成してしまうと、見た目はきれいだが使いにくいページになってしまいます。

• ページに掲載すべき情報は網羅されているか
• 不要な情報が混ざっていないか

ワイヤーフレームで上記の2点を特によく確認しておきましょう。

ページに掲載する要素が過不足なく網羅されているかは、共起語とは？SEOに効果的な活用法と無料分析ツールを紹介やカスタマージャーニーとは？SEOにおける重要性と活用する手順のコラムを参考にしてみてください。

2.要素の優先順位

ワイヤーフレームで確認すべきポイントの2つ目は、要素の優先順位です。

最もユーザーに伝えたいことが、Webページの最適な位置・大きさで掲載されるように構成されているか確認しましょう。

通常、Webサイトではページ下部にいくほど、ユーザーの目に触れる確率が下がります。

そのため、ユーザーに必ず届けたい重要な情報ほどページの上部に配置することが大切です。

また、情報の重要度は表示するスペースの大小によっても表現できるため、スペースにも注目して確認しましょう。

3.ページレイアウトの大枠

ワイヤーフレームで確認すべきポイントの3つ目は、ページレイアウトの大枠です。

レイアウトを確認せずにデザインやシステム開発を進めてしまうと後から修正が入り、スケジュールが遅れたり、追加で費用がかかったりする恐れもあります。

詳細なレイアウトはデザインの段階で決定しますが、大まかなレイアウトはワイヤーフレームで確認しておきましょう。

4.要素の掲載サイズやボリューム

ワイヤーフレームで確認すべきポイントの4つ目は、要素の掲載サイズやボリュームです。

ユーザーに伝えたい情報をしっかり訴求できるサイズ・ボリュームかを確認しましょう。

また、ワイヤーフレームの段階で掲載する情報のボリュームを決めることで、用意すべき文章の文字数も見通せます。

5.他ページへのリンク導線

ワイヤーフレームで確認すべきポイントの5つ目は、他ページへのリンク導線です。

ワイヤーフレームには、ページ内のボタンから、どのページに遷移するのかも情報として記載します。

• ユーザーがサイト内を移動しやすい導線となっているか
• コンバージョンとなるページへの導線がしっかり設定されているか

以上の内容も確認しておきましょう。

ユーザーがどのようにサイト内を移動するかを早い段階で確認できるため、UXも効果的に設計できます。

内部リンクの必要性やおすすめの内部リンク管理ツールについては、【2024年版】SEOを強化する内部リンク管理ツール10選もあわせてご覧ください。

ワイヤーフレームの作り方

ワイヤーフレームは、以下の流れで作成します。

1. ページに掲載する要素を抽出する
2. 抽出した要素に優先順位を付ける
3. レイアウトを決定する
4. ラフ画を作成する
5. ツールで清書し要素を詰める

それぞれ解説します。

1. ページに掲載する要素を抽出する

まずはじめに、作成するページに必要な要素を抽出します。

ページに盛り込む要素は、主に以下の2つに分けられます。

• コンテンツ要素
• ナビゲーション要素

コンテンツ要素では、ユーザーに伝えたい情報が漏れなく含まれるように、ユーザーのニーズや興味・関心を事前に調査・分析しておくことが大切です。

ナビゲーション要素では、次のページへと自然に誘導できるリンクを設計します。

要素を抽出する際は、サイトマップ（Webサイト全体の構成図）やディレクトリマップ（Webサイト内すべてのページタイトル・URL・内容の一覧表）を参照すると、漏れなく情報を抽出できます。

2.抽出した要素に優先順位を付ける

掲載する要素を抽出したら、優先順位を決めます。

Webページのスペースには限りがあるため、どの情報をどのような順番で掲載すると効果が上がるかを考えて、要素の取捨選択をします。

要素に優先順位を付ける際は、「サイトに訪れるユーザーの気持ち」や「ユーザーにどのような体験をしてほしいか」を考慮することが大切です。

3.レイアウトを決定する

掲載する要素の内容や優先順位をふまえ、ページのレイアウトを決定します。

Webページでよく使われるレイアウトには、以下4種類があります。

どのレイアウトを採用するかは、ページの役割や情報量、サイトの構造などを考慮して選びましょう。

4.ラフ画を作成する

レイアウトを決めたら、ラフ画を作成してヘッダー・フッター・コンテンツの大まかな配置を決めていきます。

ラフ画には具体的な文字や画像は入れず、要素の順番・配置を簡単に書き込んでいきます。

この段階のワイヤーフレームは完成品から遠いため、「低忠実度ワイヤーフレーム」と呼ばれます。

低忠実度ワイヤーフレームはページの構造に焦点を当てており、構造・レイアウト・ナビゲーションを検討するために使われます。

5.ツールで清書し要素を詰める

ラフ画でページの流れや構造を確認したら、ツールで清書しテキストや画像など具体的な要素を詰めていきます。

具体的な要素を加えたワイヤーフレームは、より完成品に近づいており「高忠実度ワイヤーフレーム」と呼ばれます。

ワイヤーフレームはグレースケールで作成するため色付けは不要ですが、記載する文章や画像は実際に使用予定のものを使いましょう。

実際の文章や画像を載せることで、コンテンツの繋がりや完成イメージが確認できます。

ワイヤーフレーム作成におすすめのツール7選

ワイヤーフレーム作成におすすめのツールを7つ紹介します。

1. Adobe Photoshop
2. Adobe XD
3. CACOO
4. Figma
5. Miro
6. Sketch
7. PowerPoint、Excel

使用するツールは「他の作業で使い慣れている」「デザイナーと共有しやすい」など、自分に合ったものを選びましょう。

1.Adobe Photoshop

引用：Adobe Photoshop

PhotoshopはAdobe社が販売するデザインツールで、写真や画像の加工・画像の合成・テキストの追加などを行えます。

Adobe Photoshopでもワイヤーフレームが作成でき、自由にデザインできる上に他のAdobeツールと同期も可能です。

使用料は3,280円/月で、7日間の無料体験があります。

2.Adobe XD

引用：Adobe XD

XDもPhotoshop同様、Adobe社が販売するデザインツールで、Webサイトのデザイン・ワイヤーフレーム作成・プロトタイプ作成・メンバー間での共同編集などの機能があります。

ワイヤーフレーム作成から動きの確認、デザインまで仕上げられるのが魅力です。

ただし、2023年1月からAdobe Creative Cloud コンプリートプラン（7,780円/月）でのみ提供となっており、単品では購入できません。

3.CACOO

引用：CACOO

CACOOは、クラウドベースのオンライン作図ツールです。

簡単でシンプルな操作性が特徴で、テンプレートや図形も100種類以上用意されています。

複数のメンバーで編集でき、さらにチャット機能も付いているため、チームでのワイヤーフレーム作成に向いています。

プランは2つで、個人利用は660円/月、チーム利用は1,980円〜/月です。

4.Figma

引用：Figma

Figmaはブラウザベースのデザインプラットフォームで、1つのファイルを複数人で同時に編集可能です。

図形描画ツール・テキストツールなど必要なツール・機能は一通りそろっており、さらにPC・スマートフォンなど各規格のテンプレートが用意されているため、手軽にワイヤーフレームの作成ができます。

また、ファイル利用数の制限などはあるものの無料プランも用意されているため、気軽に使用しやすいツールです。

有料プランは1,800円/月から用意されています。

5.Miro

引用：Miro

Miroは、多機能オンラインホワイトボードツールです。

図表作成に活用できる50種類以上のテンプレートやフレームワーク、専用ツールが用意されています。

また、Miroはクラウドプラットフォームであり、インターネット環境下であれば複数人での同時編集が可能です。

フリープランが用意されているため、手軽に導入できます。

6.Sketch

引用：Sketch

SketchはMac専用のデザイン制作ツールで、直感的な操作性や豊富なテンプレートが魅力です。

縦に長いデータの作成が可能なため、スマホ版に適したワイヤーフレーム作成にも役立ちます。

ショートカット機能やプラグインを活用すると、より効率的に作業を進められます。

30日間は無料で全ての機能を利用できるので、気になる方は試してみましょう。

7.PowerPoint、Excel

引用：PowerPoin

ワイヤーフレームは、PowerPointやExcelでも作成可能です。

ツール導入にコストを割きたくない、今あるツールで作成したい、という場合にはPowerPointやExcelがおすすめです。

ただし、PowerPointやExcelはデザイン作成の専用ツールではないため、モックアップ・プロトタイプまでは作成できません。

モックアップ・プロトタイプ作成の際には、PowerPointやExcelで作成したデータを別のソフトに移行する必要があります。

ワイヤーフレームを作るときの5つの注意点

ワイヤーフレーム作成時は、以下の5つの点に注意しましょう。

1. Webページの目標を明確にする
2. リサーチ・分析してから作る
3. スマホ版・PC版それぞれに適したサイズを作る
4. シンプルに作成する
5. デザインではなく要素設計を目的にする

それぞれ解説します。

1.Webページの目標を明確にする

ワイヤーフレーム作成の注意点の1つ目は、Webページの目標を明確にすることです。

たとえばWebページの目標が「商品購入」であれば、ユーザーが購入するまでの導線を意識し、商品の画像・商品名・価格・購入ボタンなどを分かりやすいフォント・大きさ・デザインで表示する必要があります。

Webページの目標が明確であれば、ページ構成を検討する際にメンバー間で意見が分かれても、目的に合わせて適切な方向性を決定できます。

2.リサーチ・分析してから作る

ワイヤーフレーム作成の注意点の2つ目は、リサーチ・分析してから作ることです。

事前に十分なユーザーニーズ・行動のリサーチ・分析を行うことで、ユーザーにとって分かりやすく役に立つページ構成が可能になります。

自社の製品やサービス・競合サイト・参考サイトを分析し、作成するWebページに必要な情報や機能を明確にしておきましょう。 

3.スマホ版・PC版それぞれに適したサイズを作る

ワイヤーフレーム作成の注意点の3つ目は、スマホ版・PC版それぞれに適したサイズのものを作ることです。

ワイヤーフレームはユーザーが使用する画面のサイズに合わせて作成する必要があります。

スマートフォンとPCでは、画面のサイズや比率が異なるため、スマホ版・PC版それぞれのサイズに最適化した構成・レイアウトのものを作成しましょう。

4.シンプルに作成する

ワイヤーフレーム作成の注意点の4つ目は、シンプルに作成することです。

ワイヤーフレームはグレースケールで作成し、フォントやカラー、細かなデザインに関しては作り込みすぎないようにします。

テキストや色の組み合わせなどの細部にこだわると、UXの欠陥など重要なポイントを見落とす恐れがあります。

また、ワイヤーフレームには「たたき台」としての役割があるため、追加で変更を加える余地を残し、まずはシンプルなものを作成しましょう。

5.デザインではなく要素設計を目的にする

ワイヤーフレーム作成の注意点の5つ目は、デザインではなく、ウェブサイトを構成する要素の設計を目的にすることです。

ワイヤーフレームの時点で細かなデザインを追求してしまうと、要素設計の判断が鈍ったり、後の行程でかえって調整の手間を増やしてしまったりします。

要素設計に集中できるよう、ワイヤーフレームはデザインにはこだわらないようにしましょう。

ワイヤーフレームを作成してしっかりと設計されたWebページを作成しよう

今回は、ワイヤーフレームの目的や作り方、おすすめの作成ツールを解説するとともに、作成時の注意点などを解説しました。

Webページを作成する際は、デザインを固める前にしっかりとワイヤーフレームを作成し、要素構成を検討することが重要です。

ワイヤーフレームを活用するとページの構成段階でUIやUXも確認できるため、SEOにも効果的です。

また、UX改善に取り組みたい方は、UI/UXデザイナー向けのChatGPTプロンプト集15選も是非ご参考ください。

SEOをより強化するには、SEOに強いAIライティングツール「トランスコープ」がおすすめです。

トランスコープについては、以下の動画で詳しく紹介しています。

AIでSEOに強いブログ記事作成！SEOに強いAIライティングツール「トランスコープ」とは？

さらに、【トランスコープの評判・導入事例】では、実際にトランスコープを取り入れた企業の導入事例を掲載しています。

ぜひご確認ください。

トランスコープは、無料で体験ができます。

ご興味がございましたら、お気軽にお試しください。

■SEOに強いAIライティングツール「トランスコープ」

https://transcope.io/