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

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

 

ワイヤーフレームとは

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

 

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

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

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

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

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

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

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

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

 

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

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

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

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

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

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

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

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

 

まとめ

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

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


さらに学ぶためには?
デジハリ・オンラインスクールのオススメ講座