2020/01/23SHAREツイートシェアはてブGoogle+PocketLINEウェブデザイン初心者がやりがちな失敗を解説します。目次webデザインの注意点!初心者がやりがちな失敗11選webデザインの注意点1.webデザインに統一感がないwebデザインの注意点2.情報が多すぎて何が大事かわからないwebデザインの注意点3.ごちゃごちゃしているwebデザインの注意点4.ユーザーが理解できないものがあるwebデザインの注意点5.インタラクションができていないwebデザインの注意点6.見慣れていないデザインwebデザインの注意点7.伝えたい印象とデザインが合っていないwebデザインの注意点8.webデザインの手順を間違うwebデザインの注意点9.取り決めを行わないwebデザインの注意点10.クライアントが嫌いなデザインにしてしまうwebデザインの注意点11.クライアントの必要条件を満たさない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.取り決めを行わないクライアントとウェブデザインの取り決めをせずに行うと、デザイン変更がエンドレスでいつまで経っても納品できない可能性があります。何案から選んでもらうのか取り決めをしましょう。2018年8月2日webデザインの注意点10.クライアントが嫌いなデザインにしてしまうクライアントが好まないデザインは何かをあらかじめ聞いておくことで、クライアントが嫌いなデザインにしてしまうことを防ぎましょう。pinterestでウェブデザインが嫌いなものがあれば選んでもらう、使いたくない色を聞くなどあらかじめしておきましょう。pinterestのウェブサイトデザインイメージは例えば以下のようなものです。賑やか」等イメージヒアリング2⃣回答を元に2軸を設定しマトリックス作成。2018年8月2日webデザインの注意点11.クライアントの必要条件を満たさないクライアントに最初から「絶対譲れないものは何か」聞き、それだけは確実に満たすようにしましょう。最初から確認しておかないと、後で手戻りが発生してしまう可能性があります。ウェブ制作のヒアリングシートにあらかじめ書いてもらうなどして確実に必要な情報を漏らさないようにしましょう。webデザインの独学方法!4ステップだけwebデザイナーが向いてない?→勉強が間違ってるだけ。向いている人になれる短期集中1ヶ月!webデザイン講座のオススメまとめweb上で作れる無料のロゴ作成方法。XDはデザイン初心者向け。7ふるフリーランスでUIUXデザイン/コーディング/Webマーケをしています。慶應法法→IBM→2018年独立後に海外放浪。reserved.【短期集中1ヶ月】webデザイン講座オススメまとめ。