デザインとは

「デザイン」の基礎的な話を紹介します。
繰り返しになりますが、「デザイン」と聞いて「センスがないから……」となる必要はありません。
論理的に詰めていけば「良いデザイン」を作ることができます。

ここでは要素の中でも筆者が重要だと思った「色」「フォント」「配置」について扱います。

色

色は視認においてとても大事な要素です。

色の三属性

色は色の三属性というもので決まります。

「色相」は赤・黄・緑・青のように、色を特徴づける色みのことです。 「彩度」は色の鮮やかさを指定するもので、高いと鮮やかに、低いと混じり気のあるくすんだ感じになります。 「明度」は色の明るさのことで、高いと明るく（白っぽく）、低いと暗く（黒っぽく）なります。

なお黒と白やその中間である灰色は「彩度」を持たず、無彩色と呼ばれます。

この原色大辞典のカラーピッカーではこれらをいじって色を見ることができます。
左の正方形の左右が「色相」、上下が「彩度」、中央の長方形の上下が「明度」をそれぞれ表しています。

色の使い分け

色を使いすぎるとカオスになってしまいます。
基本的に無彩色（黒・白・灰色）を除いて、2 色か 3 色に絞ると良いでしょう。

3 色の場合、1 番多く使う色を「メインカラー」、2 番目を「サブカラー」、3 色目を「アクセントカラー」などと呼ぶことがあります。
これらを 6:3:1 くらいの割合で使うことで「良い感じ」になるといわれることがあります。

コントラスト

色相・彩度・明度の差のことをコントラストと言います。
コントラストを上げる（強める）ことで強調できますが、やりすぎると見にくくなったりしてしまいます。

カラーユニバーサルデザイン

日本人男性の場合、20 人に 1 人の割合で色弱者がいると言われます。
配慮するにこしたことはないでしょう。

カラーユニバーサルデザインは難しいものですが、「UNO」のように色で判断しないといけないものが色弱者にとって難しいと言われているので避けると良いでしょう。

有彩色同士を重ねない、色相だけでの判断を必要にしない、といったことが大事です。

東京都の作成したガイドラインが参考になります。

フォント

フォント、すなわち字体は様々あります。

日本語の場合、多くは明朝体とゴシック体に分けられます。

一般にゴシック体が読みやすいと言われており、本文はゴシック体にすると良いでしょう。

特にこだわりがなければ、見出し用と本文用で 2 種類に抑えると良いでしょう。

配置

配置において大事だとされるのは「整列」「近接」「反復」です。

「整列」はバラバラに置くのではなく、基準を引いて綺麗に並べるということです。
これによって整った印象を与え、カオスにならなくなります。

「近接」は情報の性質や意味が同じものがグループとして見えるように近くに配置することです。
これは逆に、情報の性質や意味が異なるものはグループとして見えないよう、距離を離すことが大事ということです。

「反復」は全体を通して同じ色・フォントの使い方や配置を心がけることです。
似たタイプのページであれば、デザインも似ている方がいいでしょう。
これは逆に、違うタイプのページの場合、デザインは似ていない方がいいということになります。

余白

余白が少ないとゴチャゴチャした印象を与えたり、情報を読み取りにくくしたり、誤操作を起こしやすくしたりします。

余白（margin と padding）を適宜使うことでより洗練されたものができます。

まとめ

色でもフォントでも配置でも、「カオスにならないように」という話が出てきました。
これはデザインにおいてとても大事な要素です。
カオスなものを作る場合を除いて、統一感を持たせるため、上で述べたようなことを守りましょう。

ウェブデザインの勉強の仕方

ここでは基礎的な要素について述べました。

これからウェブデザインの勉強を進めていく上では、これらの原則を意識しながら良いと思うウェブサイトを観察することでしょう。

また、アンチパターンを覚えることはデザインに限らず、コーディングにおいても大事です。
少しずつ調べたり、本を読んだりして知っていくと良いでしょう。

デザイン指針

Google が提唱するマテリアルデザインや Apple のサービスで目にすることが多いフラットデザイン 2.0など、統一感を持ったデザインをするための指針（デザインシステム）が公開されているものがあります。

特にマテリアルデザインは公式ガイドラインがわかりやすいので一読の価値あり、です。

デザインに役立つもの

ウェブデザインについて紹介してきましたが、最後に簡単にウェブデザインに役立つツールを紹介します。

Adobe XD などのプロトタイピングツールはコードを書くことなく、デザインを作ってみることができて便利です。
僕は Adobe 社の製品が大好きなので Adobe XD を使っていますが、他にも無料で使えるものも含め多数あるので調べながらつかってみるとよいでしょう。

CSS フレームワークまたはUI フレームワークは CSS をほとんど書くことなくいい感じのウェブデザインにしてくれるものです。 Vuetify や Bootstrap などが有名でしょう。
調べて実際に使ってみると良いと思います。