事始め
あなたはまるで下請けのようにデザイナからの指示にはいはいと従っていれば良いなんて思ってませんか？
いいえ、これからはエンジニアですらデザインを勉強し、デザイナとデザインに関してやりとりする必要が出てきています（と私は勝手に考えています）。
デザイナとエンジニアはお互いに歩み寄るべきパートナーであり、お互いの協力なくして最高のユーザー体験は生まれないでしょう。
デザインともなるとまるで畑違いな感覚的なもので分からないと思う方も多いとは思いますが、デザインは理論であり、エンジニアでも意外と基本を把握することは難しくないと思います。
そこでここでは本当に簡単、簡潔、単純に、デザインの基本中の基本部分だけを抜き出してまとめてみました。
デザインとは
作り手の意図を明確に伝えるための技術。見た目だけではなく、それがどう機能するのかも含めたもの。
デザイン原則
- 近接(Proximity)：関係する情報を近くに配置すること。関係するものは近く、関係ないものは遠くするということで余白が大切
- 整列(Alignment)：要素を左揃え/右揃え/中央揃え/上端揃えのように揃えること。近接した要素をさらに揃えて一体感を持たせる
- 強弱(Contrast)：重要な要素を目立たせること。太さ、フォント、サイズ、色で重要な要素とそうでないものをはっきり区別させる
- 反復(Repetition)：全体に一体感を持たせること。配色やアイコン、近接/整列/強弱のルールを全ての画面で統一する
- 反復はWebサイトやアプリそのものから受ける印象に繋がる。一貫性を保つための表現のスタイルや方法などのルールのことを「トーン&マナー」という（デザイナさんがトンマナがどうとか言った場合は統一感とか一貫性とかそういう意味合いだと思えば良いと思います）
デザインの要素
デザインを考える上で必要になる要素には以下のように様々なものがあります。
全てがユーザの体験に繋がるため、良いデザインにするためにはより多くの要素を正しく検討し、積み上げる必要があります。
- 色（後述の配色を参照のこと）
- フォント：丸文字だと可愛い、のようにフォント自体の持つ印象があるので、サービスイメージに合わせた選択が必要
- レイアウト：上述のデザイン原則に従い、全体の構造を設計する必要がある
- 写真：使用されている写真の色味などの統一感や明るさなども全体の印象に影響する
- 文量：情報が多いと人は認識が難しくなる。簡潔さ、単純さ、明確さを心掛けるのが大切
- 操作感：クリック時のアニメーションなど、ユーザ体験に関わる部分
配色
色の印象
色にはそれぞれが持つ印象があるので、色を決める際には伝えたいことやイメージと合致しているか確認しましょう。
- 赤：生命力、活力、情熱的、購買意欲、熱い
- 青：清潔、誠実、クール、冷たい
- 橙：親しみ、健康、楽しい気分
- 黄：興奮、注意喚起、賑やか
など。
配色の手順
- メインカラーを決める：サービスの意味を表す為の色。はっきりとした濃い目の色が選ばれやすい
- ベースカラーを決める：背景などで使う色。背景なので白や薄い色が選ばれやすい
- アクセントカラーを決める：重要な要素に対する強調色。メインカラーの対比色（色相で反対の色）が選ばれやすい
画面全体のうち、ベースカラーを70％、メインカラーを25％、アクセントカラーを5％くらいにすると比率的にはちょうど良いらしいです。
4色以上使いたい場合
先ほど決めた3色のうちどれかの色を分割しましょう。
色相が同じでトーン(色調)が違う色、
あるいはトーンが同じで色相が違う色
を使うのが望ましいです。
色を決める為の便利なサイト
HUE/360がとても便利です。
理論をどうこうするよりここで色を決めることを習慣付ける方がきっと早いでしょう。
HUE/360紹介記事1：https://gigazine.net/news/20150730-hue-360/
HUE/360紹介記事2：https://www.internetacademy.jp/blog/ja/2016/04/20160420-hanabi.html
デザインガイドライン
以上のデザインに関する原則について、より具体的にサービスごとにルールとして落とし込んだものがデザインガイドラインと呼ばれるものになります。
iOSであればHuman Interface Guidelines、AndroidであればMaterial Designが有名でしょう。
これらのガイドラインを学習することで、優れたデザインを実現することが可能になります。
詳細については公式ドキュメントの他、色々な解説記事がありますのでそちらに譲りますが、こうしたガイドラインを学習するだけでもデザイナとの話についていくことができるようになると思います。
その他リンク
エンジニアがWebデザインを学ぶ際のスライド13選
Human Interface Guidelines
Material Design