歯車しか描けない僕が Sketch 3 で画面遷移図を描く

(これまでのあらすじ)半年前に衝動的に購入して放置していた Sketch 3 をちゃんと使えるようになろうと思い、本を読みながら歯車アイコンを描きました。連載第3回目です。


仕事で Photoshop を使ってスマートフォンサイトの画面遷移図を描くことがありますが、めんどうくさい。画面遷移図っていくつもの画面を同じドキュメントに載せる必要があるのでカンバスが大きくなりがちですが、大きくなればなるほど重くなってしまう。ベクターデータではそんなことないのかなと思って、きょうは Sketch 3 で画面遷移図を描いてみようと思います。

Mobile Safari のテンプレートをダウンロードする

capture_template_a.png

Sketch にはもともと iOS や Material Design のテンプレートが用意されていて、File > New From Template からプロジェクトにあったものを選ぶだけで UI コンポーネントを手に入れられます!

capture_template_b.png

すごい!ここからコピー&ペーストするだけで、すぐに画面のプロトタイプが作れますね。

でも、Mobile Safari のアドレスバーやタブのコンポーネントはありません。きょうはスマートフォン向けサイトの画面遷移図を描きたいので、インターネットからダウンロードしようと思います。

capture_template_c.png

Sketch App Sources は Sketch で利用できるリソースや Tips やチュートリアルがまとまっているサイトです。無料だけでなく有料でも販売されていますが、ここで Mobile Safari.sketch っていうファイルを無料で配っているすばらしい人がいたので、ダウンロードさせていただきます。Christine Chao さん、ありがとう!

Sketch はこんなふうにユーザー同士で便利なリソースやプラグインをオープンに配布しているエコシステムができていて、すごいですね。もちろん、ライセンスは確認するべきですが…。

ダウンロードした Sketch ファイルを開くと、

capture_template_d.png

Mobile Safari の UI コンポーネントを Sketch で再現している!すごい!
ページを読み込んだときとスクロールしたときの見た目が用意されているので、ページを読み込んだときのほうを選択してコピーします。

capture_template_e.png

File > New で新しい Sketch のドキュメントを作って、ペーストします。

capture_template_f.png

これで画面遷移図をつくる準備ができました!

Make Gird で繰り返しコピーする

画面の数だけコピーしていってもいいのだけど、Sketch には繰り返しコピーする機能があるので使ってみようと思います。

capture_copy_a.png

コピーしたい要素を選択した状態で Arrange > Make Grid… をクリック。

capture_copy_b.png

どれだけコピーするの?と尋ねられるので、きょうは横に5行で縦に2列にしたいので、Rows2Columns5 と入力します。コピーする画面と画面のあいだに書き込みをしたいので、Margin には 500px と広めに指定しました。ほかの項目はちょっと英語の意味がわからなかったので 本とか 読んでください。

Make Gird ボタンを押すと…!

capture_copy_c.png

うおー!コピーされた!便利だなぁ。

たくさんのアートボードをひとつのアートボードにまとめる

画面と画面のあいだに遷移の意味を書き込みたいので、コピーしたアートボードをひとつにまとめるアートボードをつくります。

capture_writing_a.png

Insert > Artboard をクリック。

capture_writing_b.png

まとめたい画面を囲むようにドラッグして、アートボードを作ります。

capture_writing_c.png

あとは、このアートボードに画面遷移の説明を書いていくだけ。
矢印を描くときは、Insert > Shape > Line で線を引いて、ウィンドウ右の Borders の歯車でいろいろ設定できるみたいです。書くのに疲れて雑になってきました。

よーし、これで画面遷移図を Sketch で描けるようになったぞ。次の仕事から使ってみよう!