この記事では、ワイヤーフレームのどこに・何を・どのように書けばよいか、情報の整理の仕方や相手に伝わりやすいワイヤーフレームを書くコツを紹介しています。
ワイヤーフレームは会社やプロジェクトによって書き方が異なることもありますが、基本を学習する手助けになれば幸いです。
ワイヤーフレームとは
Webサイトの設計図のことで、「何を・どこに・どのように」配置するかを描いた図のことをワイヤーフレームと呼びます。
ワイヤーフレームは名前の通り、ワイヤー（線）とフレーム（骨組み）からなる図なので、基本的にはこの段階では画像を挿入したり、カラーにしたりと、デザインについては記載しません。
ロゴ・メニューの位置・メニューの項目・コンテンツ・広告などをどこに、どのように配置するかを手書き、もしくはソフトを使用して作成します。
ワイヤーフレームのイメージがつかない方は、下記サイトを参考にしてみてください。完成したサイトとワイヤーフレームを見比べることができます。
ワイヤーフレームの役割
ワイヤーフレームは、デザイナーがデザインの下書きとして作成するだけではなく、プロジェクトに関わるメンバーの認識を共有する役割を果たします。
例えば、クライアントと出来上がりのイメージを共有したり、Webサイトの機能面（メニューの位置など）での認識のすり合わせをしておくことができます。
また、プロジェクトによってはクライアントの意見を吸い上げたディレクターがデザイン担当に指示をするのにも使用されます。このように、デザインの下書きと思われがちなワイヤーフレームですが、とても重要な役割があります。
ワイヤーフレームの作成方法
ワイヤーフレームの作成方法は、おおまかに下記手順ですすめていきます。
１. Webサイトに掲載する情報を書き出す
２. １で書き出した情報に優先順位をつける
３. ページレイアウトを決める
４. 手書き、もしくはソフトを使って整理した情報を配置する
１.〜４.に関してさらに詳しく説明していきます。
１.Webサイトに掲載する情報を書き出す
クライアントから提供された情報をもう一度見直し、どんな画像・情報をサイトに掲載するかを書き出します。例えば、お店のロゴ、メニューの項目数・項目名、電話番号、住所などをきちんと書き出します。
この手順をしっかりと行うことで、構成要素の漏れを放置したままサイト作成を進めて、手戻りになることを防ぎます。
２. １で書き出した情報に優先順位をつける
１で書き出した項目に優先順位をつけます。人はWebサイトを見るとき、左から右に視線を動かします。一番初めに注目されるのは左上ということになります。
項目の優先順位をつけることによって、一番効果的な場所に重要な項目を置くことができます。
サイトの左上によく配置されるのはやはりお店等のロゴが多いと思います。どの人から見ても、お店のロゴは重要度が高いからです。
しかし、お店の電話番号などはどうでしょうか？ ヘッダーに配置することもありますし、クライアントにとって、営業中に電話をかけられるのは困るからフッターに記載して欲しいなどの要望もあり、フッターに置くこともあるでしょう。
このように人によって項目の優先順位が違うこともあるので、クライアントやディレクターからきちんと情報を得ておくことも重要です。
３. ページレイアウトを決める
これまで整理した情報をもとに、サイト目的に応じてどのページレイアウトが一番適切かを決めます。目的に応じてどのようなページレイアウトを選択するのか、下記のようなサイトが参考になります。
参考：これで完璧。目的別Webデザイン・レイアウト8選 |LISKL
参考：WEBデザインはこれで完璧！参考になるレイアウトまとめ | Code部
４. 手書き、もしくはソフトを使って整理した情報を配置する
ここでようやく決定したレイアウトに、優先順位を加味した項目を配置して、ワイヤーフレームを書いていきます。ここからは、個人の好みやプロジェクトの規模によって変わってきますが、下書きとして手で書いてからツールで清書する方法、もしくは手書きのみ、ツールのみといった方法があります。
大きなプロジェクトでたくさんのページがあるサイトなどは、手書きでワイヤーフレームを管理するのは難しいのでツールを使用される方が多いのではないでしょうか。
また、手書きのワイヤーフレームですとクライアントには提示しにくかったりするので、その場に応じて自分のやりやすい方法を選択して、ワイヤーフレームを書くのがよいでしょう。
【ポイント】実際の画面サイズを想定して、ワイヤーフレームを書く
ワイヤーフレームを書くときは、実際の画面のサイズを想定して書くことが大事です。PC画面・タブレット画面・スマートフォン画面を想定したレイアウトを描き、それぞれの画面サイズにあったレイアウトに画像・テキストをはめていきます。
また、テキストについてはダミーテキストを挿入することが多いかと思いますが、これも最大文字数・最小文字数をある程度想定しておくと、いざ文章の原稿をデザイン流し込んでみると、型崩れしてしまう、といった手戻りの発生を防ぐことができます。
伝わりやすいワイヤーフレームのポイント
作成したワイヤーフレームは誰がみるか、を意識する
作成したワイヤーフレームを、クライアント・デザイナー・プログラマ、誰に見せるかを強く意識して作成すると、伝わりやすいワイヤーフレームになります。
例えば、クライアントに見せるときには、完全にワイヤーとフレームのみより、少しだけグラフィカルな要素を含めると、見慣れていないクライアントも見やすいはずです。
また、デザイナー向けにはクライアントの意向や企画内容などの大きな枠組みのみを指示して、その考えに従ったものをデザイナーの技術の引き出しから考えて設計してもらえるようなワイヤーフレームを書くと、良いサイトを作成することができるでしょう。
（初めて一緒に仕事をするデザイナーには詳細に指示する方がよい場合もあるかもしれません）
そして、プログラマ向けには、ボタンをクリックした時、ウィンドウが開くなどの細かい挙動が示してあると分かりやすいでしょう。
ただし、あまり細かく書きすぎるとそれはワイヤーフレームではなく、制作仕様書になってしまいますので、気をつけましょう。
便利なツール
ワイヤーフレームを書くために便利なツールを紹介します。基本的に図形を書くことができればどんなソフトでも作成することができ、ここで紹介しているもの以外にもたくさんツールがあります。興味がある方は検索してみてください。
Cacoo
ソフトをインストールする必要がなく、オンラインでワイヤーフレームを書くことができます。Webサイト用の図形ツールがあるので、素早くワイヤーフレームを作成することができます。
プロジェクトメンバーと共有して同時編集ができるので、メンバーが多いプロジェクトでも活躍してくれるツールです。
Power point
プレゼンテーション用ソフトですが、ワイヤーフレームを作成する用途としても使用することができます。Coccoも便利ですが、オンラインでセキュリティ面が心配な方は、パワーポイントも便利でしょう。
Paper Browser
紙にワイヤーフレームを書きたい方向けです。ブラウザの画面フレームをPDFファイル形式でダウンロードできるので、印刷して書くと便利です。
※ここでは、無料で使用できるものを取り上げていますが、紙で下書きをした後、PhotoshopやIllustratorで清書するのもおすすめです。普段使い慣れているツールを使用すると作成しやすいですし、細かいところにも手が届きます。
上記で紹介したもの以外にも、みなさんが自分で使い慣れているツールでワイヤーフレームを書いてみるのもおすすめです。
