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