ゴリゴリの業務アプリエンジニアがグラフィックデザインを学んでみた
こんにちは NSS の江口と申します。
普段はSpringを用いたサーバサイドアプリケーションやWPFを用いたクライアントアプリケーションの開発を行っております。
近年UI/UXをはじめとしたデザインに関する意識が非常に高まってきており、少し前のプロジェクトでもデザイナーの方に提案していただいたデザインで作り込んでいたりしました。
これまで
なんだかんだで色々なシステムの画面を開発してきているため、レイアウト自体はそこそこできると思っていたのですが、
黒と白以外で自分で考えて作成してみよ
と言われた途端に、何をしたらいいかわからなくなることに気づきました。
というのもこれまで意識して自分で色を決めていたのなんて、学生時代のノートで重要なところは赤字、やや重要なところは青字だな。くらいで、それで成長が止まっていたわけです。
例えば良くある、検索したら、その結果が表示される画面を作るとしたらWebアプリであれば、<input>や<table>を使って作成しますね。
それでは作ってみましょう。
はい、どう考えても世の中に出せる代物ではないですね。ダメだということは誰が見ても簡単にわかると思います。
でもじゃあどうしたらよいのか、それが意外に出てこなかったりするのです。
それを自分で考えられるようになれれば、エンジニアとして一つ成長できるのではと思ったわけです。
学んだこと
早速Udemyでグラフィックデザイナー向けの初心者講座を受けました。グラフィックデザインとは
こんな感じのポスターや雑誌広告などのビジュアルデザインを行うことです。
言葉や切り口が普段とは全くの畑違いなので、ものすごく新鮮な感覚になることができました。学べたこととしては
1. コンセプトを明確にする
どうもデザイナーさんとしても、これを最初に決めておかないといろいろとデザインを考えていく上でどんどんぶれてしまうそうです。
今回は仮ですが、見やすくて、落ち着きがあるというのをコンセプトにしたいと思います。
2. 版面とマージンを適切にとる
はんづらと呼ぶそうです。
これは全体の領域があったとして実際にコンテンツを配置する領域を決めておくことによって適切なマージンを実現することができます。
なお、マージンは上下左右で同じサイズにするのがベターです。
3. 段組とグリッドレイアウト
だんぐみは文章の1行が長すぎると読者が飽きてしまうため、文章を細かいセグメントに分ける手法です。
雑誌のコラムなどでよく使われますが、アプリケーションで長文はあまり見たことがないので、適用する機会はあまりないかもしれません。
グリッドレイアウトは版面を複数のグリッドに分け、そこにコンテンツを配置していくことにより、整然としたレイアウトを実現することができます。
4. 配色（補色・反対色・類似色）
色の種類はいろいろとあって以下の図において、
- 隣り合う色は類似色
- 対角線上の色は補色
- 対角線から一つずれている色を反対色
と呼ぶらしく、それぞれ
といった効果があるようです。
類似色がちょっと見づらい気もしますが、言われてみるとそんな気がしますね。
また、トーンを（彩度と明度）を変える配色をすると落ち着いた配色になるとのことでした。
元の画面を改善
では元の使い物にならないデザインを拙い知識ながらも変更してみることとします。
マージンを適切にとり、グリッドレイアウトを意識、そして落ち着いた配色にするために
背景色にはトーンを落とした色を採用してみました。
というわけでBefore / Afterです。
どうでしょうか？手作り感満載ですが、できるだけ頑張ってみました。
落ち着くデザインには大分なったかと思います。
色を使った場合に文字色を真っ黒と真っ白を利用すると浮いた感じになってしまうので、少し色のトーンを落としたりしています。
まとめ
デザインの勉強をしてから、自分たちが作成したデザイナーさんに考えてもらったアプリ、世の中に出回っているアプリのデザインがいかに洗練されているかがわかりました。
通勤中にも電車内のポスターをよく見るようになりましたが、補色を上手く利用しているので、メリハリがあったりアクセントがあるデザインになっていることがわかり、世のデザイナーさんには頭が下がる思いです。
世の中に広く出せるデザインはやっぱりデザイナーさんに考えてもらった方が良いかと思いますが、お客様への提案中などはモック画面をササっと作ることはあるので、その時に第一弾がそれなりだと、お客様に好印象を与えられると思います。
デザインについては、今後も工夫を続けていきたいと思います。
Discussion