HTML/CSS

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

デザインの基礎知識

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

  1. デザインの4原則
  2. 色の知識

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

デザインの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つをあげます。

  1. パーツ単位でWebサイトを参考にする
  2. 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で簡単におしゃれなデザインをつくることができるということを覚えておきましょう。

Webデザインの学び方を2つ解説

Webデザインの学び方として以下の2つを挙げます。

  1. 本を読む
  2. ギャラリーサイトを見る

本を読む

Webデザインを学ぶ方法の1つ目が、本です。

本は、まとまりがあり、見たいときにさっと目を通すことができます。また、本で理解できるとしたら、動画の情報より早く学べるというメリットもあります。

Webデザインを学ぶときは以下の本がおすすめです。

なるほどデザイン

Webデザインの本ではありませんが、デザインの本質が学べ、結果的にWebデザインに生かすことができます。絵や図がたくさん使われていて理解しやすい一冊になっています。また、なるほどデザインの公式サイトを見るとどんな本かわかりやすいです。

ギャラリーサイトを見る

Webデザインを学ぶ方法の2つ目が、ギャラリーサイトを見ることです。

ギャラリーサイトを見ることで、色々なWebサイトのデザインをインプットすることができます。このときに、Webページのパーツごとにデザインを見てみてください。

ギャラリーサイトとしては以下の2つがおすすめです。

MUUUUU

LP幹事

ぜひ、ギャラリーサイトをチェックして、様々なWebデザインをインプットしてみてください。

まとめ

いかがでしたか?

HTML/CSSでWebページをつくる際のデザインについて理解が深まったことでしょう。

デザインをつくるためのマインドやテクニックをぜひ覚えておいてください。

また、今回の知識をもとに、Webページのデザインを実際にしてみてください。