# 【エンジニア向け】失敗しない Web デザインのコツ

「知識があること」と「実際にできること」には大きな壁があります。

エンジニアにとって最も顕著にそれを感じるのは CSS であり、画面のデザインなのではないかと思ってます。


ある程度規模のあるチームなら、デザインチームと開発チームが分かれていたりするかもしれませんが、 小規模であればあるほど、プログラマが CSS を書かなければいけない場面というのは多いと思います。

通常、エンジニアがフルスクラッチで CSS を書くことはあまりないと思うんですが、Bootstrap や Bulma などの CSS ライブラリを使用したところで

CSSは分かってるのにデザインが全然決まらない！！

なんてことはよくあると思います。

この記事では、そんな頭では分かってるのに何故かうまくデザインできないエンジニア向けに、 失敗しないデザインのコツをご紹介したいと思います。

# コンテンツは全てカードにまとめる

カードとは、白背景のシンプルな div のボックスです。

Bootstrapや Bulmaなどの CSS フレームワークの他、 Vuetify, Material UI といったフロントエンドのコンポーネントライブラリなどにも用意されている標準的な要素で、 Web ページのコンテンツの基本単位になります。

ページレイアウトを組み立てる際には、まずカードを並べてその中にコンテンツを詰め込んでいくようにしましょう。 単純な文字列や文章はもちろん、フォーム、リストにテーブルまで、どんな内容も全てカード の中に入れ込みます。

Vuetifyでのカード使用例 
<!-- Vuetifyでのカード使用例 -->
<template>
  <v-layout>
    <v-flex xs12 md8 xl6>
      <!-- 検索窓 -->
      <v-card>
        <v-card-text>
          TODO: 検索フォーム
        </v-card-text>
      </v-card>
      <!-- 記事一覧 -->
      <v-card>
        <v-card-title>記事一覧</v-card-title>
        <v-card-text>
          TODO: 記事一覧
        </v-card-text>
      </v-card>
    </v-flex>
  </v-layout>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

そうしてカードをレイアウトの基本単位とすることで、 デザインに一貫性が生まれ、関連性のあるコンテンツが一か所にまとまり、ユーザーエクスペリエンスが向上します。

また、カード単位でコンテンツを制作していれば、 カード丸ごとコンポーネント化してしまうこともできるため、保守性の向上も見込めますね。

このブログでは CSS フレームワークなどは使用していませんが、 .main-div という class がカード要素になっています。 開発者ツールで検索をかけてみれば、その汎用性の高さを感じられると思います。

まずは全てのコンテンツをカードにまとめることから意識してみましょう。

カード要素を活用しよう！

  • デフォルトが白背景のため、黄色以外のどの色とも相性が良い
  • パディングが設定されているので、無調整でも見やすいコンテンツを作ることができる
  • 枠が揃っているため、縦横の並びが揃う
  • 画像やリスト、テーブルなどとも組み合わせられるようになっており、統一感が出せる

「カード」の参考リンク

余談

ぶっちゃけていうと、カードにコンテンツを収めるだけでデザインって綺麗になります。

これより下は書くこと思いつかなくて無理やり絞り出したものなんで、参考程度に見ていただければ。。。

# 境界線を引く

近い関係のものは近くにまとめることが鉄則ですが、関係が近くても明確に別の要素と分けて配置したいという場面があると思います。

  • 単価と合計金額
  • 見出しと内容
  • カテゴリ検索とキーワード検索
  • リアルの嫁と2次元の嫁

こうした "近いけど別物" な要素は、同じカード内にまとめて境界線で区切るのが有効です。

境界線には下記の要素を使います。

  • タグ
  • border
  • box-shadow
  • fieldset
  • text-decoration

# 単価と合計金額

ECサイトなどでよくある、「商品名、数量、単価」の並びを一覧にしたものなど。 合計金額は単価と同じ列にすることも多いかと思います。

<li> や <table> タグはデフォルトで border などが設定されていることも多いのですが、 商品同士の行と、合計の行とは明確に別物ですので、そこの区切りは分けたいところです。

そんな時は、 境界線の濃淡をつける ことで関係の強さを分けます。

  • border-color を #999 と #333 で分ける
  • border-style の solid double dashed dotted で強弱を調整する
  • border-width で太さを変える

border のプロパティを調整し濃淡を付けてあげることで、区切りが明確になります。 これは日ごろからエクセルやスプレッドシートで表などを作っている方には当たり前のテクニックですね。

TIP

単価と合計金額の場合、合計金額の文字サイズを大きくしたり色を変えたりして目立たせる方法もよく見かけますね。

# 見出しと内容

こちらは <h1> <h2> などのヘッダ要素に限らず、カードタイトルのような見出し要素も含みます。 PC版でしか見えませんが、このブログで言えばサイドバーにある「カテゴリ一覧」「タグ一覧」のような見出しですね。

こちらもほとんどの場合 border-bottom で事足りますが、 <hr> や text-decoration を使った装飾も使われたりしています。

また、見出しの文章とは独立して transition を設定したい場合など、 ::before や ::after などの疑似要素と絡めて独自の動きを付ける場合などもあります。

**サイト上で動きを付ける場合、UXを損なわないことが絶対条件**

ですので、文章全体ではなく下線だけを動かすというのは、UXを損なわずに視線を寄せられる良い手法だと思います。

# カテゴリ検索とキーワード検索

こちらはフォームの部品で、カテゴリ検索は「□雑記 □日記」などチェックボックスで複数選択できるフォームだとします。

同じ検索フォームですから同一カード内に収めたいけれど、 雑多に並ぶカテゴリ選択のチェックボックスはキーワード検索の窓とは別物として区切る必要がありますね。

そんな時には <fieldset> タグの出番です。

フォームの部品を一か所にまとめると同時に、 <legend> でそのまとまりにタイトルを付けることができます。 そして見た目がすっきりしていてカッコいい。

たくさんのラジオボタンやチェックボックスが並ぶ時や、一部のフォーム部品をまとめたい場合など、 ここぞという場面で使ってみてください。

# リアルの嫁と2次元の嫁

こういうのがあります。

# 通知には動きを付ける

保存・送信処理が完了したときや、失敗したときのエラーメッセージ、バリデーションエラーなど、 ユーザーに対しての通知が必要な場面があります。

これらの通知はできるだけ動きを付けてあげましょう。

お役所系のWebサイトにあるお申込みフォームなど、 必須項目が分かりづらかったり、バリデーションエラーに気付かずボタン連打したりしてることがよくありますよね。（え、俺だけ？）

エラーがあったことをトーストで通知したり、バリデーションチェックが通らなかったフォーム部品が赤色に変化したりすることで、 ユーザーのミスが減ることが期待できます。

ちなみに僕がVueでバリデーションを行う際はVeeValidateというライブラリを使ってます。 少し高機能すぎるのが難点ですが、Laravelのバリデータと構文が似ているので、慣れると使いやすくてお勧めです。

TIP

  • 画面外からニョキっと出てくる通知のことを トースト と言います。
  • 僕がメインで使ってるフロントエンドフレームワークはVuetifyですが、 VeeValidateとの連携にも対応しているので、一度試してみるのをおすすめします！

# まとめ

ぶっちゃけて言えば、「コンテンツは全てカードにまとめる」が僕が持ってるコツのほぼ全てです。

これさえ守れば手軽にまとまったページが作れるので、ぜひ意識してみてください。 UI構築が爆速になるのを実感できると思います！