Blogこれからの働き方をマーケティングで最適化するブログ

【Web制作】Webデザイン初心者がワイヤーフレームを作るには


ホームページを作成する際に必ず作らなければならない「ワイヤーフレーム」というものを知っていますか?
ワイヤーフレームとはWebサイトの設計図のようなもので、そのすべてがWebサイトを制作する上で意味のある大切な役割を担っています。
しかし、Webデザイン初心者の中には、ワイヤーフレームについて詳しく知らないという人も多いのではないでしょうか。
この記事では、ワイヤーフレームの目的と作り方について詳しく解説していきます。

ワイヤーフレームとは?

「ワイヤー(線)」と「フレーム(骨組み)」の言葉が表すとおり、ワイヤーフレームとは公開するホームページの元となる設計図のことです。
ページ内の「どこに」「なにが」あるのかをまとめ、さらに「どのように表示するのか」も決めます。
いきなりホームページを作り始めてもどこからどう作ればいいのか分からないでしょう。
こういった設計図があると、いざ作業に移る時にスムーズに進めることができます。
また、骨組みが固まっていることでデザインの面でもブレることなく作成することができるでしょう。

ワイヤーフレームを作る上で重要なポイント

ワイヤーフレームを作る上で重視するべきポイントが2つあります。
情報を伝えるための設計を作るために必要なポイントです。
このポイントのどちらが欠けても良いワイヤーフレームを作ることはできません。

ワイヤーフレームは情報設計のために作成する

ホームページには膨大な量の情報が組み込まれています。
ワイヤーフレームを作ることは、その大量の情報を整理し、目的に合ったホームページ設計をすることに繋がります。

トップページから、
・サービスについて
・企業理念
・会社概要

など、どのページにどの程度の情報を載せるかをしっかり整理し決めていきましょう。
注意しなければならないのは、「この段階ではデザインには触れない」という点です。
ワイヤーフレームはデザインの下書きではなく情報の設計が目的です。
ここでデザインに足を踏み込むと、そこで悩んでしまい、肝心のワイヤーフレーム作業がストップしてしまう可能性があります。
この段階では、目的に沿った、ユーザー目線のサイト設計が必要なのです。

「なぜそうなったのか」を全て説明できなければならない

ワイヤーフレームの構成すべてに理由がなければ、情報を設計したとは言えません。
例えばAという情報とBという情報があるとして、その位置関係がAの方が上に大きく表示されていたとします。

この場合、「どうしてAの方が上に大きく表示してあるのか?」と問われれば「Aの方が大切な情報だから」と答えるでしょう。
そこからさらに「どうしてAの方が大切な情報だと思ったのか?」と問われたらきちんと答えることができるでしょうか。
そこまで明確に答えてこそ、ワイヤーフレームの意味があります。
なぜそうなったのか、という明確な理由の上にワイヤーフレームを構成しなければならないのです。

ワイヤーフレームの作り方

では実際にワイヤーフレームを作成する流れを解説していきます。

1.情報を整理する

まずは、配置する情報を整理します。
ホームページの目的とコンセプトを再度確認しながら、「掲載する情報」をピックアップし、その中でグルーピングします。
同じグループの情報は近くに配置するのが基本です。
その後、優先順位を決定し配置を決めるとうまくいくでしょう。

2.レイアウトの決定

レイアウトの種類は大きく分けて4つあります。

マルチカラム
カラムが複数あるレイアウトです。「ヘッダー」「コンテンツ」「サイドバー」「フッター」というように役割ごとに画面を分割して表示します。
多くのホームページで採用されている定番のレイアウトと言えます。

シングル
カラムがひとつしかないレイアウトです。
あるのはヘッダーのみで、サイドバーも無いためコンテンツを画面枠いっぱいに使用することができます。
縦に長くなりがちなので、情報やページ数が多いサイトには不向きです。

フルスクリーン
画面全体を使い1枚の絵(画像)として表示するレイアウトです。
この場合、そこに使う画像や動画がホームページの印象を決める鍵となります。
文字による説明は野暮ったくなるので、できるだけ印象的な画像を配置し、パッとわかるようなキャッチコピーを載せると良いでしょう。

タイル
敷き詰められたタイルのように、情報を小さな枠で囲い配置するレイアウトです。
一貫性のある配置なので、情報量の多いネットショップの商品一覧などによく使われます。

3.紙とペンを使って下書きをする

レイアウトを決めたら、最初に整理した情報を当てはめて配置していきましょう。
ワイヤーフレームツールを使ってもかまいませんが、この段階では紙とペンで大まかに下書きできれば十分です。
書いたり、消したりを繰り返しながら焦らずに完成形に近づけさせましょう。

4.ツールを使って清書する

手書きの下書きができれば、ツールを使って清書します。
「自分しか見ないので必要ない」と思う人もいるかもしれませんが、あると便利ですのでぜひ作成してみてください。

ワイヤーフレームの清書ツール

清書するためのワイヤーフレームツールを紹介します。
簡単に操作できるものが多く、利用者も多いのでぜひ活用してみてください。

オンラインツール

・Cacoo

出典:cacoo.com/ja

テンプレートの種類や図形などが多いのが特徴です。日本語サイトなので使いやすく、25ページまで無料で作成可能です。

https://cacoo.com/ja/

・Moqups

出典:moqups.com

無料で利用できます。ページ制限なども特になく自由にワイヤーフレームを作成することができます。

https://moqups.com/

オフラインツール

使い慣れたソフトでサッと作成するのも良いでしょう。
・Illustrator
・Photoshop

複数のワイヤーフレームを作る時などは、必要なオブジェクトをコピペして持ってくれば簡単に配置できて便利です。

役割を理解することが最適なホームページ作りへとつながる

ワイヤーフレームがなんのためにあるか、ということを理解することが、良いホームページ作りの第一歩となります。

・まずはホームページの設計図となるワイヤーフレームの目的、コンセプト、掲載する情報をよく確認しましょう。
・レイアウトを決めたら下書きをし、ツールを使って清書します。

面倒だと思う作業こそ、後々の作業をスムーズに進めてくれる足掛かりになってくれます。
しっかりとした骨組みを作り、良いホームページ作りへとつなげましょう。


お問い合わせ

本記事内容や「デザイン」についての
お問い合わせはこちらからお気軽にお問い合わせください

お問い合わせはこちら