iOS も Android も Sketch でひとつだけ作成して、一発で書き出したい。そんな衝動にかられた2017年夏。

iOS も Android も Sketch でひとつだけ作成して、一発で書き出したい。そんな衝動にかられた2017年夏。

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

デザイナーの たなか ゆきこ です。

今回は Sketch の書き出しのやり方の時短話です。 デザイナーとしては、本当は全サイズに適正なデザインをバラバラにつくりたい衝動にかられます。 しかし、工数などの問題もあり、同じ比率の画像を使用するのであれば、一枚の絵を一気に書き出すという方法が一般的です。

画面サイズのトレンドはここで測る

http://gs.statcounter.com/

Source: StatCounter Global Stats - Screen Resolution Market Share

デザイナーならちゃんと、現在どれが流行っているかを確認します。

[Edit Chart Data]から調べたいものを選択、[Japan]を選び日付を指定して[View Chart]をクリックします。今回は日本のスマホの画面サイズですね。

これを見ると、375x667が一番おおい。iPhone 7 サイズ。

Presets を使いこなすことが Sketch を使いこなしているデザイナーだ

Preferences を開いたことありますか? その中の Presets が本日のメインイベントです。

375x667が一番多いからそのサイズでデザインを作る。 さて、どうすんの?

倍率 100% 150% 200% 300% 400%
iOS @1x     @2x @3x
サイズ 375     750 1125
Android mdpi hdpi xhdpi xxhdpi xxxhdpi
サイズ 360 540 720 1080 1440
比率 0.96 1.44 1.92 2.88 3.84

sketch-technical-presets01

右下の Export の[+]の横をクリックで Create Presets... を選ぶと画面が開きます。

sketch-technical-presets02

Sizeで比率をいれましょう。ここで注意は、ベクターデータはいくらでも大きくできるが、写真とかは気をつけること。 Sketch では「/」をつけると、フォルダが作成されることを覚えておくと便利です。 ちなみに、小数点は第2位まで認識するのを確認しています。

sketch-technical-presets03

登録したら、一覧で出てくるので作成した Preset を選ぶ。

sketch-technical-presets04

sketch-technical-presets05

アイコンとかはsvgとかpdfでかき出すので、あくまで画像イメージの書き出しの話です。 Exportで一瞬でできます。

最後に

デザイナーならなるべく、考える時間に時間を使いたいので、早く作業できるにこしたことはないです。