ワイヤーフレームとは？具体的な作り方とおすすめツール

2024/10/04 00:00:00

Web制作

Webマーケティング

サイトリニューアル

Webサイト

wire frame

ウェブページの作成で欠かせないワイヤーフレーム。効果の高いウェブページを作成するなら、ワイヤーフレームの段階からしっかり作り込むことが重要です。

しかし、そもそもワイヤーフレームとは何なのか？どうやって作ればいいのか分からないという方も少なくないでしょう。

そこで、この記事ではワイヤーフレームの目的や具体的な作り方・おすすめのツールを分かりやすく解説します。

SNSマーケティング・SNS採用に関連するお役立ち資料をご用意しています

SNS運用のポイントや成功事例、最新トレンドなど、すぐに実践に活かせるノウハウを
詰め込んだ資料をご覧いただけます。

まずは、作成するページの目的やコンセプトを明確にしましょう。ページの内容は、コンセプトによっても大きく変わっています。コンセプトを明確にすることで、掲載すべき内容やレイアウト・デザインなどもイメージしやすくなるでしょう。

ワイヤーフレームとは

ワイヤーフレームとは、LPやウェブページの基本的な構成を線や枠で表現した設計図のことです。

どの情報を・どこに・どのように配置するのかを視覚的に表現しており、全体的なイメージの把握やコンテンツの過不足などを確認できます。
ワイヤー（wire/線）とフレーム（frame/枠）を組み合わせた言葉からきており、WFと略されることもあるので覚えておきましょう。

家を作る前に設計図を作成するように、基本的にウェブページを作成する際にはワイヤーフレームを作成します。
また、ワイヤーフレームでは全体の構成や配置を把握するのが目的のため、フォントや色といったデザイン要素は入っていません。

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

ワイヤーフレームと混同されやすい言葉に「モックアップ」「プロトタイプ」があります。それぞれ意味が異なるので違いを確認しておきましょう。

ワイヤーフレーム：
ウェブサイトの「骨組み」を表した設計図のようなもの。レイアウトやボタンの位置、テキストの配置などを簡単な図や線で示す。
色やデザインはなく、主に構造や情報の流れを確認するために使う。見た目はシンプルだが、サイトの基本的な構成を決める重要なステップとなる。
モックアップ：
ウェブサイトの「見た目」を重視したデザインのイメージ画像。色、フォント、画像などを使って、完成時のデザインを再現。
ただし、リンクやボタンは機能せず、あくまでビジュアルを確認するために使われる。デザインカンプとも呼ばれる。
プロトタイプ：
実際の動作を確認できる試作品。デザインやレイアウトだけでなく、リンクやボタンなどの機能も含まれるので、ユーザーの操作感をテストできる。
完成前にデザインや機能が実際にどのように動くかを確認し、問題点を見つけて改善するために使う。
プロトタイプは機能性、ワイヤーフレームは構造、モックアップは見た目にフォーカスしているのが特徴です。
ワイヤーフレームは誰が作る？
ワイヤーフレームは、Webディレクターやマネージャーといったプロジェクトの設計者が主導で作成するケースが一般的です。
Webページのターゲットや目的などの要件を元に、入れるべき要素などを考慮してワイヤーフレームを作り上げていきます。
ただし、ワイヤーフレームを作る人に明確な規定はなく、ケースによって異なります。
例えば、Web制作会社に委託する場合は、委託主が制作するケースや要望をヒアリングして制作会社側が作るケースもあるでしょう。
Webデザイナーやエンジニアが作成することも珍しくありません。また、一人で作成するのではなくチーム全体を巻き込んで作成することもあります。
ワイヤーフレームは、ウェブページの骨組みや指針でありデザインではありません。そのため、必ずしもデザインに精通している人が作成する必要はないのです。
ワイヤーフレームを作る目的
ウェブページ作成でワイヤーフレームが欠かせないと言われるのは、ワイヤーフレームが以下のような目的を持つためです。

・全体のレイアウトをデザインするため
・関係者間で情報を共有するため
・ワイヤーフレームをたたき台として議論するため

それぞれ解説していきます。

全体のレイアウトをデザインするため

ワイヤーフレームは、ページの目的を達成するために、「どのような要素を」「どこに掲載し」「どのように動作させるか」を決めるものです。

掲載する情報を整理・検討し、リンクの配置や数・入力フォームなどの設置といった仕様を決めるための大切な作業となるのです。

ワイヤーフレームを作成せずにページを作り込んでいくと、必要なコンテンツが漏れている・目的に合っていないなどで、後々大幅な修正が必要になる恐れがあるでしょう。ワイヤーフレームで全体のレイアウトを作っておくことで、効率よくウェブページの作成ができます。

関係者間で情報を共有するため

ウェブページ作成には、複数の関係者が関与するのが一般的です。例えば、ディレクター・デザイナー・エンジニアなどのほか、委託であればクライアントも関わってきます。

複数の関係者で作成していくため、ワイヤーフレームがなければ情報の共有が上手くできずに、認識のずれが生じやすくなってしまうのです。

仮に、クライアントの要望をワイヤーフレームに起こさずにデザイナーが作成していくと、いきなり完成したページを見せることになり、クライアントの要望と異なっているケースも珍しくありません。自社のみで作成する場合でも、ディレクターのイメージと相違があればやり直しという無駄な作業が発生することにもなるでしょう。

ワイヤーフレームを活用することで、関わる全員の認識を共有できスムーズに作成を進められます。

ワイヤーフレームをたたき台として議論するため

ワイヤーフレームはアイデア出しとしても活用できます。シンプルなデザインでレイアウトやコンテンツを決めていくので、大まかに作成しメンバーで意見を出し合い最終的に作り上げることが可能です。一人だけではなく複数の意見を出し合って作り上げることで、より目的達成しやすいページの作成にもつながるでしょう。

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

ここからは、具体的なワイヤーフレームの作り方を解説していきます。大まかな作り方は以下の5つのステップです。

1.LPやウェブぺージのコンセプトを明確にする
2.ぺージに掲載する要素を決める
3.要素の優先度を決める
4.レイアウトを決める
5.ワイヤーフレームを作る

以下で詳しくみていきましょう。

LPやウェブぺージのコンセプトを明確にする

まずは、作成するページの目的やコンセプトを明確にしましょう。ページの内容は、コンセプトによっても大きく変わっています。

コンセプトを明確にすることで、掲載すべき内容やレイアウト・デザインなどもイメージしやすくなるでしょう。

ぺージに掲載する要素を決める

コンセプトに沿って掲載すべき要素を決めていきます。例えば、ホームページのトップページであればロゴや連絡先・イメージ画像・キャッチコピー・ページメニューなどが必要になるでしょう。

商品購入が目的であれば、商品の詳細や購入ページへのリンク・キャンペーンなどの説明などが必要です。最初の段階で、思いつく限り要素を書き出してみることで掲載漏れを防ぎやすくなります。

要素の優先度を決める

要素を洗い出したら、優先順位を決めていきます。

一般的に、ウェブページは下に行くほどユーザーは見ない傾向にあるため、重要な要素は上部に配置することが重要です。

優先順位を決める際には、企業側がアピールしたいことだけでなく、ユーザーの気持ちになってどのような流れなら目的まで誘導できるかも考えるようにしましょう。

レイアウトを決める

優先順位が決まったら、実際のレイアウトを決めていきます。ウェブページの代表的なレイアウトには、以下のようなものがあります。

・フルスクリーン：画面いっぱいに要素を配置
・シングルカラム：縦一列に配置
・マルチカラム：二列以上で配置
・グリッド：タイル状に分割してタイルに沿って配置

適切なレイアウトはページの役割や掲載する情報量・想定デバイスによっても異なります。

レイアウトが決まったら、掲載する要素の優先度に応じて配置していきます。最初の段階では、手書きでざっくりと配置していくとよいでしょう。

基本的にユーザーは、Zの形で上から下にページを閲覧していくので、ユーザー目線で配置していくことも重要です。

また、ページが下に長すぎるとユーザーは離脱しやすくなります。情報量が多いと感じたら、下位ページに移すなども検討するとよいでしょう。

ワイヤーフレームを作る

レイアウトがまとまったら、ツールを利用してレイアウトをワイヤーフレームとして清書します。

手書きのままでも問題ありませんが、メンバー内や取引先と打ち合わせするならツールを使ってきれいに清書しておくほうが共有もしやすくなります。

また、ツールを利用してワイヤーフレームを作成しておけば、データとして残すことができ同じようなページを作成する際に効率よく作業できます。

ワイヤーフレームが完成したら、それをもとに本格的に作成をスタートしていきます。ただし、ワイヤーフレーム完成後にすぐに作るのではなく、少し時間をおいて見直す・メンバーの意見を聞くなどしてから作り込むことをおすすめします。

ワイヤーフレームを作る際に押さえておきたいポイント

ワイヤーフレームを作成する際には、以下の3つの点は押さえておきましょう。

競合サイトや参考サイトをしっかり分析する

どのようなレイアウトやコンテンツ配置にするかは、競合サイトなどを分析することで効果的にページが作成できます。

特に、ワイヤーフレーム作成に慣れていないと、どのようなレイアウトにすればいいのか悩むものです。

ワイヤーフレーム作成ツールの中には、テンプレートが用意されているものも多いので活用するのもおすすめです。

作り込み過ぎない

ワイヤーフレームは骨組みであり、デザインはワイヤーフレーム作成後に作り上げていくものです。

最初の段階で細かく作り込んでデザインまで指定してしまうと、デザイン作成段階で自由が利かずにデザインの幅が狭まってしまいます。

上司やクライアントに説明するにしても、デザインまで含まれると「色のイメージが違う」など本来のワイヤーフレームの意図とは違う部分で修正指摘される恐れもあるでしょう。

また、ワイヤーフレームの段階では手軽に変更できるようにしておく必要があります。

ワイヤーフレームは基本的に時間を多く割く必要もなく、線と枠・モノクロで作成したシンプルなデザインで十分です。

スマホ版とPC版を別々に作る

デバイスに最適なデザインであることも重要です。特に、近年はスマホでサイトを閲覧するユーザーも増えています。

スマホとPCでは画面の大きさ・縦横比が異なるため、パソコン画面のみを想定して設計していると、スマホで表示されたときにレイアウトが崩れて見えにくくなる恐れがあり、離脱されやすくなります。

少なくとも主要なページはスマホとパソコンに分けて、ワイヤーフレームを作成することをおすすめします。

ワイヤーフレームを作るのにおすすめのツール

ワイヤーフレームはツールを利用して作成すると、効率よく・分かりやすく作成できます。

ここでは、ワイヤーフレーム作成におすすめのツールを紹介します。

Adobe Photoshop

画像加工やイラスト作成などで利用されるPhotoshopは、ワイヤーフレームの作成も可能です。

Photoshopはテキストをデータとして残すことができ、さらに他のAdobeソフトとの共有も簡単なので、Web制作でAdobe製品をメインに使っている人におすすめです。

ただし、Adobeソフトを利用するための料金は必要になります。

エクセル

特別なツールを使わなくても、エクセルでも十分ワイヤーフレームの作成ができます。

普段からエクセルを利用している、ツールにコストをかけたくない・関係者が少ないといった場合は、エクセルでも十分でしょう。

ただし、共有先の環境やエクセルのバージョンによってはレイアウトが崩れやすいので注意が必要です。

パワーポイント

プレゼンツールとして代表的なパワーポイントも、ワイヤーフレームの作成ができます。

パワーポイントにはプレゼン用のデザインプレートやオブジェクトがエクセルよりも豊富にあるため、そのまま活用して作成することが可能です。

しかし、パワーポイントはスライドの幅などが限定されるため、本格的に作りたい場合は別のツールをおすすめします。

Figma

Web上でデザインできるツールであるFigma（フィグマ）は、ワイヤーフレーム作成の機能をほとんど有しているので簡単にワイヤーフレームの作成が可能です。

Web上で作成するため時間や場所を選ばず制作できるだけでなく、複数のメンバーで確認・編集がしやすい点もメリットです。

リモートワークや複数のメンバーで共有しながら作成するならおすすめです。

また、登録すれば無料で利用できるのも嬉しいポイントと言えるでしょう。

Adobe XD

Adobe社が提供するワイヤーフレーム制作のためのツールです。ワイヤーフレーム作成ツールとしては知名度が高く代表的なツールともいえるでしょう。

デバイスごとのテンプレートが用意されていて、操作性もシンプルで使いやすいという特徴があり、操作が苦手な人でもクオリティの高いワイヤーフレームを作成できます。また、Adobe XDをインストールしていない人でもワイヤーフレームの確認ができるので、情報共有もしやすいでしょう。

ただし、Photoshop同様、 Adobeソフトを利用するための料金は必要になります。

Cacoo
チームでワイヤーフレームを作成・共有するのにおすすめなのが、Cacco（カクー）です。複数メンバーでも編集可能でチャット機能もついているので、話し合いながらワイヤーフレームの作成ができます。編集権限の付与や個別管理等にも対応しているので、チームや外部のクライアントとも安全に情報を共有できるという特徴もあります。

無料期間は設けられていますが、無料期間を超えて使用する場合は料金が発生するので注意しましょう。