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

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 のワイヤーフレームライブラリについて