HTML/CSS
html
デザイン

【HTML/CSS】Webデザインの基本(結論: 誰に伝えるか考える)

2021/04/27

( 更新日：2022/04/19 )

「HTMLとCSSでおしゃれなデザインをつくりたい！」と思ったことはありませんか？

Webページをつくるときは、デザインの要素も重要になってきます。

この記事では、Webデザインの基本から、デザインをつくるテクニック、デザインの学習方法を解説していきます。

まずは、デザインの基本からみていきましょう。

【HTML/CSS】Webデザインの基本(結論: 誰に伝えるか考える)

まず、Webデザインにおいて一番大切なことは「そのデザインを誰に伝えるか考えること」です。

正直いうと、これはWebデザインに限らず、ほかのどんなデザインに関してもいえることです。

また、そのマインドをもちながらデザインの基礎知識も固める必要があります。

「デザインを誰に伝えるか考えるマインド」と「デザインの基礎知識」があると、どういったデザインをつくればいいかがある程度分かります。

デザインを誰に伝えるか考える

デザインを誰に伝えるか考えるときは、具体的に考えましょう。

そうすることで、デザインがぶれなくなります。

たとえば、「このWebサイトのターゲットは、30~40歳の男性で、職業はエンジニアで、収入は〇〇万円で、住んでるところは×××で、△△△という悩みを抱えていて…」という風にさまざまな側面から、伝える相手を具体的にイメージしましょう。

伝える相手をしぼるときは5W1Hを考えるとイメージしやすいです。

5W1Hとは、「Who(だれに)、Why(なぜ)、 What(何を)、 When(いつ)、 Where(どこで)、 How(どのように)」のことです。

デザインを誰に伝えるか考えるときは、具体的に考えるということを覚えておいてください。

デザインの基礎知識

デザインの基礎知識として以下の2つが挙げられます。

デザインの4原則
色の知識

それぞれ解説していきます。

デザインの4原則は、「近接、整列、反復、コントラスト(対比)」です。

これらを使うことで見やすいデザインが生まれます。

図で説明すると以下のようになります。

近接とは、「同じグループのものを近くに置く」ということです。HTMLで同じidやclassの中に書き、CSSでmargin(余白)を入れるとグルーピングできます。

整列とは、「列をきれいに合わせる」ということです。たとえば、HTMLのliタグ(リストタグ)を使ったり、CSSのmarginをそろえることなどで整列させることができます。

反復とは、「同じものをくりかえす」ということです。たとえば、HTMLでclassをつくり、同じCSSを適用させて、要素を複数配置するなどで反復することができます。

コントラスト(対比)とは、「メリハリをつける」ということです。たとえば、HTMLのhタグ(見出しタグ)を使ったり、CSSのfont-sizeやfont-weightで文字の大きさや太さを変更してメリハリをだすことができます。

色に関しては、「色相、明度、彩度」を覚えておきましょう。

ちなみに、色相は「色のちがい」、明度は「色の明るさ」、彩度は「色の鮮やかさ(原色への近さ)」のことです。

また、色がもつイメージや印象を考えることも大切です(黒は高級なイメージ、青は誠実なイメージなど)。

Webページをつくるときの色のつけ方に関しては、以下の記事で解説しています。

【CSS】background-colorとは？【使用されるときの例も解説】

以上のデザインの基礎知識を覚えておきましょう。

簡単におしゃれなデザインをつくる2つのテクニック

簡単におしゃれなデザインをつくるテクニックとして以下の2つをあげます。

パーツ単位でWebサイトを参考にする
CSSフレームワークのBootstrapを使用する

それぞれ説明していきます。

パーツ単位でWebサイトを参考にする

簡単におしゃれなデザインを作るテクニック1つ目は、「パーツ単位でWebサイトを参考にする」ということです。

おしゃれなデザインを、全くの一から考えるのは労力がかかります。

しかし、すでにあるサイトを参考にすることで効率よくデザインをつくることができます。

このときポイントになるのが、「部分ごとにデザインを参考にする」ということです。

たとえば、ボタンのデザインだけに注目する、ナビゲーションバーのデザインだけを参考にする…といった感じです。

デザインをつくるときは、ぜひ他サイトのページのパーツに注目してみましょう。

CSSフレームワークのBootstrapを使用する

簡単におしゃれなデザインを作るテクニック2つ目は、「CSSフレームワークのBootstrapを使用する」ということです。

Bootstrapを使うことで、すでにつくられたボタンなどのスタイルを読み込んで、デザインを簡単に実装することができます。

例えば、以下はBootstrapを使ってつくったボタンになります。

コードは、下のHTMLのコードだけになります(BootstrapのCSSを読み込んでいるため)。

<button class="btn btn-primary">BUTTON</button>

ただ、Bootstrapだと、Bootstrapでつくった感じが出てしまうので、多用するのはひかえましょう。

Bootstrapは、公式サイトからダウンロードするか、下のCDNのコードをHTMLファイルに貼り付けると使えるようになります。

<link
  href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css"
  rel="stylesheet"
  integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1"
  crossorigin="anonymous"
/>
<script
  src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js"
  integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW"
  crossorigin="anonymous"
></script>

Bootstrapで簡単におしゃれなデザインをつくることができるということを覚えておきましょう。