Webデザイン

ワイヤーフレームの書き方は?作成方法を5つのステップで紹介

colored-pencils-374771_1920

Webサイトを制作する際には、ワイヤーフレームを作ることが多いです。

しかし、「ワイヤーフレームの書き方や作り方についてよくわからない…」という方も多いと思います。

そんなワイヤーフレームの作り方を、ここでしっかりと押さえていきましょう。

そもそもワイヤーフレームとは?

ux 788002 640 - ワイヤーフレームの書き方は?作成方法を5つのステップで紹介

まずは、「ワイヤーフレームとは何なのか」しっかりとおさえておきましょう。

ワイヤーフレームとは、

Webページの大まかなコンテンツやレイアウトを示した構成図(コトバンクより)

とあります。

 

つまり、Webサイトの設計図になります。

この設計図があることによって、「どのようなWebサイトを作るのか」という1つの共通認識ができ、どの立場の人でも同じように理解することができます。

また、完成時のイメージがしやすくなるため、仕様の変更やデザインの改善なども具体的に行うことができます。

ワイヤーフレームを作るステップとは?

stairs 1715618 640 - ワイヤーフレームの書き方は?作成方法を5つのステップで紹介

ワイヤーフレームを作る際には、5つのステップを踏んで作っていくことをおすすめします。

このステップ通りに行っていくことで、要素や機能面での過不足を防ぐことができます。

Step1.最低限あるべき要素を整理する

ワイヤーフレームを作成する前に次の2つのことについて考えていきます。

1.1つのページのゴールを決める

Webサイトはスクロースさえすれば、無限に要素を配置することができます。

しかし、1つのページに要素を入れすぎてしまうと、ユーザにとって使いにくいサイトになってしまいます。

要素の入れすぎを防ぐために1つのページで1つの目的を満たすようにします。これに基づいて「このページではどのような情報を得られるのか」明確にしていきましょう。

2.ページに必要な要素を考える

1つのページのゴールを決めた上で、そこで必要になる要素について考えていきます。

ある企業のサイトを作ることになったとして考えてみましょう。

1ページの目的として「会社概要がわかるようにする」と挙げたとします。そこで必要になる要素としては、所在地や設立年月日、事業内容、取引先企業などが挙げられます。

このように必要となる要素を書き出してみましょう。これで、1つのページに載せるべき情報が整理できるはずです。

Step2.大枠の要素を書き出す

大枠の要素を書き出して、サイトの全体像をイメージしていきます。大枠の要素として必要になるのは、次のようなことが挙げられると思います。

  •  ヘッダー:メニューや検索フォームを配置する
  •  サイドバー:ナビゲーションや広告を含む
  •  コンテンツ:訪問者に伝えたい情報を入れる
  •  フッター:copyrightの表記やサイトマップを配置する

必要になる要素を書き出したところで、「どのように配置するのか」について議論します。

ワイヤーフレームのレイアウトとしては、大きく分けて3つが挙げられます。

ワイヤーフレームのレイアウトの種類

  •  マルチカラム型:ヘッダーやコンテンツ、サイドバー、フッターの要素から構成される(一般的に用いられているレイアウト)
  •  シングルページ型:ヘッダーとコンテンツの要素から構成される
  •  フルスクリーン型:全面を1つの要素で埋める

サイトの設計を考えるためのワイヤーフレームなので、色は付けずに考えていきましょう。

色を付けてしまうと、「どんな色にするのか」というデザイン面に気をとられてしまい、サイトの設計について考えることができなくなってしまいます。

ここで、やるべきことをもう一度整理しておきます。

  •  必要となる要素を書き出す
  •  要素の配置を考える

Step2では、この2つを中心に考えていきます。

Step3.要素ごとに掘り下げて考える

Step2までで必要になる要素について考えられたと思います。次に、必要とする要素に「どのような情報を組み込むのか」具体的にしていきます。

例えば、ヘッダーには「ロゴ」や「検索ボックス」などが必要になります。

また、ナビゲーションでは、「企業情報」や「その企業が提供しているサービス」などが必要になるでしょう。このように要素ごとに必要となる情報について考えていきます。

まずは、「要素ごとにどのような情報が必要になるのか」思い浮かんだ順に書き出してみましょう。

「人は左から右に視線を移動させる」という習性があるので、左から順に重要な内容を配置していきましょう。

Step4.要素に優先順位をつける

必要となる要素や要素の配置について考えたところで、優先順位をつけて考えていきます。

「優先順位をつけてどこを目立たせるべきか」考えていきます。

目立たせる部分としては、「アイキャッチ画像」や「CTA(Webサイトの訪問者に行動を誘導する)」が挙げられると思います。

目立たせる部分を明確にすることで、重点的に目立たせていくべきか明確になります。

Step5.色を付ける

いよいよ色を付けて、今までのイメージを形にしていきます。

色を付けていくことで、完成品をイメージできるようになります。完成品がイメージできるようになることでどの立場の人にも1つの共通認識を持てるようになります。

また、「このサイトをより良くするためにはどうすべきか」さらにブラッシュアップしていくこともできます。

ワイヤーフレームは何を使って作るの?

ワイヤーフレームは、紙とペンを使う場合パソコンを使う場合の2つのパターンがあります。

紙とペンを使うことで、誰でも簡単に作ることができ、修正も簡単にできます。

パソコンのツールを使うことで、ワイヤーフレームの管理がしやすくなるだけでなく、用意されているテンプレートを使って作成することができます。

パソコンでのワイヤーフレーム作成ツールとしては、「Cacoo」や「Moqups」、「Adobe Comp」、「PowerPoint」などが挙げられます。

ワイヤーフレームの作成方法に関するまとめ

以上、いかがでしたか?

今回は、ワイヤーフレームの作成方法をメインにお伝えしました。

作成方法をもう一度おさらいしておきましょう。

 Step1.最低限あるべき要素を書き出す

 Step2.大枠の要素を書き出す

 Step3.要素ごとに掘り下げて考える

 Step4.要素に優先順位をつける

 Step5.色を付ける

この5つのステップに沿って作っていきます。

「ワイヤーフレームをどう作ればいいのかわからない…」と悩んでいるあなたもまずはこのステップに沿って考えてみましょう。

このステップに沿って考えていくとスムーズに作れるようになるはずです。最後まで読んでいただき、ありがとうございました。