「Sketchでデザインする時に、テキストのスタイルを楽に管理したい、、、
フォントサイズとかその都度変えるのめんどくさいし、サイズにズレがあったらやり直しめんどい、、、」
こんな人に向けて、Sketchでテキストスタイルを設定し、楽にデザイン・レイアウトしていく方法を紹介していきます。
SketchでサイトのUIなどをデザインする際に、前もってテキストスタイルを設定しておくと、実際にデザインする時にすごく便利ですし、効率化できます。
また、一貫性・統一性が出るので見た目もごちゃごちゃしないデザインになります。
この記事の内容
- フォントサイズを決めるのに便利なサイト
- テキストスタイルの設定方法・使い方
実際に、この方法でサイトをいくつかデザインしましたが、とても便利ですし、効率よく作業ができました。
作業自体は単純でつまらないですが、これをやっておくと後々楽ですし、よりバランスのとれたまとまったデザインができるかと思います。
では参ります〜
フォントサイズを決めるのに便利なサイト
英語ですが、Type Scaleがおすすめです。＊日本語でもプレビューはできます。
このような画面になります。
以下の項目が変更できます。
- フォントサイズ
- スケール
- プレビューするテキスト
- グーグルフォント
- フォントファミリー
- フォントウェイト
右側にテキストのプレビューが表示されます。
スケールは、必要に応じて変更できます。
一番下には黄金比もあります〜(^^)
プレビューテキストに入力した文字が右側に表示されます。
さらに便利なのが、右側の青いプルタブ部分を開くと、サンプルのヘッドラインと文章が表示されます。
＊日本語は無いみたいです(何か他にあれば教えてくださ〜い)
これで、実際にどんな文字のバランスになるのか見て確認できます。
タイポグラフィーのシステム(テキストスタイル)を設定する時に結構役立ちますよ〜
テキストスタイルの設定方法・使い方
それでは、上で紹介したサイトを使ってテキストスタイルを作っていきます。
今回作るテキストスタイルは以下
- ジャンボテキスト
- H1
- H2
- H3
- H4
- p
- ラベル（小さいテキスト）
- それぞれの左揃え
- それぞれの中央揃え
- それぞれの黒・白
テキストの下準備
まず、tでテキストレイヤーを作ります。
今回はpタグのサイズを16pxにして、それを基準に「Perfect Fourth」の比率(1.333倍)でテキストスタイルを作っていきます。
フォントはおすすめの英語フォントPlexを使用しています。
Sketchにフォントを追加する方法【おすすめ英語フォントPlexも紹介】
Sketchにフォントを追加する方法を紹介します。 一瞬で終わりますので、ここでオススメのフォント「Plex」も紹介します。
command d もしくは option + ドラッグで複製します。
右側のsizeで16*1.333(16 x 1.333)をすると21.28になるので四捨五入して21にします。＊必要に応じて自分で変更してくださいませ
次は、21*1.333を四捨五入して28
その次は・・・
というようにジャンボテキストのサイズまで繰り返します。
するとこんな感じになります。＊全て左揃えにしています。
最後にラベル(小さいテキスト)を作ります。
これは基準の16から1.333だけ割ればいいので、「16/1.333」とすれば良いです。
＊太文字のpも欲しいので、pを複製します。
太文字のpからジャンボテキストまでまとめて太文字にします。
するとこんな感じになります。
いい感じですね
これで下準備完了です。
必要に応じて、line-heightを変更してください〜
テキストスタイルの設定
これから一つ一つのフォントのテキストスタイルを設定していきます。
地道な作業ですが、後々使えるので踏ん張りましょう(^^)
基本的にシェアスタイルとやり方同じです。
以下で紹介しています。
Sketchで自作カラーパレットを作成して効率良くUIデザインする方法
SketchでUIなどを効率よく作るために、前もってカラーパレットを作るとかなり便利です。また、作ったパレットの色のシェアスタイルを作ることで、後々大幅な変更があった場合に色の変更が楽になります。この記事では、色を選ぶのに便利なサイト・カラーパレットの作り方・シェアスタイルの使い方を紹介します。
こんな感じで、テキストレイヤーを選択して「Create new Text Style」からテキストスタイルを作成できます。
＊今回は出来上がりのイメージがつかみやすいように、すでに「左揃え・中央揃え・黒・白」のバージョンも作成してあります。
実際にテキストスタイルを作る場合
以下のように一つのテキストスタイルを作った後にそれを複製して、新しいテキストスタイルを追加していく方が、テキストスタイル名を早く変更できます。
てことで流れ的には、
黒フォントの左揃えを作成→黒フォントの左揃えのテキストスタイルを作成 →複製して中央揃えにする→黒フォントの中央揃えのテキストスタイルを作成
白フォントも同じ
これを全部すると、こんな感じでテキストのスタイルを簡単に選べるようになります。
いい感じですね(^^)
この作業が後々自分を楽にしてくれます。
以上、Sketchでテキストスタイルを設定して効率的にデザインする方法でした(^^)
色々やり方はあるかと思いますので、気になる方は一度使って見てくださいませ〜
Sketchの参考書
