Goalist Design Blog

いまさらだけどSketchはいいぞをエンジニアに共有してみた

こんにちは。シミズです。

今月のHRogのFacebookカバーは12月Ver.とクリスマスVer.作りました。
クリスマス仕様は完全に趣味且つ勢いだけで作ってしまいました。

www.facebook.com

……もうちょっと凝りたかった…

 

さて、ふろぐんトークはここまでにして今回は

Sketchはいいぞ

をエンジニアに伝えるための共有会第2弾(ワークショップをしてみたの回)の様子をお伝えしたいと思います。
第1段の様子は以下をご覧ください。

developers.goalist.co.jp

 

ちなみに第1弾はエンジニアのブログだったのに第2弾は何故こちらなのかというと…

次回

次回は実際に手を動かすワークショップを開催します。
ひっそりと姿を消した社内プロジェクトの画面を作成します。
次回はきっとデザインブログで更新されるので(圧)
そちらもチェックしてみてください。


………

次回はきっとデザインブログで更新されるので(圧)

  (圧)
\(^o^)/

ということで怖い怖いブログ番長より圧をかけられてしまったのでしっかりこちらでお伝えしていきます。

 

やったこと

今後どうやって社内で活用していくかを話しながら、ひっそり姿を消してしまった社内プロジェクトを例に色々といじりながらワークショップを行いました。

f:id:goalist_432:20171225194635p:plain f:id:goalist_432:20171225195545p:plain

と、言っても今回はそこまで時間が取れなかったので、この2画面をSketchで作ってみます。

 

手順

まずはアートボードを選択します。
そうするとテンプレートが表示されるので、使いたいテンプレートを選択します。
今回はiOSアプリなのでApple DevicesからiPhone 8を選択します。

f:id:goalist_432:20171225200330p:plain

ちなみにですが、Android用やWebのテンプレもあるので、かなり便利です。
もちろん任意のサイズでも作れますし、Customのテンプレートとして登録して使いまわすこともできます。

 

ということで、アートボードが表示されました。

f:id:goalist_432:20171225194313p:plain

 

ステータスバーを置きます。
iOS UI DesignというiOSパーツのテンプレート素材が入っているので、それを活用していきます。

f:id:goalist_432:20171225210544p:plainf:id:goalist_432:20171225210550p:plain

 

続いてアイコンを置いていきます。

ちなみにアイコンに関しては、最近Sketchプラグインのicon fontとアイコンパックのfont-bundlesを使ってmaterial(マテリアルデザイン用のアイコン)を多用しています。

 

使い方は…

f:id:goalist_432:20171225211148p:plain

これをこうして…

 

f:id:goalist_432:20171225211155p:plain

さらにこれをこうして…

f:id:goalist_432:20171225212025p:plain

…どん!

この状態だとフォント扱いなので、shift+⌘+Oでアウトライン化します。

 

 詳細な使い方は以下の記事などご参考にしていただければと…。

qiita.com

 

ちなみにアイコンなどのオブジェクトの配置にはイラレの整列のように、複数のオブジェクトを垂直・水平に指定した間隔で揃えてくれるプラグインSketchDistributorなどを使って調整しています。

f:id:goalist_432:20171225213042p:plain f:id:goalist_432:20171225213051p:plain

配置も整い、トップ画面のラフが出来上がりました。

 

同様な感じで2画面目も作成します。

 

f:id:goalist_432:20171226111608p:plain

はい。完成です。

 

遷移についても見たいのでプロトタイプを作ってみます。
プラグインのCraftを使ってInVision上で見られるように設定していきます。

 

f:id:goalist_432:20171226193546p:plain

オブジェクトもしくはレイヤーを選択して、Cをクリックすると青い線がニョキッと出てきます。
それを遷移先まで引っ張ると…

f:id:goalist_432:20171226193559p:plainf:id:goalist_432:20171226193622p:plain

こんな感じで挙動を選択できます。

 

f:id:goalist_432:20171226193636p:plain

設定した遷移は青い矢印で表示されます。

 

遷移の設定が完了したら、右側のCraftのメニューバーからinVision上へ同期します。

f:id:goalist_432:20171226193648p:plain

 

f:id:goalist_432:20171227114227p:plain

f:id:goalist_432:20171227114232p:plain

……

f:id:goalist_432:20171227114235p:plain

………

f:id:goalist_432:20171227114241p:plain

チン!(本当にベルみたいな音がなりますw)

 

f:id:goalist_432:20171226194823p:plain

はい!反映されました。

 

f:id:goalist_432:20171227121925p:plain

うっすら青くなっているところが先ほどリンク設定した領域で、クリックすると画面が実際に遷移します。

 

他にも

f:id:goalist_432:20171227115252p:plain

InVision上でも遷移を設定したり、

 

f:id:goalist_432:20171227120234p:plain

メモやストーリーポイント、コメントをつけたり、

f:id:goalist_432:20171227120353p:plain

要素やコードを確認したりできます。

 

ここまで来て遷移図とかもできたらいいのにという話題が出て来たのですが遷移図の書き出しはCraftもInVisionも難しそうだったので、プラグインを探してみると…

ありました!

UserFlows

オブジェクトとアートボードを矢印で繋げ画面遷移図を作れて、遷移を表す矢印の挿入・削除・アップデートや条件分岐アートボードの追加、作成した遷移図全体を書き出せるようにまとめる機能などがあります。

f:id:goalist_432:20171226204224p:plain

詳しい使い方は公式のwebページの動画がとてもわかりやすいので、こちらを参考にしていただければ…と。

abynim.github.io

 

果たしてSketchはいいぞは伝わったのか…

当日の日報↓

f:id:goalist_432:20171226205237p:plain

しっかりとエンジニア陣にもSketchはいいぞが伝わりました。

サクサク動いてここまでできるSketchは本当に良いです。
でもこれだけいいぞいいぞと言いながら、実はXDもInVision Studioも気になっています。。(*´Д`*)
とりあえずXDにも手を出してみながら、より良いツールを開拓していければなぁと思います。

最後に …

年内のゴーリストデザインブログは最後になります!(きっと)
今年の2月から始めてポツポツと更新して来た当ブログ。
来年はふろぐん日記だけでなく、もう少しTips的な記事も発信していければいいなぁと思います。

 

おまけ

今回使ったプラグイン等々一覧です。

icon font
アイコンフォントを使うためのプラグイン

font-bundles
インストールすることでicon fontが使えるようになるアイコンパック

SketchDistributor
複数オブジェクトを水平・垂直に任意の幅で揃えるプラグイン

Craft
InVisionへ連携するためのプラグイン
他にもダミーの文字列や画像を挿入できたり、複製作業もできるプラグインです。

InVision
アプリやホームページのプロトタイピングを複数人で効率的に作成することができるWebサービス

UserFlows
画面遷移図を作って書き出すことができるプラグイン

 

ではでは良いお年を