こんにちは！
delyでkurashiruというレシピ動画サービスのUIデザイナーをしている@ymdscoです。
今年もやって参りました、delyのAdvent Calender！この記事は第1日目の記事になります。
また、今年は社内の参加人数も増えて、なんと、同時に2つのカレンダーが更新されていきます！
dely Advent Calender #1
dely Advent Calender #2
本日更新されるもう１つの記事は、望月さん(@0000_pg)の
Ruby 3.0へ向けて、型周りをさわってみた です。
”我々はいちごでサンタさんをつくりながら、型と向き合っていかないといけません🎅🎄
”
↑ こんな感じの記事なので、俺はゆるふわ技術ブログが読みたいんじゃという方は是非読んでみてください。
はじめに私はdelyに6月頃転職したのですが、kurashiruのリデザイン案を20ページ超の資料にまとめてCXOの坪田さん(@tsubotax)に送りつけるという暴挙をかまして、なんとか入社したという経緯があります。資料づくりは元々好きでした。
自分の得意なことで、人に役立つ記事を書けたら素敵やんということで...
私が資料を作る時の考え方を、レシピ動画サービスの会社に因んで、料理の作り方になぞらえて、まとめてみました！
プレゼンする機会がある方や、プレゼン資料を作るのが苦手な方の参考になれば嬉しいです。
手順①： シーンを考える資料を作る前に、まずは事前準備をします。料理に例えると下ごしらえのようなものです。
資料作成をする時のコツとして有名なものに、１枚のスライドに伝えたいメッセージを２つ以上盛り込まない「ワンスライド・ワンメッセージ」があります。
この定説はその通りだと思いつつ、作ろうとしている資料の利用シーンによっては１ページに入れる最適なワンメッセージの量が異なってきます。ここが個人的に難しいと思うポイントです。
例えば、登壇や提案時など利用シーンが発表型の場合は、 資料の内容がテンポ良く頭に入ってくることが大切です。そうなると必然的に１ページに入れるワンメッセージの量は少なくなり、ページ数は多くなる傾向があります。
一方で、添付することが前提の資料の場合はどうでしょうか。この場合は、資料が一人歩きする可能性があるため、誤解を生まずに情報が正しく伝わることが大事になってきます。そうすると説明がなくても伝わるように１ページに盛り込むワンメッセージの量が多めになってきます。
料理もそうですが、食べる時間や場所、その時のシチュエーションによって、料理がちまっと乗ったお皿が何枚も出てくるフルコースがいい場合と、ステーキ！ドーン！みたいなワンプレートがいい場合とありますよね。
スライドを使うシーンを考えながら作ると、１ページに盛り込むべき最適な情報量が決まり、資料作成がグッと作りやすくなるのではないかと思います！
手順②： 使う情報を準備する
利用シーンが固まったら、次は資料に入れる情報を準備します。
ただ、あれも入れたい！これも入れたい！と情報を盛り盛りにしてしまうと、ドス黒い闇鍋が出来上がってしまいます。出来上がった後に「この資料って結局何が言いたかったんだっけ？」となってしまうので、料理と同じくまずはメインをハッキリさせると、資料作りに取りかかりやすいです。
各ページでメインで伝えたい情報とそれに付随する情報を準備します。
私はいつも白紙のスライドページを複数枚作り、見出しと内容の箇条書きをメモして情報を整理していきます。
利用シーンを考えた時に、ちょっとページ数が多いなという場合は情報を削ったり、他のページと合体させるなどして調整していきます。
手順③： 伝えたい情報に優先順位をつける
１ページ内に盛り込む情報が決まったら、読み手・聞き手に伝わってほしい情報順に優先度をつけます。
例えばよく使われるもので言うと、
・スライドの見出しは最低限読んでほしいので、優先度は高
・小見出しや文章は、見出しの次に読んでほしいので、優先度は中
・ページ数や著作権などの情報はあったら嬉しいけど、読まなくても分かるので、優先度は低
など。
優先順位をつけ終わったら、各ページ毎に、優先度の高いものが目立つように文字の太さ、文字の大きさ、文字色の濃さなどで、情報にメリハリをつけていきます。そうすることで、聞き手・読み手がそこまで意識しなくても内容が頭に入ってきやすいスライドに近づきます。
ここでのポイントは、使う文字の書体や大きさをバラバラにしすぎないことです。
優先度の高い部分の大きさはコレ！などのルールを決めると、読み手・聞き手もだんだんと学習してくれるので、優先度の高い情報であると認識してもらいやすくなります。
書体に関しては、属しているグループや企業で使っているものを使えばいいと思うのですが、迷ってしまう方には以下のものがおすすめです！
上記ではゴシック体を紹介しましたが、書体には明朝体も存在します。
線が細いため資料を投影するような発表型のプレゼンの時には不向きですが、添付資料や提案資料など、相手に読んでもらうことを前提とした資料の場合は目に負担が少ないのでおすすめです。
手順④： 色や図形、写真、イラストなどを加えるここまでの手順だけでも十分「わかりやすい」スライドにすることはできますが、ここからはさらに「見やすい」スライドにしていきます。
料理で例えると、味付けの工程のような感じです。素材の味だけでも十分という場合もありますが、より美味しくするために調味料を足していきます。
資料づくりが苦手な方の中には、資料にどうやって色を使っていいのか分からず悪戦苦闘してしまう方が多いかと思います。ここでは普段私が意識している色の使い方に絞って説明します。
色を多く使いすぎない
私が見やすいスライドを心がける上で一番意識するポイントは色を使いすぎないことです。具体的にいうと、使う色の種類を多くても3色〜4色に絞ります。
配色の基本にベースカラー、メインカラー、アクセントカラーの3色を70%、25%、5%の配分で使うというものがあります。これは資料に限らずWebデザインなど色々なところで利用されるテクニックです。このテクニックを応用していきます。
資料作成に置き換えて説明すると、ベースカラーというのはスライドの背景色のような広い面積に使う色です。文字が上に重なることが多いので、文字の色が黒の場合は白に、文字の色が白の場合は黒に近い色にするのがシンプルで良いかと思います。私はいつも白を使います。
メインカラーは、スライド全体のイメージを左右するキーカラーのようなものです。企業の色が決まっている場合はその色を使うとロゴと並べた時に統一感が出やすくなります。特に決まっていない場合は、読み手・聞き手に合わせた色や、その資料で伝える内容に合わせて決めても大丈夫です。
アクセントカラーは、資料の中でも特に注目してほしい箇所などで使う色になります。そのため、比較的強い色（色が濃く、印象に残りやすい色）を使う場合が多いです。文字の色として部分的に使ったり、数字やアイコンに使ったり、文字の周りの装飾に使ったり、使い方はたくさんあります。ただ、多用しすぎるとアクセントとして機能しなくなるので、注意が必要です。
それぞれのカラーの使い方が分かったところで色を決めていきます。色を決める上で私が使うことの多いおすすめのサイトをいくつか紹介します。
Color Hunt
会社のカラーなどが特になく、資料を作る上で色の制限が全くない場合はColor Huntを眺めてイメージを固めていくのがおすすめです。カラーパレットのサイトなので、使っている色は多いですが、「この色が使いたい」や「このパレットのイメージに近づけたい」といったものが見つかると、比較的簡単にメインカラー・アクセントカラーが決められます。
Color Hunt - Color Palettes for Designers and Artists
Color Hunt is a free and open platform for color inspiration
colorhunt.co
Adobe Color
メインカラーは決まってるんだけど、アクセントカラーが決められないといった場合はAdobe Colorがおすすめです。すでに決まっている色に合わせて、似た色や正反対の色、明るい色、暗い色など様々な軸でもう１つの色を決められます。
タイトル未設定
color.adobe.com
Coolors
なんとなく使う色は決まったんだけど、なんかしっくり来ないと言う場合は、Coolorsで全体の色のバランスをみてみるといいかもしれません。5色選択できるので、3色はベースカラーの色を選択してとりあえず埋めてみます。鍵マークを押してロックした後にスペースキーで色を変えていくと、ロックがかかっていない部分だけランダムに変わっていくので、バランスを見ながら色を決めたい場合などにおすすめです。
Coolors - The super fast color schemes generator!
Generate or browse beautiful color combinations for your desi
coolors.co
手順⑤： トンマナを整えて統一感を出す
さて、大詰めです。資料もほぼ完成が見えてきたと思いますが、最後に資料全体をみて印象を整えていきます。料理でいうと味見をして味を整えるような工程に近いでしょうか。
上の項目で説明した色に加えて、必要な場合は図形や写真、イラストを追加していくかと思いますが、それら全体のトンマナを整えることで、より統一感が増して資料が見やすくなります。
「トンマナ」とは、デザイン用語でトーン&マナーの略です。色や図形、写真、イラストを使うときのルールを決めることで見た目に一貫性を持たせて、統一感を出すことを指します。
例えば
色でいうと、明度（色が明るいか暗いか）や彩度（色が鮮やかかくすんでいるか）などのルール
図形の場合は、角があるか、丸みを帯びているか、小さいか大きいかなどのルール
写真やイラストの場合は、タッチ（手書きだったり幾何学的だったり）が同じかどうか、雰囲気や色味が似ているかどうかなどのルール
色や素材の与える印象が、読み手・聞き手に与えたい印象と一致するよう意識しながらルールを決めると、まとまった印象を与える資料になると思います。
手順⑥： 要素を揃えて余白をたっぷりとる
料理も資料も、中身ができたら最後は見た目を整えます。料理でいうところの盛り付けです。
文章や素材のレイアウトを各ページ整えて、余白を多めにとります。
文章を整えていく際のポイントは１行を長くしすぎないことです。
諸説ありますが、人間が読みやすい１行の長さは35文字前後だと言われています。読むための文章でそのくらいだとすると、発表で使うような見るための資料はもっと短くてもいいかもしれません。
登壇するようなプレゼンの場合はあくまでも主役は自分なので、〜です。〜ます。のような語尾を使わず、文章を簡潔にするように心がけると、見やすい資料に近づくと思います！
レイアウトは奇をてらわず、シンプルで大丈夫です。
デザインの4大原則である「近接」「整列」「反復」「対比」を意識して配置すれば、自ずと見やすいレイアウトになってきます。それぞれの意味を説明します。
近接
関連する要素をまとめて固まりにしましょうという原則です。
資料に置き換えて説明すると、どの見出しがどの文章に紐づいているのか、同じグループである事がパッと見で理解できるようにする必要があります。
整列
各要素を整列して配置しましょうという原則です。
左右の整列には「右揃え」「中央揃え」「左揃え」、上下の整列には「上揃え」「中央揃え」「下揃え」が存在します。
この原則も近接と同じく、直感的に要素の関係を理解する上で必要になってきます。
反復
デザインに何かしらの特徴があれば、それを繰り返しましょうという原則です。書体や、アイコン、装飾など、資料の中に存在する様々な要素を、繰り返して使うことで、見た人が同じものだと理解しやすくなり、統一感が出ます。
対比
要素の優先度が分かりやすいように、見た目ではっきりと区別しましょうという原則です。これは手順③ですでに実践しましたが、伝わってほしい情報の優先度を見た目で分かるようにする事で、読み手・聞き手が意識しなくても、優先度の高いものが理解しやすくなります。
上記を意識して資料を整えたら、見やすい資料の完成です！
最後にノンデザイナーでも大丈夫！と謳っておいて、かなりデザイン用語を使ってしまった気がしています。やばい
”説明するより実物触った方が早いだろ！プロトタイプで語れ！（意訳）”
みたいなdely開発部のカルチャーもあるので、応用して使えるスライドを作りました！資料づくりが苦手な方は下記からダウンロードして書き換えて使っちゃってください。
Presentation_template_20201201.key3807040 Bytes
ファイルダウンロードについてダウンロード
この記事が役立ったぜという方がいれば、是非シェアしていただけると嬉しいです！！！
この記事がたくさん読まれることで、私たちdely開発部の人間が寿司を食ベられる確率が高まります。何卒よろしくお願いいたします。
また、就職活動中の学生さんや転職を考えている方で、delyが気になった方がいれば、下記からご応募お待ちしてます！一緒に寿司食べましょう！
dely, Inc. エンジニア / デザイナー 採用
食や暮らしの課題を解決するチームで私たちと一緒に働きませんか
join-us.dely.jp
delyについて詳しく知りたいよって方がいれば、TechTalkという社内のメンバーがテーマ毎に話すイベントもあるので是非！
dely
dely
bethesun.connpass.com
明日のAdvent CalenderはTRILL開発部の石田さんの記事
Swiftで1+1が何故2になるのか調べてみた です！
お楽しみに！