会社設立に役立つ情報、コラム更新記事、サイト更新情報等の新着情報を本ページにてお伝えしております。

2015/09/10

サイト制作時のワイヤーフレームを作るときに使えるツール

サイトを制作する際に、制作を依頼する側で要望案の情報をとりまとめて、制作側へ依頼するようなケースがあります。

サイトの原案の制作は手書きもしくは何かしらのツールを使って、作業を進めることになりますが、そんなワイヤーフレームを作成する上で便利なツールと実際に今まで使ってみてのメリット・デメリットをご紹介します。

そもそもどんな作業をするのか？

WEBの制作スタッフか依頼会社の担当者でなければ、あまりサイトの原案については関わる機会が無いのではないでしょうか。
サイトの原案を固めるために作成するのが、「ワイヤーフレーム」といわれるものになります。

このようなもの…

原案がしっかりと固まれば良いので、特にこれといった決まりはありません。ざっくりと枠を並べて、何が入るかだけを明確にしておく場合や、実際のサイトに近い形でしっかりと内容を作り込んでおく場合などがあります。

サイト制作の流れとしては、ここで制作するワイヤーフレームをベースにデザインを行い、組み上げてサイトの完成となります。

ワイヤーフレームを作るためのツール

ワイヤーフレームの制作ツールについては、これといって決まりがあるわけではないので、制作者が使いやすいツールを選ぶのが良いと思います。

今回は筆者が実際に作業してみたツールのメリット・デメリットをツール別にご紹介していきます。

まずはアナログな手書き

スタンダードな紙とペンでの手書き制作。実際に作業する場合には、い色々と書き込むことが多いので、A4以上の方眼紙でシャーペンでの作業をおすすめします。
あまり、方眼の線が濃いと要素がわかりにくいので、オキナ株式会社のプロジェクトリングノートや、mnemosyne等の方眼紙がおすすめです。

メリット

想像力を働かせて、すぐに書きとめるには一番いいツールです。すぐに書き込めるのとPCを操作するという動作が省かれる分、原案を考えることに集中ができます。

デメリット

ページボリュームが多いようなサイトにはお勧めできません。あまりにページが多いと、非効率になるので10ページ以下のサイト等で使うと良いかもしれません。

定番：エクセル

共有性が高いのでエクセルを使って原案を考える人は多くいます。エクセルのセルを方眼のようにして使っている場合が多いと思います。シート別にページを分けて作成できるので、便利かもしれません。

メリット

一般的なツールなので、共有がしやすく崩れにくい。操作性もかんたんなので、使いやすいツールです。

デメリット

ページ数が多い場合に、シートタブが増えすぎるので、あまりメリットがありません。また、セルで構成されているため、レイアウトが四角くかっちりとした作りになりがちです。

テンプレート機能が使えるパワーポイント

パワーポイントは通常プレゼンや資料作成などで使いますが、ワイヤーフレームの制作にも使えます。
使う場合には用紙設定で縦型にして使うとサイトに近いイメージで作成できます。また、マスターデータのテンプレート設定で、サイトの共通部分をあらかじめ作成しておくこともできます。

メリット

テンプレート設定ができるのと、パーツを直観的に配置していくことができます。ガイドラインなんかもマスターデータ側で設定しておくことで、容易に原案が作成できます。

デメリット

縦の高さが決まっているいるため、１ページの要素が長くなってしまった場合、スライドとページが一致しなくなります。

ネットサービスを使う

ワイヤーフレームの作成に特化したネットサービスがあります。サイト制作用のパーツが揃っているので、簡単に原案を考えていくことができます。
日本語のサイトではCacooがおすすめです。操作が簡単で、チャット機能も付いており、複数人での共有も簡単にできます。

メリット

ワイヤーフレ―ムが制作しやすい状態になっているため、エクセルやパワーポイントのような細かな設定が不要で、簡単に作ることができます。多くの場合、無料版と有料版があり有料版の場合にはページの数の制限がない事が多いので、ページ数の多いサイトにおすすめです。

デメリット

日本語対応のサイトが少ないため、日本語対応だけで探すと限られます。また、会員登録が必要であったり、ネット環境が必要だったりと制限があります。

まとめ

いかがだったでしょうか。どのツールでもメリット・デメリットがあるので、一概にこれが良いです！とおすすめすることはできませんが、PCのスキルと環境にあわせて作成してみてください。

ちなみに、制作費用をしっかりと払って、制作側に原案を作成してもらうということも当然できます。
コストを抑えたい、要望をしっかりと伝えたい！といった時には、上記のようなツールを使って原案を考えてみてください。