2018.12.09

私はデザインツールでスライドをつくってます

Design Tools Advent Calendar 2018の9日目の担当をします、おさない(@nanammeon)です!
普段は代々木にあるweb系ITベンチャー企業にてプロダクトデザイナーとして企画提案やUIデザイン設計を行っています。

今回のメインタイトルである「デザインツールでスライドや提案資料をつくる」ということで、普段私が使っているデザインツールを紹介しながら作成したスライドたちの実績を載せながらメリットをご紹介したいと思います!

ちょっとチラシの裏

今年はエンジニアとデザイナーがともに理解し合い、手を取り合っていくためのイベントDXELに2回登壇したり、社内ランチLTで発表したりとスライドを作る回数が多く、その際に作成したスライドたちは全てデザインツールで作成しました。

ちなみに自社メディアであるbageleeにてSketchでスライドを作るTipsを記事として公開しているので、ぜひこちらも読んでみてください。

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

実際に作って公開しているスライド

では、私が実際に作ったスライド資料たちを全体図として公開します。Figmaの方は実際にブラウザで見ることが出来ます。

デザイナーとエンジニアを両方経験したわたしが思うこと

デザイナーとエンジニアを両方経験したわたしが思うこと

初登壇ということでちょっと気合を入れたスライド資料を作成しました。
このスライドはSketchで作りました。SVGを手軽に扱えること、シンボルでページデザインを管理できること、PDF変換を一瞬で行ってくれるFile > Export Artboards to PDFところが大好きです。

ちなみにスライド資料のサイズは基本的にiPadサイズの1024×768で作っています。

Figmaを使って全職種の皆といい関係を築いていきませんか

Figmaを使って全職種の皆といい関係を築いていきませんか

DXEL第2回目の登壇資料。Figmaのお話をしたかったので、スライド資料もFigmaで作りました。さらにFigmaはブラウザベースで動作するデザインツールなので、実際にURL(QRコード含む)を公開して、リアルタイムで資料内容を見せたりしました。

また、FigmaはPreview機能が優秀で、あらかじめ用意されているアートボードを選択するとPreview時に合わせたデバイスにはめ込んでくれます…!今回のスライドはiPadサイズで作ったのですが、こんな感じで表示してくれるので発表時はいちいち資料を書き出す必要がありません。

iPadの他にもiPhoneXやApple Watch、Android系まで揃ってます!

右のサイドバー内にあるPROTOTYPEタブでデバイスの色や縦横の選択、さらに背景色まで選ぶことができます。

ちなみにわたしの最近の推しデザインツールであるFigmaです💜
UIデザインはもちろんのこと、こういったスライド資料も簡単に作ることができ発表までスムーズに行えるかなりいい子…!ですが、難点がひとつ。

FigmaはPDF変換ができません。なので、スライド共有を行う際は基本的にURLベースです。が、Slide ShareやSpeaker Deckに公開する際はPDFとして資料アップロードしなければならないので、本末転倒感あるのですが、別のデザインツールを用いて改めてPDF変換しました……。

2018.12.10 追記

FigmaにPDF Exportという機能が新たに追加され、PDF変換ができるようになりました!これで別ツールを使った書き出しが不要になりましたね。ますますFigmaの良さがアップしました🎉

自社サービスのデータ調査に基づいたUXシート

自社サービスのデータ調査に基づいたUXシートはスプレッドシートでも運用しているのですが、どうしても限界を感じてしまい、独自でスライド資料を作ったものがこちらです。Sketchで作りました。

グラフ制作であったり、簡易ペルソナシート、アプリのマッピングなどを視覚的に見やすくわかりやすいコンポーネントはSketchの方が扱いやすい(作りやすい)感覚です。Sketch素材やデザインデータを配布しているSketch App Sourcesにもかなりお世話になっており、モックやグラフを作りやすいのもメリットの一つです。

デザインツールでスライドや提案資料をつくることのメリット

以前書いた記事と重複してしまうのですが…

  • アートボード単位でページを作っていくので、スライドの全体図が見渡しやすい
  • ページデザインをシンボル作成すれば、テーマの一元化が可能
  • 各コンポーネントの色の変更が容易
  • SketchはPDF変換が備わっているので簡単にスライドを作れる
  • FigmaはURLベースなのでブラウザで見ることが可能、プレビュー機能も優秀
  • グラフ制作やコンポーネント類の制作がしやすい

今回紹介したのはSketchとFigmaの2種類でしたが、昨今では本当にたくさんのデザインツールがあるので、今後も色々なデザインツールを使ってスライドを作ってみたいな〜という思いがあります。その中でどれが一番作りやすかったかなどもまとめてみたいところ。

従来のスライドツールももちろん良いところはたくさんありますし、専門の知識がなくともスライドが簡単に作れるのは大きなポイントです。が、デザインツールを使ってちょっとリッチなスライドを作ってみるのも楽しいですよ!

ぜひ、一度デザインツールでスライド資料を作ってみてください👋

PAGETOP © asougi.me