32
34

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

Pencilでアプリの画面遷移図をつくってみる

Last updated at Posted at 2014-07-03

アプリの画面遷移図を書きたいとき、
いつもは手で書くのですが、実際の電子データにするときに写真で撮って貼付けると微妙だったので、いくつかツールを使ってみることにしました。

今回はPencilというアプリを使ってみます。
http://pencil.evolus.vn/

(ちなみに今回はMac版ですが、Windows版やLinux版もあります。)

起動したら以下の画面が出ます。

Pencil1.png

左にCollectionsでパーツがたくさんあります。
これをドラッグ&ドロップで配置していくだけで、簡単にアプリの画面がつくれそうです。
試しにiPhoneの画面にタイトルパネルを重ねて見ました。

Pencil2.png

いい感じ。

矢印とかもつかえるので、画面遷移図を書くのにもいけそうです。
ボタンタップしたら次の画面に遷移するというのも書いてみました。
ちなみにBitmap Imageというのを使ってみたんですが、"No Image"と表示されました。ここの実際の画像の挿入方法はわかりませんでした。

pencil3.png

ちょとわかりにくいので、バルーンで補足説明入れました。

pencil4.png

Androidのパーツはありました。(ICSとなってましたが、要はHoloテーマってことですね。)

Pencil5.png

Webの要素も用意されていますので、Webのワイヤーフレーム制作にも使えそうです。
iOSのパーツはちょっと古くてフラットデザインではありませんでした。

パーツはOpenClipartで探して、それをつかうこともできるようです。
http://openclipart.org/

欠点としては、自分で作った画像が挿入できないところです。
Galleryとかのパーツがないので、Galleryのスクリーンショットを撮って挿入しようとしてもできませんでした。

まあちゃんとしたビジュアルデザインは別で画面遷移図を書くには使えそうです。
もうちょっと使ってみて何か発見したら書き足します。

32
34
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
32
34

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?