Skech勉強会の発表資料
※メニューからプレゼンテーションモードを選択すると見易いです
NOTA Inc.
Sketchの利用事例
自己紹介
吉原 建 / Takeru Yoshiahra
NOTA Inc. デザイナー
Agenda
NOTA Inc.で作ってるもの
Sketchでやってること
アウトプットの共有方法
取り組んでる課題
まとめ
NOTAで作ってるもの
スクリーンショットの共有ツール
チーム用wikiシステム
https://gyazo.com/1c49be563307cea9770cf8d6ac0d330f
NOTA Inc. のデザイナー
https://gyazo.com/f34f85a77a11d0b6f4b2d1db3242a4dc
Tiro Swaby
バルバドス出身 カナダ国籍
https://gyazo.com/a24d8321744bc52c86937d6fabe8bd99
吉原 建
九州出身 日本国籍
Sketchでやってること
大きく分けて2種類のモックアップデザインに活用
静的ページ：
ランディングページやサポートページなど目立った動きがないペ ージ。
WebアプリのUI：
コンテンツ一覧やコンテンツ詳細ページなど、状態が常に変化するUI。
静的ページ
ウインドウサイズの変化を除けば大きな動きはない。
ほぼSkechで完結できる。
2 割くらいは実装しながら検証。
具体例
静的ページの共有方法
Craft + Invision
Prototype機能を使ってSketch側でアクションを追加
実装時Invisionのインスペクタモードが便利
具体例
重宝してる機能
Grid
Mirror
Library
Craft (プラグイン）
Grid
ガーター幅も調整可能なグリッドガイド機能
レイアウトの調整、レスポンシブ対応に必須
だいたい12分割で利用
https://gyazo.com/c6d29511916178a60b951db70cf22437 https://gyazo.com/03f0504007de0b094527e04d20359b40
Mirror
作業中のアートボードをブラウザで閲覧できる
LANの範囲なら他の人にも共有可能
モバイルの検証にも便利
https://gyazo.com/df8a4fac44d1669db2059ee12f6dea70
Library
他人とsymbolを共有できる
現在はアイコンの共有に利用
UIコンポーネントや画像素材など、利用幅を広げたい
https://gyazo.com/2b47b0ff2ad49a63417c7675d150dad2
Craft
Invisionへの出力 / アクション追加
一時的な画像素材の利用
https://gyazo.com/deb5b6eca280b9a90f4849aaf4d7c88a
https://gyazo.com/39e255b08ad691b71621876578abbe34
WebアプリのUI
実際のアプリ内で利用されるUIのデザイン。
コンテンツやメッセージの表示やボタンアクションなど
具体例
GyazoのUI
Sketchと実物では印象が全く変わる
コンテンツの種類によるギャップ
例：
実際のコンテンツが入ると超ダサい
テキストが長いとなりたない
文脈の違いによるギャップ
例：
前後のアクション間でのつじつま
発火したアクションの回
想定できてない状態によるギャップ
例：
言語設定
コンテンツの数
Sketchでできないこともある
Sketchでのアウトプットは時間軸のある1カットを切り取ったものにすぎない。
検証できるのは2 ~ 3割くらい。
料理で例えるとSketchでできるのはレシピの作成。
レシピでは味見はできない。
Sketch + αの選択
色々試してみた
Invision, Pixate, Hype, Craft, Framer...
他者への共有/デモンストレーションには使える
検証には不向き
問題
固定的なコンテンツ
固定的なレイアウト
結局一番いいのは実装してしまうこと
一番いいのはコードいじってstaging上で検証
でも時間がかかる
なのでうまくSkechでの描画を絡めて手間を短縮する。
例えば
検証に関係のない箇所はSkechの出力画像をそのまま使う。
コードの綺麗さなんて一切気にしない。
検証に必要な部分とどうでもいいところのメリハリをつける。
コーディングにもSkechのスピードを最大限活用。
UIデザインの共有
Invision
scrapbox
Sketchを使ったデザインの課題
Skechで作ったアイデアの循環を活性化させる
現状Skechのアウトプットで止まってしまうアイデアが多い。
アイデア ⇨ 実装 / フィードバック ⇨ プロダクト化
これが回らないとアイデアが消化不良になりがち。モチベーションのダウンにつながる。
SketchやInvisionで止めずに積極的に動作モックを作ってプロダクト化へのサイクルを回すべき。
まとめ
Skech便利。
でも単独ではできないこともある。
人やツールを頼る！
Skechのアウトプットをガンガン活かそう！
Scrapbox
https://gyazo.com/1be5a6fca50b64e5a2cf4fab83261c58