ワイヤーフレームの書き方を徹底解説！準備から作成、注意点までを解説！

Webサイト制作ではワイヤーフレームが必須です。

しかし、Webサイト制作初心者の方はワイヤーフレームの書き方はおろか、そもそもワイヤーフレームを知らない方も多いでしょう。

そこで、今回の記事ではワイヤーフレームの作り方を知らない方のために以下のポイントを中心に紹介します。

Webサイト制作で失敗しないためにも必須なワイヤーフレーム。

では、そもそもワイヤーフレームとはどのようなものなのかをここでは解説します。

ワイヤーフレームとは、Webサイト制作時の下書きのようなものです。

Webサイト制作では各ブロックの詳細な下書きをデザインしておいて、その下書きのワイヤーフレームを参考にしながら作業を進めていきます。

ワイヤーフレームがあることによって、制作者に加えてクライアントまで全員が共通でWebサイトの全貌を認識した上で作業を進められるようになります。

また、ワイヤーフレームはあくまでも下書き段階ですので、大幅なデザインの修正も対応できます。

Webサイト制作の本番でいきなり修正が起きて現場が慌てないためにも、ワイヤーフレームはWebサイト制作に必須な存在といえるでしょう。

まずはワイヤーフレームの目的と役割を整理します。

ワイヤーフレームはWebサイトの完成図が見えるように「可視化する」役割を持っています。Webサイトのデザインともなるとミリ単位のズレが、ユーザーの離脱率を上げてしまいます。

いわゆるWebサイトの設計段階のミスを事前に防止するためにも、ワイヤーフレームを利用している場合が多いです。

特に会社の事業単位でWebサイト制作を行っていると、ほとんどの場合は大掛かりなプロジェクトになるでしょう。当然Webサイトの制作はデザイナーからコーダーまで、さまざまな人間が関わることが予想されます。

その際に精緻なワイヤーフレームがあると、お互いの目標が共通で認識できるようになります。作業工程がスムーズに進むかどうかは、まさにワイヤーフレームの出来に依存しているといっても過言ではありません。

ワイヤーフレームは、制作ディレクターが中心となり作ることが一般的です。しかし、ディレクターが単独で作るのではなく、デザイナーとエンジニアとも連携して作成をしています。

ディレクターは、Webデザインやコーディングのスキルがない場合でも、ワイヤーフレームの設計・作成は行っています。

ワイヤーフレームはWebサイト制作に必須なものであることはわかりましたが、実際にどのように書けばよいのでしょうか？

そんな疑問に答えるために、ワイヤーフレームを書き方の準備編から紹介します。

サイトを制作するフェーズは以下の通り5段階あります。ワイヤーフレームは、設計のフェーズに位置します。

ワイヤーフレームを設計する前に、企画・分析フェーズで考えられている目的やコンセプトをよく理解しましょう。

ターゲットに対する見せ方や、アピールしたいコンテンツなどにより、ワイヤーフレームの構成は大きく異なっていきます。

ディレクトリマップとは、Webサイトの全ページのURLとタイトル、コンテンツがまとめられた一覧表です。

ディレクトリマップがあると、ページの意図も理解できます。

サイトマップ、レイアウト、ワイヤーフレーム、デザイン制作などサイト制作全体がスムーズに進むようになります。

いきなりワイヤーフレーム作りに取り掛かるのではなく、まずはサイトマップの作成から始めてください。サイトマップとは、Webサイト全体のページ構成を一覧に表示しているものです。

このサイトマップを制作しておくことで、ユーザーや制作者がサイト内容を把握しやすくなります。作り方としてはTOPページを頭として、そこから芋づる式に関連するページをまとめ上げていくといったイメージです。

AというタグのページにはAタグに関連するページを掲載し、BというタグのページにはBのタグに関連するページをまとめると分かりやすくなります。

大枠のサイトマップが制作できたら、ページのレイアウトも決めてしまいましょう。

レイアウトとは画面をどのように表示するか決めることを意味します。

ここではレイアウトの種類をいくつか紹介しますので、レイアウト決めの際に参考にしてください。

いずれのカラム形式で制作するにしろ、スマホでのレスポンシブ対応は加味した上でレイアウトを決めるようにしてください。

株式会社WACULの調査によると、アンケートに回答した企業の50%はWebサイトをレスポンシブ対応しています。

今や、Webサイトに訪れるユーザー属性はパソコンだけには限りません。さまざまな媒体で訪れるユーザーに対応するためにも、レスポンシブ対応が必須になります。

ディレクトリマップ、サイトマップ、レイアウトが完成したら、あとはその情報をもとにワイヤーフレームに落とし込むだけです。

作成前の確認とツールの選択

いきなりデータに書き起こすのは難しいため、まずは紙に下書きをしてみるのも一つの手です。

紙媒体であれば修正対応も気軽にできますので、書いたり消したりを繰り返して理想のワイヤーフレームを下書きしてください。

ここで制作した下書きをもとにツールで清書します。

使用するツールは後に紹介しますが、Adobe XDやSkechなどのツールを用いるのが一般的です。

もちろん使い慣れているツールがあれば、そちらのツールを優先して使用しても構いません。

何にせよ、この段階でも何度も書き直してブラッシュアップしていくのが大切になります。

ここではワイヤーフレームの実際の書き方をAdobe XDの作業画面をもとに紹介します。

まずはWebサイトのもととなる、アートボードの制作から始めてください。

基本的な図形を制作した上で、簡単なアイコンを制作します。そして、テキストツールで簡単なテキストの入力が行えるようになったら、ワイヤーフレームのイメージを固めていきます。

Adobe XDではリピートグリッドという機能がありますので、規則性のあるレイアウトが簡単に配置可能です。

ここまでできれば、レイアウトもほとんど完成していますので、ワイヤーフレームの完成が近づいています。レイアウトが決まれば、ついでにプロトタイプの制作もしてしまいましょう。

プロトタイプとは、文字通りWebサイトの試作品のことです。Adobe XDではプロトタイプの制作までワンストップでできてしまいます。プロトタイプの制作では画面遷移を設定した上で、レビュー機能を利用してページの表示に問題ないかをチェックしてください。ここまでできれば、制作物を共有してワイヤーフレーム作りの完成です。

ワイヤーフレーム作りで注意すべきポイントを5つ集めました。

特に初心者であればあるほど、今から紹介するポイントを注意した上でワイヤフレーム作りを進めるようにしてください。

ワイヤーフレームと混同されがちなのが、デザインカンプです。

ワイヤーフレームはあくまで設計図であり、デザインカンプとはワイヤーフレームを元に作られる最終のデザイン見本です。

また、ワイヤーフレームにデザインイメージを掲載するのはやめましょう。デザイナーが混乱してしまう可能性があります。

ワイヤーフレームは、デザインのイメージをしながら、ゼロからサイト設計を行うものなので、悩むことがあります。その時は、競合サイトや、目的や構成、デザインが類似する参考サイトなどを参考にしていきましょう。

上手くいっているサイトは、ワイヤーフレームの時点で、成功する設計になっています。コンテンツの見せ方、ページ構成、コンバージョンまでの導線設計など、他サイトを分析しながら作っていきましょう。

競合分析ツールについてより詳しく知りたい人はこちらの記事もご覧ください。

ワイヤーフレーム作りを始める前に、サイトマップやレイアウトを準備する必要があると述べました。

その段階で決まったことが、ワイヤーフレーム作りに反映されているのかをチェックしながら作業を進めるようにしてください。

特にワイヤーフレーム作りに夢中になってしまうと、自分のやりたいようにしてしまいがちです。企画の意図を全く反映していないワイヤーフレームが出来上がってしまうこともしばしばあります。

その場合、Webサイトの肝心な訴求ポイントを伝えられていない可能性もありますので、作業が一からやり直しになる可能性が高いです。Webサイトの目標を達成するためにも、ワイヤーフレーム作りでは事前に決まったことを必ず反映するようにしてください。

ワイヤーフレームはWebサイトの下書きのようなものだと説明しましたが、全ての情報に意味があります。

そのため、ワイヤーフレームの全ての構成にどのような意味があるのかを、担当者は説明できるようにならなければいけません。

たとえば、Aというコンテンツの下になぜBというコンテンツがあるのか。さらには、なぜAというコンテンツを掲載した上でBというコンテンツを掲載しなくてはいけないのか。考えだすとキリがありません。

先述した通りレイアウトにはいくつか種類がありますので、ワイヤーフレームの需要に適したレイアウトを採用する必要があります。今一度レイアウトの種類の特徴を理解した上で、ワイヤーフレーム作りに取り組むようにしましょう。

ワイヤーフレームは制作に関わる人間の意思疎通を円滑に進める役割を担っています。

そのため、クライアントからサイト制作者に対して分かりやすいワイヤーフレームを作る必要があります。特にワイヤーフレームの段階で精緻に作成しておかないと、サイト制作時に認識のズレが発生してしまう恐れがあります。

また、Webサイト制作は大掛かりなプロジェクトですので、大規模な人数で対応することが一般的です。その際にワイヤーフレームを曖昧な定義で制作していては、共通となるゴールが見えづらく、サイト制作に息詰まってしまう可能性も考えられます。

プロジェクトを円滑に進めるためにも、ワイヤーフレーム段階で分かりやすいワイヤーフレームを作るようにしましょう。

ワイヤーフレーム作りにおすすめのツールは以下の3つです。

Adobe XDはWebデザインからアプリデザイン、音声インターフェース、ゲームなどさまざまなデザインの制作ができるアプリです。デザインツールに定評があるAdobe社の製品ですので、初心者でも安心して利用できます。

また、Adobe XDで特徴的な機能としてリピートグリッドという機能があります。リピートグリッドとは、ある要素を簡単に繰り返し制作できてしまう機能のことです。

ワイヤフレーム作りにおいては基本的に要素の連続が繰り返す場面が多いため、デザイナーにとって嬉しい機能といえるでしょう。そんなAdobe XDは月額1,298円から購入できます。さらにコンプリートプランと呼ばれる、Adobe製品が20種類以上使えるプランでも月額6,248円です。

この機会に感覚的な操作を可能にしている、Adobe XDを利用してみてはいかがでしょうか？

また、Adobe XDについて下記の記事にて詳しく紹介しておりますので、あわせてご覧ください。

Sketchは直感的な操作を可能にしていて、モバイルデザインやホームページデザイン制作に特化したツールです。

メニューが英語表記であるため、日本人の方は少し戸惑うかもしれません。しかし、機能的にはシンプルに利用できますので、慣れてしまえば利用しやすいでしょう。Sketchは個人利用であれば、99ドルの支払いで永年利用できます。

チーム単位での利用であっても、月額9ドルで利用できますので費用対効果が高いです。ただし、注意していただきたい点がMacのOSしか対応していないということです。

そのため、チームで利用するのであれば全ての人間がMacを用意する必要があります。ゼロから準備する費用も考えた上で、Sketchを利用するようにしてください。

ワイヤーフレームは、デザインの方向性を確認するだけでなく、開発の段階に進む前に問題点を発見して修正することができます。Webサイトのユーザビリティやユーザーインタフェースは、ワイヤーフレームの時点で想定されているため、ワイヤーフレームにクオリティを求める場合、多くの知識と経験が必要です。

クオリティの高いワイヤーフレームを作成するには、Web制作会社に依頼することがおすすめです。自社内でワイヤーフレームを作成する場合、デザイナーやエンジニアの経験や知識が十分でない場合、作成に時間がかかってしまうことがあります。

ここまでワイヤーフレームの書き方を中心に紹介しました。

ワイヤーフレーム作り自体はツールさえ利用してしまえば、ある程度の形にはなるでしょう。

しかし、Webサイト制作の企画構成段階ではプロの知見があった方が成功する確率が高いです。