ウェブデザインを改善するコツ!数値目標と配色設定が大切

中野貴利人
執筆中野貴利人
2019/09/06 更新

ウェブデザインを改善する方法!数値目標と配色設定が大切

  1. コツ① デザイン変更の前に目標を決める
  2. コツ② 配色でサイトの印象基盤を固める
  3. コツ③ 文章レイアウトで読了率を高める
  4. コツ④ 自分で考えずに他サイトを真似る

コツ① デザイン変更の前に目標を決める

サイトの見た目や操作性が改善されることで、ユーザーのクリック率や購買率が上昇しますし、ブログやソーシャルメディア上の言及も増えて、リピーターの獲得も期待できます。

ショッピングサイトやコーポレートサイトに関しても同様で、鮮やかで使いやすいサイトであったほうが安心感が生まれます。お客様の信頼度が向上することで、企業への印象が変わってくるでしょう。

ただし、デザインの改善には知識、時間、資金を消費しますので、事前にサイトを分析して費用対効果を計ることが大切です。特に「デザインのどこを直せば、何が良くなって、どんなメリットがあるか」を予測します。

例えば、訪れたユーザーが1ページ目だけを見て去った割合である「直帰率」と閲覧中にあるページから去った割合を示す「離脱率」に対して、私たちは「デザインを改修することで10%下げる」という目標を立てます。

さらに直帰率と離脱率が10%下がると、売上は5%上がるという仮説も用意しましょう。そこでようやく「直帰率と離脱率が10%下げるには、どこのデザインを改修するか、期限はいつ、予算はいくら」などが決まってきます。

ちなみに直帰率と離脱率はGoogle Analyticsで分析できます。デザインの改善では「商品紹介ページの離脱率を60%以下に減らし、商品購入率を3.5%に上げる」ように、数値目標を前提に進めていきたいです。

コツ② 配色でサイトの印象基盤を固める

配色はユーザーに直接的な印象を与えます。赤色のプラス効果には情熱や食欲増進があるため、居酒屋の看板などに使われます。赤色のマイナス効果には危険や注意があるために信号機の止まれに使われています。

ウェブ上でも「赤=情熱・危険、オレンジ=温暖・自由、黄=活発・幼稚、緑=自然・調和、青=誠実・冷静、紫=高貴・神秘、ピンク=女性・弱い、白=清潔・空虚、灰=不安、黒=高級・恐怖」などが連想されやすいです。

さらに3色の組み合わせで連想されるイメージが明確になります。例えば「■#222950■#1F5C97■#82A3C4」の配色では「信頼」を感じます。配色パターンに迷ったときは以下を参考にしてみてください。

テーマ配色アクセント
安全■#185D90
■#4CB3D0
■#ABCD44
□#FFFFFF
清潔■#194F9E
■#1B96C2
■#F8D373
□#FFFFFF
信頼■#222950
■#1F5C97
■#82A3C4
■#8C0F05
安心■#326633
■#333333
■#666666
■#F3E316
洒落■#3A0B09
■#780E0C
■#8D509A
■#8C0F27
協調■#4A7A2A
■#80B62F
■#F4EA71
■#EE8C4E
主張■#4C1148
■#911583
■#000000
■#2AAFCC
神秘■#610A08
■#350509
■#0F332D
■#0D190A
知的■#696967
■#C9C3B5
■#E9E0D1
■#89100A
誠実■#8396A2
■#CCCCCC
■#BFB6B2
■#136798
高貴■#98CA98
■#EDECBA
■#DADDA6
■#A5D3E2
情熱■#CB1009
■#F7C22B
■#3C3332
■#999999
躍動■#CB100A
■#730A0D
■#BCB0A3
■#97B83A
創造■#CECDCE
■#BBBBBB
■#666666
■#30999A
購買■#D02B14
■#F69B1A
■#F8D98A
■#96BC69
遊心■#EE8EB1
■#070706
■#393939
■#999999
母性■#F36599
■#F592B6
■#F7725E
■#C991C6
率直■#F5131A
■#F65518
■#FBEE1A
□#FFFFFF
女性■#F5A59E
■#F28277
■#FBF3DC
□#FFFFFF
温和■#F96611
■#F79833
■#F69866
■#303290
愉快■#F96611
■#F79910
■#D8D8D8
■#3298C3
家庭■#FBCC30
■#ECC068
■#E0923F
■#669934
中性■#FBCC30
■#CF310B
■#A6A6A6
■#CAD730
活発■#FBF12C
■#F7F999
■#F79833
■#262424

3色にプラスされている1色はアクセントカラーですので、インパクトを与えたい箇所に持ってきます。この色の組み合わせであれば、バランスの取れたデザインになりやすいです。

コツ③ 文章レイアウトで読了率を高める

1

文字や段落のスペースを気遣う

今読んでいる文章は「font-size=16px、line-height=180%、font-color=#333333」です。フォントサイズは14~16pxがスマホでも読みやすく、行間は180%にすることで上下に4pxがあいて、文字が認識しやすいです。

フォントカラーは黒より少し薄い黒のほうが、文字が窮屈にならないです。また、段落との間は32pxあいています。本来、1行の長さは30~40文字が目で追いやすいですが、スマホの普及で20文字程度でも問題ありません。

2

ビビッドやイタリックは使わない

ウェブは紙媒体と違ってビビッドカラーが読みにくいため、彩度を抑えます。また、文字が斜めになるイタリック体や手書き風フォントは馴染みません。font-familyは「Noto Sans JP、游ゴシック、メイリオ」が定番です。

「原色はあまり読みやすいとは言えない」
「彩度を抑えるほうが長文も読みやすい」

3

最初に結論から述べてしまう

文章自体は起承転結ではなく、最初に結論を含めた概要を記載し、それから説明に入ると、ユーザーの理解度は深まります。段落ごとに分けるときも前半は重要な情報、後半はその説明を載せると、内容を把握しやすいです。

また、ページ上部にはダラダラと長い文章は載せずに、誘導させるようなキャッチフレーズやインパクトのある画像を載せたほうが、ユーザーをサイト内に引き込むことができます。

4

細かいルールをきちんと守る

文章では「ですます調にする、句読点を正しく使う、ら抜き・い抜き表現はしない」などの構成ルールがあることで、記事の読みやすさが向上します。

接続詞の「だから、そして、しかし」などや指示代名詞の「あれ、それ、これ」などは乱用しないほうがわかりやすいです。漢字では「方、事、達、為、等、風」などは使わずに、ひらがなで記述します。

コツ④ 自分で考えずに他サイトを真似る

デザインの素人が「どこかパッとしないが、何を変えたればいいかわからない」という疑問を持つことは正しいです。プロのデザイナーでさえ瞬時にアイデアが思いつくわけではありません。

知識と経験がパフォーマンスを向上させますが、最終的にそのデザインで納得できるかは初期段階ではわからないです。むしろ、制作途中でも「購買率が上がらないかも」や「配色を変えたくなってきた」などと迷います。

そこで多種多様な情報を仕入れます。1番はデザイン性に優れた他サイトをチェックすることです。すでに完成されているデザインからアイデアや刺激を貰うことで、自分の思考がタスクに落とし込めます。

まずは配色を真似していきます。サイトのコンセプトと合う色を見つけるために、何十という他のサイトを閲覧します。その際はChromeの拡張機能のColorPick Eyedropperを使うと、カラーコードが瞬時にわかります。

満足できる配色と一緒にレイアウトも考えたいです。レイアウトは特別な意図がなければ、モバイルファーストで1カラムを軸にします。次にデスクトップ用に2カラムで構築していきます。

ちなみにデザインの改修では何度変えても満足いかないこともあります。これは心理的な影響が強く、次の日に確認すると「何も問題ない」ことに気づいたりもしますので、寝かせる時間も必要です。

配色やレイアウトが決まったら、コンテンツである文章に時間をかけてましょう。クオリティをアップするためにオリジナルの写真やイラストも挿入して、要所では図やグラフで解説していきます。

このようにデザインを調整することで、少しずつユーザーに見てほしいサイトが完成されていきます。すぐにはプロのようなサイトにはなりませんが、どこを改善したらベターであるかは理解できるようになっていきます。

スポンサーリンク

著作・制作など

中野貴利人
監修・執筆・編集
フクポン運営/副業プランナー。新卒で副業開始、26歳で法人化、11期目。副業関連の著書4冊。2児の父。過去の取材や講演はメディア掲載履歴で紹介。