4kaku design

マーケティングを勉強しているWebデザイナーのノート

Sketchには、あらかじめ「iOS Devices」や「Responsive Web Design」などの使い勝手のいいアートボードプリセットが揃っています。しかし、自分好みの複数のアートボードをまとめて作れたら便利なはず。
今回はアートボードの集合体「アートボードプリセット」の作り方をご紹介します。


参考サイト



カスタマイズするファイル


Sketchシステムファイル内の「artboards.plist」をカスタマイズすることで、好みのアートボードプリセットが作れます。

今回カスタマイズするファイルは「ライブラリ」の中にあります。ライブラリにアクセスできない場合(デフォルトの設定ではほぼそうではないかと)、Finderのメニュー>移動>フォルダへ移動 を選択し、でてきたウィンドウにパスを入力します。


~/Library/Application Support/com.bohemiancoding.sketch3/


「com.bohemiancoding.sketch3」フォルダの中身はこんな感じです。



「artboards.plist」をSublime Textなどのエディターで開き、カスタマイズをしていきます。

「artboards.plist」がない場合

SketchのGUIからアートボードプリセットを作ったことがないと生成されないようです。デタラメな設定で構いませんので、追加してみてください。(※後でファイルの中身をまるっと上書きすると、ここで作ったプリセットは消えてしまいます)



プリセットの基本的な書き方

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<array>
	<dict>
		<key>name</key>
		<string>Custom</string>
		<key>presets</key>
		<array>
			<dict>
				<key>height</key>
				<integer>※アートボードの高さ</integer>
				<key>name</key>
				<string>※アートボードの名前</string>
				<key>width</key>
				<integer>※アートボードの幅</integer>
			</dict>
		</array>
	</dict>
</array>
</plist>

おまけ Google Adwords のプリセット

まとめてアートボードが作れたら便利なものはなんだろう、と考えた結果、やたらと種類が豊富なGoogle Adwords用のアートボードプリセットを作ってみました。

参考サイト:イメージ広告の作成方法とサイズ – AdWords ヘルプ



<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<array>
	<dict>
		<key>name</key>
		<string>Ad Banner</string>
		<key>presets</key>
		<array>
			<dict>
				<key>height</key>
				<integer>250</integer>
				<key>name</key>
				<string>Square</string>
				<key>width</key>
				<integer>250</integer>
			</dict>
			<dict>
				<key>height</key>
				<integer>200</integer>
				<key>name</key>
				<string>Square Mini</string>
				<key>width</key>
				<integer>200</integer>
			</dict>
			<dict>
				<key>height</key>
				<integer>60</integer>
				<key>name</key>
				<string>Banner</string>
				<key>width</key>
				<integer>468</integer>
			</dict>
			<dict>
				<key>height</key>
				<integer>90</integer>
				<key>name</key>
				<string>Big Banner</string>
				<key>width</key>
				<integer>738</integer>
			</dict>
			<dict>
				<key>height</key>
				<integer>250</integer>
				<key>name</key>
				<string>Rectangle</string>
				<key>width</key>
				<integer>300</integer>
			</dict>
			<dict>
				<key>height</key>
				<integer>280</integer>
				<key>name</key>
				<string>Rectangle Big</string>
				<key>width</key>
				<integer>336</integer>
			</dict>
			<dict>
				<key>height</key>
				<integer>600</integer>
				<key>name</key>
				<string>Skyscraper</string>
				<key>width</key>
				<integer>120</integer>
			</dict>
			<dict>
				<key>height</key>
				<integer>600</integer>
				<key>name</key>
				<string>Wide Skyscraper</string>
				<key>width</key>
				<integer>160</integer>
			</dict>
			<dict>
				<key>height</key>
				<integer>50</integer>
				<key>name</key>
				<string>Mobile Big Banner</string>
				<key>width</key>
				<integer>320</integer>
			</dict>
			<dict>
				<key>height</key>
				<integer>200</integer>
				<key>name</key>
				<string>Mobile Square Mini</string>
				<key>width</key>
				<integer>200</integer>
			</dict>
			<dict>
				<key>height</key>
				<integer>250</integer>
				<key>name</key>
				<string>Mobile Square</string>
				<key>width</key>
				<integer>250</integer>
			</dict>
			<dict>
				<key>height</key>
				<integer>250</integer>
				<key>name</key>
				<string>Mobile Rectangle</string>
				<key>width</key>
				<integer>300</integer>
			</dict>
		</array>
	</dict>
</array>
</plist>