UI/UXデザインツール『Sketch』入門

5-9. ファイルの書き出しについて(Make Export)

制作したデザインデータはWebデザインやチラシなど成果物に反映する際は必ずファイルの書き出しが必要になります。形式や出力するサイズは多様ですがそれぞれの特徴を抑えておきましょう。ここではインペクタエリアからの基本的なファイルの書き出し方法を解説します。

  • UIデザイン
  • UXデザイン
  • Webデザイン

公開日:2020/01/06最終更新日:2020/01/06

1.オブジェクトを指定の形式とサイズで書き出しする

ドキュメント内のレイヤーをさまざまなサイズまたはファイル形式で書き出しするには、そのレイヤーを選択し、インスペクターの下部にある[ 書き出し可能にする (Make Export)]パネルをクリックします。デフォルトの書き出しプリセットが表示され、いくつかのオプションが選択できます。

①サイズ(size)

ドロップダウンメニューからサイズを選択するか、[size]のテキストフィールドに直接入力して独自でサイズを作成します。他にも拡大(2x、3xなど)縮小(0.5x、0.25x)したり、特定の高さまたは幅をピクセル(200hまたは200w)などで定義したりできます。

②プレフィックス / サフィックス(Prefix / Suffix)

異なるスケール(2倍,3倍など)で書き出しする場合は、ドロップダウンメニューを使用してプレフィックスまたはサフィックスのいずれかを選択する必要があります。これをカスタマイズする場合はファイル名を表す省略記号(…)の前(プレフィックス)または後(サフィックス)にテキストフィールドに値を入力します。

③フォーマット(Format)

ドロップダウンメニューから形式を選択します。様々な形式がありますがそれぞれの特徴は割愛します。形式ごとの特徴を捉えながら書き出しをおこないましょう。

④プリセットを削除

バツアイコンをクリックすることで書き出しプリセットを削除できます。

⑤プリセットを追加

[+]をクリックして、この同一オブジェクトの別のプリセットを書き出し設定に追加します。

⑥プリセットセット

[Preset]アイコンをクリックして、前もって定義されたプリセットのまとまりをを選択します。新しいプリセットのセットを作成し、ここから削除することもできます。オブジェクトごとに個別でおこなうのが面倒な場合は定義しておくと便利です


⑦スライスを作成

設定した書き出しプリセットを選択した層の上に直接スライスを作成するには、スライスのアイコンをクリックします。

⑧...選択したエクスポートします...

選択したエクスポートを上記のプリセットを使用して、この特定のレイヤーオブジェクトを書き出します。

⑨プレビュー

プレビューには、書き出したときにレイヤーがどのように見えるかが示されます。これをデスクトップまたは別のアプリに直接ドラッグアンドドロップして、すばやく書き出しすることもできます。


⑩共有

別のクイックエクスポートオプションは、標準オプションの[共有]ボタンをクリックして、メール、メッセージ、AirDropなどで共有することができます。

理解度チェック

UI/UXデザインツール『Sketch』入門

1. Sketchの概要とインストール

2. Sketchの基本操作

3. レイヤーリストの操作

4. ツールバーの操作

5. インスペクタの操作

6. シンボル・オーバーライド・ライブラリーの使い方

7. プロトタイプの作り方

8. Sketchをチームで使う

9. 料理写真投稿アプリを作ってみよう

このレッスンの著者