ホームページの設計書「ワイヤーフレーム」作成のやり方とは?

はじめに

こんにちは、内定者の向山です。

本日はホームページの設計書である「ワイヤーフレーム」の作り方についてご紹介します。

 

ホームページを作成する際には、

ホームページの設計図である「ワイヤーフレーム」を作成することがほとんどです。

 

また、ワイヤーフレームは、

web制作プロジェクトを円滑に進めるためのコミュニケーションツールもあります。

 

プロジェクトに関わるメンバーの役割としては、

・webディレクター

・デザイナー

・コーダー

などが存在します。

 

それぞれの役割を簡単に説明すると、以下のような役割を持ちます。

・Webディレクター

見やすく使いやすいWebサイトを設計するプロ

・デザイナー 

Webディレクターの作成した設計書を最大限に活かして、

サイトのコンセプトから、デザインのコンセプトを考えるプロ

・コーダー 

デザイナーがデザインした原案をweb上で閲覧出来るようにするプロ

 

そのため、主にwebディレクターが設計するワイヤーフレームが

お客様やデザイナー、コーダーにも分かるように設計する必要があります。

また、分かりやすいワイヤーフレームを設計することは、

プロジェクト開始時にお客様がイメージしている完成図と、

仕上がるデザインが大きくかけ離れてしまうリスクを減らすことにもつながります。


そのため、今回は

・ワイヤーフレームとは?

・ワイヤーフレーム作成の流れ

・ワイヤーフレーム作成時のポイント

・ワイヤーフレーム作成に使える便利なツール

の4点についてご紹介いたします。

 

ワイヤーフレームとは?

設計書1

実際にネット上に公開するWebサイトの設計図のことで、

「何を」「どこに」「どのように」配置するかを表した図のことをワイヤーフレームといいます。
また、「何を」「どこに」「どのように」配置するのかについて手書き、

もしくはツールを使用して作成します。


ワイヤーフレームは名前の通り、ワイヤー(線)とフレーム(骨組み)からなる図になります。

サイト制作の目的に沿って情報を整理するために行います。

そのため、基本的にはワイヤーフレーム作成の時点では画像を挿入や配色、

デザインについての記載はせずモノクロで作成をします。

「どんなものかは分かったけど、あまりイメージがつかない」という方は

下記のサイトを参考にしてみてください。

実際に公開されているサイトのワイヤーフレームが紹介されています↓

http://www.wireframeshowcase.com/

 

ワイヤーフレーム作成の流れ

ワイヤーフレームの作成は大まかに以下のような順序で進めていきます。

①サイトマップ作成は競合サイトを参考にする

②ホームページに必要な情報を洗い出す

③情報に優先順位をつける

④ページレイアウトを決める

⑤手書きまたはツールを利用して、実際に情報を配置する

これから作成の流れについて詳細に説明していきます。

 

①サイトマップ作成は競合サイトを参考にする

 サイト内の移動は「リンクをたどって移動」していくため、

関連のあるコンテンツは同じ分類にまとめ、リンクでつなげる必要があります。

 そこで、サイトマップを作成する際は競合サイト・類似サイトを参考にすると、

サイトの構成も類似している場合が多いため、構成を考えやすくなります。

 

②ホームページに必要な情報を洗い出す

 ①を踏まえて、どんな画像や情報をサイトに掲載するのかを考えます。

会社のロゴ、電話番号、住所、事業内容、採用情報など必要なことは全て洗い出しましょう。

 これを行うことで、後々この情報も入れるべきだったという

情報漏れがなく進めることができます。

 

③情報に優先順位をつける

 ②で洗い出した情報について優先順位をつけていきます。

情報に優先順位をつけることで、優先度の高い情報を1番目に付きやすい場所に

配置することができます。

 

④ページレイアウトを決める

 

 整理した情報とサイト目的に応じてどのようなページレイアウトが最適なのかを

大まかに決定していきます。

 

サイトの目的別にどんなレイアウトにするのが良いのかについては

下記サイトが参考になります。

https://liskul.com/cr_webdr8-3599

https://blog.codecamp.jp/web_design_layout

http://websae.net/wireframe-20150303/

 

⑤手書きまたはツールを利用して、実際に情報を配置してみる

 

 ④で決定したページレイアウトに③で決定した優先順位を踏まえて情報を

配置してワイヤーフレームを書いていきます。

ここからは、個人の好みやプロジェクトの大きさによって異なりますが、

・下書きは手書きで行い、清書はツールを使って書く方法

・手書きのみで書く方法

・ツールのみで書く方法

があります。

 

ワイヤーフレーム作成時のポイント

サイト訪問者の目線は「Z」を描く

ページ閲覧者の目線、気持ちの動きを考えると、情報をうまく配置しやすくなります。

訪問者の目線は「Z」を描くと言われているため、掲載する情報の優先順位も考えながら、

目の動きに合わせて、配置場所を考えましょう。

 

実際の画面サイズを想定する

 ワイヤーフレームを書くときは、実際の画面のサイズを想定して書くことが大事です。

PC画面・タブレット画面・スマートフォン画面を想定したレイアウトを描き、

それぞれの画面サイズにあったレイアウトに画像・テキストを配置しましょう。

これにより実際に盛り込む予定だった文章が収まらないなどとった問題を

回避することが出来ます。

 

ワイヤーフレーム作成に便利なツール

 基本的に図形を書くことができれば、どんなツールでも

ワイヤーフレームを作成することが可能です。

他にも様々なツールがあるので、自分の使いやすいツールを活用してみてくださいね!

Cacoo

オンライン型のワイヤーフレーム作成ツールです。複数人での同時編集が可能だったり、

Webサイト用のテンプレパーツがあったりと便利です。 

<メリット>
・Webサイト用の図形パーツが用意されているので、作成が簡単
・リアルタイムで共有でき、同時編集が可能
・描画エリアが広く、ページ分割して書く必要がない

<デメリット>
・ネット回線がないと使えない
・クラウドサービスなのでセキュリティ面の心配がどうしてもある

PowerPoint

 プレゼンテーション用ソフトですが、ワイヤーフレームを作成する用途としても使用することができます。

<メリット>
汎用性が高いので比較的多くの人が閲覧/編集できる
ネット環境がなくても使える
・ローカル環境で動作するので挙動が軽い


<デメリット>
・バージョンやOSの互換性によって、文字化けなどする場合がある
・ワイヤーフレーム用のパーツを自分で作る必要がある
・サイズがcm単位なので、実寸と異なる
・描画エリアが狭く、ページ分割をする必要がある

 

まとめ

 今回は「ワイヤーフレームとはそもそも何か?」ということからワイヤーフレームを

作成する手順などをご紹介しました。

 

ワイヤーフレームはプロジェクトに関わる人同士で

コミュニケーションを取るために重要ななものです。

そのため、ワイヤーフレーム作成に役立つツールを活用して作成してみてくださいね!

参考になったらシェアをお願いします!