m-blog-mのブログ

福岡在住|36歳|7歳男の子シンママ。 オンラインスクールでデザインを学び、現在Webディレクター2年目。 Webデザイン・Webディレクション・ノウハウなど学んだことを発信していきます。

Webデザインで絶対にやってはいけないNGデザイン5選

はじめに


Webデザインは、ウェブサイトやアプリの外観を決定づける重要な要素です。
しかし、デザインの世界には、避けるべき「NGデザイン」が存在します。


NGデザインは、ユーザーにストレスを与えたり、サイトの機能性を損なう可能性があります。
本記事では、WebデザインにおけるやってはいけないNGデザインについて、詳しく解説していきます。


目的や目標の設定を怠る



Webサイトを作成する上で、最も重要なことは、サイトの目的や目標を明確にすることです。


目的の不明確化


サイトの目的が不明確だと、訪問者に何を伝えたいのかが伝わりません。
結果として、訪問者は混乱し、サイトから離脱してしまう可能性が高くなります。
サイトの目的を明確にするには、企業の理念やサービスの特徴を踏まえ、具体的な目標を立てることが重要です。


例えば、企業サイトであれば「会社の概要や事業内容を紹介する」、ECサイトであれば「商品を販売する」、ブログサイトであれば「自身の経験や知見を発信する」などの目的が考えられます。
目的が明確になれば、サイトの構成やデザイン、コンテンツの作成方針も見えてくるはずです。


目標設定の欠如


目標を設定しないことも、NGデザインにつながります。サイトの目的を達成するためには、具体的な数値目標を立てる必要があります。
例えば、「月間10,000人のユニークユーザーを獲得する」「コンバージョン率を10%に高める」などの目標を設定し、PDCAサイクルを活用しながら最適化を図ることが重要です。


目標を設定しないと、サイトの改善ポイントが分からず、長期的な成長が見込めません。
数値目標を設定することで、デザインの改善点や新しいマーケティング施策の必要性が明らかになり、サイトの品質を高めることができるのです。


ターゲットユーザーの特定を怠る


また、ターゲットユーザーを特定しないことも、NGデザインの一つです。ターゲットユーザーが不明確だと、そのユーザーに合ったデザインやコンテンツを作ることができません。
結果として、目的とするユーザーに届かず、サイトが活用されなくなってしまうリスクがあります。


例えば、子育て世代をターゲットにしたサイトでは、子育て中の親に役立つ情報やサービスを提供し、親目線のデザインを心がける必要があります。
このように、ターゲットユーザーの属性や生活スタイル、ニーズを把握することが、成功するWebデザインの第一歩となります。


写真やテキストの使い方を誤る



Webデザインにおいて、写真やテキストの使い方を誤ると、サイトの品質が低下してしまいます。


トップページのテキスト量の不足


トップページにテキストが少ないと、検索エンジンがサイトの内容を正しく理解できず、検索順位が下がる可能性があります。
検索エンジンは、テキストの情報を基にサイトの内容を判断するため、適切な量のテキストを用意することが重要です。


一方で、テキストが過剰にあると、ユーザーが必要な情報を見つけにくくなります。
トップページには、サイトの概要や主要なサービス内容を簡潔に説明するテキストを配置し、詳細はサブページに譲るのが良いでしょう。


他サイトのコンテンツの無断使用


他のWebサイトの画像や文章などのコンテンツを無断で使用すると、著作権侵害になる可能性があります。
著作権侵害は法的なリスクがあり、サイトの信頼性を大きく損なう可能性があります。


コンテンツを使用する際は、著作権フリーの素材を利用するか、権利者から許可を得る必要があります。
自社で撮影した写真やオリジナルのテキストを使うのが最も安全な方法です。


大きな画像のそのままの使用


大きな画像をそのまま使うと、ページの表示速度が遅くなります。
ユーザーは待ち時間が長いと、ストレスを感じてサイトから離れてしまう可能性があります。


画像を使用する際は、最適な解像度や容量に圧縮することが重要です。
また、画像の種類に応じて、最適な形式を選ぶことも大切なポイントです。
例えば、写真はJPEG形式、アイコンやロゴはPNG形式が適しています。


ユーザビリティを損なうデザイン


web design


ユーザーが快適に利用できるように、ユーザビリティを意識したWebデザインが欠かせません。
ユーザビリティを損なうNGデザインには、以下のようなものがあります。


サイトの目的に合わない画像の使用


トップページに、サイトの目的や内容と関係のない画像を使うと、ユーザーに混乱を招き、離脱率が上がる可能性があります。
企業サイトでは企業のイメージに合った画像、ECサイトでは商品に関連する画像を使うなど、サイトの目的に沿った画像の選定が重要です。


また、画像の解像度が低かったり、切り取りが適切でないと、サイトの品質が低下してしまいます。
高品質な画像を適切に加工することで、サイトの信頼性を高められます。


サイト内の導線の複雑さ


サイト内の導線が複雑すぎると、ユーザーが目的のページに辿り着けず、離脱してしまう可能性があります。
一般的には、重要なページは3クリック以内に辿り着けるよう設計することが推奨されています。


また、パンくずリストの設置やメニューの分かりやすい配置、サイトマップの作成など、ユーザーが迷わないよう工夫することが大切です。


音楽の自動再生や英語表記の多用


ユーザーが望まない音楽の自動再生は、ストレスを与える可能性があります。
特に、オフィスや公共の場所でWebサイトを閲覧する際は、音楽が周りの人に迷惑となる可能性があります。


また、英語表記が多用されていると、日本語話者のユーザーには分かりづらくなります。
海外向けのサイトを除き、基本的に日本語で情報を提供するのが望ましいでしょう。


その他のユーザビリティを損なう要素


  • 文字サイズの極端な大きさや小ささ
  • リンク切れの放置
  • 関係のない広告の掲載
  • ポップアップの多用


これらの要素は、ユーザーの快適性を損ない、サイトの信頼性を下げる可能性があります。
ユーザー目線に立ち、ストレスのないデザインを心がけることが大切です。


デザインの素人感を残さない


Web Design


プロのWebデザイナーにとって、デザインの素人感を残さないことは重要な課題です。
以下のようなポイントに気をつけることで、素人感を排除できます。


マージン(余白)の確保


マージンが狭すぎると、デザインが窮屈な印象を与えてしまいます。
適切な余白を設けることで、デザインに品格が生まれ、情報を見やすくなります。


一般的には、ページ全体の上下左右に適度な余白を設け、要素同士の間隔も適切に空けるのがよいでしょう。
ただし、過剰な余白も避けるべきで、コンテンツが小さくなりすぎないよう注意が必要です。


ポイントマーカーのサイズ調整


リストのマーカーが大きすぎると、素人感が漂ってしまいます。
適切なサイズに調整することで、デザインの品格が高まります。


一般的には、本文の文字サイズに合わせてマーカーのサイズを調整するのがよいでしょう。
マーカーが本文よりも大きすぎても小さすぎても違和感があるため、バランスを意識する必要があります。


グラデーションの適切な使用


グラデーションは、デザインに立体感や奥行きを演出できる効果的な手法です。
しかし、配色が鮮やかすぎたり、使い過ぎると、デザインの品格が損なわれてしまいます。


グラデーションを使用する際は、落ち着いた色合いを選び、適度な範囲に留めることが重要です。
また、目的に合わせて、線形グラデーションや放射グラデーションなどの種類を使い分けるのがよいでしょう。


ホームページ制作の注意点


注意


ホームページを制作する際は、様々な注意点があります。
ここでは、主なNGポイントについて解説します。


セキュリティ対策の不備


ホームページにセキュリティ対策が不十分だと、ハッキングやデータ漏洩のリスクが高まります。
特に、ECサイトなどでは、個人情報や決済情報が流出するリスクもあり、十分な対策が必要不可欠です。


SSL化やファイアウォールの設置、定期的なセキュリティアップデートなど、様々な対策を講じることが求められます。
また、ユーザーに対しても、パスワードの定期的な変更を促すなどの啓発活動も重要です。


モバイル対応の欠如


近年、スマートフォンやタブレットからのWebサイトアクセスが増加しています。
しかし、モバイル対応が不十分だと、ユーザーが快適に利用できません。


レスポンシブWebデザインの採用や、モバイル専用サイトの作成など、モバイル対応を怠らないことが重要です。
また、スマートフォンからの閲覧を想定し、テキストやボタンのサイズを適切に設定する必要があります。


ページ構成の論理性の欠如


ホームページのページ構成に論理性がないと、ユーザーが目的のページに辿り着けず、混乱してしまう可能性があります。


メニューの分かりやすい配置、パンくずリストの設置、サイトマップの作成など、ナビゲーションに工夫を凝らすことが大切です。
また、コンテンツの階層構造を整理し、関連する情報をまとめるなど、ユーザーが情報を探しやすいよう配慮する必要があります。


著作権侵害の問題


他者の著作物を無断で使用すると、著作権侵害になる可能性があります。
画像や文章、動画など、様々なコンテンツが対象となるため、十分に注意が必要です。


著作権フリーの素材を利用するか、権利者から許可を得るなど、適切な対応が求められます。
また、自社で作成したコンテンツであっても、第三者に提供する際は注意が必要です。


ページ表示速度の最適化の欠如


ページの表示速度が遅いと、ユーザーが離脱してしまう可能性があります。
特に、モバイル環境では、通信速度の違いから、表示速度が重要になります。


画像の最適化、コードの軽量化、キャッシュの活用など、様々な手法を組み合わせて、ページ表示速度を高速化する必要があります。
また、定期的にページ速度を計測し、最適化を続けることが重要です。


まとめ


Webデザインには、さまざまな「NGデザイン」があり、それらを避けることが大切です。
目的やターゲットの明確化、適切なコンテンツの使用、ユーザビリティの確保、デザインの品質向上、セキュリティ対策やモバイル対応など、様々な点に注意を払う必要があります。


NGデザインを避けることで、ユーザーにとって魅力的で使いやすいWebサイトを作ることができます。
また、検索エンジンの評価も高まり、集客力の向上にもつながります。
Webデザインにおいて、NGデザインを意識することは、サイトの成功に不可欠なのです。