2018年6月14日

デザイン

Sketchでスライド資料を作ってみよう!

目次

  1. はじめに
  2. Sketchでスライド作成するメリット
  3.  スライドの全体図が見渡しやすい
  4.  各コンポーネントの管理が楽
  5.  テーマカラーの変更が容易
  6. 実際にSketchでスライドを作ってみよう
  7.  1. Sketchを起動し、New Documentから新しいファイルを作成
  8.  2. Artboardアイコン、またはショートカット「A」を使ってアートボード を作成
  9.  3. スライドデザインを作成する
  10.  4. 作ったデザインをシンボル化する
  11.  5. Overridesの情報を整理する
  12.  6. 新しいページを作る
  13.  +α テーマカラーを変更する
  14. さいごに

はじめに

プレゼンを行う際に必須となってくる発表用スライド。みなさんはどのように作成していますか?PowerPointやKeynoteなど有名どころなツールは耳にしたことも実際に使ったことがある方が多いと思います。

筆者である私はそれらのツールは使わず、Sketchというデザインツールを使ってスライドを作成しています。

今回はSketchで作る際のメリットからご紹介し、実際にSketchでスライドを作ってみるところまで記事にしたいと思います!

OGP-2.png (212.8 kB)

Sketchでスライド作成するメリット

スライドの全体図が見渡しやすい

スクリーンショット 2018-06-13 13.10.55.png (582.2 kB)

1ページずつアートボード で管理していくので流れがとても分かりやすいです。

アートボード ごとに名前をつけることもできるのでデータ的に見ても分かりやすいです。またアートボード 名は日本語名をつけることもできますし、名前の重複もOKです
さらにセクションごとに並べたり、拡大縮小ショートカットを用いて全体図を見通すことができるのでとても便利です。

POINT!!

アートボード とは
作業領域、いわゆる1枚の紙のようなものです。
上図では複数のアートボード が配置されていますが、机の上に置かれたたくさんの紙たちとイメージしてもらえると分かりやすいと思います。

Sketch拡大率のショートカット

  • 拡大: ⌘command + +
  • 縮小: ⌘command +
  • 拡大率100%: ⌘command + 0

各コンポーネントの管理が楽

スライドのテーマテンプレートを作成しておき、これをシンボル化しておけば各ページごとにテーマを適用することができるのでおすすめです。
スクリーンショット 2018-06-13 15.16.58.png (162.7 kB)

あらかじめテーマをシンボルとして用意しておくと……。

ss-1.png (658.2 kB)

このようにOverrides機能を使って簡単にスライド内容を作ることができるんです!

左サイドバーもコンポーネントが煩雑に並ぶこともありません。内容の変更も右サイドバーのOverrides項目から行うだけ。

スクリーンショット 2018-06-13 15.37.02.png (531.6 kB)

シンボルで管理しているおかげで気になるデザイン崩れ(背景線のズレや文字の位置など)も起きません。大元となるテーマを変更すれば全体に変更がかかるので非常に効率が良いです。

テーマカラーの変更が容易

シンボル内で色を管理し、要素に対してマスクをかけておけば簡単にスライドのテーマカラーを変更することができます。

ss-2.png (217.5 kB)

上図を例にすると、カラーシンボルを用意しておき、スライドの四隅の背景線に対してカラーシンボルをマスクします。

ss-3.png (222.4 kB)

Overrides項目を確認してみると、シンボルに追加した色数分、テーマカラーに追加されているのが分かります。色を変更したい時はここから選択すれば色が変わります!

スクリーンショット 2018-06-13 15.53.06.png (179.1 kB)

※アートボード で色を変更した場合は選択したページのみ色が変わります。全体的に色を変更したい場合はシンボルからテーマカラーを変更しましょう。

ss-4.png (208.4 kB)

スクリーンショット 2018-06-13 15.53.39.png (186.4 kB)

以上がSketchでスライドを作るメリットの紹介となります。
では次に実際にSketchでスライドを作ってみましょう!

実際にSketchでスライドを作ってみよう

Sketchでスライドを作るメリットをご紹介しましたので、次に実際にスライドを作ってみましょう。

1. Sketchを起動し、New Documentから新しいファイルを作成

スクリーンショット 2018-06-14 9.46.50.png (255.6 kB)

2. Artboardアイコン、またはショートカット「A」を使ってアートボード を作成

※アートボード のサイズは右サイドバーにあるApple DevicesよりiPadサイズ(1024×768)を選択
ss-5.png (155.9 kB)
スクリーンショット 2018-06-14 9.48.53.png (452.1 kB)

3. スライドデザインを作成する

今回は上記のメリットでご紹介したようなシンプルなスライドデザインを作成していきます。
まずは見出しを中央寄せ、コンテンツを左寄せとしたオーソドックスなテキスト要素をアートボード 内に配置します。
スクリーンショット 2018-06-14 10.29.19.png (489.4 kB)

次に上下のアクセントとなる枠をRectangleアイコン、または ショートカットRを使って矩形をアートボード 上下に作成します。

スクリーンショット 2018-06-14 10.49.43.png (605.4 kB)

フッター内にキャプションやページネーションを追加すればシンプルなスライドデザインが出来上がりました。

4. 作ったデザインをシンボル化する

別アートボード でも再利用しやすいように今作ったデザインをシンボル化しましょう。

アートボード 内に配置されているコンポーネントを全て選択し、右クリックしてメニューから Create Symbolを選択してください。

スクリーンショット 2018-06-14 10.50.23.png (803.5 kB)

シンボルを作るアラートが表示されますので、分かりやすい名前をつけましょう。今回は「テンプレート」としました。

スクリーンショット 2018-06-14 10.52.44.png (682.3 kB)

左サイドバーがシンボルコンポーネントのみとなっていたらシンボル作成成功です!とてもスッキリしましたね!右サイドバーのOverrides機能も追加されています。

ss-6.png (225.5 kB)

5. Overridesの情報を整理する

ただ、Overrides機能の項目の順番がフッター、ページネーション、見出し、コンテンツ内容……とアートボード の見た目の順番がバラバラになってしまい非常に分かりにくいです。

というのも、Overridesの順番はコンポーネントの配置順によって決まります。左サイドバーから「Symbols」を選択して作ったテンプレートを見てみましょう。

ss-7.png (187.7 kB)

Overridesの順番がコンポーネントの配置順に準拠しているのが分かります。ここを見た目と同じように整理してあげれば……。

ss-8.png (194.6 kB)

配置順を見出し、コンテンツ内容、フッター、ページネーションに変更してみました。元のアートボード に戻ってみましょう。

ss-9.png (231.4 kB)

見た目通りの情報順となりました!
些細なことですが、順番にギャップがあると混乱してしまい作業効率が低下してしまう恐れがあるのでなるべく分かりやすく整理してあげましょう。

6. 新しいページを作る

アートボード を選択した状態で ⌘command + Dをするとアートボード が複製され、新しいページを作ることができます!

スクリーンショット 2018-06-14 11.13.31.png (542.7 kB)

もちろん新しくつくったページもOverrides機能を使って内容を変更することができます。

スクリーンショット 2018-06-14 11.15.30.png (651.4 kB)

+α テーマカラーを変更する

メリットでもご紹介したテーマカラーを変更する方法です。
まず、色がついた矩形を作成し、カラーシンボルとして追加します。

スクリーンショット 2018-06-14 11.19.47.png (527.0 kB)

元々ミントカラーで作成していた矩形をグルーピングしましょう。
上のRectangleを選択し、下のRectangleにドラッグすると1つの矩形となるので一度にマスクをかけることができます。
ss-10.png (265.6 kB)
ss-11.png (255.3 kB)

その上からカラーシンボルを乗せます。必ず先ほどグルーピングしたRectangleの直上に配置しましょう。
ss-12.png (256.1 kB)

カラーシンボルとグルーピングしたRectangleを選択してマスクをかけると……。

ss-14.png (266.5 kB)
スクリーンショット 2018-06-14 11.38.52.png (527.3 kB)

色が変わりました!
実際のアートボード も見てみましょう。

スクリーンショット 2018-06-14 11.40.18.png (645.6 kB)

ちゃんとアートボード も変わっていますね。
更にOverrides機能内にテーマカラー項目が追加されていて作成したカラーの数分だけ選択できるようになりました!

以上、簡単ではありますが、Sketchで実際にスライドを作ってみる手順でした!

さいごに

今回は1枚の見出しとコンテンツがあるだけのシンプルなテンプレートデザインを手本としたものをご紹介しましたが、応用として様々なページデザインを作ってシンボルとして再利用するのも非常に便利だと思います。

サイトやアプリデザインを作成するのに便利なSketchですが、スライド作成といった別口のデザイン作業もできるSketch、みなさんもぜひ試してみてください!

最後にSketchでスライドに対して詳しいことなど下記のサイトが非常にわかりやすく書いてくれているのでぜひ参考にしてみてください。

参考サイト

Sketch 3でスライドづくりに役立つプラグインやTipsなど紹介しますよ。 Sketch 3 Advent Calendar 2014|creative tweet.スライドはSketchでつくるとはかどるという話。|mogmog

0

0

AUTHOR

Sayaka Osanai デザイナー

Sketchだいすきプロダクトデザイナー。シンプルだけどちょっとかわいいデザインが得意。 好きな食べものは生ハムとお寿司とカレーです。

アプリでもっと便利に!気になる記事をチェック!

記事のお気に入り登録やランキングが表示される昨日に対応!毎日の情報収集や調べ物にもっと身近なメディアになりました。

eishisでは一緒に働く仲間を募集しています

正社員や業務委託、アルバイトやインターンなど雇用形態にこだわらず、
ベテランの方から業界未経験の方まで様々なかたのお力をお借りしたいと考えております。

話を聞いてみたい

運営メンバー

eishis

Eishi Saito 総務

SIerやスタートアップ、フリーランスを経て2016年11月にeishis, Inc.を設立。 マーケター・ディレクター・エンジニアなど何でも屋。 COBOLからReactまで色んなことやります。

sasakki デザイナー

アメリカの大学を卒業後、日本、シンガポールでデザイナーとして活動。

しまだ

しまだ デザイナー

WebAR/VRのデザインと3DCG制作がメインです。 肩書きは「アニメ案件に関わりたいデザイナー」。

Miu マーケター

ドイツでWEBマーケティングしています。

しんのき エンジニア

新しい技術が好きなWebエンジニアです。 元々インフラやPHPをやっていたのですが、最近はReact NativeとFirebaseを使って頑張ってます。

yamakawa

やまかわたかし デザイナー

フロントエンドデザイナー。デザイン・HTML/CSSマークアップ・JSアニメーション実装を担当しています。

furuya エンジニア

サーバーサイド、フロントエンド、Unityと色々手を出してる雑食系エンジニア。ReactNativeが最近のマイブーム。

Sayaka Osanai デザイナー

Sketchだいすきプロダクトデザイナー。シンプルだけどちょっとかわいいデザインが得意。 好きな食べものは生ハムとお寿司とカレーです。

はらた

はらた エンジニア

サーバーサイドエンジニア Ruby on Railsを使った開発を行なっています

うえまつゆい エンジニア

サーバーサイドエンジニアからフロントエンドエンジニアになりました。主にReact Nativeでのアプリ開発をしています。

CONTACT PAGE TOP