なぜ私はワイヤフレームをOmniGraffleで書くのか


仕事上、チームを組んでアプリやウェブアプリケーションを作る際には、ワイヤフレームというものを作成します。

ワイヤフレームは、これから具体的にどういった画面構成のものを作るのかということを関係者(ディレクター、開発者、デザイナー、プロマネ、クライアントなどなど)にきちんと共有するために作る非常に重要な成果物です。

ワイヤフレームには、全ての画面のおおまかなレイアウト、画面に表示する内容や文言、その後には画面間の遷移、アプリやウェブサイトが必要となるインタラクションなどを全て書き込みます。ワイヤフレームを書くと、これから作るものの画面構成・遷移・内容文言・レイアウト・インタラクションを関係者にレビューしてもらうことができます。フィードバックを経てワイヤフレームが承認されれば、この資料はそのままビジュアルデザイン時や実装時の仕様書の一つにもなります。

ワイヤフレームが具体的にどのようなフォーマットの資料になるかというと、以下のサイトに掲載されているワイヤフレームの例を見るとだいたい雰囲気わかると思います。

私は、このワイヤフレームをOmniGraffleという図形描画ツールを使って記述しています。OmniGraffle(オムニグラフと読みます)は、知っているひとは絶対に知っている図を書くのに最高に便利なツールで、ワイヤフレームに限らず仕事上の資料の多くはこのOmniGraffleを使って書いています。OmniGraffleにはStandard版とProfessional版の二種類があり、自分が使っているのは200ドルするProfessional版です。

このOmniGraffleでワイヤフレームを書いていると、Windowsでも編集できないかというふうなことを聞かれます。開発に用いる資料の一つなので自分でも編集したいという気持ちはわかりますが、残念ながらOmniGraffleWindows版はありません。Omni Group社が出しているデスクトップアプリケーションはMaxOSXでしか利用できません。また、残念なことにMaxOSXを使っていても、OmniGraffleを購入するのにProfessional版だと200ドル、安いStanrdard版でも100ドル出さないと利用できません。100ドルという値段は、Adobe PhotoshopCS5などに比べると20倍以上安く、これだけ聞くとべらぼうに安い気がするのですが、無料で利用できるアプリが氾濫する今の世の中では控えめに見てもソフトウェアに100ドルも出すのはすこし抵抗があると思います。

図を作成するためのツールをウェブ上で検索してみるとわかるのですが、巷にはマシンにインストールする必要すら無くオンライン上で無料で利用できる図形描画ツールがたくさんあります。最も有名なのは、Nulab社のCacooや、Google Docsで提供されているGoogle Drawingなどだと思いますが、それ以外にもLucidchartdraw.ioなどがあります。さらにワイヤフレームやプロトタイプを作成する専用のツールであればさらにもっと沢山のツールも紹介できます。

これらは手軽にオンライン上で使えるだけではなく、多くは無料かそれに近い値段で利用することができます。OmniGraffleのように、特定のプラットフォームでしか利用できないということはありません。ツールによってはオンライン上で利用できることを活かしてコラボーレションのための機能が備わっているものもあります。しかしそれにも関わらずなぜ私はこのOmniGraffleを使ってワイヤフレームを書くのでしょうか。前置きがかなり長大になりましたが、この記事ではその理由を説明します。

複数キャンバスに対応している

結構多くのオンラインツールで顕著なのは、複数キャンバスをサポートしていないことです。手軽な用途を想定しているのか、Google Drawingなどでは今開いている単位で複数のキャンバスを持つことしかできず、一枚の図しか作ることができません。

もし複数のキャンバスを使いたい場合には複数のファイルを作成する必要がありますが、これだとキャンバスを切り替えるのにわざわざ開きなおしたりしないといけません。1つの編集単位で図を沢山書きたい場合には、キャンバスを巨大にするしか方法がありません。

それなりに量を書く人にとってはこれは致命的です。ワイヤフレームの画面をたくさん書くための用途には使えないのです。

動作が軽い

OmniGraffleMacOSXマシン上で動くアプリケーションです。オンライン上で利用できるツールに比べるとインストールする手間が増えるものの動作速度では圧倒的に軽いです。自分が使う上では、このことは大変重要です。

単に1-2時間少し使うぐらいではこのことことは、あまり気にならないのですが、自分が実際にワイヤフレームを書いている時には、何日間か続けて一日中ワイヤフレームをガリガリ大量に書くことになります。そういった時に少しでも動作が重かったりするとそれだけストレスになります。

共有レイヤ・変数に対応している

Cacooの設計思想では、ユーザのためにレイヤー機能はつけないポリシーになっているそうです。

OmniGraffleでは当然のようにレイヤはありますし、それ以外にも共有レイヤや変数などもサポートしています。共有レイヤとは、複数のキャンバス間で共通するレイヤを設定できる機能です。変数機能は、キャンバス番号やキャンバスの総数やその時の日付などの変数を埋め込める機能です。共有レイヤと変数機能を組み合わせると、例えば全てのキャンバスでページ番号を振ることができたりするので、きちんとした体裁の資料作成に便利です。ちなみに共有レイヤはProfessional版でしか利用できないので注意して下さい。

利用できるステンシルが豊富

OmniGraffleで利用できる図形は、全てステンシルの中から選択します。このステンシルは、OmniGraffleから利用できる図形をひとまとまりにグループ化したものです。OmniGraffleではこのステンシルが豊富にあります。自分自身でステンシルを作成することもできます。また、OmniGraffleのステンシルの共有サイト、Graffletopiaを見ると様々なステンシルが配布されており、ワイヤフレームを書く際に困ることがありません。

Illsutratorから図形をインポートできる

ステンシルの中に自分が利用したい図形がない場合には、自分で図形を作成することになります。素晴らしいことにOmniGraffleではAdobe Illustratorから図形を一瞬でインポートすることができます。

Illustratorで何らかの図形を作成して、選択した図形をOmniGraffle上にドラッグアンドドロップすると、その図形がそのままOmniGraffle上にインポートできます。ワイヤフレーム書いているとどうしてもステンシルに無い図形もあったりするのですが、この機能があるお陰でIllustratorで図形を作って簡単に利用できます。

スマートオブジェクトを利用できる

OmniGraffle上ではいわゆるPhotoshopで言うスマートオブジェクトが利用できます。スマートオブジェクトというのは、コピーしたものを編集してもそれがコピー元のオブジェクトにも反映されているようなオブジェクトのことです。ワイヤフレームを書いていると、各画面で共通する部品が出てくるので、スマートオブジェクトがあると修正する際に手間が省けて助かります。通常の図形描画ツールではスマートオブジェクトに対応していないため、コピーした部品を途中で修正する場合にはコピーしたものを全てひとつひとつ修正しなければいけません。

OmniGraffleでスマートオブジェクトを作成するには、オブジェクトを選択肢て「PDFとしてコピー」して貼り付けるとスマートオブジェクトになります。詳しくは次のページを参考にして下さい。

リンク機能でプロトタイプも作れる

自分ではあまり使っていないのですが、OmniGraffleではある図形をクリックした時には別の画面に遷移する、というような処理もできます。このことにより、単にワイヤフレームを書くだけではなく、画面遷移を確かめるためのアプリの簡単なプロトタイプも作成することもできます。OmniGraffleはHTML形式でもエクスポートできるので、作成したプロトタイプもブラウザさえあれば実行できます。

まとめ

以上長々と書きましたが、ワイヤフレームをOmniGraffleで書く理由を紹介しました。