先日、エンジニアや企画チームなど非デザイナー向けにデザイン社内勉強会が開催されたのですが、非常に良かった。講師は弊社デザイナー兼エンジニアの山形氏です。デザインもエンジニアリングも両方出来るとか尊い。
題材はノンデザイナーズ・デザインブックという本を読みながら解説していくというスタイル。この勉強に関しては後ほどレポートが上がると思うので詳しくそちらで。
いくつか具体的なテクニックを学んだので早速何かで実践してみようと思い、ちょうど課題を感じていた、弊社テンプレのパワポのデザインというかレイアウトの改善にチャレンジしてみた。
今回学んだ必殺テクニック
- 画像を背景に溶け込ませる
- 画像をあえてはみ出す
- line-heightは文字サイズの1.5倍
- テキストの色のコントラスト
- 異なるフォントを二種類使う
画像を背景に溶け込ませる
画像の色とテキストの色のコントラストが同じだと両方がぶつかりあってしまう。画像の色合いを薄くして背景に溶け込ませると、テキストの邪魔をせず、画像の効果もいかすことが出来る。
可愛い羊のイラスト、気に入っていたのですがちょっとテキストの邪魔をすることが多いなーと感じていたので背景に溶け込ませてみた。
Before
After
画像をあえてはみ出す
画像の形が失われない範囲で、あえて版面外にはみ出させるとなんかプロっぽくなる。
羊のイラストをちょっと拡大して、お尻の方と足の一部をはみ出させる。おおーー！これはなんかそれっぽいのでは？
Before
After
line-heightは文字サイズの1.5倍
これはWEB前提の話だったのですが、パワポスライドでもテキスト量が多いとめっちゃきつきつになって窮屈さを感じるときがあった。デフォルトは行の高さ1.0倍だったのですが、1.2倍にしてみた。
すっきりした感ある！
Before
After
テキストの色のコントラスト
目立たせたい情報とそうでない情報を区別するために、テキスト色のコントラストを利用するテクニック。
目立たせたい情報とか見出しを太字にする、とかはよくやると思うのですが、逆に目立たせる必要性が低い箇所の色を薄くするというやりかたがあることを知った。
スライドごとのタイトル部分とリスト部分でテキスト色のコントラストを設定してみた。
Before
After
異なるフォントを二種類使う
同一の版面上で異なるフォントを複数使うとオシャレさ加減がアップするみたい。基本的に統一するのが正だと思っていたので目からウロコである。
スライドタイトルを「筑紫A丸ゴシック」でリスト部分を「ヒラギノ角ゴ Pro」にしてみた。なんか分かんないけど良いような気もする！
Before
After
まとめ
具体的なテクニックを学べて非常に良かった。プロトタイプとかMVP開発をする際にはデザインを入れられないケースも多々あるけれど、少しだけでもデザイン知識があれば完成度をあげることが出来るし、エンジニアもデザインを勉強しておくのは非常に良い。
