ajike switch

【Sketch初心者必見!#04】テンプレート活用で素早くUIデザイン

sketch_04_01
こんにちは!アシスタントディレクターの野村です。

前回はSketchのプラグインツールをご紹介するとともに、UIデザインならSketch!の理由をお話ししました。
(前回の記事はこちらから→【Sketch初心者必見!#03】UIデザインならSketch!の理由

今回は、多くの画面を作成する必要のあるUIデザインをSketchでスマートに、素早く作成できる理由と方法をお教えいたします!

スマートに作成できる理由は
【アートボードを並べて、全体を見ながらデザインできる】

スマートに作成できる方法は
【テンプレートを活用して、綺麗で素早くデザインできる】
です!

以下で詳しくご紹介いたしましょう!

アートボードを並べて、全体を見ながらデザイン

SketchはPhotoshopと違い、アートボードを複数並べて作成できることはお話ししましたのでお分かりかと思います。
アートボードを複数並べられる強みは、やはりUIデザインの際に活きてきます!

UIをデザインする際、PCスマホ関係なくサイトやアプリなどは多くの画面から成り立っているものがほとんどです。
なので、Photoshopのようにアートボードが1ファイル1つで、複数のファイル(アートボード)を1つのフォルダーなどで管理する・・・ということを行っている方が多いのではないでしょうか?

しかし、どれがどの画面ファイルか、新しいものか古いものか、複数の人とファイルを共有するのはとても大変です。
ファイル名を考えるのも一苦労ですよね・・・。
スクリーンショット 2015-10-13 11.24.45

しかし、Sketchならアートボードを複数並べて作成でき、それを一つのファイルとして扱うことができるので、とっても楽です!

それに、サイトのデザイン全体を見ながら作成すれば、途中でデザインルールがブレることもなく、常に他のページを参照しながら作成できます。

たくさんのアートボードになってしまっても、前回ご紹介したプラグインツール「Sort Lauyers」を使用すれば並び替えることもできます!
スクリーンショット 2015-10-07 14.34.24
また、ページごとにわけることもできますので、大量のアートボードの管理も楽にできますね!

「Sketch App Sources」のテンプレートを活用して、綺麗で素早くデザイン

sketch-app-sources-rose2x
今回は綺麗で素早くスマートにUIデザインを作成する方法として、この「Sketch App Sources」というポータルサイトをご紹介いたします!

「Sketch App Sources」とは、Sketch.app向けの素材ポータルサイトです。UIデザインはもちろん、作例などもあり種類が豊富です。
多くの方がUIデザインをアップしているので、様々な雰囲気のデザインを参考にデザインを考えることができます。
もちろん使用することもできます!
入りはスピードが命となってくるので、Sketch App Sources内のテンプレートを使用し、多くの案を考えてみましょう!
もしかしたら、自分がこれまでデザインしてこなかったようなデザインが思い浮かぶかもしれません!

スクリーンショット 2015-10-08 19.20.27
素材は、PCだけでなくスマートフォンや様々なデバイスの素材がアップされています。
トップ画面だけやボタン、フォントだけの素材もアップされていますので様々な場面で使うことができます。

有料の素材もありますが、ほとんど無料の素材です。
気軽に使用することができるので、心配はいらないですね!
スクリーンショット 2015-10-08 19.22.23
無料だからといって侮るなかれ、とっても素敵なデザインがたくさん公開されています!
見ているだけでもとっても勉強になりますので、試しに使ってみてください。

いかがでしょうか?

機能が便利なのはもちろんのこと、こんなにもテンプレートがあったら初心者の方でも簡単にカッコ良く、高いクオリティのデザインがすぐできますね!
たたき台としてたくさんのデザイン案を考えないといけない〜!なんてことがあってもSketchで簡単に解決できますね!

次回はさらにスピーディーに作業を行うことができる方法をお教えいたします!
お楽しみに!

【関連記事】
【Sketch初心者必見!#01】Sketchで変わる?WEB制作のワークフロー
【Sketch初心者必見!#02】Sketchとは?
【Sketch初心者必見!#03】UIデザインならSketch!の理由
【Sketch初心者必見!#05】シンボル化でスピーディーに作成
【Sketch初心者必見!#06】Sketchでスマートな会議に
【Sketch初心者必見!#07】Sketchは書き出しを簡単に
【Sketch初心者必見!#08】Sketchで簡単指示書作成

servi

ajike switchの更新をメールでお伝えします!

8年以上ajikeが蓄積したデザイン思考とUXデザインの知見を発信し続けるブログ<ajike switch>の更新情報を無料でメールにてお知らせ致します。

×