[レポート] デザイン入門！初心者でも使えるデザインのコツとテクニック#devio_day1 #sub3

こんにちは、デザイナーアシスタントの藤田です。
先日行われたDevelopersIO Day Oneにて「デザイン入門！初心者でも使えるデザインのコツとテクニック」というタイトルで登壇しました。今回は、その内容をブログでもお伝えします。

資料

はじめに

今回は、デザインにおいて重要な「余白」と「コントラスト」についてご紹介します。この2つを活用することで、伝えたい情報は強調され明確に伝えることができます。実践を通してその効果をお伝えしていきます。

「余白」と「コントラスト」

余白とは？

実際には

この赤くなっている部分が余白になります。文字周りの大きな余白から、字と字の間の小さな空白（字間）も余白になります。
では、実際に字間を調整するとどうなるのか、調整したものとしてないもので違いを見てみます。

同じ日付が2つあります。上は余白を調整していない方で、下は余白を調整した方です。
上の日付に注目すると、字間が窮屈なところや広いところがあります。余白を調整した下の日付は、見た目も綺麗で読みやすくなっています。このように細かい余白を調整することで可読性の向上に繋がることがわかりました。

赤い部分の余白を調整しました

余白には、他にもこんな機能があります。

• 余白は、線の代わりになる
• 余白は、グループ化をする

こちらは、後ほど実践で確認していきます。

「コントラスト」とは？

コントラストとは、はっきりと変えることです。p.14とp.15の画像を見比べてみましょう。

文字サイズに注目してください。p.15の文字をp.14より6pt大きくしていますが、変わったように見えず同じ文字サイズに見えます。
では、次にp.16の画像を見てみましょう。

先ほどの画像とは明らかに違うことが分かります。
コントラストとは、はっきりと変えることです。

「余白」と「コントラスト」について紹介しましたが、この2つを上手く使うと、伝えたい情報を強調し、明確に伝えることができます。
では、実践でその効果を確認していきましょう。

実践

余白は線の代わりになる

下記の表は、クラスメソッドのキャラクター「くらにゃん」のプロフィールです。項目に背景色をつけたよく見る表のデザインです。

この表を余白で表してみます。

線をなくしてみました。線の情報が減ったことで、一気にスッキリした印象になります。
また、十分な余白を取っていれば、線がなくても表は成立していることが分かります。
ではここに、コントラストをつけてみるとどうなるでしょうか？

項目を太字に変更し、色を薄くしました。
項目の存在感がなくなり、くらにゃんの情報が目に飛び込んでくるようになります。線がなくても、情報は正しく入ってくることが分かりました。
では、もう一度最初のデザインを見てみましょう。

先ほどのと比べると、少し窮屈な印象を持ちます。
見やすくなると思って引いた線は、時には情報を複雑に見せることになります。

表を作成する時は、線の代わりに余白が使えないか検討してみてください。

要素間の余白に注意する

次は、こちらのレシピです。

タイトル、説明、画像の3つの要素が配置されています。こちらをデザインするとどうなるでしょうか？

中央に置いていたタイトルを左寄せにし、右に置いていた画像を左に持ってきました。前のと比べるとこちらの方が、タイトル、画像、説明の順で流れるように情報が入ってくるようになりました。
では、こちらにコントラストをプラスします。

タイトルを大きくし、色をつけました。タイトルを大きくしたことで、説明はより小さく見えます。 各要素の見た目のギャップは大きくなり、それぞれの役割もより強調されました。
また、画像を左に持ってきたことで「Z型」の視線誘導となり情報がスッと入ってきます。
では、最初のデザインは何が悪かったのか、余白に注目してみてみましょう。

こちらのデザインには、説明と画像の間に行き場のない余白がありました。このガタガタな余白が、情報を伝えづらくする要因でした。

レイアウトする時には、要素と要素の間に生まれる余白に注意しましょう。見やすいレイアウトは、ユーザーの目の負担を減らします。透明でまっすぐな線が見えるよう配置し、要素を整えていきましょう。

余白はグループ化をする

次は、こちらのドリンクメニューです。見やすくするため余白を調整します。

調整後はこちらです。

調整した余白に色をつけます。

様々な大きさの余白が使用されています。1つずつ確認していきましょう。
まずは緑の余白です。この大きい余白は「hot」と「cold」の間に入れることで、ドリンクメニューを「熱い飲み物」と「冷たい飲み物」2つのグループに分けています。 次に青の余白は、「見出し」と「商品名」2つのグループを作っています。 そして赤い余白は、「商品名」と「商品名」の行間に使われています。
このように、近い属性同士の余白は小さくし、遠い属性同士の余白を大きくすることで、効果的なグループ化を行うことができます。

では、次にコントラストをつけます。

情報の差が生まれ、見たい情報が一目でわかるようになりました。
では最初のデザインは、何が要因で情報が伝わりづらくなっていたのか確認します。

余白を見ると、全て同じ大きさの余白が使われていました。情報のレベルは全て同じになり、どれが見出しでどれが商品名かひと目で判断するのは難しいです。

属性にあわせた余白を使い、グループ化をしていきましょう。

まとめ

• 余白は、線の代わりになる
• 余白は、グループ化をする
• コントラストは、視覚を引きつける

実践を通して「余白」と「コントラスト」の効果をご紹介しました。この2つを意識するだけでデザインの質はグッと良くなりますので、ぜひ試してみてください！
今回の内容が少しでもお役に立てれば幸いです。