Webデザインの要素を考察してみました【初心者がWebデザイナーになるために】

Webデザイン

フリーランスWebデザイナーのヨシコロです。
私はフリーランスのWebデザイナーとして10年以上活動してきました。

私は現在は受託業務がメインです。
受託業務は、Webサイトを作りたい、って方のWebサイトを制作、しています。
色んなシチュエーションでWebサイトデザインをしてきました。
クライアントさんから
「新商品発売だからランディングページ作りたいな」とか。
「Webサイトを数年前に作って、成約もあるけれどデザインが古くなってきたからリニューアルしたいんだよね」とか。

またWebデザインを外注する場合もあります。
その際の選考基準について、ある一定のデザインクオリティーや方向性で判断します。

正直「手を動かす」デザインスキルについては、自信のない私ですが、デザインを見る目や基準の経験値は積んできました。
どういったWebデザインがクオリティーが高いか、選定ポイントを書いてみます。

大前提として
Webデザインのクオリティーってセンスじゃなくてスキルです、
デザインのための技術が高いか低いかなので、
今読んでいる方が例えば1-3年くらいWebデザイン制作をやっていて、センスないなーとか思っていても、勉強と経験の年数を積めば、デザインクオリティーは上がっていきます。

※時々、Webデザイン経験年数は長いのにデザインクオリティーが上がってない人もいます。その方たちはトレンドキャッチアップやツールの勉強をしてきてないんだろうなー、と思います。(自分の戒めも含めて書いてます)

Webデザインのクオリティーを決める要素

Webデザインクオリティーの要素は以下だと思っています。

  • 構成のレイアウトパターン
  • バランス(フォントのサイズ、要素の余白)
  • 配色
  • イラストとアイコン、写真
  • フォントタイプ
  • 細部の作りこみ
  • 動き

上記のデザインの要素を決定するときに、頭にあるのは

この要素は想定のターゲット層にあうか?
この要素は会社のブランディングに適しているか?
この要素で担当者の方(ステークホルダー)に喜んでもらえるか?

ということを考えて作成しています。
詳しく説明します。

構成のレイアウトパターン

Webデザインのレイアウトパターンをどうするか。
このレイアウトパターンを決定すると、以下の要素もある程度決まってきます。

要素の構成はどうするか?

グリッドデザイン。
ブロークングリッドレイアウト。
シングルカラム、2カラム、3カラム。

※2018年位から最近は、シングルカラムのブロークングリッドレイアウト、の要望は多いように思います。

以下のような記事が参考になります。

https://baigie.me/sogitani/2015/02/pc-site-trend-2015/

ヘッダー部分、ロゴの配置やメニューの機能などをどうするか?

ロゴは大きくするか、小さくするか、配置は左右か中央か、
メニューはバーガーメニューにするか、ヘッダーに配置するか、日本語か、サブナビはどうするか、などを決定します。
この辺はIAもからんでくる要素で、ターゲットをどのようにおもてなしするか、ということなんじゃないかな、と思っています。

以下の記事が参考になります。

Webサイトで参考になる メニューのデザイン・レイアウトまとめ

フッターの要素はどうするか?

フッターの要素をシンプルにするか、ナビを詳細に配置するかなどは、SEOがからみますが、ページTOPへ戻る、等、この部分はデザインの遊びができる要素だなと思います。

コンテンツと同じテイストでデザインするか、逆にして締めるか、など色々考えられます。

全体のバランス(フォントのサイズ、要素の余白)

Webデザインは、フォントのサイズ・余白などが、初心者と上級者の分かれ道な感じがします。字詰めなどもやってるかどうかで全然印象が違いますよね。

h1とh3のフォントサイズのバランスや余白がきれいに設定されているか、などでWebデザインのクオリティーが変わってきます。

以下の記事などは参考にしていました。

https://blog.hubspot.jp/whitespace-web-design

https://ameblo.jp/ca-1pixel/entry-11837685575.html

https://ferret-plus.com/6752

Bootstrapなどはすごくよく考えられているなーと思います。
WIXやBASEなどもある程度余白などがきれいに設定されていて、勉強になります。

配色

昔は、「初心者は色を多用しすぎる、グラデーションなども使いすぎる」といわれていましたが、私は、それを意識しすぎて地味で硬い印象のサイトを作ってしまっていました。

配色は訓練ですが、
彩度が強い色は小さく使う(一般的には多く使いすぎないほうがいい)、明度を調整した色を使う、コントラストで文字などは視認性を意識する、などは気を付けています。

あと、デザインしたあと、時間を少しおいて、参考サイト他サイトをみてから見直してみる、ということはよくやります。(作業中と使用の時の印象が違うので。)
ある程度知見がある他の人にみてもらう、というのも有効かと思います。

イラストとアイコン、写真

イラストやアイコン、写真を使う場合もWebデザインの配色と合わせる必要があります。

フォントタイプ

フォントタイプ、ゴシックを使う場合は、ゴシックで統一、明朝を使う場合は明朝体で統一、が基本ですが、タイトルは少し遊びをつける、などは上級なデザインかと思います。

私は、グーグルやアドビのWebフォントを使用することもあります。
(速さには注意ですが。)

細部の作りこみ

背景等のテクスチャーやライン、透明度、グラデーションなどを使うことで奥行きなどがでてくるので、最後につけることも、最初につけよう、と思って進めることもあります。

動き

メニューやボタン、表示の動かし方、その点はコーディングになりますが、デザイン要素にもかかわるので、どういった動きをするか、に合わせてデザインすることはWebデザインにとって重要になってきます。

Webデザインの要素・まとめ

私は、クライアントやディレクターさんと話しながら、上記要素をどうするか?というのを表現するのがWebデザイナーの仕事かと思います。
初心者の方は上記要素を考えながらデザインすることがWebデザイン上達の道だと思います。

私もWebデザイン、少しずつ精進していきたいな、と思います。