エンジニアもUIを気にしてみる
はじめに
ハッカソンに出たり個人開発しようとするとエンジニアでも UI を考えなければいけない時があると思います
ある程度 UI を整えたり、見た目よくしたい時に自分がよく使う方法を紹介します
ある程度の画面幅には最低限対応する
さっそくデザイン的な話ではないですが、重要なことです
レスポンシブデザインという言葉を聞いたことがあるでしょうか？
簡単にいうと、スマホ・タブレット・パソコンなど画面サイズが違う状態でもそれぞれでちゃんと表示されるようにすることです
こういう時 CSS でメディアクエリで指定するのを考える人も多いかもしれません
もちろん、レイアウトの変更が必要な場合などは大きく変えるためには必要です
ただそこまではやらなくても、パソコンという中にも大きい外部ディスプレイを使う場合とノートパソコンの小さめの画面で見る場合もあります
なので、そのくらいは意識せずとも対応できているといいですよね
自分はページ全体で以下のような CSS を手グセのように書くようにしています
自分はReact + TailwindCSSの組み合わせでよく使うので、そのコードとノーマルな CSS のコードを書いておきます
<div className="max-w-screen-lg m-auto px-6">...中のコンテンツ</div>
.page {
max-width: 1024px;
margin: auto;
padding: 0 24px;
}
ポイントはページ全体のmax-widthを指定していることです
この幅はそれぞれのコンテンツによりますがこのように指定することで
- 大きめの画面 → 最大幅より広がらない
- 小さめの画面 → 最大幅より小さくなったら合わせて縮む
という感じで多少の画面幅の違いに対応することができます
それに伴って、最大幅より大きい時に画面の中央に表示するためにmarginをautoにします
そして最大幅より小さい時には横に余白を設けるためにpaddingを少しつけています
width や height に固定値は必要最低限
固定値というのは、100pxや2remなどの値です
これらの値をただ書くのは避けたほうがいいということです
なぜなら、画面サイズが変わってもそのオブジェクトのサイズは変わらないからです
具体的にどういうデメリットがあるかというと、width: 1000pxとした div タグがあるとして画面幅が800pxになったらはみ出してしまいます
このコンテンツが何かのフォームだったら、入力欄が欠けて見えたり、ボタンや文字が隠れてしまう可能性があります
そしてheightを指定すると、画面幅が小さくなった際に文字が折り返しされると文字がはみ出すか文字が隠れて意図した見え方とは変わってしまう場合がありますね
でも全てにおいて悪というわけではありません
背景画像ではみ出してもいいものや切り抜いて使う画像、小さいパーツ(アイコン、ボタン)などはwidthやheightに固定値を指定することも多いです
大きい要素は特に固定値の代わりに、max-widthという最大幅やmin-heightという最小の高さ、%で可変の値などを指定することがおすすめです
色はなるべく少なく
配色も悩みですよね
よく 3 色にするとか言いますが、とりあえずメインカラーだけを決めることをおすすめします
無彩色(白・黒・グレー)は OK です
むしろグレーほど便利なものはないですよ
なぜメインカラーだけにするのかというと、配色を考えるのは難しいですし(トーンを揃えたり、割合考えたり)、結局エラーメッセージや成功メッセージなどを追加すると赤や緑は必然的に使うことになるからです
メインカラーとグレーでやってみるとごちゃごちゃせずにいい感じになるはずです
ただこのときコントラストには注意してくださいね
値は 8 の倍数にする
デザインを学ぶと出てくるのですが、基本的に値を 8 の倍数にすると整ったデザインになるというものがあります
ちゃんとしたデザイナーさんの場合は意図してこのルールを崩したりしますが、素人は基本ルールに従いましょう
要素の大きさ、余白、フォントサイズなどで使います
でも 8 の倍数だけだとフォントサイズとかの小さいコンテンツの値がしづらいです
なので、細かくする場合は半分の 4 の倍数を使います
12px, 16px, 20px, 24px, 32px, 36px... など
余白などは細かくても 4 の倍数ですが、フォントサイズの場合は主要なものに 14px や 18px もあります
ちなみに自分の好きな TailwindCSS だと元から 4 か 8 の倍数がベースとなっているので、何でも入力できる普通の CSS よりむしろ良い制約だと思っています
デザインの 4 原則 「近接」「整列」「反復」「対比」
デザイン学んでると必ず出てくるであろう基本中の基本です
でもこれは別にデザイナーでなくても知っておく方がいいと思います (難しいものでもないので…)
調べたら色々詳しく出てくると思うのでぜひ見てみてください
まとめ
今回はガッツリデザインをやらなくても、コーディングするときに少し気にすると UI がよくなるかもという tips を紹介しました
自分はデザインはまだまだ学び中ですが、整ったバランスのいいデザインはセンスじゃなくて知識だと知ったので、エンジニアでも活用してもらえればと思います
Discussion