Sketchでテキストを追加する
Insert > Text
からテキストツールを選択することができます。ショートカットはT
キーです。
テキストツールを選択した状態で、アートボードの任意の場所をクリックするとテキストをタイプすることができます。
また、ドラッグ&ドロップするとテキストボックスを作成することができ、その中にテキストを流し込んでいくことができます。 テキストボックスの右端でテキストが折り返しますので、複数行のテキストが必要な場合はテキストボックスを使いましょう。
テキストのオプション
代表的なテキストのオプションを解説します。
Font Size / Line Height / Paragraph
テキストを選択すると、右のインスペクタパネルで文章に関する設定を変更することができます。英語が基準となっていますので、Line Height (行間)
はデフォルトより少し大きめに設定してあげると綺麗な見た目になるかと思います。
オプション | 意味 |
---|---|
Font Size | 文字サイズ |
Line Height | 行間の高さ |
Paragraph | パラグラフ間の高さ |
Character | 文字間 |
Alignment
文字の整列をコントロールします。
1段目のオプションは水平方向の整列を変更します。
左から順に 左寄せ / 中央寄せ / 右寄せ / 行末揃え
となります。
行末揃え
を選択すると、右端がテキストボックスに合わせて綺麗に整列しますが、文字数が少ない場合は文字間が極端に開いたりすることがありますので注意してください(特に英語が混在している場合)。
2段目のオプションは垂直方向の整列を変更します。
それぞれ 上揃え
中央揃え
下揃え
となります。
フォントのインストール
インターネットで無料配布されているフォントをインストールして Sketch で使用することができます。 例えばこちらは Adobe からオープンソースで提供されている知名度の高いフォントです。
ページの下部に上のようなダウンロードボタンがあります。 ダウンロードした後にフォントファイルをダブルクリックするとインストールすることができます。 インストールしたら Sketch のテキストオプションから書体を適応してみましょう。
「源ノ明朝」はオープンソースのため無料で利用できますが、日本語フォントは有償ライセンスで提供されているものが多数派です。それぞれ利用規約をよく確認の上、使用するようにしてください。
Webデザイナーのキャリアを未経験からスタートするためのオールインワン講座
レクチャーの数: 236 ⁄ 19.5 時間 ⁄ 初級
ウェブサイトの企画・設計、Sketchを使ったデザイン、HTML ⁄ CSS マークアップ、モバイル最適化など、Webデザインに挑戦したい人が一気通貫して学べる総合学習コース Shunsuke Sawada
¥ 1,400
¥ 24,000