#sketch3

Sketch3とはオランダののアムステルダムのBohemian Coding社が開発しているドローイングソフトです。Webサイト・アプリ・UIのデザインに対応しています。

SketchにはWebのUIパーツが配布されているので AdobeのPhotoshopやIllustratorのようにボタンなど自作でパーツを作る手間はかかりません。 スピード重視のUIデザインがしたい時はSketchがいいと思います。 ▼SketchのUIパーツ、デザインが配布されているサイトもあります。 デザインの勉強にもなると思います。

http://www.sketchappsources.com/

私はBootstrapでサイトを作る事が多いので下記のUIキットを使っています。 http://bootstrapuikit.com/

ワイヤーフレームなので色は加えずにモノクロベースで作るようにします。

（１）FireのNew From TemplateからBootstrap3のUIキットを選んで開きます。

（２）メニューのSymbolを選ぶとUIパーツの配置ができます。最初はグリッドを選んで最背面に配置します。（目安としておくだけなので邪魔な時はなくても良いです）

（３）同じデザインパーツを繰り返しコピーして増やす

例ではメニューからMake Gridを選択し、同じパーツを縦横に3列、マージン上下30px空けるように設定します。 

Make Gridボタンをクリックすると縦3列、横3列にパーツを増やせます。 これを応用するとレイアウトがかなり速くなります。

（Illustratorでも似たような機能があります）

（４）アートボードを増やす方法

同じ画面デザインで増やしたい場合はショートカット⌘Dを押すと右にアートボードを増やす事ができます。 アートボードを増やす前に各デザインパーツはシンボル化しておくのがオススメです。 

（５）（２）〜（４）を繰り返していくだけで下記のように3画面のワイヤーフレームが完成しました。

ここまでの制作時間は1時間50分程度でした。多分、ずっと使って慣れたら操作はもっと速くなると思います。

半年くらい触ってなかったのですがすぐに基本操作は思い出せました。

そのくらいSketchは誰が見てもわかりやすいUIのソフトです。

私は自分のサイトは昨年からSketchでデザインする事が増えました。 Web制作の受託案件ではソフトの互換性の面と求められるデザインの面でキビシイかなと思う状況なので使っていません。

日本はWebでも装飾の多いグラフィックを好むし（ファーストビューのインパクトを重視する等）、日本語特有の縦の文字組にSketchが対応してない問題もあります。 結局の所、SketchをメインにしたとしてもWeb制作では画像を作り込めるAdobeソフトが必須になります。 それでも、自サイトのWebデザインをするには起動も速く軽快で便利なソフトはSketchだと思います。

私としては自社サービス的なサイトには時間かけていられないのでサクッとワイヤーもデザインも終わらせたいです。 

Webサイトの場合は立ち上げが速い方が有利だと思ってるし、不足している部分は後から追加していくという考えです。

■Sketch3の基礎が学べるオススメな本

Web制作者のためのIllustrator＆ベクターデータの教科書 マルチデバイス時代に知っておくべき新・グラフィック作成術

posted with カエレバ

あわゆき,窪木 博士,三階ラボ（長藤寛和、宮澤聖二）,松田 直樹 インプレス 2015-05-22

Amazonで購入