1人で制作をする場合は自分の思い描いた通りにWebサイトを作ることができますが、チームで制作をする場合は他のメンバーに出来上がりのデザインをイメージしてもらう必要があります。

ワイヤーフレームは、そのようなWebサイトのコンセプトを共有する場面で欠かせないツールです。今回はワイヤーフレームを作る意味と作り方について見ていきます。

ワイヤーフレームとは

「ワイヤーフレーム（wireframe）」とは、Webサイトのレイアウトを大まかに示したものです。ワイヤー（wire）には英語で「針金」や「電線」、フレーム（frame）には「骨組み」や「枠」という意味があります。テキストや画像の配置場所や配置方法を示すワイヤーフレームは、Webサイトの設計図ともいえます。

ワイヤーフレームを作る意味

ワイヤーフレームを作成する目的は、Web制作に関わるメンバーと認識を共有し、Webサイト制作を円滑に進めることです。

例えば、複数の社内メンバーがWeb制作に関わる場合、これからどのようなWebサイトを作り上げるのか、認識を一致させなければなりません。

ワイヤーフレームを作ることにより、メンバーと認識を共有し、不要な誤解や勘違いを防止できます。

ワイヤーフレームの作成は時間がかかりますが、後々のことを考えると作成しておいた方が時間の節約になります。設計図がなければ、メンバー間で認識の違いが生じることは避けられません。意図した通りのWebサイトを制作できないと、修正に時間を要する可能性もあります。

また、クライアントと打ち合わせをする際も、ワイヤーフレームがあれば便利です。クライアントに仕上がりを視覚的にイメージしてもらい、要望や修正点を聞いて制作に反映させることができます。

大規模なプロジェクトの場合、大勢の関係者と認識を一致させなければならないため、ワイヤーフレームの重要性は増します。

ワイヤーフレームは他のメンバーとの共通認識が必要とされるときだけではなく、自分の考えをまとめる際にも役立ちます。良いデザインが思い浮かんでも、書き留めておかなければ忘れてしまいます。思い浮かんだデザインは手書きで紙にワイヤーフレームとして残し、いつでも振り返ることができるようにしましょう。

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

まず、これから制作しようとするWebサイトの目的やテーマ、コンセプトなどの情報を確認します。

次に、サイトに掲載するコンテンツを決めます。ただし、サイトに盛り込む要素を増やし過ぎると、レイアウトにまとまりがなくなるため、優先順位をつけてください。

掲載するコンテンツが決まったら、配置方法を検討します。コンテンツや素材をどのように配置すれば効果的で見やすいか、複数パターンのレイアウトを考えて比較しましょう。

レイアウト決定後、いよいよワイヤーフレームを描きます。

手書きしても問題ありませんが、最近はワイヤーフレームを作るためのツールが充実しています。あらかじめ用意されている画像やフォームを利用することによって、手軽にワイヤーフレームを作成できます。パーツを挿入しながらWebサイトを組み立てるイメージを持つと良いでしょう。

また、一度作成したワイヤーフレームをデータとして保存しておけば、後でテンプレートとして利用することも可能です。過去に制作したWebサイトと同じタイプのWebサイトを制作する場合、手間を省くことができます。

ワイヤーフレームの作成ツールには、無料のツールもあります。興味がある方はどのような作成ツールがあるか調べて、試してみましょう。

まとめ

Webサイトのレイアウトは、自分の頭の中だけではうまく整理できません。社内メンバーやクライアントとのコミュニケーションを円滑に進めるためにも、頭の中にあるアイデアをワイヤーフレームとして「見える化」することが重要です。

ワイヤーフレームは、紙と筆記用具さえあれば作ることができます。今日からワイヤーフレームを活用されてはいかがでしょうか。

Tweet