【脱素人】Webデザインが上手くなる方法【5つのポイントとテクニックも】

1,231view

【脱素人】Webデザインが上手くなる方法【5つのポイントとテクニックも】

「Webデザインがなかなか上手くならない…」
「参考サイトのようなクオリティのデザインができない…」
「上司やクライアントからデザインのOKがでない…」などなど
自分も以前は上記のような悩みを抱える日々が続いていました。今回はそんなWebデザインで悩めるデザイナーが少しでも楽になれるような、Webデザインが上手くなる方法を5つのポイントをご紹介します。

CONTENTS

Webデザインが上手くなる方法

自分は現在(2020年)Webデザイナーとして8年目になり、ギャラリーサイトに載ったり、雑誌に名前が掲載されるようになってきました。
しかし新人時代はよく、「ダサすぎ」「もっとデザインして」「これなに?」などと言われることもしばしば…
これを実践すればすぐにデザインが上手くなる!って方法は正直ありませんが、自分が経験した中で実際にデザインが上手くなってきたなと実感が湧いた瞬間はありました。そのときに実際にやっていた(今も)コツやポイント、テクニックをまとめてみました。

  • その① ワイヤーフレーム通りにデザインしない
  • その② 方向性を決める
  • その③ 文字、色、見出し、余白のルールを決める
  • その④ 時間を意識する
  • その⑤ デザインの見せ方

です。

具体例を交えつつご紹介しますね。

その① ワイヤーフレーム通りにデザインしない

これはデザイナーあるあるで、新人のデザイナーがよくやってしまうパターンです。
デザインしたあとに上司に確認してもらう際「これワイヤーと同じじゃない?」「デザインした?」などと言われてショックを受けるやつです。。
ワイヤーの時点で少しデザインされているとそれにデザイナーが引っ張られてしまいワイヤーと似てしまうというパターンもあります。
そうならないためには、ディレクターにどこまでが指示で、どこまでデザインしていいのか事前に確認しましょう。
ディレクターに事前に確認するもっとも重要なポイントは下記です。

  • レイアウトは変更しても大丈夫か?(2カラム、3カラムの部分など)
  • キーカラーやトーン&マナーは変更しても大丈夫か?
  • クライアントから必ず入れて欲しい要望、要素は何か?

などです。
制作会社によっては細かくリスニングシートなどに書いて指示が書いてある場合もあれば、こんな感じでと大造りなワイヤーフレームを渡される場合もあります。事前に確認せずにデザインしてから、「ここはこうだよ」っと言われた場合、修正に時間が掛ってしまい自分の負担が増えるだけなので必ず確認しておきましょう。

その② 方向性を決める

ディレクターに確認したら次はデザインするところですが、まだこの時点ではデザインしません。
サイトの方向性を自分なりに決めます。
具体的にはトーン&マナー(サイト全体のルール)です。

例えば病院のサイトを作るとします。
その病院は普段どのような人がきて、どんな雰囲気の病院なのかイメージします。

子供が多い病院の場合 = 暖かみや親しみやすいサイト
総合病院の場合 = 信頼感のあるサイト

もう一例、サービス業の場合、
そのサービスはどういうサービスでどういうユーザーが使うのか?

最先端で若者向けのサービスの場合 = クールで先進的なサイト
老舗の高齢者向けのサービスの場合 = 安心感のある見やすいサイト

などです。
この時点で目指すサイトの方向性が極端に変わります。ワイヤーフレームにもディレクターの指示にもない部分でも実際に現状サイトを調べてみたり、同業種のサイトを見てみたりして自分なりに方向性を固めると今後のデザインがしやすく、またなぜこういうデザインしたのか説明できるようになります。説明できるということはいかに自分がこのサイトに思いやりをもってデザインしているか伝える力にもなります。なかなか伝えることは難しいですが、伝える力もデザイナーの重要なスキルだと自分は思っています。

その③ 文字、色、見出し、余白のルールを決める

方向性が決まったらここからは実際にデザインしていきます。
ここからはデザイナーによって順番などはまちまちですが、
自分の場合はまず文字(フォント)の種類から決めていきます。

文字(フォント)を決める

まず本文などベースとなる日本語フォントです。こちらは大きく2つに分けて明朝体かゴシック体のどちらかです。そして見出しや飾り文字で使用する英語フォントです。
あまりフォントを多用すると統一感のないごちゃごちゃした印象のサイトになってしまいますので、自分の場合、日本語フォントは1種類、英語フォントは1〜2種類のパターンが多いです。
使用するフォントの決め方は下記の2パターンが多いです。

  • ロゴから展開する
  • 業種から決める

ロゴから展開するとは?

大体の企業の場合、ロゴが存在します。そのロゴで使用されている書体に合わせて展開すると統一感が生まれ違和感のない仕上がりになります。
例えばロゴで明朝体が使われていたらベースの日本語を明朝体にするといった感じです。
ロゴが英語の場合も同様です。その英語がセリフなどであれば明朝体に、サンセリフ系であればゴシックの日本語にする感じです。

業種から決めるとは?

そのタイトル通り業種のイメージから決めます。結婚式場などの高級感、神社・お寺などの日本的な感じであれば明朝体、文章を読ませるメディアサイトやポータルサイトなどであればゴシック体を使用します。ちなみによく使うフォントは明朝の場合、googlefontのNoto Serif JP、ゴシックの場合はgooglefontのNoto Sans JPと游ゴシックです。

英語フォントの決め方は結構適当な事が多いですw日本のサイトの場合、飾りで使うことが多いので自分の好きなフォントやこのフォントを使うと締まるといった感じで選んでいます。
自分おすすめフォントはgooglefontのRobotoやOswaldなどの縦長のフォントが好きです。

色を決める

よく初心者の方がよくやってしまうパターンでサイトのメリハリを出すために色々な色を使いチカチカするようなデザインを作ってしまうことがあります。
自分も新人の頃は色を決めるのに時間がかかり悩む事が多かったです。ただ一つ意識してデザインすれば格段に上手くなります。

色を決めるのが上手くなるテクニック【色を使いすぎない】

使用する色を制限することによってサイトに統一感が生まれ、見やすいサイトになります。
実際には下記のような3〜4種類に絞りましょう。

  • 本文の色(黒もしくはグレー)
  • 背景色(ベース)
  • キーカラー
  • CVカラー(サイトの色や目立たせたい部分など)

最後のCVカラーというのはよくお問い合わせや電話番号、資料請求など一番クリックをして欲しい・コンバージョンをあげたい部分で使用する色です。

この4つの決め方も上記の文字同様ロゴに使われている色を持ってくるという方法が使えます。

例えばの上記のロゴの場合は下記のサイトような感じになります。

本文の色 = 黒
背景色 = 白
キーカラー = 青
CVカラー = 赤

この方法は色々なロゴで使えますのですぐに実践できます。
またこの他に配色したい場合はほぼすべてのサイトに入っても違和感のない色ともいっていい薄いグレーと、
キーカラーを30%ほどに薄くした青などはマッチします。
この方法を知っておくだけでも少しデザインするのが楽になりますよね?

見出しパターン

次にデザイナーを悩ませるのが見出しです。自分はここが苦手でなんども出し戻しをされた記憶があります。
見出し自体の装飾のパターンを載せているサイトは色々ありますが、1サイトで使う見出しのパターンが載っているサイトは少ない印象です。
見出しの種類が少ないサイト場合そこまで悩まないのですが、見出しがh1〜h6ほどあると未だに萎えます…
そこで自分なりに考えた方法が下記です。

見出しが上手くなるテクニック【見出しにメリハリをつける】

メリハリというのは簡単に言うと強弱をつけるという意味ですが、デザインの見出しでも同じで同じ色でフォントサイズの文字が小さくなるだけではワイヤーフレームと変わりありません。
具体的なメリハリの出し方は最初に作った見出しの次の見出しは真逆のデザインにするとメリハリが効きます。
具体例は下記のような感じです。

  • h1の見出しは背景なし・装飾あり
  • h2は背景・装飾あり
  • h3は背景なし・装飾あり
  • h4は背景あり・装飾なし
  • h5は背景・装飾なし

っといった感じです。
h1〜h5までその見出しのメリハリが効きぱっと見わかりやすくなったかと思います。
こちらは一概に正解とは言えませんが自分の経験から学んだ方法なので参考になれば幸いです。

余白(ホワイトスペース)

最後に余白の取り方です。ホワイトスペースともいいます。自分はここを意識してデザインするようになり上手くなってきてると一番実感したポイントでした。
具体的には下記のような文字組の場合どちらが見やすいですか?

大体の人が右と答えると思います。文字サイズも行間・文字間も同じですが、人間の脳は余白をとることによってタイトルと文章の区別や認識が勝手にされています。
語らなくても伝えられるデザインはあります。より自然に人を引き込まれるサイト作りには欠かせないテクニックです。
コンテンツ間の余白をつける際もルール化しゆったりみせたいときは120pxずつ間を取ったりとサイトによって余白をコントロールできるようになるとさらに上手くなります。

その④ 時間を意識する

デザインをするときに特に時間を考えずにデザインを進めていませんか?納期が1週間後だからそれまでにデザインできれば大丈夫だろうと考えていては危険です。仮に1週間後の場合は、最低でも納期の2日前には一度完成させましょう。
残りの2日は修正対応やブラッシュアップの時間にできるようになるのが理想です。

仕事の場合、一番やってはいけないのは納期に間に合わないことです。納期を守れない人は仕事ができない人です。
もしデザインに迷いがでたりして納期が間に合いそうになければ60〜70%のクオリティでもいいのでヘッダーからフッターまで一度デザインしてしまいます。そうすれば最低ラインのデザインは提出できます。

そのあとにブラッシュアップをしてクオリティを100%までもっていきましょう。
もうひとつコツとしてはデザインを最初から作り込まない事です。
最初がシンプルなデザインはいくらでもあとから付け足すことができますが、デザインを最初からイラストや装飾など作り込んでしまうと出し戻しがあった場合、すべてやり直す可能もあるので悲惨なことになります。

もしイラストや装飾が多くなりそうなサイトはいちど全体の30%位までコンテンツを作り方向性をディレクターやクライアントに確認しましょう。自分のリスクマネジメントも重要な仕事です。

その⑤ デザインの見せ方

デザインの見せ方も重要です。最終的にクライアントや上司に確認してもらう際、なぜこういうデザインにしたのか説明できるようにしましょう。自分で何のサービスのサイトを作っているのかわからないままデザインした場合なにも説明できないからです。自分で考えてデザインした場合は、自信を持って提案でき説得力が違います。

またデザインの途中で「この方向性で合っているのか?」っとデザインに迷いが生じたら提出の際に2パターン用意してしまうのも手です。
提出の際に2パターン出せばどちらかを選んで貰えるからです。

心理学的にも選ばせるということは、その時点で選択肢を2つに絞らせる事ができるため、どちらかが採用されます。
たとえすべてが採用されなくても「B案のこの要素をA案に入れてみて」などといった感じになります。また全部やり直しといった無茶振りも回避できます。
ダメ案をあえて一つ用意しておくのもアリです。自分で自信のある案が引き立ち採用される可能性が上がります。
この方法も少し頭に入れてデザインを進められると理想的です。

まとめ

個人的には余白(ホワイトスペース)が一番デザインとしては効果がありました。それと時間を意識することで自分にルールを作りながら作業する事によってデザインのスピードも同時に上がりました。
Webデザインが上手くなる方法に正解はありませんが、自分の経験から学んだことが少しでも新人Webデザイナーの皆さんの救いになれば幸いです。

この記事をシェアする