Webデザインで気をつけるべき11ポイント【初心者向け】

デザイン

「Webサイトできたけど、デザインがしっくりしない…」

そんなふうに、悩んでいませんか?


こんにちは。シンヤです。

僕はWebデザイナーだった経験をもとに、デザインのレビューを業務で担当しています。

この記事では、Webデザイン初心者が「気をつけるべきポイント」をまとめています。この記事を読むと、デザインをブラッシュアップできるはずです。

① 第一印象は良いかどうか


あなたのデザインは、「パッ」と見た瞬間の第一印象は良いですか?
初対面の人と会うのと同じで、デザインも、第一印象が重要です。

人をひきつけるデザインというのは、集客効果を見込めるデザインであるということです。せっかくWebサイトにきてもらっても、見たときの印象が悪いと、離脱されてしまいます。

ファーストビューがめちゃくちゃ重要です!

② キャッチコピーがわかりやすいか

キャッチコピーはなるべくシンプルに!
読んだだけで、想像ができるようにしましょう。


「キャッチコピー書くには、どうしたらいいの?」

メンタリストDaiGoさんの本が、めちゃくちゃ参考になります!デザイナーは、この本1冊読んでおけば、キャッチコピーに関しては万全です。

③ 視線を誘導できているか

ユーザーの視線を誘導できていますか?

見る人の視線が、どのように動くか考えてみましょう。余白やフォントの大きさ等を駆使して、ユーザの目線を誘導してあげると良いです。





余白(マージン)はマジで重要です。





④ 読ませることができるかどうか

「文字は読みやすくなっていますか?」

デザインによって、文字が読みにくくなっていないか確認しましょう。Webサイトに訪れた人が「商品を購入」したり、「お問い合わせ」をするステップは、次の通りです。

  • 文章を読む
  • 共感したり、感情が動く
  • 行動をおこす

デザインのせいで、文字が読みにくいと、ユーザにストレスを与えてしまいます。結果として、離脱してしまったり、結果につながらないデザインになってしまいます。

「読ませるためのデザイン」を意識してみましょう。

⑤ 行動を促せるか

「デザインは、行動を促せるデザインになってますか?」


「行動させるって、具体的にどうしたらいいの?」


ユーザーを行動させるためには、読んでもらい、感情を動かしたり、納得してもらう必要があります。つまり、デザインする上でチェックすべきことは、次の3点です。

  • ユーザーがほしい情報を読みやすくしてあげる
  • 感情にうったえかけるデザインをする
  • 論理的な説明をデザインでわかりやすくする

この3点に気をつけて、デザインをすると、行動につながる良いデザインになります。結果として、ビジネスに貢献できるデザインになります。


⑥ 使いにくくないか

「うわ!このサイト使いにくい」

そんな経験をした事があると思います。すごいストレスですよね。ユーザにストレスを与えないことが、めちゃくちゃ大切です。

PC画面、タブレット画面、スマホ画面で「使いにくくないか」どうかを確認しましょう。具体的には、Bootstrapのブレイクポイントを参考に、デザインをチェックすると良いです。


  • 1200px 以上
  • 1200px ~ 992px
  • 992px ~ 768px
  • 768px ~ 554px
  • 554px 以下



たいていの場合、スマホからの流入が多いので、スマホでのユーザビリティーは必ずチェックするようにします。

⑦ 良いデザインは、常にきれいなものではない

例えば、楽天のウェブサイトは「洗練されたクールで、キレイなデザイン」ではありません。

なぜなら、ECサイトのゴールは、美しいウェブサイトを見せることではなく、商品を売ることだからです。


実際に、僕は、アパレル会社のWebデザイナーとして働いていました。

ホームページを「洗練された、きれいなデザイン」に変更したところ、売り上げが落ちるという経験をしました(苦笑

きれいなデザインが、正しいデザインとは限りません。

⑧ ターゲットユーザーは誰?

「あなたのデザインは、誰に向けたものですか?」

年齢・性別・職種・どのような趣味を持った人・家族構成はどうかなど、細かくターゲットユーザを決めましょう。(ターゲットユーザーをイメージすることを、ペルソナと呼びます)できれば、架空の人物ではなく、知り合いだったり、友人だとイメージが具体的になります。

  • 年齢・性別・職種
  • 趣味は何か
  • 家族構成・どんな暮らしをしているか
  • 何に価値を感じているか
  • 人間関係
  • 収入
  • 将来の夢

ペルソナをつくることで、Webデザインのヒントにもなりますし、ブレないデザインができるようになります。


⑨ 考えなくても理解できるか

「考えるのは、めんどくさいニャ…ฅ(^ω^ฅ). 」

ユーザーは、写真のような怠けたネコだと思うと良いです(笑


「え!?これどういうこと?」
「どうやって操作したらいいの?」

そんなふうに思わせてしまうと、ユーザーはストレスを感じます。特に、業務系のデザインとなると、難しい単語が多くなりがちです。図解を挿入したほうがわかりやすい場合は、図を挿入してみると良いでしょう。

「ユーザに考えさせない」ことが、ユーザファーストなデザインにつながります。

⑩ 情報量が多くないか

「うわ!読むのめんどくさい…」

情報が多くないか確認しましょう。

特に、文字情報が多いと読む気が失せて、ページの離脱につながります。

⑪ そもそもデザインのゴールは決まっていますか?

そもそも、あなたがデザインのゴールはなんですか?

どんな結果をうみ出すことができれば成功ですか?

ゴールを設定せずにデザインをすることは、ゴールのないマラソンを走るのと同じです。

タイトルとURLをコピーしました