Mock作りに便利なPencil
★画像アップ先の不調により、過去のエントリーで画像が見られないものが多数あります。もし画像の見たいものがありましたらご連絡いただければ復活するようにします。
Pencil, versatile GUI prototyping tool
iloveubuntuにてWebサイトやアプリなどのモック作りに便利そうな「pencil」というアプリ紹介されていたのでちょっと試してみました。
Pencil, versatile GUI prototyping tool
以下の動画ではチャートを作る例みたいなものを見ることができます。このチャートの素材なんかはサイトの構成作りとかに役立ちそうです。
実際にサイトのモックづくりを試してみたのが以下の図です。使い勝手を見るだけなのでかなり適当ですがmoebuntuサイトを想定してみました。
サイトのサイズなども画面上で右クリックから「Properties」から指定することができます。色の設定などもアイテム上で右クリックから「Properties」で設定できます。「Advance mode」にチェックを入れるとカラーホイールがでてそこから色を作ることもできます。画像なども自由に張り込めます。ここのmoebuntuのロゴはWebサイト上からコピペしたものです。
Webサイト以外にもアプリのモック作りに使える例として以下を上げておきます。iPhoneやiPadの筐体やパーツが登録されていているのでそのまま取り込んで作っていくことができます。Android用はWindows用などのパーツもあります。
PencilはこちらからDebパッケージをダウンロード＆インストールできます。
ちなみにInkscape慣れしている人はこれらのパーツをコピペでInkscapeに持って行ってパーツとして使うこともできます。
実際にサイトのモックづくりを試してみたのが以下の図です。使い勝手を見るだけなのでかなり適当ですがmoebuntuサイトを想定してみました。
サイトのサイズなども画面上で右クリックから「Properties」から指定することができます。色の設定などもアイテム上で右クリックから「Properties」で設定できます。「Advance mode」にチェックを入れるとカラーホイールがでてそこから色を作ることもできます。画像なども自由に張り込めます。ここのmoebuntuのロゴはWebサイト上からコピペしたものです。
Webサイト以外にもアプリのモック作りに使える例として以下を上げておきます。iPhoneやiPadの筐体やパーツが登録されていているのでそのまま取り込んで作っていくことができます。Android用はWindows用などのパーツもあります。
PencilはこちらからDebパッケージをダウンロード＆インストールできます。
ちなみにInkscape慣れしている人はこれらのパーツをコピペでInkscapeに持って行ってパーツとして使うこともできます。
- 関連記事
