UIデザイナーのための新しいSketch入門、始めます

すでに欧米のデザイン会社やスタートアップのUIデザインの現場では定番になっているデザインツール「Sketch」。もう使っていますか？

WPJの入門コンテンツ「Lesson」12月は、安価でシンプル、軽快、必要十分な機能と高い拡張性を備えた人気デザインツールの使い方を一から学ぶ、「吉竹 遼のSketch入門 for UIデザイナー」をお届けします。

基本操作からデザイン現場での活用のコツまでしっかり学ぶ

SketchのTipsを紹介するブログや記事はよくありますが、日本語で体系的に学べるまとまったリソースは少なく、すでに情報が古くなっていることも少なくありません。そこでこのLessonでは、インストールに始まり、データ構造の考え方、主要機能の使い方までを画面写真を交えてていねいに解説します。解説にはGIFアニメをふんだんに利用し、テキストだけでなくビジュアルでも楽しく学べるように工夫しました。また、SketchのUIは英語ですが、本Lessonでは日本語を併記していますので、英語が苦手な方でも安心してお読みいただけます。

Lessonの後半では、架空のアプリのUIを制作するチュートリアルを用意。サンプルファイルをダウンロードして、実際に手を動かしながら操作を追いかけることで、Sketchを使ったUIデザインのフローを実践的に学ぶことができます。

著者は、UXデザイン会社・スタンダード（Standard Inc）のデザイナー・吉竹 遼さん。UIデザインの現場で吉竹さんが実際に使っているテクニックやデザインへの考え方も盛り込んでいますので、単なる操作マニュアルにとどまらない、プロのデザイン手法も学べます。これからUIデザインにSketchを使ってみたいデザイナーはもちろん、スキルアップしたいデザイナーにもおすすめのLessonです。

「吉竹 遼のSketch入門 for UIデザイナー」は、WPJプレミアムメンバー（月額972円）限定のコンテンツです。第1回、第2回はどなたさまも無料で閲覧できます。非会員、フリーメンバーの方はぜひこの機会に購読をご検討ください。

「吉竹 遼のSketch入門 for UIデザイナー」予定ラインナップ

※内容、公開日は変更の可能性があります。

第1回　UIデザイナーがSketchを使う理由と導入方法【12/19公開・無料開放中】

• Sketchとは何か？
• なぜSketchが支持されたのか
• 他のデザインツールとの比較
• Sketchをインストールしてみよう

第2回　Sketchの操作を覚えよう（1）画面構成から基本機能まで【12/20公開・無料開放中】

• 各ウィンドウの名称と概要を押さえよう
• Sketchのデータ構造とPhotoshop/Illustratorとの違い
• Pages（ページ）
• Artboard（アートボード）
• Shape（シェイプ）
• Text（テキスト）
• レイヤーを整理・編集する
• 選択・移動・コピー
• マージンを測る
• ズームの使い分け

第3回　Sketchの操作を覚えよう（2）インスペクターを使いこなす【12/21公開】

• インスペクター内の機能
  • Align（整列）
  • Distribute（分布）
  • Position（位置）
  • Size（サイズ）　ほか
• Make Exportable（書き出し設定を追加する）

第4回　Sketchの操作を覚えよう（3）スタイルとシンボルをマスターする【12/22公開】

• スタイルとは
• スタイルの作り方
• シンボルとは
• シンボルの作り方
• Atomic Designを参考に、管理と修正に強いシンボル構造を作る
• スマートガイド、グリッド、レイアウトグリッドを使う
• ツールバー、メニューバーから使えるその他の機能

第5回　チュートリアルで学ぶ、Sketchを使ったアプリUIデザインの実践【12/26公開】

• 画面の準備とナビゲーションバーの作成
• シンボルのオーバーライドを使う
• ページングメニューとタブバーの作成
• コンテンツコンポーネントの作成
• スマートリサイズを使う
• デザインを実機で確認する

第6回　デザインデータの整理・書き出しとスタイルガイドの作り方【12/27公開】

• アートボードとレイヤーを整理する
• スタイルガイドを作成する
• アセットの書き出し設定をする

第7回　UI制作の実務で役立つ！ショートカットやプラグインを使った効率化【12/28公開】

• キーボードショートカットを使いこなす
• プラグインを利用する
• 参考リソース