ワイヤーフレームとは?役割や注意点・作り方について【実例あり】

2020年12月23日

ワイヤーフレーム手書き
Web制作の仕事をしていると、「ワイヤーフレーム」という言葉を聞くことがあると思います。
また、Webデザイナーの転職面接なら大体「ワイヤーフレーム作れるか?」は聞かれます。

ワイヤーフレームとは、webサイトのレイアウトを書いた設計図です。ワイヤーとも言います。
もちろん、ワイヤーフレームを作れなくても(Webディレクター任せでも)Webデザイナーにはなれますが、Webデザイナーがクライアントに見せるレベルのワイヤーを書く必要も時々出てくるので、簡単にまとめておきます。

ワイヤーフレームの役割

ワイヤーフレームとは、webサイトのレイアウトを書いた設計図で、デザイン制作の前に作ります。
その役割は、完成イメージの共有やコンテンツの情報整理です。

誰が作るのか?

通常、Webディレクターかディレクションも行うWebデザイナーが担当します。
ディレクションをやらないWebデザイナーだと、ワイヤーは支給されるものであんまり作る機会はないと思います。
が、作れないより作れた方が良いし、経験がないよりはあった方が良いので作る機会があれば一度は作ってみるといいかもしれません。

注意点

・作り込み過ぎない
基本的に線と文字だけ、白黒で作ります。
ワイヤーの段階で凝ったあしらいを入れるなど作り込みすぎると、デザインができた時ディレクターからはワイヤーと変わってないと言われたり、クライアントにはデザインと勘違いされたりします。

・クライアントにとってはワイヤーもデザインも一緒
Web制作してないクライアントにはワイヤーフレームといっても伝わらないです。
ワイヤーを見てもらう場合は、「ホームページに載せる内容こんな感じでどうか?」という方がベターに思いますが、それでももっと色使って欲しいとか言われるかもしれません。
ワイヤーフレームをデザインと思われたりするので注意が必要です。

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

ツール

Excelで作る人もいれば、Cacooなど色々ツールはありますが、XDを使っているならXDで問題ないと思います。

手順

①ピックアップ
サイトに載せる情報のピックアップ

②グルーピング
ピックアップした情報の分類

③ランキング
②に優先順位をつけて並べる

④レイアウト
ヘッダー、グローバルメニュー、メインビジュアル、コンテンツ、サイドバー、フッターを配置。
コンテンツ1カラムか、コンテンツとサイドバーの2カラムか。

⑤ツールで清書(手書きした場合)

ワイヤーフレームの例

筆者が作成し、クライアント(飲食店)に提出したトップページのワイヤーです。
トップページのワイヤー
(提出時にはロゴや店名・住所などが入っています。)

まとめ

以上、ワイヤーフレームについてまとめてみました。

ワイヤーフレーム制作に慣れてないデザイナーがやりがちな失敗は、ワイヤーの段階でデザインしてしまうことです。
(筆者もやりましたが、その後デザインも担当するなら自分で自分の首を絞める感じです。)
逆に、デザインの要素が入ったワイヤーを支給されてもデザイナーは困るともいえます。

ワイヤーを作ったり作らなかったりは、制作会社や下請け先によって違うので「どこからデザイナーの担当なのか」も確認して、ワイヤーから作る場合はデザイン料とは別に見積もりしたいところです。