ふにセミWS Vol.3 – Sketch3ことはじめ - 開催レポ

Publish2014/06/24(火)

先日行ったイベント「ふにセミWS Vol.3 – Sketch3ことはじめ - 」の開催レポートです。
このイベントは東京からこもりまさあきさんをゲストとしてお呼びして、最近注目を集めているアプリケーション「Sketch3」の基礎を学びつつ、ハンズオンで実際に手を動かして作ってみるという体験ができるイベントでした。

イベントの様子
当日の様子。こもりさんから直接Sketchを教えていただく事ができる貴重な時間でした。

ちなみに、僕は普段からSketchを仕事に使っているのですが、それでも新しい発見がありました。
気になるポイントなどを改めて紹介し直してみようかなと思います。

Sketch3の基礎操作でこれはいいですねと思ったポイント

ダイレクト選択ツールはない!

ダイレクト選択ツールの代わりは「右クリ+Pick Layer」。もしくは「⌘+クリック」
Pick Layer

画面左下からの絞り込みで特定レイヤーのみを表示させる

要素がたくさんあると見づらくなるので、絞り込んだ結果のみを表示させて作業効率をアップさせる。
レイヤーに名前を付けておくと、その名前のレイヤーのみが表示される。
今回の場合では、レイヤーに「name」や「mail」と名前を付けておく事で、nameのみを表示してその中の要素を簡単に選択してContent-generatorで要素を作った。
これをやる事を考えながら作るとだいぶ作業効率が上がりそうですよ。

表示倍率は「⌘+1」「⌘+2」「⌘+3」

画面拡大は「⌘++」や「⌘+-」で行うのではなく123でやろう。選択オブジェクトのみを拡大とかは便利すぎますね。

レイヤー名で書き出し先フォルダを指定

これが全く知らなかったんですが、レイヤーに「images/test」とかつけると指定フォルダに書き出ししてくれます。
この場合だと「images」の中に「test.書き出し設定で決める形式」のファイルが作成されます。
毎回の書き出し作業が楽になりすぎてヤバいです。

プラグインの入れ方
プラグインのインストールは画面上部の「plugins」から「Reveal Plugin Folder」を選択して、その中にプラグインをフォルダごと入れれば適用されます。しかも再起動は不要でそのまま使用できます。

Reveal Plugin Folder

ガイドはダブルクリックで表示

これは若干使いづらいんですけど、ガイドも出せます。

MakeGridで複数作業を自動化

Makegrid

やっぱり便利なMakeGrid。何回も同じ作業をする(等間隔で同じ要素をコピペとか)場合に凄まじい効果を発揮します。これは使いこなすと全然効率が違いますね。

シンボルの解除は「Detach from symbol」

Sketch3から導入されたシンボル。
作成して設定する事でシンボル化したオブジェクト全てに適用されて便利なんですが、たまにイレギュラーな要素がある時にこれを使います。
Detach from symbolをする事で、そのオブジェクトがシンボルから切り離されてそのまま使える形になります。
地味に便利。

Detach from symbol

作成したオブジェクトの要素で新規オブジェクトの設定に反映させる

これも地味に便利な「Set Style as Default」。
よく使う要素を登録しておく事で、次からの作業がかなり効率化されます。

Set Style as Default

といった感じで、テクニックと使える機能を駆使してこんなものを作りました。

実際に作った物

話を聞きながら実際に1時間ほどで作りました。
聞きながらでこれなので、もっと作業に慣れてたら10分くらいでできるかも。
やはり便利なツールは使わないと無駄になりますし、使い方もしっかり理解しておかないとだめですね。

質疑応答でいただいた質問と答え

当日イベントの最後に質疑応答コーナーがあったのですが、気になる内容だったのでここでも紹介しておきます。

Q.プラグインって自動アップデートされますか?
A.プラグインのアップデートは今の所手動。これからに期待(Sketch Toolboxが開発中という事らしい)。

Q.矩形の塗りにテクスチャはありますか?
テクスチャというようなものは今の段階ではない。Fillとかで斜線とノイズくらいはできる。

プラグインはできれば自動アップデートして欲しいですし、塗りの種類もたくさんあるとうれしいので、なるほどと思います。
まだまだSketchは成長途中なのでこれからの進化に期待しましょう。

参考リンク

イベント中やその後に参考になるサイトがたくさん出て来ましたので、説明を入れつつ紹介しておきます。

Installed Sketch Plugins
こもりさんが実際に使っているプラグインのリストです。
これはアツイ。今すぐ確認して試してみたい衝動を抑えつつブログを書いてます(笑)

ふにセミ Sketch 3
東京から参加いただいたmitomexさんがイベント中のメモをgistで公開されてます。
断片的な情報にはなりますが、かなり網羅されているかなと。
参加いただいた皆さんだと「そうそう!」って思い出せる感じです。
いいですね。

http://avocode.com/
当日紹介いただいたサイト。まだPSDしか対応してませんが、これからSketchが対応されるようです。
使用方法としては、作成したファイルからCSSやSVGなどの画像、フォントなどのデータを取り出すことができます。
デザイナーさんからコーダーさんにデータを渡す特とかに重宝しそうな感じです。

https://github.com/timuric/Content-generator-sketch-plugin
当日使ったプラグインの「Content-generator」。
使う事でダミー画像やテキストを自動で生成してくれるプラグインです。
これを使えばざっくりとしたモックとかが一瞬でできるかなり素晴らしいプラグインです。

https://dribbble.com/tags/sketchapp
dribbbleっていう海外のサイトで、作ったデータを公開しているうちのSketchで作られたデータです。
Sketchでこんな事ができるというのが感覚的に分かりやすくでよいです。

http://www.sketchpack.in/
Sketchのプラグインディレクトリです。
こんなプラグインないかなという時に探す際に使えます。

FramerJS
当日こもりさんがデモしてくれたSketchで作成したデータを「動かしてみせる」事ができるプログラムです。
動的に作成して確認してもらう場合などにぴったりです。

当日のハッシュタグは「#fnsws03」でした。

懇親会も最高の時間でした。

今回のイベントでは、懇親会も行いました。
お酒を飲みながらSketchの話で盛り上がったり、ワークフローの話をしたりととても楽しく有意義な時間でした。

懇親会
こもりさんの話に夢中な参加者の皆さん。

追記

当日のスライドが公開されてます。

サイトをSVGに変換するサイト
http://www.hiqpdf.com/demo/ConvertHtmlToSvg.aspx

当日のデモで使ったsketch-data-parser
sketch-data-parser
エクセルの表からデータをJSONに変換してSketchで再利用できます。
デモではSublimeTextで、SublimeDataConverterを使用してされていました。
SublimeDataConverter

デモ動画はこちら

記事の著者:ふにすでぐち

ふにすでぐち

1978年生まれ。企業のWeb活用をテーマに、Webサイトの運用を中心とした戦略的な企画立案、サポートやWebサイトの構築などを行っています。
5年間のWeb制作会社勤務後、2年間のフリーランスで「フニス」として活動後に法人化し、2012年7月「ふにす株式会社」を設立。
Web活用の情報や考え方などを発信するブログ「ふにろぐ」を平日毎日更新中。
2015年11月より大阪府高槻市に「ふにすWeb相談所」を開設。
地域の方々に気軽にWebのことを相談できる場所として、より多くのWeb運用の問題解決をするために活動しています。
また、不定期で大阪を中心にWeb運用やブログなどをテーマにしたイベント「ふにセミWS」を開催しています。
サイトの運用や活用にお困りの方はお気軽にご相談ください。
お問い合わせはこちら

LINEでWebに関する質問にお答えしています。

ふにすでは、LINEでWebに関するご質問にお答えしています。Webに関するあんなことやこんなこと、今さら聞けない疑問などなんでもご相談ください。LINEアプリでQRコードを読み取ると友達登録のリンクが表示されますので、試しに登録してみてください。

About

ふにろぐとは?

ふにろぐは「ふにす株式会社」の「でぐち」が書いているブログです。
このブログでは主にサイトの運営をしている企業のご担当者様向けに、「サイトの運営に役立つTips」や「今更人に聞けないような初歩的なこと」を中心に情報を配信しています。
その他には僕自身の考え方なども書いています。

このブログについて

ふにすのお仕事

このブログを書いている「でぐち」がしている「ふにす株式会社」は大阪と京都の間にある高槻という街で、Webの運用サポートを中心に活動しています。
Webサイトの制作とかもしてますが、ブログを続けるためのサポートとか、会社をどうやってPRすればいいんだろうとか、そういうふわっとした事を相談してください。
どういう内容を相談できるのかをまとめましたので、参考にしていただければと思います。

ふにすにはどんな仕事が頼めるの?

ふにすWeb相談所

ソーシャルとか。

NewEntry

PickUP

Webサイトの運用に関する情報

ふにろぐで取り上げたWebサイトの運用に関する記事のまとめです。ツールや運用ノウハウなど、知っていると便利になる情報ですので、まずはこちらをご覧ください。

Category

Month