web系に関わる情報を 専門家が毎日発信!

sketchの使い方を初心者向けに解説【無料サンプル実例付き】

 

sketchの使い方を初心者向けに解説します。sketchはwebデザインでかなり企業に普及しているツールでして、webデザイナーやwebディレクターを目指す方は必読かと。そんなに難しくないです。実例も交えて解説します。sketchはDLも無料版もあるので試してみましょう。今回はツイートに添付されているwebデザインをsketchで作ってみます。

 

この記事を作成している僕ですが、webデザイン分野で5年ほどの経験がありまして、未経験から企業のコンサルで稼ぐことができるレベルまで成長できました。なので初心者からでも全然大丈夫ですし、ある程度参考になるかと思います。

 

sketchとは

 

sketchについて簡単に説明しておくと、webデザインツールでして、2019年現在で多くのインターネットサービス会社やweb系の会社では、導入されていますね。webデザイナーには標準的なwebデザインツールです。

 

就職する段階で必須かと言われると「ほぼ」必須かなと思います。と言うのも、webデザイナーは人気な職種ですし、スクールも多いので多くの就職を目指す初心者webデザイナーが使える状態なのでその時点で劣ってしまうからですね。sketchは使えるに越したことはないwebデザインツールです。

 

sketchの使い方を初心者向けに解説

 

では早速sketchの使い方を解説していきます。先ほどツイートで例にあげたwebデザインのサンプルのsketchでの作り方を手順で解説していきますね。

 

まずはsketchをDL

 

まずはsketchをDLします。DLは簡単で、sketch ダウンロードで検索するか、次のリンクからでもDL可能です。

 

sketchのダウンロード

 

どっちでも大丈夫です。まずはsketchをダウンロードしていきます。ダウンロードして解凍していくと、下記のような画像が出てきます。普通に、OK押すだけでいいです。

 

 

ヘッダーを作成

 

ではsketchでヘッダーを作成する使い方ですが、画像のようにShape>Rectangleを押していきます。そうすると、下記のようなwebデザインが出来上がります。

 

 

ここまででヘッダーが出来上がります。そんなに難しくないですよね。なお、色を変える場合には、右側のFillsとBordersの色の部分で選択すればOKです。

 

コンテンツの境界線を作成

 

次にコンテンツの境界線として、線を加えていきます。画像のように、Shape>Lineを押していきます。コピペする場合には、普段通りの操作でOKです。

 

図形を作成

 

次に図形の作り方を解説します。画像の通りで、Shape>Rectangleで最終的に画像を添付するんですが、その時の枠のサイズのイメージとして置いておきましょう。

 

図形に文字をつける

 

次に文字を加えていきます。画像のように、Textを押すとwebデザインの画面上に、文字を書くことができます。色を変えたい場合は、同じように右側の部分で色を変更することが可能です。

 

背景色をつける

 

次にアクションボタンに対して背景色を加えていきます。背景色をつけたい場合には、Shape>Rectangleで背景色をつけたい箇所に枠をまず設けます。そして、その枠に対して、つけたい背景色を右側の部分で指定します。そして、画面上部にあるBackwardを押すと、背景=Backwardにしたい枠が後ろになることで背景色が出来上がりますね。

 

タイトルをつける

 

次に作成したヘッダーに対して、タイトルをつけるために、同じようにTextを押して文字を作成します。これは先ほど操作したことと同じですね。

 

メニューをつける

 

次にメニューのデザインとなる3本線を書いていきます。これは前に操作した通りで、Shape>Lineで1本づつ線を作っていきます。そして、線の色を白色に指定します。

 

画像コンテンツを入れる

 

次に画像コンテンツを入れていきます。画像のように、Imageを押して添付したい画像を選択します。とても簡単です。あとは、元々の枠として抑えていた枠を削除します。

 

完成

 

そして最終的に、今まで解説した通りで、文字をさらに加えていくと、完成です。高速に作成したので、若干位置がずれていますが、位置の修正自体はドラッグアンドドロップで修正できるのでいくらでも直せます。

 

sketchの使い方の学習方法

 

sketchの使い方をある程度覚えたら、基本操作を何回か繰り返して慣れることを最初に行うといいと思います。と言うのも、そこまで覚えることってないので大事なのは速さと正確性だったりします。いちいち調べずに作りたいwebデザインをsketchで作れるようになるといいですね。目安的には、自分が好きなwebデザインを模写する感じで5から10ほどsketchで模写するのがおすすめです。

 

sketch無料動画学習も楽でおすすめ

sketchの使い方の学習方法としては、動画学習もおすすめです。無料ですし視聴するだけなので楽です。ただし、日本語が少なくてほとんど英語なのが辛いですが、画面上で操作方法を覚える感覚で視聴するといいですね。見るだけでだから最初のとっかかりにはおすすめですね。

 

ランディングページ

 

 

ランディングページは、webデザインにおける基本的なスキルなので、覚えておいて損はないですね。sketchで作成できると美しいランディングページが作成できます。ぜひ覚えておきたい作り方ですね。ランディングページの作り方の考え方は、下記の記事でも解説しています。

 

参考:ランディングページ(LP)の作り方を解説【無料テンプレも公開】

 

ボタン

 

 

sketchでボタンは頻出のスキルなので、こちらもぜひ視聴しましょう。ボタンはほぼどんなwebデザインでも登場するUIなので覚えておくと便利です。

 

機能

 

 

sketchには便利機能がたくさんあります。初心者であれば徐々に覚える感じで十分なので、徐々に視聴して身に着けると素晴らしいですね。

 

sketchの使い方と同時にワイヤーフレームの作り方も覚える

 

sketchの使い方を学びたいwebデザイナーやwebディレクターには、ぜひワイヤーフレームの作り方も覚えておいて欲しいですね。と言うのも、sketchはwebデザインツールなので、あくまでベースとなるスキルが必要でして、操作方法だけ覚えてもあまり意味はないです。

 

sketchと同時に頻出なwebデザインのスキルとしては、ワイヤーフレームがありまして、作り方や考え方を解説しているのでぜひ見てみてください。

 

参考:ワイヤーフレームの作り方をwebデザイン歴5年が解説【サンプル無料】
参考:ワイヤーフレームツールのおすすめ15選【無料あり、web製作者が解説】

 

sketchの使い方を覚えたら

 

そしてsketchの使い方をある程度マスターしたなと感じたら、さらにレベルの高いwebデザインをsketchで作成できるようにいくつかプラグインをDLするといいですね。sketchのプラグインは色々なものがありまして、数も多いですが1つ1つ用途を見ていき欲しいプラグインを導入すると効率的に質の高いwebデザインをsketchで作れるようになりますね。

 

まとめ

 

と言うことで、sketchの使い方を初心者向けで解説していきました。なかなかwebデザインツールとしてはイケてることが理解できたかと思います。他に競合ツールとして、Figmaもあるんですけど、肌感的にはSketchの方が日本では普及しているイメージですね。なので、sketchで十分に活躍できるwebデザイナーやwebディレクターになれますね。

 

人気:webデザインスクールのおすすめと選び方【デザイン歴5年の僕が解説】

最新情報をチェックしよう!