ワイヤーフレームとは？ 作り方やおすすめのツールを紹介

Webサイトやアプリの制作、リニューアルの際に必ず欠かせないのがワイヤーフレーム（Wireframe）です。

名前を聞いたことがあっても作成した経験がない人には難しく感じるワイヤーフレームですが、基本や特徴、なぜ必要なのかを知れば、今後のWebサイトの制作やアプリの開発に ワイヤーフレームを活用できるでしょう。

本記事では、そんなワイヤーフレームの基本的な知識や具体的な作り方について詳しく説明しています。

記事の最後にはワイヤーフレームの制作に役立つおすすめのツールやテンプレートも紹介しているので、ぜひご確認ください。

それでは、ワイヤーフレームについて見ていきましょう。

ワイヤーフレームとは？

上記でも少し触れたように「ワイヤーフレーム」とはWebサイトやアプリの開発、リニューアルの際に必要となる設計図のことを言います。

英語では「Wireframe」と書かれ、wire（針金・ケーブル）とframe（骨組み・枠組み）の意味から、線や枠組みを使って作成する図だということがわかります。

ワイヤーフレームを使うことで、Webページのレイアウトやホームページ内のコンテンツの配置などを設計することができます。

そのため、デザインやコーディングのプロセスであらかじめ設計された図を使うことができ、追加の修正をなくし、プロジェクトチーム内でも制作するWebページやアプリの内容を共有できるため、制作作業を効率化できます。

ワイヤーフレームはなぜ必要なのか？

Webサイトの制作やアプリの開発に役立つワイヤーフレームですが、必ず作成する必要があるのか、疑問に思っている方もいることでしょう。

ここでは、ワイヤーフレームがなぜ必要なのかについての理由を見ていきましょう。

Webサイトやアプリのレイアウトを設計できる

ワイヤーフレームを作成することで制作プロセスがスタートする前に、あらかじめレイアウトを設計することができます。

イメージしたデザインを主体に作業を進めてしまうと、「デザインは良くても必要なコンテンツが足りていない」といった問題に直面することもあります。

ワイヤーフレームを使うことで、デザインとコンテンツのレイアウトを合わせて設計できるようになるので、ワイヤーフレームを用いてレイアウトを組み立てる工程が制作プロセスでは重要です。

プロジェクトメンバー間でレイアウトや機能のイメージを共有できる

通常、Webサイト制作やアプリ開発のプロジェクトにはプロダクトマネージャーやライター、デザイナー、エンジニアなどのさまざまな人や部門が携わります。

ワイヤーフレームを使って機能やコンテンツのブレインストーミングを進めることで、各部門や担当者の要件を満たしながら設計を進めることができ、情報を共有しながら設計作業を進められます。

また、プロジェクトメンバーで同じワイヤーフレームの作成をすることで、追加の訂正や認識のズレも未然に防ぐことができ、スムーズに制作を進めることができます。

コンテンツやレイアウトのアイデア出しや議論に役立つ

ワイヤフレームには、シンプルな線と文字だけで作成されているため、Webサイトやアプリのレイアウトやデザイン、コンテンツのアイデア出しに活躍します。

また、ワイヤーフレームの制作段階でデザインをある程度固めてしまうと議論の幅を狭めてしまう可能性があります。

あくまでワイヤーフレームの作成では、ラフでシンプルなデザインを維持しながらプロジェクトメンバー間でブラッシュアップをして、最終的なデザインを決定しましょう。

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

ワイヤーフレームの作成は、SEOやプロダクトマネージャー、Webデザイナーなどの担当者が主導となって行います。

Webサイトやアプリの要件、イメージしているデザインに合わせて担当者を構成し、プロジェクトチームの意見を反映しながら作成の担当になった人がワイヤーフレームを作成していきます。

必ずしも1人の担当者だけでワイヤーフレームを作成する必要はないですが、認識をすり合わせながら作成をすることで、意見やイメージしたデザインにズレをなくすことができます。

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

Webサイトの制作やアプリの開発のプロセスを通して「ワイヤーフレーム」「デザインカンプ」「モックアップ」「プロトタイプ」「ディレクトリマップ」という言葉をよく耳にすると思います。

どれもデザインや機能、コンテンツを可視化するためのツールであり、Webサイトの制作やアプリの開発のプロセスすベてで使われますが、違いがイマイチ理解できない方もいることでしょう。

以下では各ツールの特徴や違いについてわかりやすくまとめています。

ワイヤーフレーム

ワイヤーフレームは、webサイトの完成イメージを簡単な線と枠で表現する「設計図」のことです。クライアントの目的やコンセプトなどに基づいて作成する基礎的なユーザーインターフェースであり、ワイヤーフレームを作ることで完成形のイメージがしやすくなり、プロジェクトチームとも認識を合わせながら作業を進められるようになります。

デザインカンプ

デザインカンプは、色やフォント、画像やテキストなどのコンテンツのイメージを表すためのデザインツールです。Webサイトのデザインを具体化することで、コーディング作業の際に、デザインカンプで示した通りに Webサイトをデザインできるようになります。

ワイヤーフレームは「Webサイトの骨組み」、デザインカンプは「Webサイトのデザインの仕上げ」という認識で違い覚えておきましょう。

モックアップ

モックアップとは、ウェブサイトやアプリの開発時に、色やデザインのサンプルとして作成されるビジュアルツールです。英語では、「mock-up」と記載され「模型」という意味があります。

モックアップを作成することでステークホルダーやクライアントとビジュアルに対するアイデアをわかりやすく伝えることができます。

ワイヤーフレームやプロトタイプがモックアップと同義で認識されることがありますが、その構成や動作があるかないかで、大きな違いがあります。

▼ 関連ページ モックアップとは？意味や作り方を解説

プロトタイプ

ワイヤーフレームが「どこに・何を・どう配置する」のかを表現した「静的な設計図」であることに対して、プロトタイプは完成品を想定した動的要素などを加えた試作品のことを指します。

UX やプロダクト・サービスの向上には欠かせないツールです。ただし、プロトタイプは最初から完璧なものを作成する必要はありません。

ディレクトリマップ

ディレクトリマップは、サイトのすべてのページの階層、URL、タイトルをまとめた一覧表のようなものであり、ワイヤーフレームがサイトの1ページをまとめた図であるのに対して、ディレクトリマップでは、サイトの全体をリストでまとめます。

サイトマップと混同して認識されがちなディレクトリマップですが、サイトマップとは構造上で大きな違いがあるので、適切に作成するようにしましょう。

▼ 関連ページ 初心者でもわかるサイトマップガイド | 種類や作り方、メリットを紹介

これらのツールの特徴をしっかりと押さえながら各制作プロセスで活用することで、理想的な完成形に向かって、確実に作業を進めていくことができます。

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

ここからはワイヤーフレームの作成手順を説明していきたいと思います。

以下の手順で作成作業を進めていけば、基本的なワイヤーフレームなら簡単に作成できます。

それでは、ワイヤーフレームの作り方について見ていきましょう。

ページ要素をブレインストーミングする

まずは、ページやアプリ内で必要となる要素をブレインストーミングを使って洗い出していきましょう。

例えばホームページのワイヤーフレームを作成したい時に、必要な画像やコンテンツ、SEO要件などをワイヤーフレームの要素として付箋やリストを使って書き出します。

ここでのブレインストーミングでは、より具体的なイメージがつかめるまで要素を出していくことが重要です。

▼ 関連ページ ブレインストーミングとは？ブレストのやり方と4つのルール（4原則）について解説

表示に対しての優先度を決定する

要素をブレインストーミングで洗い出した後は、要素の表示に合わせて優先度を設定しましょう。

一般的にはページの下部に行くほど、閲覧率が下がると言われています。

そのため、重要なCTA（Call to Action）や重要なページにリンクしている要素など優先度の高い要素をページの上部に配置するようにしましょう。

ページのリニューアルに対してワイヤーフレームを作成する場合は、ページヒートマップなどを使って、ページのどの部分にクリックが集中しているかや GSC (Google Search Console: グーグルサーチコンソール）などのデータを参照して、クリックが集中しているページをもとに優先度を決定しましょう。

レイアウトを計画する

優先度を設定した表示要素を実際に配置していく前にページやアプリのレイアウトを計画することが大切です。

以下が一般的なレイアウトの内容となります。

• シングル
• マルチカラム
• フルスクリーン
• タイル

また、レイアウトを計画する上で重要なのが、ユーザーがどこからやどの端末でページやアプリにアクセスするのかを想定することです。 レイアウトが計画できたら、そのレイアウトにそって表示要素を配置していきましょう。

ラフ画を作成する

レイアウトの情報をもとに手書き、またはオンラインで提供されている手書きツールを使ってでラフ画を作成していきましょう。

ここで重要なのは、どのようにして自社のWebサイトやアプリに来たユーザーがスクリーン上を回遊するかイメージすることです。

求めている情報や製品が見つけにくいページ・アプリの構成になっている場合、ユーザーはすぐに離脱してしまいます。

そのため、そのユーザーが見つけたい情報や製品を見つけやすいページの構造を考えながらラフ画を作成していきましょう。

ユーザーペルソナなども事前に準備しておけば、よりユーザーの目線でワイヤーフレームの作成を進められるます。

▼ 関連ページ ペルソナとは？事例を使った設定方法や意味を解説

オンラインのツールでワイヤーフレームを作成する

ラフ画が完成したら、オンラインのツールを使って実際にワイヤーフレームにデザインを整理していきます。

オンラインのツールをワイヤーフレームの制作が効率的に進められたり、プロジェクトチームやクライアントと情報が共有しやすくなるというメリットがあります。

また、ほとんどのオンラインツールではワイヤーフレームに関する情報や資料を一元管理することができ、必要な時に必要な情報・資料にアクセスできるといった点でもツールの使用がベストだと言えるでしょう。

インターネット上にはワイヤーフレームを作成できるツールが多数提供されているため、自社のチームやクライアントのニーズに合ったツールを選びましょう。

ワイヤーフレーム作成で押さえておきたいポイント

上記でワイヤーフレーム作成のプロセスについて具体的に理解していただけたと思います。

しかし、ワイヤーフレームの作成では上手に作るためのポイントがいくつかあるので、それらのポイントも合わせて以下でご紹介します。

1. ワイヤーフレームの作成前に、まずはディレクトリマップを作成する

一般的なWebサイトの作成は「ディレクトリマップ作成 → ワイヤーフレーム作成 → Webデザイン → コーディング」の手順で進められます。

ディレクトリマップを作成することで、必要なページや各ページに必要なコンテンツを確定することができ、ワイヤーフレームの制作もスムーズに進められます。

2. ワイヤーフレームは、できるだけシンプルにデザインする

あくまでワイヤーフレームは、ページやアプリのレイアウトを設計するための図であるため、デザインはできるだけシンプルなもので作成するようにしましょう。

レイアウトと一緒にデザインを作り込み過ぎてしまった場合、本来の目的であるレイアウトの枠を越えて実際のデザインやイメージ、ロゴなどの話に議論が脱線してしまい、会議が終わった後に実際の成果物が出せなかったということもしばしばあります。

そのため、ワイヤーフレーム自体のデザインは、シンプルな図形や線、テキストのみにとどめておき、実際のデザインフェーズに移ってから、デザイナーや各担当者とデザインについて議論しましょう。

3. 端末別にワイヤーフレームを作成する

ユーザーがアクセスに使う端末ごとに画面の大きさや表示される要素の配置が変わってくるため、ワイヤーフレームでのレイアウトの計画は端末ごとに行うようにしましょう。

Webサイトやアプリ内のすべてのページをワイヤーフレームを使って設計する必要はありませんが、ホームページやプロダクト・サービスなどに関わる重要なページなページではワイヤーフレームが必要になります。

最近ではWebサイトのレスポンシブデザインもページの検索ポジションで重要になってきているので、ワイヤーフレームを使ってしっかりと対応しましょう。

4. 事前のリサーチや分析に力を入れる

ワイヤーフレームを作成する前に「なぜそのWebページやアプリが必要なのか」や「なぜサイトのリニューアルが必要なのか」などの目的を明確にすることが重要です。

目的を明確化することで、プロジェクト内での優先度が設定しやすくなり、ワイヤーフレームの作成がしやすくなります。

目的の定義は、実際にワイヤーフレームを通して何を達成したいかや、何を改善したいかなどもとに定義し、分析を行います。

そして、その目的に合わせたユーザーやプロダクト・サービスのリサーチを行い、ワイヤーフレームを作成する方針を決定します。

5. 他社サイトやアプリを参考にしてワイヤーフレームを作成する

ワイヤーフレームのレイアウトの作成に行き詰まったら、まずは競合他社や注目を集めているサイトからインスピレーションを得ることも良いでしょう。

他のサイトがどのようなレイアウトで作成されていたり、どのようなコンテンツの配置になっているかを分析することで、ギャップや機会も見出すことができます。

自社で作成するワイヤーフレームが参考にしたサイトと似たような構造になっていても、デザインやイメージ、見せ方次第で変わった印象をユーザーに与えることができるので、あまり気にする必要はありません。

まとめ

「ワイヤーフレーム」とはWebサイトやアプリの開発、リニューアルの際に必要となる設計図として活躍し、レイアウトや表示要素の計画・分析に役立つツールです。

ワイヤーフレーム作成することで、実際のWebサイト制作やアプリの開発をスタートする前のイメージを具体的に可視化することができるので、制作・開発プロセスを効率的に進められるようになります。

また、視覚的なイメージを通して、レイアウトや配置要素をプロジェクトメンバーと共有できるので、すべてのメンバーが同じ目線でプロジェクトを進められるのもワイヤーフレームの魅力だと言えるでしょう。

この記事で学んだことを今後のワイヤーフレームの作成で実践してみてください。

ワイヤーフレームの作成なら「Miro」がおすすめ

オンラインワークスペースである「Miro」では便利なワイヤーフレームツールやワイヤーフレームテンプレート、ワイヤーフレームライブラリを使ってワイヤーフレームを効率的に作成できます。

また、Miro ではチームが離れた場所で業務を行っていても、いつでも同期・非同期でワイヤーフレームの作成ができます。

アカウント作成も無料なので、ぜひ Miro をワイヤーフレーム作成にご利用ください。

以下のリンクから製品ページをご覧いただけます。

◆ Miro のワイヤーフレームツール ◆ Miro の画面遷移図ツール ◆ Miro のワイヤーフレームテンプレート ◆ Miro のワイヤーフレームライブラリについて