多くの経営者に選ばれて３冠達成高品質なホームページが39,800円(税別) 最短3営業日でホームページ開設業界最安値月額5,000円詳細はこちらをクリック

トップ
Web知識
ワイヤーフレームとは？作り方を6ステップでわかりやすく解説

ワイヤーフレームとは？作り方を6ステップでわかりやすく解説

ワイヤーフレームとは、導線を用いた枠組み、つまりWebぺージ作成の前段階となるシンプルな線や枠で示されたレイアウトを指します。

Webページをどのような構成にするのか、あらかじめ設計できるため、その図面をもとに開発を進められます。スムーズなWeb制作にワイヤーフレームは欠かせません。

そこでこの記事では、ワイヤーフレームの概要や作り方について解説します。作成時の注意点についても解説しますので、ぜひ参考にしてください。

業界最安値の月額5,000円
多くの経営者に選ばれて3冠達成
SNSとの連携もOK！
2,000を超える制作実績
検索に強くなるSEO対策付

ワイヤーフレームとはレイアウトを線や枠で示した設計図
ワイヤーフレームとディレクトリマップ・デザインカンプとの違い
ワイヤーフレームの作り方6ステップ
ワイヤーフレーム作成に役立つおすすめツール
ワイヤーフレームを作成する時の注意点
まとめ：ワイヤーフレームはWebサイトの重要な骨組みになる

ワイヤーフレームとはレイアウトを線や枠で示した設計図

ワイヤーフレームは、レイアウトを線や枠で示した設計図のこと。作成することで、Webページのどこにどの情報を掲載するのかなどのコンテンツ配置を決定させられます。

効率的なWebぺージ作成を進めるために、デザイン作成の前段階として欠かせません。

また、Webぺージ作成後に発生する修正工数の削減にもつながります。

ワイヤーフレームとディレクトリマップ・デザインカンプとの違い

Webぺージ作成において、役割が似ていることからよく間違えられる2点について解説していきます。

ワイヤーフレームとディレクトリマップとの違い
ワイヤーフレームとデザインカンプとの違い

ワイヤーフレームとディレクトリマップとの違い

ワイヤーフレームとディレクトリマップは、Webサイトにおいて示すものに違いがあります。

ワイヤーフレームは、Webぺージのレイアウトであることに対して、ディレクトリマップはサイト全体の要素をリストアップした表のようなものです。

ディレクトリマップを用いると、どこのページにどのような情報があるのか把握しやすくなるでしょう。

ワイヤーフレームとデザインカンプとの違い

ワイヤーフレームとデザインカンプは、Webぺージ作成の役割に違いがあります。

ワイヤーフレーム：Webページの大まかな枠組みや構成を可視化
デザインカンプ：デザインやレイアウトを含めた仕上がりを具現化

よって、ワイヤーフレームはデザインカンプよりも前に行われ、枠組みが完成したらデザインカンプでデザインも含めて実際の完成形を形造ります。

デザインカンプで、実際の仕上がりを細かく確認できますし、複数パターンを用意しておけば、理想のイメージに近いぺージを作成できるでしょう。

ワイヤーフレームの作り方6ステップ

では、ワイヤーフレームの作成手順を6ステップで紹介します。

ホームぺージのコンセプトを言語化する
ぺージに必要な要素を洗い出す
レイアウトを決める
要素の配置・順番をスケッチする
ツールを活用して清書する
清書したレイアウトを見直す

ホームページのコンセプトを言語化する

まずは、ホームページのコンセプトを言語化しましょう。

何を目的としているのか、ユーザーにどのような行動を取ってもらいたいのかなど、ワイヤーフレーム作成前に明確にすることが大切です。

コンセプトが明確になれば、Webぺージに必要な情報や情報の優先度も自ずと浮かび上がるでしょう。

ページに必要な要素を洗い出す

ぺージに必要な要素を言語化したコンセプトを元に洗い出します。

例えば、Webサイト全体のイメージとなる画像や、ユーザーの商品購入を促すための商品説明などが挙げられます。

もし、自社のWebぺージにどのような要素が必要なのか洗い出すのが難しい場合は、一旦思いついた情報をすべてリストアップしましょう。その後に情報の整理をして、必要な要素を取捨選択してください。

レイアウトを決める

要素の配置やスケッチに取り掛かる前に、レイアウトを決めることが大切です。レイアウトには以下のようにさまざまな種類があります。

サイドバー固定型：ぺージのサイドにメニューを固定表示させられる
マルチカラム型：いくつかの縦列で形成され、重要な情報を強調させられる
フルスクリーン型：シンプルな構成でぺージ全体に情報を表示させられる
タイル型：タイルのようにコンテンツを配置するため情報が探しやすい
カラム型：縦に情報が並んでおり、よくスマートフォンのレイアウトで使用される

掲載する情報の種類やユーザーがPCとスマートフォンどちらを使用しているのかなど、複数の要素から最も適したレイアウトを選択しましょう。

要素の配置・順番をスケッチする

レイアウトの次は、どの要素をどこに配置するのかを決め、順番通りにスケッチをします。

要素の配置時は、ユーザー目線になり何を求めているのか、何に興味があるのかを想定すると、優先順位がわかりやすくなります。

また、基本的にWebぺージは、上から下にスクロールされるため、上部にある情報が見られやすいです。ユーザーに伝えたい重要な情報をページの最上部に配置しましょう。

ツールを活用して清書する

ここまでの工程が完了したら、実際にツールを活用して清書に取り掛かります。

清書自体は手書きで行うこともできますが、編集や共有ができる点を考えるとツールの活用がおすすめです。

また、一度ツールにより清書を完成させるとデータで保存できるため、今後のワイヤーフレーム作成にも活かせるでしょう。

清書したレイアウトを見直す

清書が完成したら見直しを行い「レイアウトはこのままで良いのか」「コンセプトや理想のぺージどおりにワイヤーフレームは作成できているのか」を確認しましょう。

レイアウトの見直しは、効果的なWebぺージ完成において非常に大切です。コンテンツの追加や修正箇所があるなら、手を加えてよりいいWebぺージの作成に努めましょう。

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

ワイヤーフレームの作成は、効率よく進めるならツールの活用がおすすめです。

中でも役立つおすすめのツールを7つ紹介します。

Figma
AdobeXD
POP
CACOO
Sketch
Excel
PowerPoint

Figma

料金プラン	スターター：無料プロフェッショナル：2,250円/月ビジネス：6,750円/月エンタープライズ：11,250円/月
機能	ワイヤーフレームの共有
無料トライアル	〇
公式サイト	https://www.figma.com/ja/wireframe-tool/

Figmaは、複数人がリアルタイムで同時に作業できるという特徴があります。

ワークフローを効率的に保つだけでなく、全体で共有できることにより最適なワイヤーフレームの完成が期待できるでしょう。作成デザインも豊富に取り扱われており、目的に適したものを選択してワイヤーフレーム作成に取り掛かれます。

Adobe XD

料金プラン	個人向け：6,480円/月学生・教職員向け：1,980円/月法人版：4,380円/月
機能	‐
無料トライアル	〇
公式サイト	https://www.adobe.com/jp/

Adobe XDは、ワイヤーフレーム作成が簡単かつ迅速に行えるツールです。

複数のアートボードをつなぐことも可能で、ワイヤーフレーム作成に携わる関係者との共有ができます。

また、プラグインをすれば自動化させられる作業も一部あるため、業務の効率化が図れるでしょう。

POP

料金プラン	無料：0円/月プロ：約1,278円/月チーム：約5,964円/月企業：要問い合わせ
機能	テンプレートあり
無料トライアル	〇
公式サイト	https://marvelapp.com/pop/

POPは、スマートフォンのワイヤーフレーム作成に適しており、とても人気を集めています。紙に書いたワイヤーフレームを読み取ると、ツールが自動でワイヤーフレームを形成してくれます。

紙に書いた後にツールでもう一度作成するといった二度手間もなくなり、業務でかかる負担は削減できるでしょう。

CACOO

料金プラン	プロプラン：660円/月チームプラン：1,980円/月
機能	データの一元管理
無料トラアイル	〇
公式サイト	https://cacoo.com/ja/home

CACOOは、テンプレートも豊富にあるためデザインやワイヤーフレーム作成の経験が浅い方でも利用しやすいことが特徴です。

マニュアルいらずのシンプルな操作性も特徴の1つで、初めて利用する方でも綺麗なワイヤーフレームが作成できるでしょう。

アカウントの2段階認証にも対応しており、大切なデータを安全に管理できます。

Sketch

料金プラン	標準サブスクリプション：約1,492円/月 Macのみのライセンス：約17,040円/月ビジネスサブスクリプション：約2,840円/月
機能	カスタマイズ可能
無料トライアル	〇
公式サイト	https://www.sketch.com/

Sketchは、縦長のデータをいくらでも作成できます。

Webぺージのほとんどは縦長のものが多く、逆に分割されていると見づらいことからユーザーの離脱率が高まる可能性があります。

しかし、Sketchは現在のWebぺージの特徴に適しており、デザイナーとの情報共有もできるため円滑にワイヤーフレーム作成ができるでしょう。

Excel

料金プラン	ベーシック：750円/月スタンダード：1,560円/月プレミアム：2,750円/月ビジネス：1,030円/月
機能	スプレッドシートのデジタル化
無料トライアル	〇
公式サイト	https://www.microsoft.com/ja-jp/microsoft-365/excel

Excelは、ツール不要のため多くの方が利用できます。

また、その他のツールと比較してコストがかからないため、ワイヤーフレーム作成にコストをかけたくない方にはおすすめです。

しかし、データ共有はできても同時に作業はできないので注意しましょう。

PowerPoint

料金プラン	ベーシック：750円/月スタンダード：1,560円/月プレミアム：2,750円/月ビジネス：1,030円/月
機能	共同作業
無料トライアル	〇
公式サイト	https://www.microsoft.com/ja-jp/microsoft-365/powerpoint

PowerPointは、Excel同様に多くのPCでインストール可能なため利用しやすいでしょう。

図形の配置に優れているため、作成するワイヤーフレームの種類によっては適したツールである可能性もあります。

しかし、編集を行えるのは1人ずつになるので、デメリットがあることも把握しておく必要があります。

ワイヤーフレームを作成する時の注意点

ワイヤーフレームを作成するにあたって、以下6つの注意点を紹介します。

ディレクトリマップを作成してから着手する
各要素の理由・目的を明確にする
デザイン要素は含めない
事前にリサーチや競合分析を入念にする
スマートフォンとPCは別途で作成する
シンプルなワイヤーフレームを作成する

ディレクトリマップを作成してから着手する

ワイヤーフレームは、ディレクトリマップを作成してから着手しましょう。ディレクトリマップを作成すると、必要なぺージやコンテンツを確定させられるため、ワイヤーフレームが効率的に作成できます。

反対に、何も確定していない状態でワイヤーフレーム作成に取り掛かると、完成後のコンテンツ追加や修正が増えかねません。全体の作業を効率化させるには、ワイヤーフレーム作成前のディレクトリマップが大切です。

各要素の理由・目的を明確にする

ワイヤーフレームの作成時には要素の洗い出しを行いますが、各要素の理由や目的を明確にさせる必要があります。

「このコンテンツはユーザーに必要なのか」「各要素の優先順位はユーザーに寄り添っているのか」など、ユーザーの目線に立って取り入れる理由や目的を明確にしましょう。

デザイン要素は含めない

デザインの要素は含まずに、ワイヤーフレームを作成しましょう。必要な情報やその配置を考える工程の中で、Webぺージのデザインについても考えるかもしれません。

しかし、事前にデザイン要素を含めてしまうと、構成の変更があった際にデザインも一から変更が必要になり二度手間になります。

しかし、枠組みだけの作成なら、後から修正が必要でも完成まで作業を短縮できます。

事前にリサーチや競合分析を入念にする

事前にリサーチや競合分析を入念に行うことが大切です。

基本、競合企業のWebサイトにはあるものの自社サイトになければ、コンテンツの品質で勝負できません。そこで競合分析やリサーチを行えば、他のサイトに勝つための施策を把握・発見できるでしょう。

また、ワイヤーフレーム作成において、何が必要なのかわからない場合があるかもしれません。その際に競合分析を行っていれば、コンテンツやその配置を参考にして自社で作成するワイヤーフレームの大まかなイメージを固められるでしょう。

スマートフォンとPCは別途で作成する

スマートフォンとPCのワイヤーフレームは、別途作成しましょう。

スマートフォンはPCと比べて画面が小さいです。そのため、PCで作成したワイヤーフレームをスマートフォンで確認すると、レイアウトが崩れたり見づらいデザインになったりする可能性があります。

レスポンシブデザインでの作成が基本のため、それぞれのデバイスで表示された時を想定して最適化させることが大切です。

シンプルなワイヤーフレームを作成する

ワイヤーフレームは、シンプルに作成する必要があります。

ワイヤーフレームは、Webページのレイアウトを決めるものです。細かいデザインやレイアウトまで決めてしまうと、余計な時間がかかってしまいます。

複雑化したワイヤーフレームは、その通りに実装できないかもしれません。

シンプルにすることで、開発フェーズを進行しやすくなります。

まとめ：ワイヤーフレームはWebサイトの重要な骨組みになる

ワイヤーフレームは、Webぺージのレイアウトを線や枠で示したものを指します。コンテンツ配置やユーザーに効果的なWebぺージ作成を効率的に行う上でとても大切です。

このように、ワイヤーフレームはWebサイトの重要な骨組みとなるので、この記事で紹介したおすすめツールを活用して効率的にワイヤーフレームを作成しましょう。