Webデザイン初心者がやりがちな失敗を解説します。
目次
Webデザインの注意点!初心者がやりがちな失敗11選
Webデザイン初心者がやりがちな失敗として、Webデザインの中身の失敗、Webデザインの進め方の失敗があります。具体的に見ていきましょう。
Webデザインに統一感がない
サイトに統一感がないと、ユーザーの気が散ってしまい、本来伝えるべき要素を上手く伝えられなくなってしいます。
同じ用途のものを揃えるWebデザインにする
サイト内の同じ用途のものは、同一フォント、同色、同じ大きさ、同じ装飾、同じ寄せ、同じ位置に統一しましょう。
反復するWebデザインにする
画面内の要素を繰り返すことでユーザーの学習コストを減らしましょう。同じものを繰り返すことで、それらが同じ要素、系統のものだと視覚的に表します。
整列するWebデザインにする
画面上の要素の高さや幅を同じにして整えると、内容に意識を注力することができます。
情報が多すぎて何が大事かわからない
必要な情報のみに絞る
情報が多すぎると、ユーザーは結局何が重要なのかわからなくなってしまいます。必要最低限の情報のみ伝えましょう。情報を詰め込みすぎるとユーザーが、結局何が重要なポイントがわからず、サイトから離脱してしまう可能性があります。
優先順位をつける
優先的に伝えたいものをページの最初にもってきましょう。最も大事なファーストビューでは「キャッチコピー・写真・申込アイコン」を入れましょう。
コントラストをつける
重要な部分だけに違いをつけて、目立たせましょう。色をつける、配置を変えるなどが挙げられます。
ごちゃごちゃしている
色は3色まで
60％ベースカラー(背景)
35％メインカラー(ロゴ/バナー/メインコンテンツ)
5％アクセントカラー(申込みボタン等、強調箇所)
原色を使わない
余白をつける
ユーザーが理解できないものがある
サイトを客観的に他人に評価してもらうなどして、ユーザーが理解できない要素は入れないようにしましょう。例えば押したらどうなるのかわからない謎のボタン、ユーザーにとって意味が理解できない説明文、ボタンなのかわからないボタンなどです。
インタラクションができていない
インタラクションとはユーザーの操作に対して適切な反応を返すことです。そうすることで、ユーザーに「操作ができている」という安心感と信頼感を与えることができます。例えば、ボタンのON/OFF、画面移動のアニメーション、音、振動、光による通知が挙げられます。
見慣れていないデザイン
ユーザーが見慣れていないデザインにするのはやめましょう。ユーザーが混乱して、思い通りに動いてくれない可能性があります。例えば、デスクトップのフォルダのデザインは現実のものを模してデザインされています。
伝えたい印象とデザインが合っていない
伝えたい印象とデザインの関係性は個人の感性で決めるのではなく、検索してみたり、周りの人に聞いてみるなど客観的な意見を参考にして決めましょう。例えば、高級レストランなのに、サイトのデザインがポップなイメージだと、ユーザーに抱かせたい印象を与えることができません。
色の印象
- 赤：目を引く色。エネルギーを表す商品、バーゲンセールの広告に使われることが多い。
- 青：爽やかさ誠実なイメージを与える。日本人が最も好きな色
- 緑：衛生的なイメージを与える。病院や薬局の色に使われることが多い
- 灰色：どの色にも馴染む、上品で落ち着いたイメージがある。教育系や士業系の企業に使われることが多い
Webデザインの手順を間違う
サイトの目的、内容、ターゲット、場面を考えずに「伝え方」を先に考えてしまうことです。
取り決めを行わない
クライアントとWebデザインの取り決めをせずに行うと、デザイン変更がエンドレスでいつまで経っても納品できない可能性があります。あらかじめ、何案から選んでもらうのか取り決めをしましょう。
Webデザイン案件トラブル1
🚩デザイン変更がエンドレス
「この方向性で」と言われた案を元に修正を続けていたが、途中で全く違うイメージの参考サイト出され「これがいいな」と言われる🔶対応策
・デザイン案は何案までか最初に取決め
・一旦デザイン案の方向性を決めたらこれでいくと取決め— ふる🇹🇭 (@guutenx) 2018年8月2日
クライアントが嫌いなデザインにしてしまう
クライアントが好まないデザインは何かをあらかじめ聞いておくことで、クライアントが嫌いなデザインにしてしまうことを防ぎましょう。
例えば、PinterestでWebデザインが嫌いなものがあれば選んでもらう、
使いたくない色を聞くなどあらかじめしておきましょう。
PinterestのWebサイトデザインイメージは例えば以下のようなものです。
🔶Webデザインの認識合わせをクライアントと効率的に行う
1⃣「シンプル or 賑やか」等イメージヒアリング
2⃣回答を元に2軸を設定しマトリックス作成。
参考サイトをpintersetで10つほどピックアップし4象限それぞれに貼り、イメージに合うサイトを選んでもらう pic.twitter.com/ckzdcQg4Ss— ふる🇹🇭 (@guutenx) 2018年8月2日
クライアントの必要条件を満たさない
クライアントに最初から「絶対譲れないものは何か」聞き、それだけは確実に満たすようにしましょう。
最初から確認しておかないと、後で手戻りが発生してしまう可能性があります。
Web制作のヒアリングシートにあらかじめ書いてもらうなどして確実に必要な情報を漏らさないようにしましょう。
まとめ
初心者がやりがちな失敗11選として、デザイン自体がおかしいこと、デザインの進め方がおかしいことの2つが挙げられます。
その内容として、例えば、サイトに統一感がない、イメージと合っていない、情報が多すぎる。何が大事かわからない、Webデザインの取り決めを行わないなどが挙げられます。
