「けっきょく、よはく。」を読みました。
ごきげんよう。テストエンジニア見習いのいとうです。
この記事は、Fusic Advent Calendar 2018 4日目の記事です。
きっかけ。
私事ですが、11月に転職をしました。
転職してから、テストするにあたって、デザインとかUIが気になるようになりました。
前職のときは、デザイナーというプロがいたのであんまり気にしてなかったんですが、
現職だとデザイナーが入らないプロダクトが結構あり、テストしてて色々と気になることが増えました。
例えば、
- 画面内にアイテムが多い。
- かつ、隙間なく詰まっている。
- アイテムが探しづらい。
- システムの流れがわからない。
- 見づらい。
などなど。
しかし、私、社会人になってから1年半、基本的に機能テストしかしたことありませんでした。
デザインのことは、全くわかりません。
要は、これ嫌である！ということがあっても、こうしたら良くなるんじゃね？ってのがわからないんですよね。
なので、デザインについて勉強してみることにしました。
デザイン系の友達に紹介してもらった本を紹介しつつ、余白について考えてみたいと思います。
本題。
「けっきょく、よはく。」
余白っていろいろ有用な使い方があって便利なものなんだ、ということが勉強できる本です。
基本的にはデザイナーさん向けの本なので、紙のデザインの例が多いんですが、
いざ読んでみると、何のデザインにも参考になる本だと思います。
シンプルで読みやすく、でも考えることはいっぱいありました。すてき。
というわけで、本で紹介されている余白の便利な使い方を見ていきましょう。
トピックは3つです。
- 余白でブロックを分ける
- 余白で視線を引く
- 余白で視線を誘導する
ひとつずつ見ていきましょう。
1. 余白でブロックを分ける
まず1つ目です。
とりあえず、こちらの画像を見てみてください。
あるハンバーガーショップのメニューです。
メニューには、ハンバーガーとホットドッグとドリンクがありますね。
ぱっと見、整然と並んでいるように見えます。
でも、なんかどれが同じ塊かわかりにくい気がしますよね。
これを、こうしてみましょう。
それぞれのグループの間に余白を開けただけですが、なんとなく見やすくなった気がしませんか？
このように、要素要素の間に余白を作ることで、グループ分けをして見やすくすることができます。
2. 余白で視線を引く
目立たせたいものを、ただ大きくするんじゃなくて、余白を利用してより視線を引くデザインにするというものです。
大きくすれば目立つでしょ！とお思いかもしれませんが、ただ大きくするだけだと、画面がごちゃっとしてしまい、見にくいだけになったりします。
というわけで、こうです。
サイズを大きくしつつ、イチオシバーガーの周りに余白をもたせて推してるぜ感を出してみました。イチオシなので。
これだと、名前だけじゃなくてちゃんと推してる感じがしませんでしょうか。
ついでに見切れさせてみました。おしゃれ。(安直)
見切れさせることで、全体像がわからなくなる → 広がりが感じられ、より大きく見えるという効果もあるそうです。
3. 余白で視線を誘導する
割と簡単なことで、縦に読むなら横に余白をあける、横に読むなら縦に余白を開けると、そういう流れに見えやすいよねって話です。
こんな感じ。
余白を作ることで、アイテムに流れが見えるようになったのではないでしょうか。
ただアイテムが並んでいるだけだと、どこがスタートかもわからないし
次にどこを読んでいいかもわからない・・ってなりそうですが、
余白があることでなんとなーく流れが見えてきませんか？
行間とかをイメージしてもらうと、よりわかりやすいかもです。
行間開けたほうが、読みやすいですよね？
そんなようなことで、余白の素晴らしさが伝われば幸いです。
まとめ。
余白の素晴らしさ、皆さんおわかりいただけたでしょうか。
この本を読むまでは、余白なんてただの空白程度にしか捉えていなくて、ついつい詰め込みすぎたりしてしまっていました。
でも、余白があることで塊を分類できたり目を引くものを作れたり流れができたり、
いろんな効果が出せることがわかりました。
みなさんも、要素、詰めすぎてませんか？
余白、作ってみてください。
きっと見やすくなるはず！多分！きっと！
それでは、今後もテストエンジニア見習いとして、いろいろ幅広く勉強していきたいと思います。
ありがとうございました。
