ワイヤーフレームの役割や作り方と使えるワイヤーフレームツール7選！
今回は、サイトの情報整理をするための手法の一つであるワイヤーフレームについて、その役割や目的、おすすめのツールを解説していきます。
目次
ワイヤーフレームとは
ワイヤーフレーム
ワイヤーフレームとは、ホームページ作成やWEBアプリ・サービス開発に必要なもので、WEBページのレイアウトを定めるものです。
実際のデザインやコーディングなどの作業に入る前段階で作成し、文章だけでは分かりにくい部分を可視化し整理するのに役立ちます。
ワイヤーフレームを事前に作っておくことで、WEBアプリ・サービスに必要なパーツや機能をもれなく整理することができるため、開発中に機能が必要になるなどのトラブルを減らすことができます。
ワイヤーフレームは家を建てる際の設計図のようなものです。家の設計図を全ての階数分作るように、ワイヤーフレームも全てのサイト階層分作成する必要があります。
また、ワイヤーフレームに似た言葉として、ディレクトリマップ、サイトマップというものがあります。
ディレクトリマップ
WEBサイトを構成するすべてのページとURLを照合させて書き出した一覧のことです。
ワイヤーフレームがサイト内のコンテンツやパーツを階層ページごとに配置したフレームを表すのに対して、ディレクトリマップはサイト内の構造を理解するために作成されます。
表形式や樹形図形式で階層ごとにタイトルとURLを書き出すことで、ディレクトリの階層構造も可視化され理解しやすくなります。
サイトマップ
WEBサイト全体の構成をわかりやすく示したもので、サイト全体のページの構成をリスト型で表します。サイトマップはWEB上に反映されるものであるため、ユーザーにもわかりやすく伝える必要があります、
また、SEO対策としての役割も果たします。ユーザーだけでなく検索エンジンにもサイトの全体像を伝えることで理解を促し検索順位を上げる効果があります。
特にサイト規模が大きい場合には、ユーザーや検索エンジンにサイト構造を理解してもらうために作成しておくのが良いでしょう。
ワイヤーフレームの役割
ワイヤーフレームはホームページを作成する際に大切な役割を果たしてくれます。
ワイヤーフレームを作成することで、プロジェクトに関わる人たちとのコミュニケーションにも役立ちます。たとえば制作会社の場合、自分が設計したワイヤーフレームをクライアントに見せることで、完成イメージを共有しやすくなります。
ワイヤーフレームを作成するには時間がかかってしまいますが、作成することでメンバーやクライアントと認識を共有し、誤解や勘違いを防止できます。大きなプロジェクトをリードする際、関係者全員で認識を合わせるのは難しい作業ですが、ワイヤーフレームによって可視化されることで方向性を統一できます。
また、ワイヤーフレームはセルフワークの際に自分自身の考えをまとめるのにも便利です。浮かんだ考えを文章だけでなくワイヤーフレームとして書き留めておくことで、その時浮かんだイメージを振り返りやすくなるのです。
ワイヤーフレーム作成のポイント
ワイヤーフレームを作成する際に、押さえておくべきポイントを説明します。
アイディア出しはまずは個人で行う
アイディア出しは、個人でしっかりと行ってからメンバーと行ってください。その理由は、他の人を交えるとさまざまな話題が出てしまい、まとまりづらくなってしまうからです。はじめに自分のアイディアをまとめてから複数のメンバーで行うことをおすすめします。
また、1から考えると時間がかかってしまいます。何か参考になるものがあると、スムーズに作業が進むでしょう。たとえば近い業種のWEBサイトを研究し、参考にしてみるのもおすすめです。参考だけではなく、レイアウトをワイヤーフレーム化することで、自分のアイディアも広げることができます。
競合サイトを参考にする
WEB制作をゼロベースで行うのは多大な時間がかかります。特に初心者であればどのように設計してよいのかわからないことも多いでしょう。
アイディアが思うように出てこないときは、競合サイトや類似サイトをチェックしてみることをおすすめします。サイトマップを見ると、どのような情報を網羅しているかが分かります。また、作成しようとしているサイトに不足しているコンテンツやパーツを把握できます。
デザイン自体のコピーは禁止されていますが、コンテンツやパーツがなぜその配置になっているのかを参考にすることは重要です。自身のサイトでももれなく実装することで競合に劣ることのないサイトを制作できます。
デバイスごとに別々のワイヤーフレームを用意する
サイト制作を行う際はスマートフォンと、タブレット、パソコンなどマルチデバイスへの対応が必要です。ユーザビリティの観点からデザインはそれぞれのデバイスごとに行う必要があります。
レスポンシブデザインについても検討し、サイトのパーツ配置を考えてワイヤーフレームを作成しましょう。
『デザイン』は考えない
ワイヤーフレームはデザインを考える必要はありません。ワイヤーフレームはあくまでサイトを作成する際の設計図なので、デザインは考えなくても良いのです。デザインの一部であるカラーリングやボタンの形などは、実際のWEB制作のプロセスでデザイナーが行う仕事です。
ワイヤーフレームは実装作業を効率化するためのものであるため、デザインの要素は除いてシンプルなものを作るようにしましょう。
ワイヤーフレームを作成する手順
闇雲にワイヤーフレームを作成してしまうと時間がかかってしまいます。ワイヤーフレームを作るとくの手順をしっかり掴んでおきましょう。
1：掲載する情報を整理する
ワイヤーフレームに配置する情報をまとめます。ヘッダーやフッターサイドバーなどのパーツや、サービスのロゴなどのコンテンツについて漏れなく列挙します。
列挙した情報を共通点でグルーピングし、グループに優先順位付けを行います。ユーザービリティの観点から、1ページに記載できる情報量や1サイトの階層数には制限があります。その中で必要な情報を届けるために優先順位付けは重要となります。
情報の整理には付箋を用いると便利です。1枚に1つの情報を列挙したり、グループごとで色分けしたりしてわかりやすくまとめていきましょう。
2：レイアウトを決める
ヘッダーやフッター、サイドバーなどのパーツを配置や、カラムをいくつ設けるかなど全体像を決めます。またスマートフォンやタブレット、PCなどデバイスに応じたレイアウトを心がけましょう。
3：清書する
グループ化した情報や決定したレイアウトをもとにワイヤーフレームを作成していきます。
ページ数が少ないサイトや個人で運営するサイトであれば手書きでも問題ありません。ページ数が多い場合やチーム開発を行う場合などは、デジタルデータを残しておく観点、共同で編集できる観点から作成ツールを用いるのがおすすめです。
また、各デバイスについて実際のサイズを想定して作成することで、実装時の齟齬を減らすことができます。
便利なワイヤーフレームツール〜無料〜
Cacoo
Cacooは操作が簡単な編集ツールですので、初心者のかたでも分かりやすくきれいな図を作成できます。また、日本語で説明されているため、その点でも使いやすい仕様になっているおすすめツールです。
オンライン上で使えるワイヤーフレーム作成ツールで、インストールをしなくて済むので手間がかからないのが魅力です。インターネットができる環境があれば自宅、外出先、どこでも作業ができるので、アイディアが思いついたら書き留めることができます。
Cacooの最大の特徴は、クラウド上で作成したワイヤーフレームを共有したり、同時に編集できたりするほか、チャット機能があるのでメンバーと連絡を取りながら作業ができます。
フローチャート・ワイヤーフレーム・AWS構成図・マインドマップ・組織図などのテンプレートと図形が豊富に用意されているので、独自の画像やスクリーンショットなどのアセットを利用できる点が魅力的です。
スライドショーモードを使うことで、Cacooで作った図を使ってプレゼンテーションができます。コメント機能を使うことで図に対するフィードバックを見ることが可能です。また、メンバーからのアドバイスや改善要望などを自分の好きな場所に残すことができます。フィードバックをもらったら、内容を確認しながら図に反映していくことで、より良いものが作れるでしょう。
図を共有する相手がCacooのアカウントを持っていないとしても、リンクを相手に送付するだけで簡単に図を共有し、共同作業ができます。また、閲覧・編集権限も個別に設定ができます。
無料プランの場合、保存できるフレーム数や、エクスポートのファイル形式が制限されます。
marvel
モバイルアプリに最適なワイヤーフレームを作成できるツールです。
プロジェクトマネジメントのためのツールも充実しています。コラボレーションツール内のコメント機能やユーザーテストを用いてプロジェクトメンバーからのフィードバックやアイディアを募ることが可能です。
無料プランではプロジェクト数やプロジェクトにアサインできるメンバー数に限りがありますが、有料プランではその上限が緩和されます。
Justinmind Prototyper（Free Edition）
iPhoneやAndroidなどの、スマホ向けのサイト・アプリのワイヤーフレームが手軽に作れるツールです。
初心者の方でもわかりやすく、簡単な操作方法で誰にでも使える設計になっています。チュートリアルが丁寧で使いやすく、無料でも十分に豊富な機能を利用できる点が魅力的です。ブラウザで実際の動作を確認することも可能です。
ただし無料プランでは機能に制限がありますので注意してください。
moqups
用意されてあるテンプレートや自身の画像を用いてワイヤーフレームを作成できます。WEBアプリケーションであるため、インストールも不要です。テンプレート内に豊富な図形やアイコン、フォントが用意されており直感的にドラッグ&ドロップで編集できる手軽さが魅力。
ただし言語は英語のみのため留意が必要です。
また無料版ではプロジェクトを1つしか立ち上げることができないため、複数のプロジェクトを受け持っている際は不向きかもしれません。
便利なワイヤーフレームツール〜有料〜
Adobe XD
Adobe XDは、WEBサイトや、モバイルアプリなどのデザインに適した、オールインワンのUX/UIソリューションです。デザイン・プロトタイプ・共有、すべてをXDで行うことができます。
作成したプロトタイプをURLで共有することができ、共有する際にパスワードを設定することも可能なので安心して利用ができます。
Protto
用意されたパーツをドラッグ&ドロップで直感的に組み合わせて作れるツールです。オンライン上で利用できるのも手軽で魅力。
プロトタイプ機能も充実しているため、アプリ制作なども行う場合には大変使いやすいでしょう。スマホ（iPhone、Android）向けのアプリもあり、開発プロセスの効率化を図ることを推進しています。
無料プランもありますが、ワイヤーフレーム機能は有料プランのみとなっています。
オンラインで使えるツールで共同編集者と共有ができるため、オンラインでフィードバックを受け取れます。ディスカッションのログや決定事項をまとめる機能も充実しています。
作成できるプロジェクトの数は無制限で、プロジェクトごとに無制限のページを作成できるほか、ページ単位でディスカッションスレッドを立ち上げられるためチーム開発を効率的に行なえます。
デフォルトで用意されているライブラリ内の図形や自身の持つ画像を利用できるとともに、作成したワイヤーフレームをライブラリ化できるため再利用によるコスト削減も期待できます。
また、モバイル端末についての開発にも便利なプロトタイピング機能が搭載されています。iPhoneやiPad,、Androidの各バージョンのテンプレートが用意されており、画面遷移などもアニメーション化されているため、ワイヤーフレームの制作はもちろんですがプロトタイピング全般に利用できるツールです。
おわりに
今回はワイヤーフレームの概要と作成方法、おすすめのツールについて解説してきました。
サイト制作の途中で方向修正をするのは大きなタイムロスになります。そのため事前にサイトのレイアウトや機能について定め、プロジェクトのメンバー全員が同じ認識で制作を行う必要があります。そのためにワイヤーフレームは有用です。
ワイヤーフレームを作る目的をしっかりと理解し、サイト制作を進めていきましょう。
WEBでのお問い合わせはこちら