Outlecture
Home
About
Technology
Design
Video
Contact
Official
Outlecture
Home
About
Technology
Design
Video
Contact
Twitter Official
  • Home
  • Design

Sketch のおすすめの教材4選! 【 2023年3月 最新版】

更新日:2023年3月11日

こちらは、独学で Sketch を学ぼうとしている初学者の方に最適な学習講座を紹介するページです。

目次

1. 本ページの説明

1. 本ページの説明

Sketch を独学で学ぶ上でおすすめの講座を動画プラットフォームから合計4選紹介します。

Sketch とは

Sketchは、オランダのSketch B.V.社が開発しているmacOS上で動作するベクターベースのグラフィックデザインツールで、WebやモバイルアプリなどのUIデザインに特化しています。Sketchは、ベクター形式でデザインを作成することができ、シンボルやスタイルなどの機能を使って、効率的にデザインを作成することができます。また、多数のプラグインが提供されており、デザインプロセスを効率化することができます。

本サイト「Outlecture(アウトレクチャー)」は講座の評価、情報の鮮度、購入者や視聴者数、直近の数値上昇率などを全てバランスよく採点し、ユーザーにとって最適な講座のみ抜粋できるよう独自のアルゴリズムで評価を行っています。

また、各動画プラットフォームもそれぞれ特徴があり、「こういう状況の方にはこちらの方が良い」というユースケースも合わせて説明していきます。

Sketchをこれから学ぼうとしているみなさまのご参考にしていただければ幸いです。

2. Udemy おすすめ講座2選

Outlectureで厳選したおすすめのUdemy講座2選はこちらです。

コース名 平均評価 総購入者数 先月の購入者数
(2023年2月)
コースレベル コース時間 作成日 更新日 料金

Webやアプリの最新デザインツール Sketch3 |100レッスンの完全マスターコース

thumbnail
4.25 2,628 4 初級 10 時間 40 分 2016年7月21日 2016年7月26日 ¥10,000

Sketch 3 の使い方

thumbnail
3.75 206 - 初級 1 時間 5 分 2016年4月14日 2016年4月14日 ¥3,000

Udemy(ユーデミー)は、アメリカ・シリコンバレー発祥のユニコーン企業で、世界最大級のオンライン学習プラットフォームを運営しています。

Udemyの特徴は、

  • 15.5万以上(※海外講座含む)の豊富な講座を提供している
  • 講師陣の多くが世界最先端の現場で活躍されている
  • 1講座あたり数千~数万円で、キャンペーン時は70~90%OFFとなる良心的な値段
  • 講座は1度購入すれば視聴期限なく受講でき、30日返金保証もついている
  • 講座は0.5~2倍の変速機能を備え、自分のペースで学習することができ、専用アプリを使えばスマホからでもオフライン環境で受講可能
  • 講師に直接掲示板から質問ができるため、疑問を解決し自学自習をサポートしてくれる

等があげられます。

Outlectureの管理メンバーは、ソフトウェアエンジニアやクリエイター、webデザイナーが現役で活躍しています。私たちは初めて触るプログラミング言語やプロダクトの多くはUdemyの受講からキャッチアップをはじめています。
私たちの体験談として、Udemyの講座の質は非常に高いと感じています。講師陣が世界最先端で活躍している方々ばかりで、最先端の知識や現場でのノウハウを丁寧にわかりやすく教えてくれます。試験で使う知識ではなく、実際の現場・案件で使う知識と技術を習得することができます。

Udemyの講座は、実際の現場で活用したい方や自己学習を始めたい方に特におすすめです。一度購入すれば、視聴期限がなく、30日間の返金保証もあるため、安心して学びを始めることができます。

こんな方におすすめ

  • 実案件でSketchを使用する
  • 現役の(世界)トップ戦線で活躍している方のノウハウを学びたい
  • サブスクリプションの加入に抵抗のある

各講座の詳細は以下に記載します。


Webやアプリの最新デザインツール Sketch3 |100レッスンの完全マスターコース

Webサイトやスマートフォンアプリのデザイナーの中で大人気のデザインツール、Sketch。このコースではSketchを使ったことがなくて、これからちゃんとマスターしたいという人向けに100レッスンの充実したプログラムを提供します。

thumbnail
平均評価
4.25
総購入者数
2,628
先月の購入者数
(2023年2月)
4
コースレベル
初級
コース時間
10 時間 40 分
作成日
2016年7月21日
更新日
2016年7月26日
料金
¥10,000

Sketch3未経験からプロレベルを目指す、充実したコースです。



Sketch3の単なる機能説明をするような、つまらないコースではなく、アイコン制作、ボタン作成、メインビジュアル制作、Webページの制作など、実際の制作をしながら実践力を身につけます。







1000名以上の卒業生がいる実績ある日本のWebデザインスクールが提供しています。












★こんな人におすすめ★









  • Sketch3未経験で、使えるようになりたい
  • Sketch3でWebサイトやアプリのグラフィックデザインができるようになりたい
  • 効率よくワイヤーフレームやモックを作りたい
  • エンジニアだけどデザインも少しかじってみたい











★特徴







  • 単なるSketch3の機能説明ではなく、アイコン制作、ボタン作成、メインビジュアル制作、Webページの制作など、実際の制作をしながら実践力を身につけられる




  • 1000名以上の卒業生がいる実績ある日本のWebデザインスクールが提供
  • 5分程度の動画が100レッスン 充実した内容ですが、無理せず学べる











★授業×チャレンジ課題で実践的なスキルが身につく!
スキルを身につける上で、実際作りながら学ぶことはとても大切です。
オンライン学習では、動画を見るだけで終わってしまい、実践的なスキルがつかないことが多いです。
こちらのコースでは全てのレッスンが、バナーや実際のカフェのWebサイトなど実践的なものを作ります。そして、各章の終わりにはチャレンジ課題として、その章で学んだことの理解を確認する課題があります。





★過去1100名以上のスクール卒業生を輩出した、 Webサービス運営企業・デザイナー輩出企業だからこそ作れるプログラム
コースを提供しているNEST Schoolは過去3年間で1200名以上のスクール卒業生を輩出し、その間プログラムの改善を絶えず行ってきました。運営会社である株式会社Campusは、 多数の自社Webサービスの運営やWeb制作事業を行っており、 それらの活動で得たノウハウをこちらのコースで提供しています。
また、主に大学生を中心に年間50名近くのWebデザイナーを育成し、自社の高度なWebサービスのデザインを手掛けるまでに成長させています。 実際にWebサービスやWeb制作を実施している企業とプロのデザイナーによるプログラムと、「どうすれば効率よくスキルアップできるか」を 考え続けているプログラムの提供が、他にない価値です。





★無駄なく、必要なものだけを、必要な順番で学ぶことの大切さ
ネット上や書店にはたくさんの記事や本がありますが、すべてを見ることはできませんし、特に重要でない知識もたくさんあります。
まずは必要な知識だけを必要な順番で学ばないと、そうでない場合と比べて数十倍の非効率な学習になります。こちらのコースでは最も効率的な学習を目指しました






★内容







初めの1〜4セクションは、Sketch3の基本知識や基本操作を全体的に学びます。
その後、各セッションで、実際の制作物を作りながら学んでいきます。







⑴Sketch3の基本知識







Sketch3のインストールから初期設定、移動や選択の仕方など、基本的な知識を身につけられます。









⑵基本操作(1)アートボード・ページ・シェイプ







アートボードとページ機能の扱い方や、デザインの要素を作る上で欠かせないシェイプを自由自在に操れるようになります









⑶基本操作(2)ベクター・テキスト・スタイリング







文字をなぞってベクター機能の練習をしたり、簡単なデザインを作りながらテキストツールやスタイリング(装飾)をマスターします。









⑷基本操作(3)その他の基本操作







簡単な写真の編集や、デザインを効率良く進めるために欠かせないSymbols機能の紹介、CSSと画像の書き出しなど、Sketch3の特徴的な機能をたくさん紹介していきます。









⑸アイコン・ボタン制作







セッション1〜4で学んだ機能やデザインの作り方を生かして、実際のサイトにありそうなアイコンやボタンをつくります。









⑹ダッシュボードページ制作







仮想のダッシュボードページのデザインを、全10回に分けて作っていきます。難しい操作は行いませんので、これまで学習したことが身についているか確認しながら進めていきます。









⑺オンラインショップ制作1(トップページ)







仮想のオンラインショップのトップページデザインを制作します。画像の書き出しを前提としたデザインになります。









⑻オンラインショップ制作2(商品ページ)







セッション7の続きで、仮想のオンラインショプの商品ページのデザインを制作します。最後には画像の書き出しも行います。









⑼レストランのレスポンシブWebサイト制作1(PC用デザイン)







レスポンシブデザインの仮想のレストランのWebサイトの制作を行います。この章ではレスポンシブを前提としたPC用デザインをつくります。





⑽レストランのレスポンシブWebサイト制作2(タブレット・スマホ用デザイン)





セッション9の続きで、PC用デザインをもとに、仮想のレストランのWebサイトのタブレット用・スマホ用デザインを制作し、デザインを完成させます。

  1. sketch3の基本知識
  2. Sketch3って何?
  3. Sketch3をインストールして起動してみよう
  4. ワークスペースと初期設定
  5. レイヤーの概念を学ぼう
  6. レイヤーの選択や移動を使ってアイコンを完成させよう
  7. グループ化を使ってレイヤーリストを整理しよう
  8. スマートガイドを知る&移動の応用
  9. 【チャレンジ問題】バラバラに配置されたレイヤーを完成版と同じ配置に直そう
  10. 基本操作(1)アートボード・ページ・シェイプ
  11. アートボードについて学ぼう
  12. アートボードのプリセットとカスタム設定
  13. ページ機能について学ぼう
  14. シェイプの基本的な使い方を学ぼう
  15. マスク機能を使って写真を切り抜いてみよう
  16. シェイプを自由な形に変形してみよう
  17. リサイズとスケールの違いを知ろう
  18. シェイプの形状モードを使ってカエルのアイコンを作ってみよう
  19. RotateCopy機能を使って太陽のアイコンを作ってみよう
  20. 【チャレンジ問題】写真を複雑な形に切り抜こう
  21. 基本操作(2)ベクター・テキスト・スタイリング
  22. ベクターの基本的な使い方を学ぼう
  23. 文字をなぞってベクターの練習をしよう
  24. テキストの基本的な使い方を学ぼう
  25. テキストを使って見出しをつくってみよう
  26. SharedTextStyleを使って見出しを効率良くデザインしよう
  27. テキストパスとアウトライン機能を使ってロゴを作ってみよう
  28. インスペクタパネル上部の機能を学ぼう
  29. FillsとBordersを使った画像を作ってみよう
  30. ShadowsとBlurを使った画像を作ってみよう&SharedStyle
  31. Viewの機能を知ろう
  32. 【チャレンジ問題】かわいいメインビジュアルを作ってみよう
  33. 基本操作(3)その他の基本操作
  34. 写真を編集してみよう1
  35. 写真を編集してみよう2
  36. ペンシルとscissorsを使ってみよう
  37. symbols機能を使って効率良くヘッダーをデザインしてみよう1
  38. symbols機能を使って効率良くヘッダーをデザインしてみよう2
  39. 整列を使って新着記事デザインを作ってみよう
  40. CSSの書き出しと画像書き出しのためのスライスをしてみよう
  41. 画像を書き出してみよう
  42. アートボードをiOSでプレビューできる「Sketch Mirror」の紹介
  43. 【チャレンジ問題】"会場利用までの流れ"デザインを作ってみよう
  44. アイコン・ボタン制作
  45. ロケーションアイコンを作ってみよう
  46. 三日月のアイコンを作ってみよう
  47. メガホンのアイコンを作ってみよう
  48. いろんなフラットデザインのボタンを作ってみよう1
  49. いろんなフラットデザインのボタンを作ってみよう2
  50. いろんなフラットデザインのボタンを作ってみよう3
  51. 押したくなるお申し込みボタンを作ろう1
  52. 押したくなるお申し込みボタンを作ろう2
  53. 押したくなるお申し込みボタンを作ろう3
  54. 【チャレンジ問題】ダウンロードボタンを作ってみよう
  55. ダッシュボードページ制作
  56. 第1回:シェイプを使ってサイトの枠組みを作ろう
  57. 第2回:アイコンとテキストを使ってロゴを作ろう
  58. 第3回:無料アイコンとテキストでサイドバーを作ろう
  59. 第4回:マスク機能を使ってアカウントを作ろう
  60. 第5回:ガイドや整列を使って効率良く見出しとタブボタンを作ろう
  61. 第6回:symbols機能を使って効率良く目盛りを作ろう
  62. 第7回:ベクターと形状モードを使って波グラフを作ろう
  63. 第8回:シェイプやscissorsを使って円グラフを作ろう
  64. 第9回:symbolsとshared styleを使い分けてデザインしよう
  65. 第10回:効率良く帯グラフをデザインしよう
  66. オンラインショップ制作1(トップページ)
  67. 第1回:画像の書き出しを前提に環境設定しよう
  68. 第2回:シェイプとガイドを使ってサイトの枠組みを作ろう
  69. 第3回:ヘッダーを作成しよう
  70. 第4回:アイコンを使ってロゴを作ろう
  71. 第5回:ナビゲーションを作成しよう
  72. 第6回:メインビジュアルを作ってみよう1
  73. 第7回:メインビジュアルを作ってみよう2
  74. 第8回:サイドバーの検索窓を作ってみよう
  75. 第9回:サイドバーのカテゴリ一覧を作ってみよう
  76. 第10回:新着商品一覧と人気商品一覧を作ってみよう1
  77. 第11回:新着商品一覧と人気商品一覧を作ってみよう2
  78. 第12回:フッターを作成しよう
  79. オンラインショップ制作2(商品ページ)
  80. 第13回:トップページをもとに商品ページの土台作りをしよう
  81. 第14回:パンくずを作成しよう
  82. 第15回:商品画像マウスホバー時のデザインをしてみよう
  83. 第16回:商品情報を作ってみよう
  84. 第17回:数量入力フォームとカートボタンを作ってみよう
  85. 第18回:商品詳細情報の表を作ってみよう
  86. 第19回:レビューを作ってみよう1
  87. 第20回:レビューを作ってみよう2
  88. 第21回:ページ全体を整えて画像を書き出してみよう
  89. レストランのレスポンシブWebサイト制作1(PC用デザイン)
  90. 第1回:シェイプとガイドを使ってサイトの枠組みを作ろう
  91. 第2回:レストランのホームページのメインビジュアルを作ってみよう
  92. 第3回:ロゴが中央にあるナビゲーションを作ってみよう
  93. 第4回:メニューリンク一覧を作ってみよう
  94. 第5回:レストランのアバウトを作ってみよう
  95. 第6回:イベント一覧を作ってみよう
  96. 第7回:スライダー付きのブログリンクを作ってみよう1
  97. 第8回:スライダー付きのブログリンクを作ってみよう2
  98. 第9回:予約フォームを作ってみよう1
  99. 第10回:予約フォームを作ってみよう2
  100. 第11回:埋め込み地図の作り方について
  101. 第12回:フッターを作ろう
  102. レストランのレスポンシブWebサイト制作2(タブレット・スマホ用デザイン)
  103. 第13回:タブレット用デザインを作ろう1
  104. 第14回:タブレット用デザインを作ろう2
  105. 第15回:タブレット用デザインを作ろう3
  106. 第16回:スマホ用デザインを作ろう1
  107. 第17回:スマホ用デザインを作ろう2
  108. 第18回:スマホ用デザインを作ろう3
  109. 第19回:スマホ用デザインを作ろう4
  110. 第20回:スマホ用デザインを作ろう5
Sketch 3 の使い方

UI デザインに必須のツール Sketch 3 の使い方を、チュートリアル動画でマスターしよう。

thumbnail
平均評価
3.75
総購入者数
206
先月の購入者数
(2023年2月)
-
コースレベル
初級
コース時間
1 時間 5 分
作成日
2016年4月14日
更新日
2016年4月14日
料金
¥3,000

Sketch 3



Sketch 3 は、iPhone などのモバイルアプリや、Web サイト、アイコンなどの UI デザインにフォーカスしたシンプルなデザインツールで、ここ数年で急速に人気が高まってきています。









Sketch 3 を使うことで、高品質で洗練された UI デザインを、驚くほど簡単に、短時間で作成できるようになります。UI デザインの現場ではもちろん、ハッカソンなど短期のイベントでも力を発揮してくれます。









Sketch 3 を使いこなして、すばらしいプロダクトを作るための UI デザイン力を鍛えよう!



  • Sketch 3 は有料のアプリケーションです。トライアル(試用)期間がありますので、Sketch 3 をはじめてご利用の場合には、Sketch 公式サイトからトライアルバージョンをダウンロードしてください。
  • このコースでは、Sketch のバージョン 3.4.3 を使用しています。















誰にオススメ?









モバイルアプリの UI デザイナー、Web サイトの UI デザイナー、ロゴやアイコンのグラフィックデザイナーや、それらの職種で働くために学習中の方。









Photoshop や Illustrator と比較して、Sketch 3 はモバイルアプリや Web サイトの UI デザインに適したアプリケーションで、デザインワークに時間を取れないエンジニアやプログラマにもオススメ。









はじめてデザインする方でも、Sketch 3 をマスターすれば、プロ顔負けの UI をいきなりデザインできるように!

  1. Sketch 3 導入
  2. インストール
  3. Sketch 基本操作
  4. レイヤー選択、移動、リサイズ、コピー
  5. レイヤー非表示、ロック、グループ化
  6. ズーム
  7. スタイル
  8. シェイプ
  9. ベクター
  10. スケール
  11. グリッド
  12. テキスト
  13. Sketch 各種機能
  14. ツールバー
  15. アートボード、テンプレート、ページ
  16. シンボル
  17. ローカル共有
  18. ショートカット
  19. Sketch エクスポート
  20. レイヤー
  21. スライス
  22. Sketch プラグイン
  23. Content Generator をダウンロード
  24. Content Generator を使ってみる
  25. Sketch Constraints をダウンロード
  26. Sketch Constraints を使ってみる
  27. Sketch プラグインのリソース
  28. Sketch 実践
  29. 時計のアイコンを作ってみる
  30. ログインの UI をデザインしてみる
  31. Sketch のリソース

3. YouTubeおすすめ講座2選

Outlectureで厳選したおすすめのYouTube講座2選はこちらです。

動画名 総視聴数 先月の視聴数
(2023年2月)
いいね数 公開日

UIデザインツールSketchからUnityのUIを作成する | CA.Unity#2

thumbnail

チャンネル名:CyberAgent Developers

577 14 3 2021年7月20日

【iPadアプリ紹介】Mockup - Sketch UI & UXを使ってみた!

thumbnail

チャンネル名:Kamome UX

209 13 7 2021年8月19日

YouTubeは、広告がつくものの無料で視聴でき、日常生活でもお馴染みとなっています。
最近では、良質な教材も増えており、学びたいけどお金をかけるほどでもない方や、概要をさらっと理解したい方には、YouTubeで学ぶことをおすすめします。

こんな方におすすめ

  • お金をかけずに学びたい
  • Sketchの概要だけさらっと理解したい

各講座の詳細は以下に記載します。

UIデザインツールSketchからUnityのUIを作成する | CA.Unity#2

CyberAgent Developers

総視聴数
577
先月の視聴数
(2023年2月)
14
いいね数
3
公開日
2021年7月20日
UI デザインツール Sketch のレイアウトデータをUnity上で扱えるように変換するツールを作成しました。作成するために必要になった知識や経験を紹介します。
(大野 友貴人 / KLab株式会社 Unity エンジニア)

CA.unityはサイバーエージェントが運営するUnityをテーマにした勉強会です。
サイバーエージェントのサービス開発者と社外の開発者を交えて、Unityに関する知見を共有する場となります。

イベント内容と今後のイベント予定は Unity Meeetupで公開しています
https://meetup.unity3d.jp/jp/communities/43
【iPadアプリ紹介】Mockup - Sketch UI & UXを使ってみた!

Kamome UX

総視聴数
209
先月の視聴数
(2023年2月)
13
いいね数
7
公開日
2021年8月19日
Mockup - Sketch UI & UX アプリのご紹介です!
ワイヤフレームレベルで情報設計や仕様検討することは大事な工程ですよね

質問事項などございましたら、コメントください!
この動画が気に入っていただけたら、いいねとチャンネル登録よろしくお願いします!

【紹介したアプリ】
Mockup - Sketch UI & UX
https://apps.apple.com/us/app/mockup-sketch-ui-ux/id1527554407

5. まとめ

Sketchのおすすめ講座を紹介しました。他の関連講座を学びたい方は、下記をご参考ください。

CLIP STUDIO PAINT
Figma
Wix
CLIP STUDIO PAINT
Figma
Wix

「自ら機会を創り出し、機会によって自らを変えよ」

株式会社リクルート創業者 江副浩正氏の有名な言葉です。自分の知識やスキルを高めることは、機会を作り出すことに役に立ちます。自らを変えようとしている方にとって、本ページの情報が少しでもお役に立てれば幸いです。

今回紹介したいずれかの講座を受講した後にさらに深掘りして学びたい方は、公式サイトやコミュニティサイトに行くことを、最新の情報をキャッチアップしていきたい方場合は、公式twitterアカウントをフォローすることをおすすめします。

一覧に戻る
Home About Share
Home
About
Privacy policy
Disclaimer
Contact
Official
© 2023 outlecture.com All Rights Reserved.