UIデザインにおけるビジュアルデザイン

UIデザインだけではなく普通のデザインにおいても、ビジュアル要素はとても大事であると思うので今回noteに書こうと思いました。これはいろんな本を読んだ時のメモや自分で勉強してきたことをまとめています。

色彩


サービスが与える印象を決める最も影響力のある要素の一つ。配色によってユーザーのファーストインプレッションを大きく左右します。また文字のコンストラストも重要である。

ブランドカラー

どうようなユーザーをサービスの対象にするか、性別、年代、作りたいサービスやプロダクトのイメージを元にブランドカラーを決めます。

ブランドカラーの設定するときメインカラーとアクセントカラーを決めるのがオススメ。これは3色以上の配色で画面を考えるのは煩雑になるため

ガイドラインと色彩
色の組み合わせを考える際は色の違いだけで表現するのではなく明度の差を使うなど、あらゆるユーザーが使うことを想定する



次に使用する国や文化によって、色のイメージが違うことを把握しておく。国によっては赤が肯定的なイメージの国もある。その使われるであろう地域などがその色がどんなイメージ・メッセージを持つかあらかじめ認知しておく必要がある

タイポグラフィ

色彩と同様にサービスのイメージを作るといっても過言ではない
色彩では種類を絞ってする感じでしたがこれも同様でまず軸となるフォントを選ぶ。日本の場合は和文と英文があるためそれぞれサービスのイメージに合うように選ぶ
一方で文字はアクセントにもなるのでサービスの雰囲気にになるのであれば個性的なものも選んで良い

システムフォント

スマートフォンやPCのOSが指定しているフォントでデザインしてもそのフォントの種類がOSに入っていないとフォントのデザインにが勝手にそれに変えられてしまう。それを理解した上でデザインはする必要がある。
どうしてもそのフォントを使いたい場合はGoogleフォントなどWebフォントを使うと良い

文字の大きさとジャンプ率
文字のジャンプ率とはサービス内や画面内の文字の大きさの差のことである
伝えたいメッセージに合わせて「特大・普通・特小」とジャンプ率はしっかり意識した上でデザインする

文字の太さ
場合によっては文字の太さを変えてその文字を強調したりするのもよい
基本的に標準とboldで表されるが太くしすぎてもっさりした感じになるのは気をつけるようにする

文字の色
ユーザーに見えやすくするためにコントラストがついた色を使う必要がある
文字の色は増やしすぎないようにし、実際のサービスで削除などの破壊的なもじは赤色のように実際に使われている色に統一する。またディスプレイの明るさを変えた時に見えにくくならないようになども気をつける必要がある。

レイアウト

コンポーネントや文字をどう配置するかを考える。
コンポーネントや文字がしっかりできていても配置が悪ければ意味がない
ユーザーの操作性を考えた上で論理的に考える

グルーピング
各要素をグループ分けにして配置することにより、どこに何があるのかユーザーが認識しやすいようにする。大きい要素から小さい要素にしていく。
各グループは出来るだけ辺を揃えるようにする。これをグリッドレイアウトで解消される。

余白

グルーピングをした時に関係性が近いものは近くに関係性が遠いものは離して配置します。余白をうまく活用して囲みや罫線が減らすことができシンプルな見た目にすることができる