---

ニジボックスの案件事例をご紹介！

---

Web制作を行う際に「ワイヤーフレーム」を作成しないケースはほとんどないといっていいでしょう。
今回は効率的にワイヤーフレームを作成できるツールや、初心者でも使いやすいツールを紹介します。

Web制作に欠かせないワイヤーフレームとはなにか？

「ワイヤーフレーム」とは、Webサイトの設計図のことを指します。
Webサイトを作るときには、どのようなページにするか（誰にどのようなメッセージを伝え、どのように行動してもらうのか）の企画が固まったあと、それを実現するために必要な要素を考えます。そして、その要素をどう配置するかを示すのがワイヤーフレームなのです。

ワイヤーフレーム作成の段階で、きちんと「どのような情報を伝えるのか」「必要な情報に漏れはないか」といった基本構造をしっかり決めておくと、のちのデザイン段階で「やはりこの情報を先に出そう」「この情報は出さなくていい」といった、構造にかかわる修正を減らすことができます。

ワイヤーフレームを作る際の注意点

ワイヤーフレームを作る際の注意点としては、大きく次の2つが挙げられます。

• Webサイト全体のコンセプトと概要を整理すること
• レビューと修正を繰り返すこと

Webサイト全体のコンセプトと概要を整理すること

ワイヤーフレーム制作でやってしまいがちな失敗の代表が、「情報整理する前にワイヤーフレームを作り始めてしまう」ことです。
ワイヤーフレームを作り始めると、目の前で「絵」ができていくので、仕事が進んでいるような気がしてしまうものです。しかし、ワイヤーフレーム制作で大事なことは「Webサイトの目的を達成するために、必要な要素を適切に配置すること」です。

そのためには、ワイヤーフレームを作る前に、Webサイトのコンセプト、つまり「誰に（ターゲット）」、「何をどう伝えるのか（コンテンツ）」、そしてユーザーに「どう行動してほしいのか（目的）」を整理しておくことが重要です。

レビューと修正を繰り返すこと

ワイヤーフレームを一度で完璧に仕上げるのは、至難の業です。
何度もメンバー間でレビューを重ね、修正を繰り返して完成させるものだと考えてください。何度もブラッシュアップしていくことで、ワイヤーフレームは磨かれていきます。
この段階で時間をかけることが、効果のあるWebサイト作成のポイントです。

ワイヤーフレームの作り方や役割については、下記の記事で詳しく紹介しているので、ぜひ併せてご覧ください。

ワイヤーフレーム作成ツールの選択で、生産性が変わる！

前述の通り、ワイヤーフレーム制作は以下の背景があるため時間がかかってしまいがちです。

• コンセプトを明確にして反映させる必要があるため、多くの関係者の意見を集約する必要があること
• 何度も修正を繰り返す必要があること

ビジネススピードを上げるためにも、多人数の意見を集約し素早く修正を繰り返せるツールを使用することがポイントです。

ワイヤーフレーム作成ツールを利用する3つのメリット

かつてはワイヤーフレームを作成する専用のツールがなく、代替ツールが使われていました。しかし、今では専用ツールが数多く存在します。

専用ツールのメリットとしては、次の3つが挙げられます。

1. 簡単な操作で、手早くワイヤーフレームを作成できる
2. クオリティの高いワイヤーフレーム作成ができる
3. 関係者間の共有、共同編集がしやすい

このようなメリットから、効率よくワイヤーフレームを作成するには専用ツールを使うのがおすすめです。

ワイヤーフレーム作成ツールの3つの選び方

ワイヤーフレーム作成ツールには多くの種類があります。その基本的な選び方は次の3つです。

1.担当者が使いやすいツールを選ぶ

第一に使いやすさが挙げられます。
Adobeなどのデザインソフトに慣れ親しんだ人はそれに近い使用感のものを選ぶといいでしょう。
無料トライアルなどで使ってみて、分かりやすいと感じたものを選ぶことをおすすめします。
また多くのスタッフが共同編集することも考慮して、極力操作が簡単なものを選ぶといいでしょう。

2.共同編集、共有しやすいツールを選ぶ

ワイヤーフレームは複数の関係者と共同で完成させていくものです。
そのため、共有がしやすく共同編集が可能なものが望ましいといえます。
ツールにはパッケージ型（インストール型）とクラウド型がありますが、クラウド型の多くは共同編集が可能になっています。

3.関係者が使用するデバイスで動作するツールを選ぶ

会社によって、環境はWindowsオンリーだったり、Macを併用したりとさまざまです。
また、社外スタッフとの共同編集も想定する場合、できるだけ多くのOSで稼働するツールのほうがトラブルが起こりづらくなります。
またパソコンだけではなく、スマートフォンでも確認や編集ができるツールであればスマホ画面での確認がリアルにできるので、より望ましいといえます。

すぐ使えるワイヤーフレーム作成ツール7選

いま多くの企業で活用されているワイヤーフレーム作成ツールを紹介していきます。

ツール名	対応OS	無料プラン	日本語対応	共有機能	スマホ対応
Adobe XD	Windows/Mac	×	○	○	○（閲覧のみ）
Figma	Windows/Mac/Linux	○	○	○	○（編集可）
Sketch	Mac	×（トライアルあり）	×	○	○（閲覧のみ）
Cacoo	Windows/Mac	×（トライアルあり）	○	○	×
Moqups	Windows/Mac	○	×	○	×
Prott	Windows/Mac	×（トライアルあり）	○	○	○（編集可）
Wireframe.cc	Windows/Mac	○	×	×	×

1. Figma

Figmaは、ワイヤーフレーム作成に必要な機能のほとんどを網羅し、要素を選択していくだけでワイヤーフレームを作ることができるツールです。手早く作成できるので、その後の確認や修正に時間をかけられます。
最大のポイントは、コラボレーション機能です。クラウド型ツールなので複数のメンバーがアクセスして確認や編集をすることができ、リモートワーク中などでも一つのファイルに同時にアクセスして、編集しながら打ち合わせをすることも可能です。

Figmaについては以下の記事で詳しく解説しています。

2. Adobe XD

Adobe XDは、PhotoshopやIllustratorなどで知られるAdobe社が提供するワイヤーフレーム作成ツールです。PCやスマートフォンといったデバイスごとにテンプレートが用意されており、操作性はシンプルで使いやすいと評判です。
Adobe XDをインストールしていない人でも、ワイヤーフレームを確認してコメントすることが可能です。ワイヤーフレームが完成したら、そのままデザイン制作もできます。

現在、Adobe XD単体での購入はできず、Adobe Creative Cloudの契約が必要です。

Adobe XDについては、下記の記事で詳しく解説しているので、ぜひ併せてご覧ください。

3. Sketch

Sketchは、Mac用のワイヤーフレーム作成ツールです。直感的な操作でワイヤーフレームを作ることが可能で、初心者でも使いやすい点が魅力です。Macを導入している会社なら検討してもいいでしょう。

Sketchについては下記の記事で解説しているので、ぜひご覧ください。

4. Cacoo

Cacooは、プロジェクト管理システム「Backlog (バックログ)」を運営するヌーラボが提供するオンライン作図ツールです。
ワイヤーフレームに特化したツールではありませんが、簡単に作図ができることやリアルタイムでの共有、編集ができる点が強みです。

5. Moqups

Moqupsは、直感的な操作でワイヤーフレームを作成できるツールです。
フォントやアイコン、テンプレートが豊富で、イメージに近いワイヤーフレームが作りやすいでしょう。ただし、日本語には非対応である点に注意が必要です。

6. Prott

Prottは、素材をドラッグ＆ドロップするだけでワイヤーフレームを作成できます。
画面遷移やアニメーションを設定して、動くプロトタイプを作ることもできるので、完成形のイメージがしやすいツールになっています。基本的なワイヤーフレーム作成機能が備わっており、初心者でも使いやすいツールといえるでしょう。

7. Wireframe.cc

Wireframe.ccは、ブラウザ上で簡単にワイヤーフレームを作成できます。線を引く、ボタンを配置するなど、直観的な操作だけで作成でき、ユーザー登録しなくても利用可能です。
ただし、無料アカウントだと誰でもURLにアクセスできる状態になってしまうため、ビジネスシーンでは不向きでしょう。ワイヤーフレーム作成ツールがどんなものか知りたいときに使うのがおすすめです。

専用ツール以外でワイヤーフレーム作成に使えるソフト

ここまで7つのワイヤーフレーム作成ツールを紹介してきましたが、他にもワイヤーフレームを作成できるソフトはたくさんあります。そのいくつか、特に多くの人が触れたことがあるであろうツールを紹介します。

Excel

Excelは表計算ソフトですが、セルの設定やオブジェクトの挿入などによって、ワイヤーフレームの作成も可能です。
ただし、Excelのバージョンなど共有先の環境によってはレイアウトが崩れることもあるので、使い方には注意が必要です。

Power Point

プレゼンツールであるPower Pointもワイヤーフレーム作成に活用できます。デザインテンプレートの活用、オブジェクトの挿入など、Power Pointが持つプレゼン資料作成のための機能がそのままワイヤーフレーム作成に活用できます。
しかし、縦横比がある程度限定されることもあり、本格的なWebサイトの設計には向いていません。

Googleスライド/スプレッドシート

Googleの「Googleスライド」「Googleスプレッドシート」もワイヤーフレーム作成に活用できます。PowerPoint、Excelとほぼ同様の使い方で、アクセス権限の設定で共同編集も可能です。

Adobe Illustrator

AdobeのIllustratorはデザインソフトですが、ワイヤーフレーム作成にも活用できます。ただしデザインに特化したソフトなのでワイヤーフレーム作成には機能がオーバースペックぎみになり、使いにくいと感じる人もいるかもしれません。また共同編集などにも不向きです。

このようにワイヤーフレーム作成にはさまざまなソフトが活用できますが、機能面を考えると専用ツールの導入を検討したほうが効率的だと考えられます。
無料トライアルがあるツールも多いので、実際に使用感を試してからどのツールを導入するか検討するといいでしょう。

まとめ

今回はWebサイト構築に欠かせないワイヤーフレーム作成ツールを紹介しました。ぜひ、自分たちのチームや環境にあったツールを見つけ出してください。

ニジボックスでは、サイト制作やプロダクト開発における情報設計やビジュアル設計といったUIデザイン面に加え、ユーザーテストなどによるUX観点でのご支援も可能です。
制作においてワイヤーフレーム設計にお困りの方は、ぜひ以下よりお問い合わせください！

お問い合わせはこちら