第33回リクリセミナー「モバイルアプリ・WebデザインのためのSketch入門」参加してきました

Sketch

2017/11/18(土)に行われた、第33回リクリセミナー「モバイルアプリ・WebデザインのためのSketch入門」に参加してきました。その感想とわたしの思うSketchの使いどころなどを書きました。

Pocket

セッションの内容

今回はセッションとハンズオンが2つずつ交互に行われるというスタイル。長谷川恭久さんは「ツールの選び方」「SketchのSymbolの考え方」という2つを、スライドを使ってお話されました。

Sketchのシンボルは「オーバーライド」という機能をつかって、ページや状態に合わせてテキストやアイコンや色を組み替えることができます。これはデザインをシステム的に考える、伝えるのにはとてもいい機能なのですが、ついつい「シンボル作り」に注力して、他の人には理解不能な複雑なシンボルもできてしまいます。情報のカタマリとしてシンボルを作る、固定したい部分と変化させたい部分をきちんと考える、というお話に改めてハッとしました。

セッションの中で、「エラーになったら」「回線が遅かったら」という「もしも」のデザインも考えなければいけない、というお話があり、懇親会の時に「回線が遅いときのデザイナーにできるアプローチって何ですか?」と質問したところ、emptystat.esというサイトを教えていただきました。回線がない、遅いときにページが真っ白のままではユーザーには「それがなぜなのか」わかりません、「いまページが表示されていない理由」を伝えることも大事。エラーや404についてはよく語られますが、そこまで視点がなかった…確かによく使うアプリにはそんな画面がある!と気がつきました。

2本通して「Sketchのお話」というより「構造を考えてデザインしなければいけない、それに適したツールを選ぼう」というお話だったと感じました。

ハンズオンの内容

山本麻美さんのハンズオンは70分を2回、前半はアートボードの作り方や矩形円形の作り方、ダイアログボックスの数値の計算、矩形の背景に設定して可変しやすい画像の作り方、など。後半は長谷川さんのセッションを受けてシンボルの作り方やプラグインの紹介など。「使い方を説明されて家に帰ってつまずく」ということがないので、時間はかかりますがみんなで一緒に触ってみるハンズオンはとてもいい形だと思いました。

これまでファイルの中でしか持てなかったシンボルを、外部ファイルとして読み込める新機能の「ライブラリ」ですが、実際に案件で導入されて全てのオーバーライドがデフォルトに戻ってしまった…という実体験はかなり背筋が凍りました…あとはデザインのバージョンツールを導入してみた感想など、ここでしか聞けない貴重な話もあって勉強になりました。

あと、何度も強調されていたのはWebから新しい情報を得ること。Sketchの公式ページは全て英語ですがChromeの日本語翻訳でなんとかなる!とのこと。あと、セミナーなどで寄せられた質問はこちらで回答されているということでした>Sketchたまご

わたしとSketch

新興デザインツールはAdobe製品と比べられがちで、いまはXDと並べて語られることもありますが、全く用途が別だと思っています。わたしの思う、Sketchが向いていると思う場面はこういう感じです。

適していると思う案件3つに取り入れてみました。Sketchの好きなところはこの5つ。

  • できることがかなり限られている
  • 状態が変わった時にどうなるのかを確認しやすい
  • 破綻しやすいところに気がつきやすい
  • UIキットがかなり豊富
  • Sketch Mirrorでデバイスプレビューも楽

でもMacだけでしょ?いえいえ、Sketchファイルを作成・編集するにはMacとSketchが必要ですが、ZeplinInVisionのようなツールを使えば、Windows環境でもSketchのアセットを確認できたり書き出すことができます。

おまけのショートカット

ショートカットはAdobeとは少し違うので、最初は慣れないかもしれませんがすぐ慣れます。わたしがよく使うのはこれくらいです。

  • R…矩形
  • O…円形
  • A…アートボード作成
  • Z…拡大
  • option+Z…縮小
  • ⌘0…等倍
  • control+C…スポイト

Sketchの環境設定ではショートカットは変更できませんが、Macのシステム環境設定>キーボードでショートカットを割り当てることはできます。わたしはCopy StyleとPaste Styleを多用するのでショートカットを当てています。

  • Edit->Copy->Copy Style
  • Edit->Paste->Paste Style

これをコピペして、好きなショートカットを当ててください。わたしは⌘+control+shift+Cと⌘+control+shift+Vです。

とても案件を選ぶと思うので、全ての人におすすめ!というわけではありませんが、「もしかしていまの仕事に合うかも」という方はぜひ導入してみてください。

Pocket

ホームへ戻る

ページのトップへ戻る