デザインを良くする方法

デザインを改善すると売上アップ

デザインを綺麗にする目的が自己満足であると、せっかく改修しても売上につながらないことがあります。本来、見た目が向上すると、ユーザーのリアクションも向上しますし、お気に入りへの保存の増加からリピーターも期待できます。

何より会社の顔であるホームページは企業への印象が変わってきます。鮮やかなサイトを持っていると満足感が生まれ、自身のモチベーションも上がります。

ただし、デザインの改善には時間や金銭、知識を費やしますので、必要最低限の分析をして費用対効果を計ることが大切です。デザインのどこをどう直せば、何が良くなって、結果的にどんな得が生まれるのかを認識しておきたいです。

例えば、検索サイトでの上位表示、有料広告からのクリック、外部リンクからの誘導などで訪れたユーザーが、1ページ目だけを見て去った確率を「直帰率」と呼びますが、何％くらいが平均値でしょう。ページを閲覧中にあるページでサイトから去った確率である「離脱率」は、これ以上下げることができないのでしょうか。

これらはサイトに導入しているアクセス解析ツールで算出することができます。無料のGoogle Analyticsなどは使い勝手が一歩抜き出ています。。

今日はトップページには300人がアクセスがあり、平均滞在時間は1分30秒、平均ページビューは4.2ページ、トップページの離脱率は52％となりました。

この現状が把握できると、「トップページの離脱率を30％台に減らし、商品購入率を2.0％に上げる」といった具体的な目標を挙げることができます。そして、離脱率を下げるために私たちができること、それがデザインの向上です。

ヘッダーでグッと印象アップ

実際のお店で言えば、広告や口コミで集約するのは上手で、置いてある商品もすばらしい・・・いざお店に行ったユーザーは、「店の看板を見てガッカリで店内に入ってくれない」「商品の並べ方がヘタで良さが伝わらない」「雑な印象を与えてしまい信用できない」という具合では、売上にはつながりません。

そこで店の看板をリニューアルして、店内を好感を持たせる雰囲気に変え、接客態度も改善していきます。まずはお店の看板であるヘッダーを変えてみます。

あくまで例ですが、ヘッダーのデザインには色、大きさ、文字だけ見ても、それぞれに目的があります。

「健康診断がテーマなら通知表に良く使われる水色を基調にしようか、画像は切り取って救急の十字をその下に配置しようか、まじめな雰囲気を出すために文字は明朝体にしようか・・・」

パーツごとに考えて、バランスよく組み合わせるセンスが必要になります。

丁寧な配色で基盤を固める

色の組み合わせは色彩学やカラーコーディネートの専門書、もしくはWebでも知識が学べます。

配色から連想させるイメージにはお決まりの3色がパターン化されています。配色に迷った場合、下記に具体例を挙げてみますので、参考になれば幸いです。

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

3色にプラスされている1色はアクセントカラーですので、インパクトを与えたい箇所に持ってきます。

この色の組み合わせであれば、ハズレはなく、バランスの取れた納得のいくデザインになりやすいでしょう。

読ませる文章のレイアウト

当サイトのフォントはMS Pゴシックで14px、行間隔は160%、色は#666666です。強調したい文章は文字を太くして、背景色を#F9D5CFにしています。

Webは紙媒体と違い、ビビットカラーは読みにくかったり、イタリック体はなじまなかったりします。

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

また、1行あたりの文章の長さは30～39文字くらいが読みやすいです。あまりに横に長かったり、すぐに改行していると目が追いつかなくなります。

文章の配置についてですが、重要な情報は前面に詳しい情報は別ページに載せると、情報が効率的に配置され、内容を把握しやすいページ構成になります。

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

さらに文章自体は起承転結ではなく、最初に概要を記載し、それから詳細説明に入ると理解しやすいです。

細かいですが気を付けたいのは、「ですます調」にすること、句読点を正しく使うこと、「ら抜き表現」「い抜き表現」はしないこと、「だから」「そして」などの接続詞や「ここ」「それなど」の指示代名詞は使わないことが挙げられます。

文章のイメージ化で情報は伝わる

「地球上で存在する純金の割合は宝飾品が1/3を占め、各国国営の銀行保有とあわせれば、純金の約半分が割り当てられます。それと比較して民間投資は約11％に抑えられ、ついで工芸品、その他が続きます。さらに採掘可能な純金は約1/3しかないと言われ、全体から見てもかなりの量の純金が採掘された結果になります。純金は商品の需要よりも通貨、つまり投資マネーの影響力が強いため、有事、米ドル、物価、原油、金融、為替・・・（省略）」

このように文章で説明するよりも、右のようなイメージで視覚的に情報を脳に与えたほうが、文章は付属品として添えることができ、ユーザーへの理解を深めます。

一般的にグラフはExcelなどでも作成できますが、もっと戦略的を望むならIllustratorで制作していくのが見栄えが良いでしょう。

Web上の文章は無機質になりやすいです。コンピューターは機械的であるという先入観に加え、新聞や本よりも制作者の顔が見えないために、味のある文章でも人間味のない感じがしやすいです。

そのため、イラストを混ぜたり、写真を使ったほうが親近感から信頼性へとつながります。ライターが何を伝えたいのか、すぐに想像できるでしょう。

さらにサイトを活気付けるコツとしては、ヘッダーはあまり派手にしないで落ち着いた色を使い、コンテンツを目立たせるようにします。

そのコンテンツにはイラストや写真をなるべく添えることで、文章を生かします。

サイトのトップページにはなるべく、運営者の生写真を表示します。店舗なら店主、企業なら代表取締役です。履歴書のように凛とした表情で、口元では笑顔を作ります。

トークでコンバージョンレートを上げることができない以上、引き込むようなデザインと流れるような文章で、商品の魅力を伝えることに徹します。

検索エンジン対策に関係するデザイン

2005年頃はページを量産し、全てのページからトップページにリンクを貼り、目的のキーワードでどれだけ多くのコンテンツがあるかが重要でした。

2006年頃は被リンクの数が注目されます。多くの良質なサイトからリンクされていることが評価につながったため、相互リンク、リンク購入、自作自演が目立ちました。

2007年頃になると、検索エンジンも評価方法を変えてきます。GoogleとYahoo!の検索結果の違いが大きくなり、アルゴリズムが明確に差別化されました。

IPアドレスの分散によるクラスCのSEOが効果であったり、一時期はYahoo!ではドメインエイジが評価され、1990年代～2000年初頭のドメインが高くオークションにかけられていました。

日本語ドメインなども流行し、こぞってPunyCodeを模した時期もあります。

2008年は被リンクが7割、コンテンツが1割、その他が2割といった具合のSEOになっています。

しかし、SEOだけに注目すると最も重要なことを忘れがちなります。それは本当に情報を求めているユーザーのためのサイト作りです。

中身の濃い文章を中心に、見やすいデザイン、丁寧なユーザービリティがあれば、どこからともなく自然に被リンクは増えていきます。ブックマークもされてリピーターも増えるでしょう。

IPOで買い付けた株のように、急激なSEOで順位が上がったサイトは、急激に下がる傾向があります。

一方、良質なコンテンツとデザインを兼ね備えたサイトは長く運用され、ジワジワとユーザーを増やし、アクセス数はゆるやかに右肩上がりになります。ゆるやかに積み重ねてきたアクセス数は極端にゼロになることはありません。

SEOはもちろん重要です。SEOをしないと順位は上がりません。

ただ、本来の目的であるユーザー目線のサイト作り、つまり、満足感のある情報とその情報に華を添えるデザインこそがSEOの基礎になります。

このSEOの基礎があってこそ、飛び道具のようなSEOが生きてくることでしょう。

何もないスペースが生きる

デザイン力を上げるためには、ヘッダーを良くしたり、イラストを挿入したり、レイアウトを変えることが効果的ですが、もうひとつ気にしたいのがスペースです。

スペースとは何もない空白ですが、この空白を上手に使わないと本当のデザインは完成しません。

文字の間隔は前述しましたが、14pxならline-heightは160％程度、13pxならline-heightは20px程度と変わっていきます。

ヘッダーの下には2pxの黒色のボーダーを入れ、左サイドバーとコンテンツの上部には10pxのスペースを挿入、さらに左サイドバーの周りは上に10pxの空白、左右に5px、枠内は上下左右に3pxの空白を入れています。

この空白のバランス感覚こそがデザインと言えるかもしれません。非常に難しく、私も制作しながら勉強させられる毎日です。

文章、イラスト、写真単体を注視するのではなく、物質と物質との距離を適切に保つことを意識した、全体を見渡す広い視野が一層デザインを良くすると思います。

デザイン全般のリニューアル

「どこかパッとしない・・・が、どこを変えたらいいのかわからない」といった現状のサイトに対して、このような疑問を持つのは正しいことです。デザイナーでさえも、すぐにアイデアが思いつくわけではありません。

経験からの知識がその回答スピードと質を向上させますが、最終的に納得できるものを制作できるかは実のところ、初期段階ではわかりません。

制作途中に「ここをこうしたら、良くなるかな？」「もしかしたら、結構満足できるかも」「うーん、今日はいいアイデアが出ない」などと思っています。

そこでいろいろ見直します。原点に戻れるのはカラーチャートです。先ほども紹介したパターン化された3色を見つめなおし、配色を変えてみます。

したがって、「どこを変えたらいいのかわからない」と思った場合は、まずは色を次々に変えてみましょう。

ただし、デザイン全般に言えるのですが、変えても変えても満足いかないことがあります。これは心理的なものですので、一度フタを閉じて次の日に確認したり、他のライバルサイトを見たり、デザインを改修する目的を見つめなおしたりします。

満足できる配色ができたら、次にレイアウトを考えたいのですが、レイアウトは当サイトのような逆L字型が最も見慣れており、特に別の意図がなければ、逆L字型で問題はないと思います。

逆L字型で配色が決まったら、看板であるヘッダーで他社競合と差をつけます。

配色もレイアウトも写真さえも重複することはありますが、ヘッダーだけはオリジナルです。真似することもできますが、真似する人は滅多にいませんので、そのサイトの顔になります。

その後にコンテンツの中身をメイクアップするために写真、イラストを挿入していきます。この写真やイラストもなるべく、基本の配色に沿った色合いが望ましいです。

少しずつ、ユーザーに見ていただきたいサイトが完成されていきます。何か迷っている方はお問い合わせからの相談も受け付けております。

お問い合わせ

次の記事     ヘッダー作成
前の記事     記事作成