Webサイトの設計図「ワイヤーフレーム」とは？

ワイヤーフレームとは何か

ワイヤーフレームを一言で言うと「サイトの設計図」です。サイトを開発する前に「何を・どこに・どのように」画面に配置するかを明らかにすることができます。視覚的で分かりやすいため、どの役割の人も同じように理解を深めることが期待されます。また、Webサイトの開発には時間がかかってしまいますが、ワイヤーフレームは簡単に作成することができます。ブレインストーミングを行ったり、仕様を柔軟に変更したりすることで、デザインを改善することができます。

ワイヤーフレーム作成に必要なこと

ワイヤーフレームの作成では「何を・どこに・どのように」配置するかを決めます。「何を」については、メニューの構成、ロゴ、コンテンツ、広告などを漏れなく描きだします。「どこに」については、画面上部・下部・左右などの画面上の位置について検討します。「どのように」については、段組やリンクなどの仕様を決定します。デザインを設計する際には、「ユーザーにとって使いやすいこと」や「伝えるべきメッセージが伝わること」を意識する必要があります。例えば、ユーザーの視線は左上から右下へ進むと言われています。そのため、重要な情報は左上に配置することが推奨されています。一方で、ワイヤーフレームの段階では色や画像といった詳細な仕様にはこだわりません。装飾は後回しとして、まず、枠組みを確立し、チーム内で共通認識を持つことが重要です。

ワイヤーフレームの構成要素

ワイヤーフレームのレイアウトには、いくつかの種類があります。全面を一つの要素で埋めるフルスクリーン型やヘッダーのあるシングルページ型などが挙げられます。一般的に用いられるのは、マルチカラム型のレイアウトです。マルチカラム型のレイアウトは以下の要素から構成されます。

• ヘッダー：メニューや検索フォームなどを配置します- コンテンツ：訪問者に伝えたい情報を盛り込みます。文章・画像・動画・表などを提示します- サイドバー：ナビゲーションや広告などを含みます- フッター：コピーライトの表記やサイトマップを配置します

おすすめツール

紙とペン

ワイヤーフレームは紙に手描きするのが非常に有効な方法です。改めてツールを覚える必要がなく、誰でも利用できます。仕様を変更するのも容易です。

PowerPoint

MicrosoftPowerPointでワイヤーフレームを作成することも可能です。多くのメンバーがソフトウェアを持っているので、データのやり取りも容易です。テキストや長方形のオブジェクトを駆使することで、設計図を作成します。

Cacoo

オンラインでワイヤーフレームが作成できます。Webサイト用の雛形があるため、効率的に設計することができます。チームで共有する機能もあります。無料プランの他に、エクスポートなどの付加機能ができる有料プランも提供されています。

Moqups

25万人以上が使用しているオンライン型のワイヤーフレーム作成ツールです。ワイヤーフレーム内でリンクが設置できるなど、高機能なのが特徴です。2プロジェクトまでは無料で使用することができます。

ワイヤーフレーム作成に参考になるサイト

ワイヤーフレームを作成する際には、他サイトの優れたデザインを参考にすると、どんなユーザーに対しても違和感のないサイトが作成できます。以下のページから、優れたWebデザインを見つけることができるでしょう。

• ホームページ作成の参考にしたい海外デザインギャラリーサイト10選
• もう迷わない！WEBデザインで参考になる厳選ネタサイト8選
• ワイヤーフレームのスケッチ25例(英語)

まとめ

ワイヤーフレームはWebサイトデザインの設計図です。チーム内で共通認識を作るために高い効果があります。装飾などの細かい点にはこだわらず、枠組みをしっかりと決めることで、後続の開発作業がスムーズに進むでしょう。ワイヤーフレームの作成を通して、レイアウト・ヘッダー・フッターなどの構成要素を決め、「何を・どこに・どのように」配置するのかを明らかにします。オンラインツールに限らず、紙とペンでも作成できるので、プロジェクトに適した効果的なワイヤーフレームの作成方法を模索するのが良いでしょう。