App Store で購入した iDraw がよくできてたので、レビューを書いてみる。
iDraw 
カテゴリ: グラフィック&デザイン
価格: ￥2,200
もくじ
iDraw の特徴
iDraw の特徴を簡単にまとめてみる。
洗練された UI
iDraw のメイン UI は固定レイアウトになっている。表示の切り替えもなく、常に定位置にある。
これは Inkscape や FreeMind などでも採用されているが、レイアウトで戸惑うことがない、実によい設計だと思う。
ポップアップやモーダル ダイアログが登場する機会も、ファイルの読み込みと保存時ぐらいである。常にすべてを一望でき、それらだけで、あらゆる操作がおこなえるようになっている。
半端にカスタマイズさせるぐらいなら、ベストな配置を提供する。コントロールの位置を考える時間は、絵を描くことに費やして欲しい。そんな意志すら感じる。
ただ、パス演算や色の編集などをおこなうパレットがフローティング形式なのは残念である。これはレイヤー領域あたりにでも収納できるようにして欲しいところ。
美しい
Pixelmator などにも通じる、黒を基調としたデザインが実に美しい。
特に、部位の違いを質感で表現しているところに感心させられる。パレットは Lion っぽい布テクスチャ。ツールバーとルーラーには光沢、それ以外はコントラスト差を抑えた、ささやかなグラデーション。
こういう色調を統一しながら質感を変える手法は、インテリア デザインなどではポピュラーである。しかし、まさかソフトウェアの世界でお目に掛かるとは思ってもみなかった。
単に美しいだけでなく、高級感すら感じるのは、こういう詳細なレベルでのこだわり故なのだろう。
Lion のフルスクリーン対応
Lion のフルスクリーンを好まない人もいるそうだが、私はかなり気に入っている。
Windows でも、グラフィック系や Visual Studio、Eclipse といった IDE 系はフルスクリーンで使っている。
なるべく広い画面で操作したい気持ちもあるが、何より、この種のツールは機能的に自身でほぼ完結しており、あまり他と連携することがないため、ウィンドウ化する機会がそもそも少ない。
また、使用している Mac が MacBook Air で、トラックパッドを利用していることも大きい。アプリをフルスクリーンにしていると、それらをスワイプやミッション コントロールで切り替えやすくなる。
これらに馴染むと、切り替えたいウィンドウまでカーソルを動かすのが億劫に感じられる。よって、アプリのフルスクリーン対応は、私としては重要な評価ポイントなのだ。
iDraw の場合、フルスクリーンに対応していることも素晴らしいが、メニューに頼らずとも、大半の作業をウィンドウ内の GUI だけで完結できる点を評価している。Lion のフルスクリーンはメニュー領域を隠すので、これに依存したアプリは極めて使いにくくなる。
よって、フルスクリーン対応をうたうなら、メニューがなくても不便にならない設計にすべきだと考えている。私が iDraw でメニューを使う機会は、ファイル系の操作ぐらいである。
iOS 系テンプレート
iDraw には Shaped Library という、テンプレートが同梱されている。これは iDraw 内で編集可能なグラフィックであり、ベクター形式なので拡大・縮小や変形も自在におおこなえる。
その中でも特に、iOS 系のテンプレートが便利である。iPhone アプリのモック画面を作成するときなどに使える。
ただし、iDraw 標準のグリッド幅である 12px の場合、iPhone 系はきっちり収まらないので、8 の倍数などに変更しておいたほうがよい。ピッタリのサイズにしてからグリッド吸着を有効にすると、非常に使いやすくなる。
安い
実用的なドロー系ソフトにもかかわらず、iDraw の価格は \2,200 である。安い。実に安い。
App Store にはこういう、廉価ながらも良質なアプリが豊富に揃っているようだ。特に数千円台は激戦区らしく、有料アプリの上位ランキングはこの価格帯が占めている。
これぐらい安いと、気分次第でふらっと購入してしまう。iDraw もそんな感じで衝動買いした。iDraw をきっかけに、他にもいくつか廉価なアプリを購入してみたが、今のところ失敗したと感じたアプリはない。
ただし、ドロー系には Inkscape という強力なフリーウェアが存在するため、他の部分に魅力を感じないなら、こちらを選んだほうがよいだろう。
歯車のピクトグラムを描いてみる
iDraw の使用感を伝えるために、実際に絵を描いてみる。題材は歯車のピクトグラムにしてみた。
まず、歯車の歯を作成する。Polygon Tool で縦長の 6 角形を描く。
何か絵を描くとき、レイヤーを分けておくと作業しやすいので、歯は「歯のもと」というレイヤーに作成した。
歯のもとを作成
次に「歯のもと」に作成した歯を、「歯」レイヤーにコピペする。
作成する歯車には 12 本の歯を持たせる予定なので、それらが均等配置されるよう、30 度ずつ傾斜させて配置する。
歯を作成
歯車の中央部分にあたる真円を描く。これは「歯」の上の「円」というレイヤーに作成する。
円
最終型を描くために「歯車」というレイヤーを用意し、歯と円をコピペする。
歯と円を組み合わせる
歯と円のオブジェクトを選択してから、フローティング パレット上の Combine Paths で Union を選ぶ。
これはいわゆるパス演算という機能で、Combine Paths は複数のパスを結合する。Union の場合、重なりあったパスの外周が繋がれる。
Union
Union を実装すると、歯車の下地が完成する。
歯車の下地
下地ができたので、仕上げとして穴を穿つ。「歯車」レイヤーの上に「穴」というレイヤーを作成し、そこに真円を描く。位置は下地の中央とする。
穴を作成
「穴」レイヤーで作成した真円を「歯車」レイヤーにコピペする。
そして、既に作成した歯車の下地と円のオブジェクトを選択し、フローティング パレット上の Combine Paths で Subtract を選ぶ。
Subtract
Union は外周を繋いだが、Subtract は重なった部分を消去する。つまり、歯車の下地に円を置いて実行すると、円形の穴ができることになる。
歯車の完成
この時点で歯車としては完成。ただ、パスだけでは寂しいので、スタイルを適用して見栄えをよくしてみる。
スタイルを適用してみる
なかなか、よい感じ。
付録として、この作業で作成した iDraw プロジェクトと、それを SVG ファイルとしてエクスポートしたものを公開しておく。
cogwheel.zip 69.2KB
SVG は歯車レイヤー以外を削除してからエクスポートしている。iDraw 上でレイヤを非表示にしていた場合、SVG 的にも不可視となるが、タグは残ってしまうので注意が必要である。
おまけ: App Store アプリを紹介する方法
たまに App Store のアプリを紹介しているブログで、そのアイコンや価格なども併記しているのを見かける。
はじめは App Store が公式タグを用意しているのだと思っていたが、どうやら AppStoreHelper というアプリで生成できるようだ。使い方については下記のリンク先が参になる。
紹介リンクを貼るだけなら AppStoreHelper で十分だが、せっかくなのでリンクシェアに加入し、アフィリエイト設定もおこなってみた。このサービスで App Store ( iTunes Store ) を利用するための方法は以下の記事が参考になる。
サイトに全く関係のない広告は嫌だが、本文の書籍やアプリ紹介と関係するものであれば、むしろ健全で好ましいのではないか。私はこのように考えているので、ブログなどを読んで購入を決めたとき、そこに該当商品のアフィリエイト リンクがあれば、なるべくそこから購入するようにしている。
というわけで、この記事冒頭にある iDraw 紹介リンクをアフィリエイトにしてみた。Mac 以外の PC で踏んでも、きちんと App Store 内のアプリ ページが表示されるので、詳細情報を提示する役割も果たせているはず。