DesignTool

Sketchでデザイン作成時にまず行うこと

2017.08.17

カラーパレット

最近はリキッドデザインでレスポンシブな制作が多く、インブラウザでデザインしてしまいます。他の制作者とのデータの受け渡しを考えればPhotoshopという選択もありますが、私の場合インブラウザのように自己完結できる案件は爆速でデザインできるSketch一択になります。

Sketchとは

SketchはMac用のUIデザインツールで、直感的にデザインできるのが特徴です。Fireworksの後継とも言われていましたがAdobe製ではありません。制作環境がMacオンリーなら迷うことなくSketchを使います。

Sketchの魅力を語りだすと止まらなくなりますのでこの辺にしておいて、私がSketchでデザイン制作をするにあたり必ず最初にする設定があります。それはカラー設定です。

Sketcはドキュメント毎にカラーパレットを設定できる

Sketchはドキュメント毎にカラーパレットを設定できます。そんなの他のアプリでもできるよ!って声が聞こえてきそうですが、Sketchはファイルサイズも軽いので20ページ以内ぐらいの案件であれば1サイト1枚のデザインファイルで制作できてしまいます。

基本的にはアートボードでデバイス毎のデザインを行い、ページ機能でページを分けて各ページのデザインを行います。

インブラウザなら繰り返し部分は端折れますしね!

カラーパレットを設定し色のルールを統一

1ファイルで1サイトのデザインを行うことができますのでカラーパレットをあらかじめ設定しておけば案件内で色のルールがズレることを予防できます。

カラーパレットの設定方法も簡単で色を選択した状態でDocument Colorsのプラスアイコンをクリックするだけです。

Sketchカラー設定

Webサイトはシンプルなデザインであっても設定色は多い

当サイトのようにシンプルな配色でもWebサイトは意外に設定する色数が多いので「あのパーツの色なんだったっけ?」ってデザインファイル内を探してし回ることも減り工数削減につながるかもしれません。

唯一の欠点は期間が空いてしまうと結局色を調べなおさないといけないことです!

WEBSITE DESIGN REQUEST

ホームページ制作依頼について

W・D・Sでホームページ制作をご希望の方はお気軽にご相談ください。
制作内容、ご予算、納期をお知らせいただくとスムーズです。

ホームページ制作を相談する