update.※「Sketch」はMac専用アプリです。Windows版はありません。「演習ファイル+動画+演習付き」で記事を書いてます。エンジニアの人から「Sketch使ってみたい」「日本語の記事が少ない」という声を聞いて、最近社内で勉強会しました。Sketchについて日本語の記事を調べてみたところ、このレベルの記事はけっこうありました。学びやすいか?といえばそうではないらしいので、少し工夫して学びやすいように書いてみました。ハンズオン用などにご利用ください。SketchとはSketchについて一応さらっと書いておきます。・アプリやWebのデザイン・UI設計などに使われるMac用アプリケーションIllustratorやFireworksのようなツールです。Storeでは買えなくなりました。ショバ代かかるからかな?Sketchの本家サイトからどうぞ。海外ではUI設計・ワイヤーフレーム作成では最も使われてるというデータもありますね。https://designcode.io/sketchSketchは流行を通り越して定着に向かっているように個人的には思っています。facebookが公開してるデバイスのモックアップは、ファイル形式がSketchでしたね。国内でもGoodpatchさんなどでは積極的に使われてるようです。Trial』からZipをダンロードしてください。終わったらzipを解凍してアプリケーションを起動します。自分は購入済みなのでこの作業は試してないですが、最初は何かしらの作業が必要かも。演習ファイルのダウンロード:以下のファイルをダウンロードしてご利用ください。「習得コース_1h.sketch」ツールバーの編集について:2分この演習中に、ツールバーにないアイコンが出てきた場合は、以下の方法で追加してください。>必要な機能をドラッグ基本操作と演習:【1時間】では早速始めていきます。Page作成:2分サイトの新案、A/Bテスト用のページ作成などに利用できます。>DuplicatePageクリック演習してみてください:Page作成と複製Artboard作成:3分サイト内(アプリ内)のページ作成などに利用できます。複数のオブジェクトや画像、テキストなどを整列します。複数のShapeを1つにしたり、重なり部分を抜き取ったり残したりしてShapeを結合します。Shapeの結合は4種類。準備まずツールバーに「Combine」と「Tools」のアイコンを追加してください。演習:Shapeの結合(Union)この時点では、結合したそれぞれのShapeはパスが残っています。結合部分が抜き取られてない(Distanceのような状態がない)場合は、完全に1つのShapeにすることができます。演習:Flattenボタンの作成:10分ボタンを作成してみます。同じものを作ってみてください。・影をつける・テキストを入れる演習:テキストのサイズや位置、影の具合などは微調整してみてください。Shadows」を入れるとボタンに光沢が付き、さらにイイ感じです。ちなみに、Borderなどはいくつでも追加することができます。追加はわかりやすいですが、外し方がちょっと独特なので覚えておいてください。演習:アイコンの作成:10分Instagramと同じアイコンを作ってみます。画像を特定の形でマスクし、マスクの内側部分だけを見えるようにします。円でマスクするとこんな感じです。Webサイトでよく見かけますよね。画像のぼかしはWebサイトのTOP画面などでよく見かけますよね。Blurを選択ぼかし演習:(※アニメーションGIFなので汚いですが、実際やると綺麗にできます)画像の吐き出し:2分デザインした画像素材の吐き出し(Export)をします。>デスクトップにドラッグ&ドロップ画像の吐き出し演習:画像を幾つかのサイズ別にExportすることもできます。アプリのアイコンなどは複数サイズが必要になるので、そんな時にこの機能は便利です。>画像の吐き出し演習:【おまけ】実践に使えるヨ:15分Sketchの機能を探る日本語サイトでしっかりまとまっているサイトはまだまだ少ない印象です。機能の翻訳や、ショートカットから機能を探るのもいいかもしれません。※ライセンスについて使いやすいサイトを選んでるつもりですが、各自でご確認の上でご利用をお願いします。Sources』http://www.sketchappsources.com/↑とにかく素材が豊富。「wireframe」などはよく使ってます。Resources』http://facebook.github.io/design/devicesたくさんデバイスのモックアップが置いてあります。Iconなどが利用できます。『デザイナーに言われた「非デザイナーが気をつけるべきデザインの4原則」』http://qiita.com/Yama-to/items/cb7f280b44a14c898418↑この記事コンパクトにまとまってて好きです。upLoginユーザーは見つかりませんでした。