Sketchをつかってみたい
Google Homeのことについて書きたかったのですが、夢が夢のまま終わってしまったので大人しく自分の畑に帰ることにしました。適材適所という言葉が最近のわたしの座右の銘です。
そこで今回わたしが目を付けたのはSketchというUIデザインツールです。UIデザインツールというとSketchの名前が必ずといって上がるので気になってはいたんです。でも、AdobeXDでまあまあ満足していたこともあって中々手が出せずにいました。新しいツールって慣れるまで時間もかかるしね。
そんなわけで、せっかくの機会ということもありこの場を借りて一人勉強会を開催することにしました。
Make IT アドベントカレンダー15日目の投稿です。本日はmzk0128が担当します!
明日は三度目の正直 @wh1tecat さんが投稿してくれるはずです。ダッツでスカイツリーをつくるのはやめてください。
はじめに
Sketchとは、WebサイトやアプリなどのUIデザインに特化したデザインツールです。
AppleやGoogle、任天堂などの有名企業のデザイナーも使っているとのこと。すごいですね。わたしはというと、わりと最近まで存在すら知りませんでした。
このUIデザインツールがなぜ必要なのか?ワイヤーフレームをつくるのも、カンプをつくるのも、まあまあ面倒くさいのですっ飛ばしたくなる気持ちはよくわかります。が、個人でつくる場合にも、仕様はきちんと決めた方がコーディングの効率がぐん上がります。
設計図はちゃんとつくりましょう
当たり前のことを言うな。はい。でも、わたしを含め案外このへんがふわっとしている人っているんじゃないかなと思って、自戒を込めて声を大にして主張しておくことにします。設計図はきちんとつくりましょう。
これを読んだらもうCSS直打ちからはじめるのはやめましょう。
SketchやAdobeXDはそんな面倒臭い設計図つくりを手助けしてくれるツールです。そんなお便利ツールをつかって、今回は猿でもわかる入門編をおこないます🙈
Sketchをダウンロードする
先ずはSketch公式サイトで無料版をDLします。
出会い頭に英語に殴られて「うっ」となりながらも、たいへん親切なUIのおかげで無事DL完了。
こちらこそありがとうをしてページを閉じます。
Sketchを起動してみる
![スクリーンショット 2018-12-14 14.22.49.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F310111%2F92430b6d-524e-83a8-4715-35bec000d2f0.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=6ce5d28c7bee80bbb6c87659df3f9852)
![スクリーンショット 2018-12-14 14.25.19.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F310111%2F421007bd-3302-0156-580b-24ae4dbf8189.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=ce723e66e16c1997ef95bc955eb2bd67)
先ずは基本のショートカットを覚える
「A」: ArtBoard(アートボード)を作成する
「R」: Rectangle(矩形)を作成する
「O」: Oval(円)を作成する
「T」: Text(テキスト)を作成する
「L」: Line(線)を作成する
このへんはAdobeXDとだいたいおんなじ。円を作るのだけキーが違うみたいです。
以下は覚えておくと便利そうなもの。
「ctrl」+「R」:ガイドの表示・非表示
「cmd」+「G」:選択したレイヤーたちをグループ化
「cmd」+「R」:選択中レイヤーの名前を編集
「shift」+いろいろ:縦横比を維持・線をまっすぐ引く・その他
Sketch Runnerというプラグインを入れるともっと便利になるそうなのですが、今回は入門編ということで省きます。先ずは基本をしっかり押さえていきたいと思います。
Sketchを実際に使ってみる
今回はこんな感じのものをつくります。
これはクロッキー帳にざっくりフリーハンドで描いたイメージラフです。
これをもとに、ペット(犬)お散歩記録アプリ(架空)のカンプをつくっていきます。
アートボードを作成する
![スクリーンショット 2018-12-15 13.04.24.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F310111%2F60c47962-5f49-664b-35ad-6d7817e666b1.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=89a2812c4ecfd9db483539ead5825bce)
図形を合成する
![スクリーンショット 2018-12-15 20.51.50.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F310111%2F178d93c1-61c5-5eca-ef50-b805a27b766e.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=a693a1edbfce9a35c84508e15276af16)
![スクリーンショット 2018-12-15 18.23.55.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F310111%2Fbac97eba-3eb4-5f86-5eb8-91d3e639e0cf.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=576ec24256d567a5f6fc6e92b574e74d)
シンボルの概念を理解する
シンボルとは、パーツをアートボードとは切り離して管理することのようです。
HTMLに例えるとボタンなどのパーツにCSSを当てるようなものですね。シンボルと聞いてもいまいちぴんとこなかったのですが(AdobeXDユーザーとは?)、実際にSketch上で一通りつくってみて「なるほど」と思いました。
それでは実際にシンボルを作成してみます。
先ずシンボル化したいパーツを用意します。
これらのパーツをひとつずつ「Create Symbol」でシンボル化していきます。
それぞれのパーツをカテゴリ分けすることも可能。「カテゴリ名/シンボル名」と名前をつけてあげるとカテゴリ別にシンボル一覧に格納されます。
できました。
シンボルのうまみを生かす
![スクリーンショット 2018-12-15 22.59.33.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F310111%2Fb8551db5-47ef-1448-537b-6e4e28930d4d.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=b0d02df3a768c18574f8e1f4168bfc07)
![スクリーンショット 2018-12-15 23.10.11.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F310111%2F29008489-2d37-8ae2-6adf-9d574a131e3f.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=2fcf2f1bfeac562f27b00afad0ee095d)
おつかれさまでした
![スクリーンショット 2018-12-15 20.26.26.png](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.amazonaws.com%2F0%2F310111%2F2ac20ddd-f4b7-6e0e-59ad-bd32579025d1.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=901d47d3b1da1cad9a8d6e879efc529b)