学ぶプログラミング言語を間違えると悲惨な話

webデザインの注意点！初心者がやりがちな失敗11選

SHARE

ウェブデザイン初心者がやりがちな失敗を解説します。

webデザインの注意点!初心者がやりがちな失敗11選

ウェブデザイン初心者がやりがちな失敗として、ウェブデザインの中身の失敗、ウェブデザインの進め方の失敗があります。具体的に見ていきましょう。

webデザインの注意点1.webデザインに統一感がない

サイトに統一感がないと、ユーザーの気が散ってしまい、本来伝えるべき要素を上手く伝えられなくなってしいます。

同じ用途のものを揃えるwebデザインにする

サイト内の同じ用途のものは、同一フォント、同色、同じ大きさ、同じ装飾、同じ寄せ、同じ位置に統一しましょう。

反復するwebデザインにする

画面内の要素を繰り返すことでユーザーの学習コストを減らしましょう。同じものを繰り返すことで、それらが同じ要素、系統のものだと視覚的に表します。

整列するwebデザインにする

画面上の要素の高さや幅を同じにして整えると、内容に意識を注力することができます。

 

webデザインの注意点2.情報が多すぎて何が大事かわからない

必要な情報のみに絞る

情報が多すぎると、ユーザーは結局何が重要なのかわからなくなってしまいます。必要最低限の情報のみ伝えましょう。情報を詰め込みすぎるとユーザーが、結局何が重要なポイントがわからず、サイトから離脱してしまう可能性があります。

優先順位をつける

優先的に伝えたいものをページの最初にもってきましょう。最も大事なファーストビューでは「キャッチコピー・写真・申込アイコン」を入れましょう。

コントラストをつける

重要な部分だけに違いをつけて、目立たせましょう。色をつける、配置を変えるなどが挙げられます。

 

webデザインの注意点3.ごちゃごちゃしている

色は3色まで

メインカラーやアクセントカラーに濃い色を、ベースカラーに薄い色を使い、60-30-10ルールを守りましょう。
・60％ベースカラー(背景)
脇役的な色です。メイン・アクセントカラーの妨げにならない色を使いましょう。
・30％メインカラー(ロゴ/バナー/メインコンテンツ)
サイトの印象を決定づける主役の色。可読性の問題から、濃い色が使用しやすいです。
・10％アクセントカラー(申込みボタン等、強調箇所)
全体の5％と少ない使用量ながら一番目立つ色です。目を引く色を選びましょう。

原色を使わない

#blue、#redなど原色を使うのはやめましょう。

余白をつける

画面びっしりに情報があると、情報同士の関係がわかりません。余白があるだけで、読みやすくなり、内容がユーザーの頭に入りやすくなります。
関連が近いものを近くに配置して、それらの関係性を視覚上で訴えることができます。

webデザインの注意点4.ユーザーが理解できないものがある

サイトを客観的に他人に評価してもらうなどして、ユーザーが理解できない要素は入れないようにしましょう。例えば押したらどうなるのかわからない謎のボタン、ユーザーにとって意味が理解できない説明文、ボタンなのかわからないボタンなどです。

 

webデザインの注意点5.インタラクションができていない

インタラクションとはユーザーの操作に対して適切な反応を返すことです。そうすることで、ユーザーに「操作ができている」という安心感と信頼感を与えることができます。例えば、ボタンのON/OFF、画面移動のアニメーション、音、振動、光による通知が挙げられます。

 

webデザインの注意点6.見慣れていないデザイン

ユーザーが見慣れていないデザインにするのはやめましょう。ユーザーが混乱して、思い通りに動いてくれない可能性があります。例えば、デスクトップのフォルダのデザインは現実のものを模してデザインされています。

 

webデザインの注意点7.伝えたい印象とデザインが合っていない

伝えたい印象とデザインの関係性は個人の感性で決めるのではなく、検索してみたり、周りの人に聞いてみるなど客観的な意見を参考にして決めましょう。例えば、高級レストランなのに、サイトのデザインがポップなイメージだと、ユーザーに抱かせたい印象を与えることができません。

色の印象

  • 赤：目を引く色。エネルギーを表す商品、バーゲンセールの広告に使われることが多い。
  • 青：爽やかさ誠実なイメージを与える。日本人が最も好きな色
  • 緑：衛生的なイメージを与える。病院や薬局の色に使われることが多い
  • 灰色：どの色にも馴染む、上品で落ち着いたイメージがある。教育系や士業系の企業に使われることが多い

 

webデザインの注意点8.webデザインの手順を間違う

サイトの目的、内容、ターゲット、場面を考えずに「伝え方」を先に考えてしまうことです。

初心者がウェブデザインの手順にこだわるべき理由は、ウェブデザインを手順通りに踏まずに行うと、ミスマッチなデザインになりうるからです。
正しい手順を踏まずに一旦デザインを完成してから修正を行うと、大きな手戻りが発生する可能性があります。
具体的な手順の解説は以下の記事をご覧ください。

webデザインの注意点9.取り決めを行わない

クライアントとウェブデザインの取り決めをせずに行うと、デザイン変更がエンドレスでいつまで経っても納品できない可能性があります。あらかじめ、何案から選んでもらうのか取り決めをしましょう。

 

webデザインの注意点10.クライアントが嫌いなデザインにしてしまう

クライアントが好まないデザインは何かをあらかじめ聞いておくことで、クライアントが嫌いなデザインにしてしまうことを防ぎましょう。例えば、pinterestでウェブデザインが嫌いなものがあれば選んでもらう、使いたくない色を聞くなどあらかじめしておきましょう。pinterestのウェブサイトデザインイメージは例えば以下のようなものです。

 

webデザインの注意点11.クライアントの必要条件を満たさない

クライアントに最初から「絶対譲れないものは何か」聞き、それだけは確実に満たすようにしましょう。最初から確認しておかないと、後で手戻りが発生してしまう可能性があります。ウェブ制作のヒアリングシートにあらかじめ書いてもらうなどして確実に必要な情報を漏らさないようにしましょう。

web制作でヒアリングシートに入れないとトラブルになること

前の記事

【5分】webデザインの基本手順と流れを初心者向けに解説

次の記事

web デザイナー将来性がなくなるなら、スキル・新技術・新業種…