ゴリゴリの業務アプリエンジニアがグラフィックデザインを学んでみた

こんにちは NSS の江口と申します。
普段はSpringを用いたサーバサイドアプリケーションやWPFを用いたクライアントアプリケーションの開発を行っております。
近年UI/UXをはじめとしたデザインに関する意識が非常に高まってきており、少し前のプロジェクトでもデザイナーの方に提案していただいたデザインで作り込んでいたりしました。

![00.デザイナー.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3799996/8236b7b4-3c2f-eed5-1bc1-dabd45a87508.png)

# これまで

なんだかんだで色々なシステムの画面を開発してきているため、レイアウト自体はそこそこできると思っていたのですが、
> 黒と白以外で自分で考えて作成してみよ

と言われた途端に、何をしたらいいかわからなくなることに気づきました。
というのもこれまで意識して自分で色を決めていたのなんて、学生時代のノートで重要なところは<font color="red">赤字</font>、やや重要なところは<font color="blue">青字</font>だな。くらいで、それで成長が止まっていたわけです。
例えば良くある、**検索したら、その結果が表示される画面**を作るとしたらWebアプリであれば、`<input>`や`<table>`を使って作成しますね。
それでは作ってみましょう。

![01.改善前のデザイン.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3799996/580438a8-8aa5-f65a-9177-6fe42eb4f237.png)

はい、どう考えても世の中に出せる代物ではないですね。ダメだということは誰が見ても簡単にわかると思います。
でもじゃあどうしたらよいのか、それが意外に出てこなかったりするのです。
それを自分で考えられるようになれれば、エンジニアとして一つ成長できるのではと思ったわけです。

# 学んだこと

早速Udemyで`グラフィックデザイナー向けの初心者講座`を受けました。グラフィックデザインとは

![10.表紙.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3799996/423da57b-9ee7-5c46-d194-cbf94eacedda.png)

こんな感じのポスターや雑誌広告などのビジュアルデザインを行うことです。
言葉や切り口が普段とは全くの畑違いなので、ものすごく新鮮な感覚になることができました。学べたこととしては

## 1. コンセプトを明確にする

どうもデザイナーさんとしても、これを最初に決めておかないといろいろとデザインを考えていく上でどんどんぶれてしまうそうです。
今回は仮ですが、**見やすくて、落ち着きがある**というのをコンセプトにしたいと思います。

## 2. 版面とマージンを適切にとる

**はんづら**と呼ぶそうです。
これは全体の領域があったとして実際にコンテンツを配置する領域を決めておくことによって適切なマージンを実現することができます。

![02.版面とマージン.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3799996/af221847-2343-6806-b37f-b9770fa246d6.png)

なお、マージンは**上下左右で同じサイズ**にするのがベターです。

## 3. 段組とグリッドレイアウト

**だんぐみ**は文章の1行が長すぎると読者が飽きてしまうため、文章を細かいセグメントに分ける手法です。
雑誌のコラムなどでよく使われますが、アプリケーションで長文はあまり見たことがないので、適用する機会はあまりないかもしれません。
**グリッドレイアウト**は版面を複数のグリッドに分け、そこにコンテンツを配置していくことにより、整然としたレイアウトを実現することができます。

![03.グリッドレイアウト.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3799996/76ec8a3d-0889-ff37-b4f0-59838f925917.png)

## 4. 配色（補色・反対色・類似色）

色の種類はいろいろとあって以下の図において、

* 隣り合う色は**類似色**
* 対角線上の色は**補色**
* 対角線から一つずれている色を**反対色**

![04.配色.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3799996/a441eaab-f90b-acbf-bbe0-50bc8e87518a.png)

と呼ぶらしく、それぞれ

![05.補色.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3799996/ae787c12-b817-8069-7e36-4e436e964c5a.png)
![06.反対色.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3799996/ee830e75-9348-7888-31f0-19ace9d1de44.png)
![07.類似色.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3799996/52dc4236-b538-1e2d-f92c-e85a93d4bb79.png)

といった効果があるようです。
類似色がちょっと見づらい気もしますが、言われてみるとそんな気がしますね。
また、トーンを（彩度と明度）を変える配色をすると落ち着いた配色になるとのことでした。

![08.トーン.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3799996/998e6409-ca9c-5fa4-f9ec-f55f4caabfb1.png)

# 元の画面を改善

では元の使い物にならないデザインを拙い知識ながらも変更してみることとします。
マージンを適切にとり、グリッドレイアウトを意識、そして落ち着いた配色にするために
背景色にはトーンを落とした色を採用してみました。
というわけで**Before / After**です。

![01.改善前のデザイン.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3799996/394cc6d6-d126-ec3c-be0c-b85537e7f720.png)

---

![09.改善後デザイン.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3799996/096a661c-1546-3ee1-7d08-326daa3aa96d.png)

どうでしょうか？手作り感満載ですが、できるだけ頑張ってみました。
落ち着くデザインには大分なったかと思います。
色を使った場合に文字色を真っ黒と真っ白を利用すると浮いた感じになってしまうので、少し色のトーンを落としたりしています。

# まとめ

デザインの勉強をしてから、自分たちが作成したデザイナーさんに考えてもらったアプリ、世の中に出回っているアプリのデザインがいかに洗練されているかがわかりました。
通勤中にも電車内のポスターをよく見るようになりましたが、補色を上手く利用しているので、メリハリがあったりアクセントがあるデザインになっていることがわかり、世のデザイナーさんには頭が下がる思いです。
世の中に広く出せるデザインはやっぱりデザイナーさんに考えてもらった方が良いかと思いますが、お客様への提案中などはモック画面をササっと作ることはあるので、その時に第一弾がそれなりだと、お客様に好印象を与えられると思います。
デザインについては、今後も工夫を続けていきたいと思います。