Day1ではSketchの特徴やインストール方法、基本的な操作画面について解説しました。テンプレートからアートボードを作成Sketchの操作画面についてここではシンプルなSketchの操作画面について簡単に説明したいと思います。Sketchが他のデザインツールと違うところは、別ウィンドウでプロパティを設定する画面などが表示されることなく、4つの画面だけで全ての操作できるところにあります。ツールバーここにはSketchでよく使われる便利な機能が配置されています。だいたいの作業はここのアイコンをクリックすることが多いです。レイヤーウィンドウここにはPhotoshopやIllustratorなどで馴染みのあるレイヤーが一覧で表示されます。Sketch特有の概念である、ページやアートボードなどもこちらから管理することができます。キャンバスここがキャンバスになります。ここに図形やテキストなどを配置して、実際のデザインを行うスペースになります。インスペクタここから選択したオブジェクトの色やサイズなどのプロパティを変更することができます。全ての要素のプロパティをここから変更できるので、オブジェクトの修正が容易になります。動画でもこちらの内容をより詳しく解説しております基本的な図形を作ろうデザインする時に、最も使う直線や長方形などの基本的な図形を描画する方法について勉強していきましょう。直線ツール直線を描画するために、直線ツールを使います。左上にある+アイコンをタップします。マウスのポインターが十字になるので、ドラッグ&ドロップをして直線を引いてみましょう!描画した直線を選択した状態でインスペクタビュー内にある、colorやThicknessを変更することで色や線幅を変更することができます。動画でもこちらの内容をより詳しく解説しておりますSketchには便利なショートカットキーたくさん用意されています。「L」キーを押すだけですぐに直線ツールを使う状態になります。長方形を描画したいところにマウスを持ってきて、ドラッグすると長方形を描くことができます。「Shift」キーを押したまま長方形ツールを使うと、比率が1:1の正方形を簡単に描くことができます。図形を選択した状態でインスペクトビューのFillやBordersから塗りの色や線の色などを変えることができます。ちなみにキーボードの「R」キーがショートカットキーになっています。あとは任意の場所でドラッグアンドドロップをしてもらうと、自由な形で楕円形を描くことができます。楕円形のショートカットキーは「O」キーになります。「Shift」キーを押したまま楕円形ツールを使うと、綺麗な真円を簡単に描くことができます。動画でもこちらの内容をより詳しく解説しておりますベクターツールメニューの「+」をクリックして、ベクターを選択します。キャンバス上の任意の箇所を複数箇所クリックしていくと、線が繋がった状態の図形を描くことができます。ショートカットキーは「V」キーになります。ベクターツールの面白いところは、直線と曲線が混ざった図形を描けるところにあります。任意の点で曲線を引きたいところで、マウスのボタンから指を話さずにドラッグすることで曲線を引くことができます。動画でもこちらの内容をより詳しく解説しておりますテキストツール文字の挿入メニューの「+」アイコンからTextを選択します。テキスト入力モードになるので、キャンバス上でテキストを追加したいところをクリックして文字を入力します。ショートカットキーは「T」になります。色とフォントサイズ文字の大きさやフォントを選択したい場合は、変更したテキストを選択した状態で右のインスペクタから変更することができます。インスペクタでは文字の見た目に関する色々な情報を変更できます。動画でもこちらの内容をより詳しく解説しておりますズームとスポイトツールズームイン・ズームアウトキャンバス上で細かなオブジェクトを編集する際に便利なツールがズームツールになります。メニューにある虫眼鏡のアイコンの「+」をクリックするとズームインして、「–」をクリックするとズームアウトします。スポイトツール画面上にある特定の色を取得する時に便利なのがスポイトツールです。色を変更した図形を選択した状態で、インスペクタパネルに表示されたFillsをクリックします。カラーピッカーが表示されるので、「スポイト」アイコンをクリックします。カーソルの先が拡大鏡になるので、そこから取得したい色をクリックするだけでOKです。一つのキャンバス上に複数のオブジェクトを配置した時に、前後関係を表現したい場合があると思います。スケッチの場合では、明確なレイヤーというものは存在せず、画面左側のレイヤーウィンドウにページ上に配置されたオブジェクトの前後関係が表示されます。something」より上にあるのがわかると思います。そのため、キャンバス上のオブジェクトもレイヤーウィンドウ内の前後関係にならって、奥行き方向が決まります。something」の下に移動させると、キャンバス上のオブジェクトの前後関係を変えることができます。動画でもこちらの内容をより詳しく解説しておりますページSketchには他のデザインツールにはあまりない、ページという機能があります。現実世界にあるスケッチブックでも1ページ目と2ページ目では、別の真っさらなページとして使えるように、Sketchでも一つのプロジェクトファイル内に用途に応じて複数のページを追加して管理することができます。ウェブサイトのデザインをする時に「パソコン」と「スマホ」用で2つのデザインが必要になるときなどに、ページで分けて管理するケースが多いです。「Page1」の右隣にあるアイコンをクリックすると、プロジェクトファイル内のすべてのページを一覧表示することができます。「+」アイコンをクリックすると、新たにページを追加することができます。Page」を選択します。Page」を選択します。動画でもこちらの内容をより詳しく解説しておりますアートボードSketchでデザインをするときによく使う機能にアートボードというものがあります。アートボードとは、ページ上に任意のサイズで作成できる小さなキャンバスになります。通常ウェブサイトのデザインでは、トップページや問合せページ、商品一覧ページのように複数のページが必要になります。これらのページにそれぞれアートボードを用意することで、サイト全体を俯瞰的に見ることができるため管理がしやすくなります。「+」アイコンをクリックして、「Artboard」を選択します。ショートカットキーは「A」になります。キャンバス上で任意のサイズでドラッグすると、好きなサイズでアートボードを作成することができます。テンプレートからアートボードを作成Sketchでは予め特定のデバイスに対応したアートボードがプリセットされています。アートボードを追加するモードで、インスペクタを見るとAndroidやApple、ウェブ用のテンプレートを選択することができます。Devices」を選択して、iPhone8を選択してみましょう。キャンバス上にiPhone8の画面サイズのアートボードが自動的に作成されます。CLOUDはビジネスをされている方をデザイン面でサポートする定額制のデザインサービスです。デザイナーが完全定額・無制限で、あなたに代わって、広告やバナーなどビジネスに必要なデザイン関連の業務をプロのクオリティで行います。面倒な年契約はなく、業務に応じて柔軟にご利用いただけます。苦手なデザイン業務に時間を割く必要はありません。趣味で作ったウェブサービスが大手VCの目に止まったことがキッカケで、教育系ベンチャーで働くことになったデザイナー兼エンジニア。現在はフリーのクリエイターとして活動中。ウェブサイトやアプリケーションの開発を行うかたわら、ウェブサイトやアプリのUIデザインもしています。個人で独立・開業される方のビジネスをロゴ、名刺、ウェブサイトなどを通じてブランド面からトータルでデザインすることが得意です。デザインについてのご相談はこちらのフォームからお問い合わせください。非デジタルネイティブ世代に向けたUIデザインを僕らは真剣に考え...次の記事iOSのセレクトボックスにいつも僕は悩まされるデザインコースアプリ日々のデザイン業務で困っていた事を解決するために、タスクとフォルダを同時に管理できる超シンプルなタスク管理アプリを作りました。思いついたアイデアをサクッとメールに送信できるiPhone専用のメモアプリです。趣味で作ったウェブサービスが大手VCの目に止まったことがキッカケで、教育系ベンチャーで働くことになったデザイナー兼エンジニア。現在はフリーのクリエイターとして活動中。ウェブサイトやアプリケーションの開発を行うかたわら、ウェブサイトやアプリのUIデザインもしています。個人で独立・開業される方のビジネスをロゴ、名刺、ウェブサイトなどを通じてブランド面からトータルでデザインすることが得意です。フリーランスのデザイナーさん向けに超シンプルなタスク管理アプリDesignBoxを作っています。デザインについてのご相談はこちらからお問い合わせください。