ワイヤーフレームとは？制作までの4STEPや注意点を解説【初心者向け】

「ワイヤーフレームとは？」
「ワイヤーフレームを実際に作る手順を知りたい」

と、思うことはありませんか？

ワイヤーフレームは、Webサイト上でユーザーに情報を伝えやすくする大事な要素です。

では、ワイヤーフレームを作るにはどのような手順でおこなえばいいのでしょうか？

そこで今回は、

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

この記事を読めば、ワイヤーフレームについて理解が深まり、クライアントから喜ばれるWebサイトを作成できるようになります。

ぜひ最後まで読んでみてください。

ワイヤーフレームの定義や役割を解説

ワイヤーフレームは、これからWebサイトをやアプリを制作する人にとって必要な知識です。

まずは、以下の2つを解説していきます。

上記について理解することで、ワイヤーフレームについて理解が深まります。

それぞれみていきましょう。

1.ワイヤーフレームの定義

ワイヤーフレームは、Webサイトを作成するうえでコンテンツの配置を決める設計図です。

例えば、部屋の間取りを見て家具の配置を決めるように、コンテンツをどこに置くか決めておくことです。

具体的には

などを、サイト内のどこに配置するかを決める際に用いられます。

ワイヤーフレーム専用のツールを使用して、設計することが多いです。

2.ワイヤーフレームの役割

ワイヤーフレームを決定することで、制作側・クライアント側の両者が完成のイメージが湧きます。

もしワイヤーフレームを決定していなければ、デザインありきのコンテンツを決めることになり、入れるべきコンテンツが入れ込めず、必要なコンテンツが足りていないWebサイトになってしまいます。

依頼内容とかけ離れたものが納品されると、クライアントは満足してくれないため、ワイヤーフレームはWebサイト作成に欠かせないツールです。

WEBデザイナーを目指すなら必要なプログラミングスキル。
自分もプログラミングを学習してみたい！と思った方には、初心者でも確実にプログラミングスキルが身につく【DMM WEBCAMP】がおすすめです。

97%以上の受講生がプログラミング初心者からのスタートであるため、ライフコーチによる手厚い学習サポートが受けられます。
また、プログラミングの基礎知識からしっかり身につけられるコースも用意されており、安心して学習を進めていくことが可能です。

---

「今の働き方に不満はあるけど、日々の業務が忙しくてゆっくり考える時間がない…」
そんな悩みを持つ方に向けて【DMM WEBCAMP】では無料のキャリア相談を実施しています。
ビデオ通話で相談をすることができるため、仕事で忙しい方でもスキマ時間に気軽にカウンセリングを受けることも可能です！
プロのキャリアカウンセラーと一緒に、今後のキャリアについて考えてみませんか？

ワイヤーフレームと混同される3つについて解説

よくワイヤーフレームと混同されるものが3つあります。

Webサイトやアプリを制作するなら、どれも関わることになるので覚えておきましょう。

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

1.デザインカンプ

デザインカンプとは、デザインやレイアウトを含めたすべての要素が揃った、完成見本のことです。

ワイヤーフレームの時点では、コンテンツの配置を決めているだけなので画像や色の詳細までは決定していません。

デザインカンプは、ワイヤーフレームや構成案を元にして作成します。

2.ディレクトリマップ

ディレクトリマップは、Webサイト内にある全ページの情報が網羅した一覧表です。

具体的には、ページ内の全てのURL、またそのタイトルや内容をまとめています。

ページを詳細にリストにすることによって、不要なページ・必要なページを明確にすることができます。

制作するWebサイトにとって、最適な情報選択をする大事な要素です。

3.サイトマップ

サイトマップは、サイト上のリンクページや動画などのファイルに関するデータ、各ファイル同士の繋がりを伝えてくれる資料のようなものです。

情報量の多いウェブサイトや、メディアはサイトマップを作成することで、ユーザーが使用しやすいサイトを制作することができます。

企業側もサイト内全体の構成を把握することができるので、より良いWebサイト制作することが可能になります。

ワイヤーフレーム作成までの4STEP

ワイヤーフレームを作成するまでの4STEPを解説します。

ワイヤーフレームをいきなり作成する前に、きちんと準備をおこないましょう。

【STEP1】情報のピックアップ＆優先順位の決定

ワイヤーフレームの工程で配置する情報をすべて洗いだして、優先順位の高いもの、低いものに分けてリストアップしておくことです。

そうすることで、後々のレイアウトの効果的な配置につながります。

【STEP2】サイトマップを作る

サイトマップの作成は、個別のページに漏れや重なりがないかをチェックするため、ワイヤーフレーム決定する前に制作しましょう。

サイトマップが作りたいホームページの全体像を示すという機能をしているからです。

いきなりワイヤーフレームを書き始めて、後から新しいページが追加になったり、削除したりするときは、ワイヤーを書き直さなければならず、手間になってしまいます。

【STEP3】ページにレイアウトを決める

Webサイトに何の情報を入れたいのか、どのページに繋げるのか全体の構成ができたらレイアウトをしましょう。

レイアウトは、「どのような目的で作るのか」を考えながら配置していきます。

既存のパターンがあるので、目的によって使い分けるのがコツです。

パソコンや、スマホなどデバイスによってレイアウトを決めておきましょう。

【STEP4】ワイヤーフレームを作成する

これまでの3ステップをおこなった上で完成したレイアウトの下書きを、ワイヤーフレームの作成ツールで綺麗に完成させます。

ワイヤーフレームの作成ツールを使っていきなり作成するのではなく、今回の4ステップの手順を踏んで作成することで、Webサイトをスムーズに進められるワイヤーフレームが作成できます。

これからWebサイト制作を仕事にしていきたい人はぜひおさえておきましょう。

スキマ時間に効率よくプログラミングを学習したいという方には、プログラミングスクールがおすすめです。

受講料はかかってしまいますが、短期間で効率よくプログラミングスキルを習得することが可能です。
【DMM WEBCAMP】なら、初心者向けに開発された独自のカリキュラムと充実した学習サポートで、挫折することなくプログラミング学習を進めることができます。

また、学習を進めていく中で分からないことが出てきたときは、 チャットもしくはビデオ通話でメンター（講師）に好きなだけ質問をすることができます。

オンラインと教室受講のどちらも可能なので、あなたのライフスタイルに合わせて好きなコースを選択してみてください。

---

「今の働き方に不満はあるけど、日々の業務が忙しくてゆっくり考える時間がない…」
そんな悩みを持つ方に向けて【DMM WEBCAMP】では無料のキャリア相談を実施しています。
ビデオ通話で相談をすることができるため、仕事で忙しい方でもスキマ時間に気軽にカウンセリングを受けることも可能です！
プロのキャリアカウンセラーと一緒に、今後のキャリアについて考えてみませんか？

ワイヤーフレームを作成するときの3つの注意点

ワイヤーフレームの作成をスムーズにおこなうための3つの注意点を解説します。

ワイヤーフレームは、クライアントとのコミュニケーションをスムーズにするためのツールなので、クライアントの立場に立って、作成するようにしましょう。

それぞれの注意点を解説していきます。

1.スマホ版を先に作る

Webサイトのワイヤーフレームを作る時の注意点はスマホ版を先に作成します。

なぜなら、スマホ版のワイヤーフレームがパソコン版に比べて入れることができる情報が少ないからです。

つまりワイヤーフレームが効率良く作成したい時は、項目を厳選したスマホ版を先に作り、パソコン版を制作する時にはそれに情報足していきます。

そうすれば無駄な時間を使うことはありません。

なので、ワイヤーフレームを作成するときは、スマホ版を先に作りましょう。

2.作成時点でコンテンツを入れ込む

ワイヤーフレーム作成時点で、先にコンテンツを入れ込んでおきましょう。

なぜかというと、大まかなワイヤーフレームのみを先に完成させてしまうと、後でコンテンツを盛り込んだときに、ワイヤーフレームとコンテンツに大きなギャップが生じることがあるからです。

具体的には、以下のようなギャップが生じてしまいます。

このような事態を防ぐためにも、コンテンツをあらかじめ入れておきましょう。

3.色やデザインは不要

デザインの下書きではないので、色、デザイン要素は不要です。

ワイヤーフレームでは、どこに、どの情報を配置するかが重要です。

色やデザイン要素を足してしまうと、顧客に固定観念を植え付けてしまい、要望を取り入れにくくしてしまいます。

具体的には、情報を整理、把握できれば良いので、フレームや線、文字だけで内容が理解できる程度で十分です。

ただし顧客の経験が浅く、具体案が浮かばない時等は例として提示することはあります。

Webデザインに必要な基礎知識3つを解説！ツールやおすすめの本7選も紹介

ワイヤーフレームの代表的な2種類

ワイヤーフレームには、いくつか種類がありますが、代表的な2つを紹介します。

ユーザーに何を伝えたいのかによって、使い分けてください。

それぞれの種類について紹介していきます。

1.カラムレイアウト

Webサイトの制作においての段組のことを、カラムといいます。

段組をすることで、情報を整理し目的が伝わりやすくなるのです。

カラムレイアウトはサイドバーがなく、基本的に上下のスクロールしか進行方向が無いレイアウトのことです。

このように、カラムを増やしてデザインを変更することができます。

Webサイトの情報量によって、カラムの数を変えることがポイントです。

2.カード型レイアウト

カード型レイアウトとはレイアウトデザインにおける代表的なパターンの一つで、コンテンツの多いWebサイトによく用いられます。

トランプのカードのように整然と並べられたコンテンツは、全体の統一感もありユーザーにも見やすく直感的に分かりやすいからです。

トランプのカードを選ぶようにユーザーが見たいカードをクリックするだけで、リンク先の内容へ誘導することができます。

ユーザーが豊富な選択肢の中からコンテンツを選ぶ必要がある場合は、使い勝手のよいデザインレイアウトといえますね。

ワイヤーフレームにおすすめのツール4つ

ワイヤーフレームの作成におすすめのツールを4つ紹介します。

特徴を比較しながら選択してください。

それぞれのツールを解説していきます。

1.Prott

Prottは素材をドロップ、ドラックするだけで、簡単にワイヤーフレームを作成できるものです。

各種機能が揃っているので、初心者でも使用可能なツールです。

具体的には、スマートフォンのパーツが充実しており、アプリの作成に必要なワイヤーフレームがあります。

また、Prottのアプリを使用すればスマートフォンからプロトタイプを確認する事ができます。

2.Adobe XD

デザインの作成、プロトタイプの作成、共有コメントといった3つの作業を効率よく行えます。

チーム同士や、クライアントととのやりとりもスムーズにできる事がおすすめです。

このような特徴があり、自分のサイズに合わせて設定する必要がなくなります。

3.Cacoo

Cacoohaはインターネットさえあれば、いつでもどこでもリアルタイムを共有できます。

特徴としては、以下のようなものがあります。

作業も簡単で、クライアントとスムーズに共同作業をおこなえるツールです。

4.Sketch

Sketchは、WebデザインやUIデザインに向いているMacbook専用のツールです。

このような特徴があります。

ツールとして、とても優秀ですがWindowsには使用できないので、よく確認してください。

ワイヤーフレームツール選びの3つの注意点

ワイヤーフレームを選ぶ際には下記の3つのポイントを意識しておきましょう。

ワイヤーフレームは、クライアントと共同編集をおこなうことがほとんどです。

要するに、制作側が利用しやすいツールではなく、クライアント側のことも考慮したツールを選ぶ必要があります。

まとめ：ワイヤーフレームはクライアントとの意思疎通に必要なもの

本記事では、ワイヤーフレームについて解説しました。

クライアントとしっかり完成イメージの方向性を決めて、WEB サイトやアプリの制作をおこないましょう。

そうすることでユーザーにとっても、魅力的なコンテンツになります。