「Sketchで作ったデザインを提出した後、修正が入った時に全部の色を一つ一つ変更するのきつい、、、
効率よく作るために、前もって自作のカラーパレットを作りたいなぁ、、、」
こんな人に向けて、Sketchで自作カラーパレットを作成して効率良くUIデザインする方法を紹介していきます。
作ったパレットの色のシェアスタイルを作ることで、後々大幅な変更があった場合に色の変更が楽になります。
この記事の内容
- 色を選ぶのに便利なサイト
- Sketchで自作のカラーパレットの作り方
- Sketchのシェアスタイルの使い方
それでは参ります〜
色を選ぶのに便利なサイト
色々ありますが、主に使っているサイトは以下
どれも便利なので要チェックです。
Coolors
Coolors
「Start the generator, it’s free」をクリック
すると色がランダムで表示されます。
Hex Codeも見れますので便利ですね(^^)
「Explore」をクリックすると、様々なパターンのカラーパレットが出てきます。
「View」をクリックすると先ほどランダムで表示された時と同じように大きく表示されます。
Viewを押すとこんな感じ
Color hunt
こんな感じででズラーっとカラーパレットが表示されます。
表示方法は「New/Hot/Popular/Random」の中から選べます。
好きなカラーパレットがあれば「Like」もできます。
＊Likeしたパレットは右上に表示されます。
好きなパレットをクリックすると、そのパレットが大きく表示されます。
Hex Codeもみれます。
Adobe Color CC
AdobeのColor CCで便利な所は、カラーホイール・カラールールが使えることです。
ここから使用する「カラールール」を選択して、カラーホイールの中のクリックアンドドラッグで色々色の組み合わせを作れます。
下の方にHex Codeなどの色の情報が表示されます。
どれも便利ですね(^^)
以上のサイトで色の組み合わせを探したり、参考にしてみましょう〜
Sketch自作のカラーパレットの作り方
今回はこんな感じのカラーパレットをSketchで自作していきます。
これを作っておくことで、後々サイトの配色をしていく時に便利です。
＊ここで完璧な配色を作ろうと思わなくて大丈夫です。もちろん後から変更可能です。今回は例なので適当に色を選びました。
まず、今回作ったカラーパレットの内容は、
- メインカラー
- サブカラー
- 濃いめのカラー
- 薄めのカラー
- もっと薄めのカラー
また、以下のようなシステムカラーも作ります。
- サクセス
- インフォメーション
- 注意
- 警告
カラーパレットの作成
まずは、レクタングル(四角)を作り、メインカラーを入れます。
command d もしくは、optionを押しながらドラッグで複製して、
サブカラーを作ります。
同じように複製して濃い・薄め・もっと薄めのカラーを作ります。
option+ドラッグで複製したあとに、command dでポンポン複製できます。
これで基本のパレットは完成です。
システムカラーの作成
先ほど作ったカラーパレットの下に、レクタングルを作って先ほどと同じようにそれぞれの色を決めていきます。
右から、
サクセス・インフォメーション・注意・警告
のカラーです。
同じ明度や彩度の色で揃えると、統一性があって見栄えが良いです。
パレットの間隔がバラバラなので、「Auto Layout」を使うと簡単に揃えることができます。
レクタングルのradiousを変えるといい感じになります。
以上で自作カラーパレット完成です。
Sketchのシェアスタイルの使い方
カラーパレットの色を簡単に使いたい時に、シェアスタイルを使うと便利です。
設定方法は超簡単です。
レイヤーを選択→右から「Create new Shared Style」→名前を設定→終わり
これの繰り返しです。
もし間違えた場合は、「Organize Shared Style」からシェアスタイルの名前の変更や、削除ができます。
簡単ですね
「/」をつけることで、階層分けできます。
「パレット」「システム」に分けてみました。
こんな風に色を使う時に、簡単に設定した色が使えます。
もちろん「document colour」に設定しても大丈夫ですが、後々変更があった場合、シェアスタイルを作っておくと、一つ一つ変更せずに、シェアスタイルを変更するだけで、一気に使用した色を変更できるのでおすすめです。
以上、Sketchで効率よくデザインする為の、カラーパレットの作り方でした(^^)
Sketchの参考書はこちら
