皆さんこんにちは、ディレクターの折井です。

僕たちWebディレクターの仕事のひとつに、ワイヤーフレームの作成があります
ワイヤーフレームでサイトの枠組みをしっかりと決めておかないと、
手戻りの原因になったり、仕様を満たさないサイトが出来上がったりしてしまいます。
「ワイヤーフレームはしっかり作らないといけない、でも凝って作っているほど時間に余裕はない・・・」というディレクターさんは多いのではないでしょうか。
そこで今回は、ワイヤーフレーム作成におすすめなツールをご紹介したいと思います！

 

ディレクターにもおすすめ！デザインツール”Sketch 3″

ワイヤーフレームを作成する際に、最近僕が愛用しているのはSketch 3（スケッチ）というツール。
このSketch 3は、Mac OS専用のベクタードローイングツールです。

もともとは、デザイナーの方がUIデザインを制作するために使うツールですが、
実はこれ、ディレクターのワイヤーフレーム作りの場面でもものすごく使えるんです。

今回は、そんなSketch 3のメリットや使い方をご紹介したいと思います。

 

Sketch 3でワイヤーフレームを作る３つのメリット

メリット１：とにかく早い！

Sketch 3を使えば、「今までなんであんなに時間がかかってたんだろう？」と思うくらい、ワイヤーフレームが爆速で作れちゃいます。

その理由は、「動作が軽い」ことにあります。

PhotoshopやIllustratorなどを使っているとどうしても気になってくるのが、ソフトウェアの動作の重さ。レイヤーが増えてくるにつれ、読み込みの待ち時間も増えてきます。

 

それに対してSketch 3は、デザインツールらしからぬ動作の軽さを実現しています。

僕が使っているMacbook Air(Early 2015/メモリ4GB)でも、ワイヤーフレームの作成程度であればほとんど読み込みの待ち時間はありません。

パパっと作ってスムーズに次の工程に流したいディレクターとしては、動作の軽さはとてもありがたいメリットです。

 

メリット２：ディレクターでも覚えられるような簡単なショートカットキーが多い（地味に重要）

「ただ図形を描きたいだけなのに、⌘+Ctrl+◯・・・」

コマンドを覚えるだけで気が遠くなりそう。ショートカットキーを巧みに用いるデザイナーさんを見ると、尊敬しちゃいます。

 

でも大丈夫。Sketch 3では、“⌘(Command)”キーを押さずとも、”A”や”R“など、ひとつのキーだけで基本的なショートカットが使えちゃうんです。

「たったそれだけ？」と思うかもしれませんが、使ってみるとアラ不思議。作業の効率性が全く違います。

 

ワイヤーフレームを作ることだけが仕事のWebディレクターはいないはず。

ワイヤーフレーム作成ツールのショートカットキーを覚えてる暇がない人にも、本当に手軽に使えてしまいます。

 

 

メリット３：デザインセンスがなくても「それっぽく」作れる

僕はデザインセンスが全くといっていいほどありませんが、Sketch 3に助けられ、 それっぽいワイヤーフレームが作れています。

 

この「それっぽい」というところ、自己満足だけではないのです。

Sketch 3はもともとUIデザイナーのためのツール。テキストのスタイルや行間調整などの機能も、デザイン寄りに洗練されています。

 

これまでクラウドベースのワイヤーフレーム作成ツールを使用していたのですが、Sketch 3に変えてからというもの、制作側にワイヤーを渡した時のイメージのズレが少なくなりました。

それにより、手戻りも減少。「こういう雰囲気を伝えたかったのに伝わらなかった…」ということが少なくなりました。Sketch 3の使用は、サイト構築全体の工程の短縮にも寄与している感覚があります。

 

おわりに

実はディレクターにこそおすすめしたいSketch 3。今回は、ディレクター視点での3つのメリットをご紹介しました。

「ワイヤーフレーム作成の良いツールを探している。」というWebディレクターの方は、是非一度Sketch 3を試してみてください！