Sketchでテキストを追加する

Insert > Textからテキストツールを選択することができます。ショートカットはTキーです。

テキストツールを選択した状態で、アートボードの任意の場所をクリックするとテキストをタイプすることができます。

また、ドラッグ&ドロップするとテキストボックスを作成することができ、その中にテキストを流し込んでいくことができます。 テキストボックスの右端でテキストが折り返しますので、複数行のテキストが必要な場合はテキストボックスを使いましょう。

テキスト

テキストのオプション

代表的なテキストのオプションを解説します。

Font Size / Line Height / Paragraph

テキストボックス

テキストを選択すると、右のインスペクタパネルで文章に関する設定を変更することができます。英語が基準となっていますので、Line Height (行間)はデフォルトより少し大きめに設定してあげると綺麗な見た目になるかと思います。

オプション 意味
Font Size 文字サイズ
Line Height 行間の高さ
Paragraph パラグラフ間の高さ
Character 文字間

Alignment

テキストの整列

文字の整列をコントロールします。

1段目のオプションは水平方向の整列を変更します。
左から順に 左寄せ / 中央寄せ / 右寄せ / 行末揃え となります。 行末揃えを選択すると、右端がテキストボックスに合わせて綺麗に整列しますが、文字数が少ない場合は文字間が極端に開いたりすることがありますので注意してください(特に英語が混在している場合)。

2段目のオプションは垂直方向の整列を変更します。
それぞれ 上揃え 中央揃え 下揃え となります。

フォントのインストール

インターネットで無料配布されているフォントをインストールして Sketch で使用することができます。 例えばこちらは Adobe からオープンソースで提供されている知名度の高いフォントです。

源ノ明朝 オープンソース Pan-CJK 書体

テキストボックス

ページの下部に上のようなダウンロードボタンがあります。 ダウンロードした後にフォントファイルをダブルクリックするとインストールすることができます。 インストールしたら Sketch のテキストオプションから書体を適応してみましょう。

「源ノ明朝」はオープンソースのため無料で利用できますが、日本語フォントは有償ライセンスで提供されているものが多数派です。それぞれ利用規約をよく確認の上、使用するようにしてください。

Udemy Webデザイナー
Webデザイナーのキャリアを未経験からスタートするためのオールインワン講座

レクチャーの数: 236 ⁄ 19.5 時間 ⁄ 初級

ウェブサイトの企画・設計、Sketchを使ったデザイン、HTML ⁄ CSS マークアップ、モバイル最適化など、Webデザインに挑戦したい人が一気通貫して学べる総合学習コース Shunsuke Sawada

¥ 1,400

¥ 24,000

4.3

493件の評価