WebDesignFireworksの移行先としてSketchを買ったのですが、ずっと封印状態でした。最近になってちょっと使ったりしているので基本的なことを書いてみました。Linkアートボードの作成いろいろ配置する前に最初はアートボードを作成します。違いますけどFireworksでいうところのキャンバスのようなものです。Photoshopでは最近実装されましたね。適当にドラッグします。アートボードのサイズとか背景色とかは右のパネルから変更します。Layout(グリッド)の設定FireworksとかPhotoshopですと12分割するのにガイドを使用しますが、SketchではLayoutという機能を使用して分割線を引きます。メニューを選択するとオプションが開きます。ここでは分割数や間隔などグリッドの細かい設定をすることができます。ボタンを押すとアートボードに対してグリッドを中央に配置してくれます。メニューから作成します。サイズや色など基本的な編集から、角丸や影などフィルター的なものなど編集に関わる部分は右のパネルから行います。Fireworksと違ってあとからの編集もスムーズですね。レイヤー/ページレイヤーは左にあります。Photoshopと比べるとかなりシンプルですね。表示/非表示はマウスオーバーすると目アイコンが表示されるのでわかると思いますが、レイヤーロックとかはなさそうなので、ショートカット(Cmd+Shift+l)でロック/ロック解除します。レイヤーの上にはページがあります。Fireworksとほとんど同じように使えると思います。タブをクリックすると書き出し設定が出ます。タブを押すたびに項目が追加されて、Retina用の画像設定とかも楽ですね。個別の角丸これはちょっと分かりにくかったのでメモ。左上と右上だけ角丸したいときはRadiusのとこに「6/6/0/0」みたいに「/」区切りにします。PhotoshopもFireworksもIllustratorはなんだかんだいってもAdobeなのでUIは似てるのでなんとなくで使えるのですが、SketchはUIがかなり違うということもあり取っ付きにくいですが、機能的やショートカットは結構同じところもあるのですぐに慣れるのではないかと思います。REPLYNAMEE-MAILURLコードを書く場合は<pre>で囲んでください。WixこのブログではjQueryやWordPressを中心としたWeb制作関係のことを書いております。ご意見ご感想などお気軽にコンタクトフォームよりお問い合わせください。Web関係のお仕事も募集しております。