使っていない方にはオススメしたい。Sketchって結局どんな感じなのよ?と思ったので試してみたよ。|ウェビメモSiteMenuMeAboutWPWordPressjQjQueryWebWebiiPhoneMacMacPicPhotoCaCafeetcetcウェビメモTweetMacまだ使っていない方にはオススメしたい。Sketchって結局どんな感じなのよ?と思ったので試してみたよ。買ったこんにちは!霙(@xxmiz0rexx)です!2015年ももう終わろうとしている時に、遅ればせながらやっとデザインツールにSketchを導入してみました。インストールして1週間ほどなんですが、入れて良かったという感想しかないです...。爆速で仕事が終わっていくやんけ、、、。そんなわけで今年最後の記事は、今年最後に手に入れたデザインツール『Sketch』をご紹介させてもらおうと思います。アプリをデザインする人でまだ使っていない人がいたら参考にしてみてください。Webデザインにも使えますが、やはりアプリデザインにこそ真価を発揮すると思います。目次Sketchを使って感動したこと取り急ぎ入れたSketchプラグイン気になっているプラグイン(未使用)これだけは覚えておきたいSketchのショートカットキーさいごにSketchを使って感動したことまだ使っていない人からしたら、何をそんなに感動したのかを知りたいと思います。私がどんなことで感動したかを書いてみますね。Previewを利用していました。1.アートボードを何個も作成できる上に、よく使うであろうサイズが最初から入ってるSketchでは画面左上にある『Insert』の中の『Artboard』ボタンを押すと、様々なサイズのアートボードが作成できます。各種iPhoneサイズやアプリのアイコンのサイズがデフォルトで入っているので非常に便利。私は今のところ下の画像のような使い方で、1つのアプリのいろんな画面を並べてデザインしています。これはAndroidアプリのデザインを作っているところ。使いやすーい!!Androidのデバイスサイズなど、任意のサイズを登録したい場合デフォルトのサイズは沢山あるのですが、Androidは何故かタブレットのサイズしか入ってなかったりします。́)b参考:よく使うアートボードのサイズを登録する2.OSのUIテンプレートが入っているこれは本当に本当に感動しました。́∨`*)あまりアプリデザインをしないとはいえ...今まで何をやっていたんですかね私は(涙)ちなみに、Android(マテリアルデザイン)のUIテンプレートも入っています。矢印アイコンとかシェアアイコンもあるし、下記のようなラジオボタンやら何やら、地味にありがたいです。本当いままで泣きそうでした。好きなテンプレートを選択でOKです。3.書き出し一発でできるやんけこれはもう有名な話ですが、@1x,@1.5x,@2x,@3xなんでもいけます。自分で倍率も選べちゃうから、この先どんな解像度が来ても安心です。@530000xだってへっちゃらさ!あとでご紹介するプラグインもオススメ。便利なiOSアイコン用のテンプレートを配布している方がいます。Qiita4.alt押したらオブジェクト間のマージンが表示される何これ号泣。オブジェクトを選択し、altを押しながらカーソルを周りのオブジェクトにあてると、選択中のオブジェクトからの距離が表示されます。これがデフォルトでついてるとは...Sketch...最高みがある...。5.作成中のデザインをiPhoneにミラーリングできる有料アプリですが即買いしましたね。Previewのように、作成中のデザインを実機に反映させて確かめることが出来ます。自分が作成したUIが使いづらくないかを確認するには、実機で見る以外ありませんからね。必須アプリだと思います。Mirror↑目次へ取り急ぎ入れたSketchプラグインiPhoneとAndroidのアプリを制作するために便利そうなプラグインを探して突っ込みました。これから入れる人の参考になれば。Toolboxプラグインを簡単にインストール・アンインストールするためのプラグイン。コレを入れておけば後がラクちんです♪2.sketch-measure超簡単に指示書を作れるプラグイン。このプラグインで必要箇所のサイズやマージン、フォントサイズなどを表示させておけば、あとはPDFで書きだして指示書としてお渡しするだけなので超時短になりました。sketch-export-assets選んだグループを必要な画像サイズに書き出してくれるプラグイン。参考:Androidアプリ用画像パーツを書き出すのに便利なPlugin↑目次へ気になっているプラグイン(未使用)プラグインを探している時に気になったもののメモ書き。1.social-artboards-sketch各種SNSのヘッダーやアイコンサイズのアートボードのプリセット。2.sketch-unlock-all-layersすべてのレイヤーのロックを解除してくれるらしい。3.sketch-select-similar-layers共通の塗と境界線を持つオブジェクトを選択してくれるプラグイン。Illustratorで結構使ってたし必要かも。4.Sketch-Find-And-Replace選択中のオブジェクトの中に含まれるテキストを検索して好きな言葉に置換できるプラグイン。5.Sketch-Make-Long-Shadowロングシャドウを作ってくれるプラグイン。流行ってるかは知らないけど、たまにロングシャドウ欲しい時はある。6.swap-elements2つのオブジェクトの位置を入れ替えることができるプラグイン。↑目次へこれだけは覚えておきたいSketchのショートカットキーさすがにAdobeとは違うので覚え直さなきゃですね。私がよく使うショートカットキーをメモっておきます。オブジェクトを最背面に移動わたし、AdobeソフトではVを多用していたんです。移動ツールとか選択ツールとか基本の動作のものに戻るショートカットキーだったので、Sketchでも癖で押してしまう...。何とかしたいなw私だけでしょうか?↑目次へさいごにというわけで、2015年最後の記事は長々とSketchの紹介をしてみました。半分くらいになったような気がしていますし、この記事がほかのデザイナーさんの仕事時間短縮のキッカケになれば良いなと思います。備忘録:WordPressでRSSフィードをカスタマイズする方法ちょっと一息...そうだ、ネタ記事読もう。すしぱくさんに名指しされたのでウェビメモ管理人みぞれの1日のタイムスケジュールを晒します。雨女→晴女にジョブチェンジのお知らせ[雨女]2013年を振り返る。思い出は...いつの日も...雨...。今年も雨に降られた1年でしたおなかへったな...そうだ、カフェ記事読もう。MeフリーランスWebデザイナー兼雨女。iOSアプリ・アイコンデザインなどを請け負ってます。ガーリーなフリー写真素材サイト始めました。食べたRankingDropboxに保存したhtmlファイルをiPhoneで閲覧する方法メモ。備忘録:Gmailで受け取った内容をGoogleスプレッドシートに自動で読み込んで管理する方法まだ使っていない方にはオススメしたい。Sketchって結局どんな感じなのよ?と思ったので試してみたよ。