WEBサイト制作にはワイヤーフレームが必要！作り方やポイントを解説

ワイヤーフレームとは、WEBサイト制作をする前に情報をまとめて目に見えるようにするものです。

ワイヤーフレームを作成するかしないかで、WEBサイトのクオリティに大きな差が出るといわれています。

 

ここでは、ワイヤーフレームの概要と役割、ワイヤーフレームと間違いやすい言葉などについて細かく解説します。

 

ワイヤーフレームとは何か

ワイヤーフレームは、WEBサイトをレイアウトする「設計図」です。

 

WEBサイト内のどこに、どの項目を、どのように配置するかの情報をまとめたレイアウトを指します。

ワイヤーは「線」、フレームは「枠」を意味しており、その名の通り簡単な線と枠で作成します。

 

ワイヤーフレームにシンプルなテキストや画像を効果的に配置すると、誰もが構成を視覚で理解できるようになります。

 

ワイヤーフレームは、デザインやコーディングなどの作業前に作成するのが基本です。

WEBサイト上の配置や機能について確認できるようになると、全体的なイメージを把握できやすくなり、実際の作業に入ってからのトラブルを防げます。

 

ワイヤーフレームにはグラフィック要素は含まず、本格的な作業をする前の状態を表します。

 

ワイヤーフレームの役割とは

ワイヤーフレームの役割は、WEBサイトの完成イメージを視覚で把握できるようにすることです。

 

以下の3つを決めることで、複数の人やクライアントとイメージが共有できるようになります。

 

Where（どこに）…画面の上下、左右などの位置を決める What（何を）…ロゴやメニュー、コンテンツなどを決める How（どのように）…リンクなどの仕様を決める

 

ワイヤーフレームには、個人の認識の相違によるトラブルを防ぐ役割があります。

 

webサイトの作成を業者に依頼する場合は、関係者全員に共通認識を持ってもらい、スムーズに制作してもらうのが重要です。

そのためにも、意思疎通がしやすいワイヤーフレームが必要不可欠といえます。

 

ワイヤーフレームと間違いやすいものは

ワイヤーフレームと間違いやすい言葉は以下の5つです。

デザインカンプ ディレクトリマップ サイトマップ モックアップ プロトタイプ

 

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

 

デザインカンプ

デザインカンプは、WEBサイトのデザイン案・完成イメージのことです。

一般的に、複数のデザインカンプをクライアントに示し、クライアントは1番イメージに近いデザインを選びます。

 

ワイヤーフレームが「設計図」だとすると、デザインカンプは「完成の見本」といえるでしょう。

 

モックアップ

モックアップは、デザインカンプと同じ意味で使われます。

 

モックアップは「実物大の模型」という意味を持っており、制作現場では完成イメージを表す言葉とされています。

 

ディレクトリマップ

ディレクトリマップとは、WEBサイトのすべてのページ情報の一覧です。

ワイヤーフレームはWEBサイトにおける単体のレイアウトを決めるものですが、ディレクトリマップはWEBサイト全体のページ配置と使用を決めるものです。

 

WEBサイトのURLやタイトルをまとめて一覧にし、すぐに情報がわかるように整理します。

 

サイトマップ

サイトマップは、WEBサイト全体の配置を示します。

ワイヤーフレームは制作作業前に必要なのに対し、サイトマップは制作後のWEBサイト運用時に使用されます。

 

プロトタイプ

プロトタイプは、動作確認のための「試作品」という意味です。

制作物の操作性や機能について確認するツールになります。

 

ワイヤーフレームを作成する際には、正しい順序で行う必要があります。

 

ここでは、具体的な作成の流れとともに、よく使用される用語なども説明していきます。

ぜひ作成時の参考にしてみてください。

 

サイトのコンセプトを決める

まずは、WEBサイトのコンセプトを決めることが大切です。

どんなWEBサイトを作るかによって、掲載する内容や優先順位が変わります。

 

製品を認知してもらうためのコーポレートサイトなのか、商品の販売促進のためのサイトなのか、顧客からの信頼を向上させるためのサイトなのか。

 

何をコンセプトにするかによって決め、現状の分析をしなくてはなりません。

 

そのためには、ワイヤーフレームが含まれるページが、どのようなコンセプトで、どんな内容を掲載するのかをしっかりと決めましょう。

 

情報の整理

コンセプトが明確になったら、ワイヤーフレームに配置する情報をまとめましょう。

情報を整理する際は、「ピックアップ、グルーピング、ランキング」の順番で進めます。

 

ピックアップ

ピックアップは、WEBサイトに載せる情報をすべて書き出すことです。

「電話番号」「画像」「文章」「ロゴ」「広告」など、必要だと思う情報をリストアップしましょう。

 

ピックアップの時点ではまとまっている必要はなく、思いつくものはすべて書き出します。

必要な情報が抜けないように意識することが大切です。

 

思い付かない場合は、競合サイトを参考にしてみましょう。

 

グルーピング

グルーピングは、ピックアップで書き出した情報を似たような性質のグループに分けることです。

 

同じグループの情報は、ワイヤーフレーム上の近くに配置します。

（例：電話番号と住所、ロゴと会社名など）

 

しっかりとグループ分けをしておくと、情報が分散してわかりにくいという状況を避けられます。

 

ランキング

ランキングは、グルーピングした情報に優先順位をつけることです。

グループごとだけではなく、グループ内にも適切な優先順位をつける必要があります。

 

優先順位が高い情報ほど、ワイヤーフレームでは目立つ場所に配置しましょう。

 

優先順位が低い情報はページ上に載せる必要があるかどうかを検討し、取捨選択する必要があります。

 

レイアウトの確定

掲載情報が決まったら、レイアウトを確定します。

レイアウトとは、文字や写真をWEBサイトに配置することです。。

 

代表的なレイアウトは以下の通りです。

 

【シングルカラム】

列を縦に並べていくレイアウト。

スマホやタブレットと相性がよく、スクロールがしやすいのが特徴です。

 

【マルチカラム】

ページを複数に分割するレイアウト。

代表的なのは、バナーエリアの3カラムやメニューとマインコンテンツの2カラムです。

実用性が高く、多くのサイトに使用されています。

 

【グリッド型】

カードを並べたようなレイアウトです。

画像を多く見せられるため、ECサイトでよく使用されています。

SNSでも人気の高い傾向にあります。

 

【フルスクリーン型】

ブラウザの画面いっぱいに写真や動画を表示したデザインのレイアウトです。

ブランドイメージを思い切り出せるのが特徴で、各種プロダクトの紹介ページにもよく使用されています。

では、レイアウト時に使用される用語についても見ていきましょう。

 

ヘッダー

ヘッダーはWEBサイトの上部を指します。

閲覧者が最初に目にするものなので、会社のロゴやタイトル、メインとなるビジュアルを入れます。

 

ヘッダーはweb内のどのページにも表示されます。

 

フッター

フッターはWEBサイトの下部を指します。

普段はあまり必要ないが、重要な情報がまとめて配置されることが多いです。

（例：会社概要、規約など）

 

グローバルナビゲーション

グローバルナビゲーションは、WEBサイト内のすべてのページに設置されるメニューを指します。

どのページからもアクセスできるため、特に重要なページへのリンクを設置しておくとよいでしょう。

 

コンテンツ

コンテンツとは、そのページのテーマを伝える部分です。

閲覧者に伝えたいことを読んでもらうために、文章や画像、動画、表などを駆使して作成します。

 

サイドバー

サイドバーは、コンテンツの横に設置されるものです。

プロフィールページに移動できるものやカテゴリー、関連記事、最新記事などを自由に配置できます。

 

グローバルナビゲーションで足りない部分を配置したり、コンテンツに掲載するほど優先順位が高くなかったりするものなど、用途に合わせて使用しましょう。

 

カラム・ロー

カラムは「列」、ローは「横のライン」を指します。

 

ワイヤーフレームを作成する際には、カラム数をどのくらいにするかを決めるとよいでしょう。

（例：メインコンテンツの横にサイドバーがある場合は、縦に2列になるため、2カラムのWEBサイトになる）

 

閲覧したユーザーが見やすいページになるように意識することが大切です。

 

下書き

ワイヤーフレームを作成する際は、まず下書きをしましょう。

紙と鉛筆で思いつくまま描くのがおすすめです。

 

まずは選んだレイアウトを描き、その中に情報を配置します。

 

書き込みながら、いらない情報を削除したり、新しく思いついた情報を記載したりしてみましょう。

 

ツールで清書

手書きでワイヤーフレームを作成したら、ツールで清書をして美しく仕上げましょう。

データ化をすれば簡単に共有することができ、容易に修正することが可能です。

 

チームでワイヤーフレームを共有したり、制作会社に提示したりする場合は、全員が見られるツールを使用すると便利でしょう。

 

【ツールを導入するメリット】 簡単な操作で素早く作成できる クオリティが高くなる 関係者とデータ共有ができる

 

 

ワイヤーフレームを作成する際には、手書きから始めてツールで清書を行うのが一般的です。

 

ここでは、それらの作業を行う際に出てくるメリットやデメリットをお伝えします。

 

メリット

ワイヤーフレームを作成する際のメリットは以下の通りです。

 

【ツール使用前のメリット】 頭の中にあることが形になる 紙とペンがあればできる 周りの人と相談しながら紙に書ける

 

【ツール使用後のメリット】 レイアウトや要素の調整がしやすい ツールによっては共有がしやすい ワイヤーフレームに使用説明などの詳細を記載できる

 

【本格的なツールを使用するメリット】 実際のサイズ感が掴みやすい 資料化することで、手書きよりも見やすくなる 精度が高いと、そのままデザインのガイドになる 文字数まで考えたレイアウトが可能

 

デメリット

ワイヤーフレームを作成する際のメリットは以下の通りです。

 

【ツール使用前のデメリット】 実寸ではない 細かい要素の指定まではできない

【ツール使用後のデメリット】 実寸ではない デザインのイメージはできない

 

【本格的なツールを使用するデメリット】 初心者にはむずかしい いきなり作れない 情報設計はしっかりと行わなければならない

 

では、ワイヤーフレームを作る際には、どのようなことに注意すればよいでしょうか。

 

ここでは、5つのポイント・注意点をご紹介します。

 

過度なデザインにしない

ワイヤーフレームは情報を整理するのが目的なので、デザインに凝りすぎないようにしましょう。

 

過度にデザインを入れてしまうと、デザイナーが制作する際にイメージが引きずられてしまう可能性があります。

ワイヤーフレームは、線と文字だけでシンプルに作成するとよいでしょう。

 

スマホ版とPC版を分けて作る

近年、スマホでインターネットを閲覧する人口が増えています。

PC版で作ったWEBサイトは、スマホから見づらくなる可能性があります。

 

スマホはPCに比べて画面の横幅が小さいため、スマホ版はPC版と分けて使るのが理想です。

 

特に主要ページは、スマホ版とPC版のワイヤーフレームを分けて作るようにしましょう。

 

すべてのページにワイヤーフレームを作らない

小さいWEBサイトの場合は全ページのワイヤーフレームを作れますが、規模が大きい場合は難しいでしょう。

その場合は、ワイヤーフレームを作成するページをあらかじめピックアップし、重要なページだけ作成するようにします。

 

とはいえ、どのページの優先順位が高いのか迷うこともあるでしょう。

その場合は、以下のようなページから手をつけると、効率良くワイヤーフレームを作成できます。

 

主要なページ（トップページやランディングページなど） 閲覧者の多いページ（採用ページなど） 特別なレイアウトになるページ（イベントやキャンペーンなど） 同じレイアウトを使いまわせるページ

 

競合サイトを分析する

レイアウトに迷ったときにおすすめなのが、競合サイトをチェックすること。

 

良質なWEBサイトを参考にすることで、ぴったりなレイアウトを思いつくかもしれません。

 

その際は、閲覧者目線で読みやすさを分析するのがおすすめです。

 

ただし、似たようなワイヤーフレームを使っても、デザインによって出来あがったWEBサイトの仕上がりは異なることもあるので、ワイヤーフレームの時点ではあまりこだわらないようにしましょう。

 

使いやすいワイヤーフレームツールを選ぶ

ワイヤーフレームを作成するためには、自分が使いやすいものを選ぶのが大切です。

 

【ツールを選ぶポイント】 共有・共同編集ができる 操作が簡単 マルチデバイスに対応している

 

共有・共同編集ができる

ワイヤーフレームを複数で共有する際は、共有・共同編集がしやすいものにしましょう。

 

ツールにはインストール型とオンライン上でデータを管理するクライド型があるため、共同で使用したい場合はクラウド型がおすすめです。

 

ただし、インストール型よりもクラウド型のほうがコストがかかりやすいので、予算に合わせて導入しましょう。

 

操作が簡単

ワイヤーフレームを作成する人が、専門的なパソコン知識を持っていない場合は、初心者でも扱いやすいツールを選ぶとよいでしょう。

 

ワードやエクセルなど、使い慣れたツールで作成できる場合もあります。

 

マルチデバイスに対応している

パソコンだけではなく、スマホやタブレットに対応しているツールを選ぶと、時間や場所にとらわれずに使用できるなど、利便性が高くなります。

 

対応OSを確認して、Windowsだけではなく、MacはiOS、Androidなど、マルチデバイスで使用できるようにすると便利です。

 

ワイヤーフレームを作成するツールは、ニーズに沿ったものを選ぶことが大切です。

使っている人の多いエクセルやワードなどでも作ることが可能です。

 

ここでは、当社のおすすめのツールを7つご紹介します。

ぜひ参考にしてみてください。

 

パワーポイント

新たに専門的なツールを使用するのではなく、使い慣れたツールでワイヤーフレームを作成したい場合、パワーポイントで十分なものが作成できます。

 

【パワーポイントで作成するメリット】 オフラインでも作業できる ビジネスマンに馴染みのあるツールのため、共有しやすい

【パワーポイントでワイヤーフレームを作成するデメリット】 作成したパワーポイントと閲覧するパワーポイントのバージョンが違ったり、WindowsやMacなどのOSが異なったりすると、フォントの変化やレイアウトのズレが起こる可能性がある

 

Adobe XD

Adobe XDは、デバイスごとのテンプレートが豊富に用意されており、直感的に操作しやすいツールです。

スマホやタブレットでも作成できるのが魅力です。

 

【Adobe XDでワイヤーフレームを作成するメリット】 機能拡張用のソフトウェア（プラグイン）や、余白表示、リピート機能などの便利な機能が豊富 簡単にハイクオリティなレイアウトを作成できる 作成したワイヤーフレームをURLで共有できる 基本的な機能が無料

 

Cacoo

Cacooはフロートチャートやプレゼン資料まで作ることができ、チームでの共同作業が円滑に進められるツールです。

無料トライアルがあるため、自分が作りたいページが作れるか試してみるとよいでしょう。

 

【Cacooでワイヤーフレームを作成するメリット】 100種類以上のテンプレートがある Googleドライブなど外部サービスと連携できる フリープランや無料トライアルできる有料プランがある ビデオ通話やチャット機能で会話しながら編集可能

 

Figma

Figmaは、オンライン上でワイヤーフレームを作成するツールのため、時間や場所を選ばずに利用できます。

利便性が高いため、リモートワークを推奨している企業にも導入可能です。

 

【Figmaでワイヤーフレームを作成するメリット】 複数名で同時編集が可能 オンラインなので、環境を選ばずどこでもできる プロトタイプ機能により、簡単に作成・共有が可能 2人まではフリープランで利用できる

 

Sketch

Sketchは、Bogemian Coding社が開発したmac用のツールです。

Mac用のツールを探している人に最適です。

 

【Sketchでワイヤーフレームを作成するメリット】 初心者でも使いやすい デフォルトのテンプレートやショートカット機能で作業時間が短縮できる iOSアプリを使い、デバイス上のデザインを確認できる すべての機能が30日間無料で利用可能

 

Mockingbird

Mockingbirdは、ブラウザ上で編集作業をするツールです。

必要な素材をドラッグするだけでレイアウトを配置できるので、簡単な作業を求める人にぴったりです。

アカウントを作成しなくても利用できます。

 

【Mockingbirdでワイヤーフレームを作成するメリット】 PDFやPNG形式の書き出しに対応しており、オフラインでデータ保存ができる ショートカットキー機能で作業時間が短縮できる 動画や地図など、サイトでよく使用されるイメージ素材が多くそろっている 無料版から始められる（一部機能制限あり）

 

marvel

marvelは、プロトタイピングツールで速やかにワイヤーフレームを作れるツールです。

リンク共有によって場所を選ばずにアクセスできるため、チームで共有したい場合におすすめです。

【marvelでワイヤーフレームを作成するメリット】 スマホやタブレットにも対応 DropboxやGoogleドライブと連携して保存が可能 各デバイスに対応したテンプレートが数百種類 無料版もプロジェクト作成が無制限で可能

 

この記事では、ワイヤーフレームの概要や作り方、注意点、おすすめツールについてご紹介しました。

 

ワイヤーフレームは、WEBサイトを作成するために重要な作業です。

ワイヤーフレームを作成すること自体を手間だと感じるかもしれませんが、最終的には作業効率をUPさせることができるでしょう。

 

当社では、お客様のご要望に合わせたWEBサイト制作を行っております。

WEBサイト制作を検討されている場合は、ぜひお問い合わせください。