OmniGraffleを使ったテンプレート作り

OmniGraffleに実装されている共通レイヤーや変数といった機能を利用することで、毎回同じ数値やオブジェクトを入力することなく、効率的な管理とページの量産が可能になります。

OmniGraffleは、ワイヤーフレームをささっと書くのに大変便利なツール。以前「サイト制作に便利なOmniGraffleステンシル」という記事で、高品質のステンシルを幾つか紹介したことがあります。これらを使えば手軽に完成品に近い見た目の絵図を作ることが可能になります。なかなか便利な OmniGraffle ですが、通常版とプロ版の2つあり、どちらか迷っている方もいるのではないでしょうか。今回紹介するハウツーは通常版でもある程度出来ますが、プロ版で効果を発揮するテンプレートの作り方です。

変数を活用する

書類を制作する際に、何度も同じことを書く場合や、ページ番号を挿入したい場合があります。こうした情報を手入力していると大変手間がかかります。OmniGraffle にはテキストフィールドに変数を利用することが出来、ダイナミックに文字や数字を生成することが出来ます。例えば、各キャンバスをページと見なし、キャンバスにそれぞれ名前を付けておけば、そのキャンバス名をテキストフィールドに反映出来ます。「編集」→「変数の挿入」を選択すると、OmniGraffle で使える編集がリストアップされています。

それぞれのページのヘッダーとしてページ名を表記しておきたい場合、わざわざキャンバスとテキストフィールドに2度書かなくても、一括管理が出来、ミスが少なくなります。また、書類の名前や作成者名などフッター情報として欲しいデータも変数から呼び出せます。

共有レイヤーを作成

上記の変数機能は通常版でも実装されている機能ですが、プロ版にしかない機能に共有レイヤーがあります。その名のとおり複数のキャンバスで特定のレイヤーを共有することが可能になります。「編集」→「レイヤー」から選択するか、キャンバスを右クリックすることで共有レイヤーを作成することが出来ます。ドキュメントのヘッダーやフッターはもちろん、ワイヤーフレームを作っている際はナビゲーションなど一括管理しておきたい際にも便利です。新規作成をした際に、共有レイヤーにしたものはすべて自動的に複製されますが、可視/不可視設定をしたり、キャンバス個別にレイヤーを削除することが可能です。

この機能だけでプロ版に変えるのは悩ましいかもしれませんが、OmniGraffleを使ってドキュメントを書き始めている方にとっては価値があると思います。効率よく図を描くだけでなく、効率よく書類自体も仕上げてしまいたいですね。

筆者について

Photo of Yasuhisa Hasegawa

デザインやコンサルティングを通じてWebの仕事に携わる活動家。Webとデザインをキーワードに情報発信をしているだけでなく、各地でWebに関するさまざまなトピックで講演を行ったり、多数の雑誌で執筆に携わる。

  • http://www.t-studio.com/ TOM

    OmniGraffleを使うようになってしばらくは、一つ一つラベルをつけたり、個別に作ることが多かったのですが、マスターキャンバス機能やご紹介されているのこれら機能を知って以来、OmniGraffle以外でWFを作る機会がめっきり減りました(笑)
    個人的には、リンクが設定できるので、ナビゲーション項目をクリックするとそのページのWFを表示させるといったことが、PDF書き出しの際にできるで重宝しています。

  • ヤスヒサ

    @TOM
    Fireworksかと思いきや、OmniGraffleお使いなんですね。あちらもインタラクション付けやすいですし、ポジショニングもしやすいですからプロトタイプを作るには結構使える印象がありますね。
    僕も OmniGraffle 一方化になったきっかけは、リンク設定や PDF 書き出しですね。あと、表示・非表示なんてのも出来るのも素晴らしい。ダイアグラム描くソフトという位置付けではなくなってきていますが、今後インタラクティブなワイヤーフレームが作れる機能が増えると嬉しいなと思っています。

いかがでしたか?

閉じる 共有する

記事はお楽しみいただけましたか?役に立つ情報でしたか?ぜひ他の場所で共有してみてください。