この章では、コーディングしやすいデザインの考え方を学びます。
Webデザインは、最終的にHTML、CSS、JavaScriptなどで実装されます。
そのため、見た目がよいだけでなく、実装しやすく、あとから直しやすいことも大切です。
実装しやすいデザインとは
実装しやすいデザインとは、ルールが整理されていて、画面幅や内容の変化に対応しやすいデザインです。
たとえば、次のような特徴があります。
- 余白のルールがある
- 文字サイズの階層が整理されている
- ボタンやカードの見た目が統一されている
- 画像比率が決まっている
- PCとスマホの見せ方が考えられている
- ホバーやエラーなど状態違いがある
- テキスト量が変わっても崩れにくい
デザインが整理されているほど、コーディングも安定します。
余白ルール
余白がすべて感覚で決まっていると、実装時に迷いやすくなります。
たとえば、見た目上は似ていても、実際には 23px、31px、47px のように細かくばらついていると、CSSのルールに落とし込みにくくなります。
余白は、ある程度の単位でそろえると扱いやすくなります。
- 8px
- 16px
- 24px
- 32px
- 48px
- 64px
実際の数値はプロジェクトによります。
大切なのは、余白に意味とルールがあることです。
文字ルール
文字サイズや太さも、階層ごとに整理します。
たとえば、次のように決めます。
| 種類 | 例 |
|---|---|
| ページタイトル | 40px / 600 |
| セクション見出し | 28px / 600 |
| 小見出し | 20px / 600 |
| 本文 | 16px / 400 |
| 注釈 | 13px / 400 |
毎回別のサイズを使うと、CSSが増え、見た目もばらつきます。
文字の役割ごとにルールを作ります。
コンポーネント化
コンポーネントとは、再利用できるパーツのことです。
Webデザインでは、同じようなパーツが何度も出てきます。
たとえば、次のようなものです。
- ボタン
- カード
- セクション見出し
- タグ
- フォーム入力欄
- CTA
- 記事一覧
同じ役割のパーツは、同じルールで作ると実装しやすくなります。
逆に、同じボタンなのにページごとに色、余白、角丸、文字サイズが違うと、CSSが複雑になります。
状態違い
実装では、通常状態だけでなく状態違いも必要です。
デザイン段階で状態違いを考えておくと、実装時に迷いにくくなります。
たとえば、次のような状態です。
- ボタンのホバー
- リンクのフォーカス
- 入力欄のエラー
- 入力欄のフォーカス
- 無効状態
- メニューの開閉状態
- 現在地のナビ表示
状態違いがないと、実装者がその場で判断することになります。
簡単でもよいので、状態のルールを用意します。
画像サイズと比率
画像は、実装時に扱いやすいサイズや比率を決めます。
特に、一覧ページでは画像比率をそろえると実装しやすくなります。
確認したい項目は次の通りです。
- カード画像の比率
- メイン画像の比率
- スマホ時のトリミング
- アイコンのサイズ
- ロゴの表示サイズ
- 画像が増えた時のルール
画像の比率がばらばらだと、一覧の高さが崩れやすくなります。
SPデザイン
PCデザインだけでは、スマホ時の判断が足りないことがあります。
最低限、スマホでは次のことを考えます。
- 横並びをどう縦並びにするか
- 順番を変えるか
- 余白をどのくらいにするか
- ボタン幅をどうするか
- メニューをどう表示するか
- フォームをどう並べるか
- 画像比率を変えるか
実装者が迷いやすい場所は、デザイン段階で決めておくとスムーズです。
テキスト量の変化
Webサイトでは、あとからテキスト量が変わることがあります。
特に、WordPressやCMSで更新するページでは、タイトルや本文が増えることがあります。
確認したい項目は次の通りです。
- カードタイトルが2行になっても崩れないか
- ボタン文言が少し長くなっても入るか
- お知らせタイトルが長い場合どうするか
- 画像がない記事がある場合どうするか
- タグが増えた時に折り返せるか
固定の見た目だけでなく、内容が変わった時も考えます。
よくある失敗
実装しづらいデザインでよくある失敗は、次の通りです。
- 余白が場所ごとに細かくばらばら
- 同じボタンなのに見た目が毎回違う
- ホバーやエラー状態がない
- スマホ時の配置が決まっていない
- 画像比率が統一されていない
- テキストが増えた時の想定がない
- コンテンツ幅のルールがない
デザイン段階でルールを整理しておくと、実装後の手戻りを減らせます。
この章のまとめ
- コーディングしやすいデザインは、ルールが整理されていて変化に強い
- 余白、文字、ボタン、カード、画像比率に一貫性を持たせる
- ホバー、フォーカス、エラーなど状態違いも考える
- PCだけでなくスマホ時の配置や順番も決める
- 次の章では、完成したデザインをチェックして改善する方法を学ぶ