前提
部内での勉強会にて取り扱ったデザインについての話です。
社内にデザイナーは居るのですが、管理画面等デザイナーが関与していない画面を作る際などに知っててよかったことをまとめました。
ここでは「デザインとは機能である」を前提としています。
「Design is not just what it looks like and feels like. Design is how it works.」
スティーブ・ジョブズ
https://www.clairworks.com/words/detail/195
目的を達成するためにどんなデザインが適しているのかを考え実践するための足掛かり的な記事です。
フォント
ゴシック体・明朝体なんかは学校で習った気もしますが、それぞれには可読性・誘目性・判別性といった特徴があります。
知っておくことでその場にあったフォントを選択できるようになります。
基本的な書体
- ゴシック体
- 明朝体
基本的な欧文書体
- セリフ
- サンセリフ
視覚の3要素
- 可読性 読みさすさ
- 誘目性 目につきやすさ
- 判別性 誤読の少なさ
色
色選びって難しいですよね。
何も考えずに選ぶと、濁ったような色になったり。（経験談）
美術の授業で習った内容ですが、色の３要素をしっかり理解して扱えるようになれば上記のような事故は防げるかもしれません。
- 色相 色味
- 明度 明るさ
- 彩度 鮮やかさ
さらに、色から受け取る印象についても調べてみましょう。
個人的には、AdobeColorを利用してたりします。
トレンドや探索のタブからイメージに合ったものを探したりしています。
配色
初心者でも簡単にできる色の決め方として、
- ベース Webページの背景などに使用
- メイン 対象のテーマなどから決める
- アクセント そのまんまアクセントカラー
を決めるというやり方があります。
簡単にまとまった配色ができるので知っておいて損はないと思います。
レイアウト
デザインの４原則
コンテンツの配置とかで迷うことありますよね。
良いデザインを作るために知っておきたい4原則があります。
- 近接 関連性の高いものを近くに配置しよう
- 整列 要素を揃えよう（左揃え、中央揃えなど）
- 反復 同じ要素を繰り返し利用しよう
- 対比 情報に優先順位をつけよう
やりがちな失敗としては、何でもかんでも中央揃えにしてしまうというのがあります。
意図した中央揃えではなく、文章を読ませるようなコンテンツの場合は、左揃えにするのが無難です。
4原則を適用してみたけど、なんだか微妙な気がする。
そんな時は👇の記事を参考にしてみてください。
大事な余白や配置の話
読みやすいデザインにするには、余白が大事です。
例えば、余白が全くなかったり行間を詰めすぎたりすると読みにくいものになってしまいます。
その他参考サイト
Discussion