OmniGraffleを便利に使うあれこれ

制作のためにいろいろなソフトを使っていますが、数年経っても相変わらず使っているもののひとつに OmniGraffle があります。ダイアグラムやワイヤーフレームを手軽に作れますが、多機能なので奥が深いソフトのひとつ。以前もOmniGraffleを使ったテンプレート作りで便利な使い方を幾つか紹介しましたが、今回も最近(やっと)見つけたものも含めて6つ紹介します。

下準備を忘れずに

キャンバスパネル

Webサイトのワイヤーフレームを作るのであれば新規文書をそのまま使わず、キャンバスのサイズをきちんと調整しましょう。ディフォルトではルーラの単位がインチになっている場合もあるので、まずはピクセルに切り替えます。グリッドの間隔もインチではなくピクセルにしておくと設計がしやすくなります。OmniGraffleでは、グリッドをオブジェクトに手前に表示させることが出来るので、厳密な設計を好む方は手前に表示したほうが作りやすいでしょう。

もちろん、こんなことを毎回するのは面倒です。毎回使いそうなキャンバスの設定が完了したら、テンプレートとして書き出します。今後は新規作成するときに作ったテンプレートを選ぶだけで良いですし、毎回確実に使いそうであればディフォルトテンプレートに設定しておいても良いでしょう。

スタイルを上手に使い回し

ステータスパネル

ライン、図形、色、影などなどオブジェクトに装飾を手軽に加えることが出来ますが、複雑になればなるほど同じように再現するのが面倒になります。まったく同じであれば複製で良いのですが「このグラデーションだけ別に使いたい」といった場合もあります。

そんなときに便利なのがウィンドウの下に表示されるオブジェクトのステータスパネル。選択したオブジェクトの状態 (スタイル) を表示してくれるわけですが、実はそれぞれのアイコンがドラッグ出来るようになっています。これを使えば線のスタイルだけ使い回しといったことが可能になります。元のオブジェクトを選択した後、パネルからコピーをしたいスタイルを新しいオブジェクトにドラッグ&ドロップするだけ。

計算は任せる

数値入力

変数を使って自動的に計算することが出来ますが、オブジェクトの大きさや位置もわざわざ計算機を片手に考えなくても OmniGraffle がすべてこなしてくれます。オブジェクトの縦横軸、横幅と高さが表示されているフィールドに計算式を入れるだけ。「+」「-」「*」「/」に対応しています。「このオブジェクトの2倍の高さの別オブジェクトを作りたい」といった場合に便利です。

オブジェクトを均等に揃えるときに便利な「揃え」パネルですが、こちらでも数式を入れることが出来ます。フィールドに計算式を入れて結果の数字が出た後、再度ボタンをクリックしないと結果が反映されてないので注意。

マスクあります

画像パネル

ワイヤーフレームに何か画像を入れようと思っても、形が合わないことがあります。わざわざ他のツールを使って画像の大きさを合わせるなんて面倒です。OmniGraffleに貼付けた画像を選択し、画像パネルにある「縦横比を維持」というボタンをクリックするだけでマスクが作られます。マスクされた画像の大きさを変更することが出来るだけでなく、透明度や配置の調整も可能です。

ディフォルトでは四角形のマスクですが、形を変えたい場合はラインと図形パネルにある図形ライブラリから好きな形を選択するだけ。奇抜なマスクもあっという間に出来ますし、あとで変えることも出来るので手軽です。OmniGraffleのロドーイング機能で作ったオリジナル図形をマスクにすることも可能です。

マスクとして使える形もいろいろ

マスターオブジェクトを使いこなす

ひとつのオブジェクトを量産したまでは良いのですが、何か変更があった際にひとつひとつ変更するのは面倒です。そこでマスターになるオブジェクトを作成しておくと、今後はマスターだけ変更すればすべて反映されるようになります。

  1. 右クリックで「別形式でコピー」にある PDF を選択します
  2. オブジェクトを貼付けます (元オブジェクトは削除しても大丈夫です)
  3. オブジェクトをダブルクリックをすると新規ウィンドウが開きます。このファイルを一度保存します
  4. あとはマスターオブジェクトを必要に応じて編集するだけ

PDFとしてオブジェクトをコピー

高速にダイアグラムを作成

便利なのかどうかサッパリ分かりませんが、なかなかおもしろいので紹介。オブジェクトを選択した状態で「Cmd ⌘」キーを押しながらキャンバスの何処かをクリックすると、選択したオブジェクトが複製されるだけでなく、オブジェクト間に矢印線が追加されます。この方法を繰り返せば、とりあえずダイアグラムが完成します。あとは、「揃え」パネルや「自動レイアウト」パネルで調整するだけである程度の見た目は完成します。

マスターオブジェクトを利用してオブジェクトを管理しながら作りたい場合はオススメ出来ませんが、選択ツールを使えば同じ形のオブジェクトをすべて選択することが出来ますし、大量生産したあとスタイルを変えるといった作業も難しくないはずです。

Yasuhisa Hasegawa

Yasuhisa Hasegawa

Web やアプリのデザインを専門しているデザイナー。現在は組織でより良いデザインができるようプロセスや仕組の改善に力を入れています。ブログやポッドキャストなどのコンテンツ配信や講師業もしています。