ワイヤーフレームとは？作り方や役立つツールを紹介

ワイヤーフレームとはWEBページ制作に必要な設計図のことです。ワイヤーフレームを作ることで、より効率的にWEBサイトを運営していくことができます。

この記事では

• ワイヤーフレームの意味
• 具体的な作り方
• 作成の注意点
• おすすめのツール

について解説していきます。この記事を読めば作成方法から注意点まで理解できるので、初心者の方でもノウハウを身に着けることができます。ぜひ参考にしてみてください。

ワイヤーフレームとは

ワイヤーフレームとは、WEBページ制作に必要な設計図のことです。WEBページにどんな要素を掲載するのか、コンテンツはどのように配置するのかなどといったレイアウトを考えていきます。

例えば、引っ越しをする際に新居のレイアウトを考えたことがないでしょうか。ソファーやテーブルの配置を考えていくように、テキストや画像、ボタンなどWEBページに必要な要素の配置を決めていきます。

ワイヤーフレームの役割

ワイヤーフレームには主に3つの役割があります。

①WEBページに必要な要素を確認する

ワイヤーフレームを作成することで、WEBページに必要な要素を確認できます。WEBコンテンツは以下のように様々な要素から成り立っています。

これらの要素はコンテンツやWEBページの目的に合わせて組み合わせるものです。また、コンテンツによっては不要になる要素も存在します。こうした要素を洗い出すことで、より目的を達成しやすいWEBページになります。

②導線を確保する

ワイヤーフレームの作成によって、導線を確保できます。導線とはユーザーをCVボタンまで導くための道筋のことです。導線を踏まえてコンテンツを作り込むことで、CV率の向上を期待できます。

自社サービスに申し込んでもらう方法の一つに、コンテンツマーケティングがあります。コンテンツマーケティングではユーザーの悩みを解決するようなコンテンツを作ります。そこで導線を確保するため、以下のように要素を並べていくと効果がありそうです。

このように導線を確保することで、WEBページのパフォーマンスを最大化できます。

③チーム内で完成形を共有する

ワイヤーフレームがあるとチーム内で完成形のイメージを共有できます。企業でオウンドメディアを運営する場合、コーダーやデザイナー、ライター、ディレクターなど複数のメンバーがチームとなって動きます。そこに設計図がなければ、それぞれ異なったイメージを持ってしまうでしょう。

特にコーダーやデザイナー、ライターなどはそれぞれの業務が他のメンバーの作業に関与する場合があります。認識の違いがあると手戻りが発生し、プロジェクトがスムーズに進行しないのです。

限られた時間の中で上手く進めていくためにも、イメージを共有することは重要です。

ワイヤーフレームは誰が作る？

基本的にはウェブ制作ディレクターが作ります。その他にはデザイナーやエンジニアがディレクター業と兼務で作ることもあります。

ワイヤーフレームは指示を出しのために必要なのものなので必要な時は作れる人が作成し、チームに対して意思疎通がスムースに行えるようにしておきましょう。

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

実際に作成する際は、以下のような手順で進めていくとスムーズです。

ここからは、それぞれの手順について解説していきます。

①ワイヤーフレームを作成するページを決める

はじめに、どのページでワイヤーフレームを作成するのか決めておきましょう。もちろん、各ページでその都度ワイヤーフレームを作成しても構いません。ただ、実際は限られた時間の中で効率的にWEB制作を行う必要があります。

そこで、優先度の高いページや量産ができるページから作成していきましょう。例えばキャンペーンページは、ユーザーからの申し込みに直接繋がるので優先度が高いです。一方、ブランディングや認知拡大を目的としたコラムのようなページは、一度作成すれば量産できます。

このようにページの優先度に合わせて設計図を作成していくと業務効率化に繋げられます。

②必要な要素を洗い出す

続いて制作するWEBページに必要な要素を洗い出していきましょう。洗い出す際は、思いつく順に書き出していけば構いません。目的を達成させるためにどんな要素が必要になるか考えていきましょう。

基本的には、コンテンツは大きく分けて3つの要素から成り立ちます。

さらにコンテンツによってメインコンテンツに画像やグラフを掲載したり、クロージングにCVボタンを設置したりします。

もしどんな要素が必要なのか分からない場合は、類似サービスのページを参考にするといいでしょう。

③優先順位を決める

書き出した要素に対し、優先順位を決めていきます。優先順位を決めることで、WEBページの目的を達成しやすくなります。

例えばサービスの申し込みを目的としたページなら、CVボタンの優先度が高くなります。一方認知拡大を目的としたコラムなら、サービス内容や企業の名前を強調する必要がありそうです。

④レイアウトを考える

必要な要素を並べてレイアウトを考えていきましょう。レイアウトにはいくつか型があるので、目的やコンテンツのボリュームに合わせて選ぶといいでしょう。

ここでポイントとなるのは、ユーザー離脱率について理解することです。WEBページは縦にスクロールして読むので、ページの下部に行くほど離脱率が高まっていきます。そのため、優先度が高い要素は上部に設置するなどの工夫が必要です。

⑤手書きでラフを書く

レイアウトを決めたら、手書きでラフを書いてみましょう。ラフを作ることで、ざっくりとした配置を決められます。大体の配置をイメージすることで、初めから作り込んでいくよりも早く仕上げられます。

ラフを作る際のポイントは、ユーザーの視線の動きを意識することです。ユーザーの視線の動きには、いくつかパターンがあります。

レイアウトや目的に合わせて使い分けると効果的です。

⑥ツールで作成する

ラフが出来上がったら、ツールを用いて作成しましょう。ツールを用いることで清書ができるので完成形をイメージしやすくなります。またツールによってはメンバーへの共有がスムーズになるでしょう。

また、データ化しておけば今後WEBページを制作する際に役立ちます。

ワイヤーフレーム作成における注意点

ワイヤーフレームを作成する際は、3つの注意点があります。

これらのポイントを把握することで、よりスムーズにWEBページを制作できるようになります。しっかりと確認しておきましょう。

書き込みすぎない

作成する際は書き込みすぎないよう注意しましょう。あらかじめ要素の配置を厳密に決めたり、デザインにこだわりすぎてしまうと、柔軟な対応ができなくなってしまいます。

ワイヤーフレームはあくまでWEBページに必要な要素を整理するためのステップです。実際のページ制作はデザイナーやコーダーが行うため、ある程度幅を持たせた方が調整しやすくなるのです。WEBのノウハウを持つデザイナーやコーダーに調整してもらうことで、よりユーザビリティの高いページになります。

もし初心者の方で、どこまで作り込めばいいか分からない場合は、デザイナーと相談しながら作成してもいいでしょう。回数を重ねるごとに、どの程度の完成度が求められているかが掴めてくるはずです。

サイト構造を決めてから作成する

WEBサイトの立ち上げやリニューアルの際は、サイト構造を決めてから作成しましょう。サイト構造とはページの階層を構成するもののことです。例えば、コーポレートサイトの場合以下のようなページが並列して構成されます。

こうしたページのうち、どこに掲載するのかを把握してページを制作しないと、テイストやトンマナがそろわなくなってしまいます。サイト全体で統一感を出すためにも、あらかじめ決めておきましょう。

スマホ版とPC版の2種類を作成する

スマホ版とPC版の2種類を合わせて作成しておくとスムーズです。最近ではスマホで検索するユーザーが増えてきました。もしスマホでPC版のデザインのまま表示されてしまうと、読みにくくなり離脱率が高まってしまいます。

多くのユーザーに閲覧してもらうためにも、2種類のレイアウトを考えましょう。もしスマホで閲覧するユーザーが多いのであれば、スマホ版を優先して作成することをおすすめします。

ワイヤーフレーム作成に役立つツール

ツールを用いるとより効率的に作成できるようになります。

ここからは、それぞれのツールの特徴について解説していきます。

Adobe XD

出典：Adobe XD

Adobe XDは、様々なWEBツールを開発しているアドビ株式会社がリリースした作成ツールです。

Adobe XDの特徴は、デバイスごとのテンプレートがあることです。スマホやPCなど媒体に合わせてデザインできます。

またツールの使い方を説明した動画もアップされています。こうした特徴から、初心者の方におすすめなツールです。

出典：Cacoo

Cacooは管理システム「Backlog」の運営で有名なヌーラボ社が開発した作図ツールです。

Cacooの特徴は、共同編集に関する機能が充実していることです。複数のユーザーが同時に編集できるのはもちろん、ビデオ通話やチャットもできます。

こうした特徴から、チームで作成したい人におすすめのツールです。

Adobe Photoshop

出典：Adobe Photoshop

Adobe Photoshopは、写真の加工ができるツールです。

Adobe Photoshopの特徴は、Adobeとのデータ共有が簡単であることです。テキストをデータとして残せるので、次の担当者への共有にも役立ちます。

こうした特徴から、Adobe製品をメインに使っている人におすすめです。

PowerPoint

出典：Microsoft

PowerPointはMicrosoftが提供している資料作成ツールです。

PowerPointはプレゼンテーション資料に使うイメージが強いかもしれませんが、ワイヤーフレーム作成にも有効です。office製品と操作性が同じなので、普段PowerPointやExcelを使用している人なら簡単に作成できます。

そのため、親しみのあるツールを使いたい人におすすめです。

まとめ

この記事ではワイヤーフレームについて紹介しました。WEBページのKPIを達成させたり、チームで認識を共有したりするにはあらかじめ設計図を作ることが重要です。そのためには、必要な要素を洗い出し、優先順位を決めるといったステップが必要となります。

また、ワイヤーフレームを作成する際はツールを使うと便利です。これから作成しようと考えている方は、ぜひ今回ご紹介したツールを活用してみてください。