よく見たらダサいかも！？ 自社サイト簡単デザインチェック
あなたの会社のWebサイトはダサくないですか？
ダサいかどうか聞かれても、何をもってダサいのか判断がしにくいと思います。Webサイトは会社の顔と言っても過言ではないこのご時世です。
ほぼ同等のサービスを提供している会社が2つあった場合、お客様は見た目がいい方を選ぶことが多いのではないでしょうか。
本記事ではデザインに精通していない人でもダサくないか判断できるデザインポイントを16個ご紹介します。セルフチェックすることで客観的に自社サイトのデザインを見ることができ、改善点が浮かび上がってくるのでぜひ活用してみてください。
「ダサくない」自社HPを制作したい方は、ぜひプライムナンバーズへご相談ください！
目次
まずはチェック！デザインのポイント一覧
さっそくチェックしてみましょう。チェックが付いた内容は、改善策を考えてみましょう。各項目の詳細は後述します。
① 文字
- フォントサイズがバラバラ
- フォントが細すぎる/太すぎる
- 会社のイメージとフォントが合っていない
- 文字にふちをつけている
② 色編
- 原色を使っている
- 蛍光色を使っている
- カラフルすぎる
- コントラストが強すぎる/弱すぎる
③ 要素編
- ロゴがない
- ナビゲーションメニューがない
- CTA（Call to Action）ボタンがない
- デバイスによって表示が崩れる
④ 全体編
- コンテンツ幅が狭すぎる
- 情報量が多すぎる
- 余白（マージン）が少ない
- 画像の解像度が悪い/ぼやけている
チェックが付いた人は改善の余地があるかもしれません。
下記で詳しく解説していきます。
① 文字編
Web上の文字（フォント）はユーザーに情報を伝えるだけでなく、サイト全体の印象や雰囲気にも大きく関わります。
また、デバイスやブラウザによって文字の読みやすさが変わるので、フォントやフォントの太さは慎重に選択する必要があります。
フォントサイズがバラバラ
フォントサイズは多くても5サイズくらいまでにとどめると、サイト全体にまとまりがでます。
フォントサイズがバラバラで特にサイズのルールが決められていないと、ユーザーは何から読めばよいのかわからず混乱してしまいます。
伝えたいコピーや文章を目立たせ、優先度に応じてだんだんフォントサイズを小さくするのが一般的です。
フォントが細すぎる/太すぎる
Web上のフォントはユーザーのデバイスやブラウザによって、見え方が多少変わります。
線が細すぎると文字がかすれてしまい、視認性が悪くなってしまうので、極端に細いフォントは使用しない方が安心です。
また、目立たせたいキャッチコピーに太いフォントを使うと、はっきりと強調されユーザーの目にもとまりやすいですが、本文など小さい文字が密集するところで太めのフォントを使うと、文字の密度が上がり可読性が悪くなってしまいます。
特にこだわりがなければ本文は「Regular」「Medium」「Nomal」など標準的な太さをおすすめします。
会社のイメージとフォントが合っていない
フォント選びは意外に重要です。
特にFV（ファーストビュー）に置くキャッチコピーは、サイトを訪れたユーザーの第一印象を大きく左右するので慎重に選んでください。会社のイメージとフォントの雰囲気がミスマッチだとユーザーに違和感を与えてしまう可能性があります。
たとえば明朝体なら「真面目」「上品」「知的」な印象を持たれやすく、ゴシック体なら「力強い」「親しみやすい」「明るい」などのイメージがあるので、あらためて会社のイメージにあっているか、ユーザーにどんな印象を持ってもらいたいかをよく考えてフォントを眺めてみてください。
文字にふちをつけている
デザイン業界ではふちがついた文字を「袋文字」と呼んでいます。
バナーや印刷物では文字を強調したいときによく使われる技法ですが、少しやぼったく洗練さを欠いてしまいます。
Webサイト上で袋文字を使う場合はふちを太くし過ぎない、文字色とふちの色の組み合わせを極端にし過ぎないなどある意味高難易度の装飾なので注意してください。
②色編
色は文字とは違い、感覚的に印象がユーザーに伝わります。
サイトの印象や雰囲気を大きく左右するためブランドや目的に合った色を考えることが重要です。
原色を使っている
コンピューターの中では、「赤、緑、青」を「光の三原色」といいます。
原色は彩度が高くパキッとした色なので、使い過ぎると目がチカチカします。また、デフォルトの色であることから工夫がないチープな印象を与えてしまいます。
赤、青、黄を使うときはカラーパレット上で少しずらした色を使いましょう。
蛍光色を使っている
非常に鮮やかで発光しているような色を「蛍光色」といいます。
蛍光色自体がダサいわけではありません。
蛍光色は白ベースの上だと読みづらい、過度に使うと目が疲れる、他の色との調和が取りにくいなど扱いが難しく、使うシーンを見極めることが重要な色です。
蛍光色はポップで楽し気な印象を与えることができるので、活気が必要なページでチャレンジしてみるのは良いと思います。
カラフルすぎる
色を使い過ぎてしまうとフォントサイズと同様、なにが強調されているのか分かりづらくなってしまいます。
一般的なコーポレートサイトは3～4つの色でデザインすると統一感がでて美しく見え、ブランドイメージも定着しやすくなります。
明度のコントラストが弱すぎる/彩度のコントラストが強すぎる
コントラストとは二つ以上の要素の明度や彩度の差のことです。
明度において、白い背景に黒い文字があるなどの場合は、コントラストが高い状態で、薄いグレーの背景に白い文字がある場合はコントラストが低い状態です。
ユーザーに読ませる情報を置く場合は、明度のコントラストを高くしたほうが読みやすいとされています。
また、彩度においては色相環の補色同士を隣り合わせに置くとどぎつく目が疲れてしまうので、組み合わせには注意が必要です。
③ 要素編
デザインのポイントからは少しはずれますが、ユーザーがWebサイトを訪れたときに無いと困ってしまう、最低限中の最低限必要な要素も確認してみましょう。
ロゴがない
ロゴは会社やブランドの象徴です。
多くのサイトではヘッダー内に置かれユーザーがサイトを訪れた際に最初に目に入る要素の一つです。
ロゴが意図をもってデザインされていると、「ちゃんとしてそうな会社だな」とユーザーからの信頼感が生まれやすく、独自のデザインや配色は他社との差別化も図ることができます。
ロゴはしっかり作って設置することをおすすめします。
ナビゲーションメニューがない
ナビゲーションはユーザーがWebサイト上で簡単に目的地に到達できるようにするための重要な要素です。
そのサイトにはどんなページがあるかなど目次の役割も果たします。
ナビゲーションにはいくつか種類があり「ヘッダーナビゲーション」「フッターナビゲーション」「サイドバーナビゲーション」「フルスクリーンナビゲーション」などサイトの役割や、見せたい要素によって適切なナビゲーションを選択する必要があります。
CTA（Call to Action）ボタンがない
CTAボタンとは「購入する」「問い合わせる」「無料トライアルを開始する」などのアクションを起こすためのボタン（リンク）です。
会社やブランドの目的に上記のようなユーザーのアクションが必要な場合は必須要素となります。目にとまるデザインと簡潔な文章でユーザーの興味を引くことが大切です。
デバイスによって表示が崩れる
2022年の日本の端末別のインターネット利用率（個人）は、スマートフォン（71.2％）がパソコン（48.5％）を上回っており※、スマートフォン版のデザインまたはレスポンシブデザインがほぼ必須の時代になりました。
PCで見たときは綺麗だけど、スマートフォンだと崩れている・大事な文字が一文字だけ改行されているなどがよくあるので確認してみてください。
近年ではスマートフォンも様々なサイズが展開されているため、どんなデバイスにも対応できるレスポンシブデザインを検討してみてはいかがでしょうか。
参考ページ：総務省「通信利用動向調査」
④ 全体編
要素を確認できたらもっと俯瞰してサイト全体を見てみましょう。
いつも見ているサイトだと目が慣れて違和感に気づきにくいので、新たな改善点を見つけるために定期的に俯瞰してみることをおすすめします。
コンテンツ幅が狭すぎる
内容にもよりますが、コンテンツ幅が800px以内のWebサイトはぱっと見古い印象を与えてしまいます。
読み物のページだと、読みやすくするために600px～700pxのコンテンツ幅で構成しているメディアも多いので、用途に合わせてコンテンツ幅は検討してください。
情報量が多すぎる
より多くのことをユーザーに伝えたいという気持ちは痛いほどわかります。
しかし情報量が多すぎるとごちゃごちゃし、ユーザーは読む気がなくなり、スーパーの特売日のチラシのような印象を与えてしまいます。
情報の取捨選択と整理整頓をし、要点を分かりやすくすることでユーザーも理解がしやすくなります。
余白（マージン）が少ない
デザイン業界では余白のことを「マージン」と呼びます。
マージンはWebサイトにおいて要素を見やすくする効果があり、広く使うことで高級感や余裕がある印象を与えます。
しかしマージンを取り過ぎてしまうと次の要素までスクールが増え、間延びし離脱してしまう可能性も出てくるので注意が必要です。
コーポレートサイトのブロック同士の間は80px～150pxくらいが多いです。
関連性のある要素は近づけ、関連性のない要素は離すことを意識するとマージンを考えやすくなると思います。
画像の解像度が悪い/ぼやけている
鮮明でない画像は「この会社、あんまりこだわりがないのかな」と仕事のクオリティにも不安を感じさせてしまうかもしれません。
ユーザーに見てほしくて設置している画像は、できるだけ高解像度のものにしましょう。しかし高解像度にすると画像の容量は大きくなってしまいます。
ページの表示速度に影響がでてしまうかもしれないので、拡張子を変えるか圧縮するなど高解像度のまま容量を軽くすることがベストです。
基本をチェックで脱ダササイト！
チェックはいくつ付きましたか？
意外と基本的なことでも抜け落ちていることはあります。
前述では一般的にみて改善できるポイントをあげましたが、特に意味もなくダサいことが問題なので、「あえてそうしている」という理由があればこの記事は無視してください。
もし狙ってもいないのに多くのチェックがついてしまった場合は、ぜひプライムナンバーズにお声がけください。イケてるWebサイトに蘇らせるお手伝いをさせていただきます。
※この記事の内容は作成時点（2023年12月）の情報にもとづいて作成しています。
