Webデザイナーの仕事は、常に“危険”と隣り合わせである。

「誰も気にならないんじゃない？」と思うような小さなことが、Web全体のパフォーマンス、ひいてはコンバージョンに至るまで、大きな影響を及ぼすことがあるからだ。

NYでセレブを熱狂させたナイトクラブ「Studio54」の創始者、イアン・シュレーガーは、こんな意味のことを言ったそうだ。

“You never know which little detail is going to be important, so they all have to be great.” （どんなに細かなことが重要になるか分からない。だからこそ、僕らはそのすべてを完璧にやらなくちゃいけないんだ）

まさに、売れる、稼げるデザインを作るヒントもここにあるのではないだろうか。

そこで今回は、見落としがちな、だが、見落とすべきではないWebデザインの“小さな巨人”（要素）たちをいくつかご紹介したい。

その1：フォント

Webサイトにおいて、言葉を伝える「フォント」こそ、最も重要なデザイン要素の一つだろう。

・フォントの選び方

似ているように見えても、それぞれのフォントには個性がある。

同じ文章が書かれていても、フォントの違いだけで、そこからユーザーが受ける印象は大きく異なる。

見やすいフォントを選ぶことは大前提。そのなかでも求められているWebサイトのデザインやターゲットに、最も適した“雰囲気”を持つフォントを選び出そう。「“雰囲気”だなんて、アバウトすぎる！」とお叱りを受けるかもしれないが、個人的には、ここに理屈は必要ないと思っている。

デザインコンセプトさえしっかり描けていれば、そのイメージに合ったフォントの候補は、かなり絞られてくるからだ。

・フォントのサイズ

あるブログ上の実験データ（出典：How to Get Your Blog Posts Read ）によると、フォントサイズを8から9に引き上げると、ユーザーの滞在時間が13秒増加したそうだ。

さらに、フォントサイズを10にすると、そこから8秒間増え、11にすると、もう6秒間増加したという。

Webサイト上のことではないが、カリスマ・ライターであるガイ・カワサキも、「僕がスティーブ・ジョブズから学んだこと」のなかで、プレゼンテーションなどで使うスライドでは、“You can’t go wrong with big graphics and big fonts.”（写真とフォントは大きくしとけば間違いない）と語っている。

単純な話だが、「視認性」「可読性」「判読性」というポイントからフォントを考えると、“大きいことはいいことだ”（森永エールチョコレートCMコピー）という一言に尽きる。

限度はあるが、どこまでフォントのサイズアップが可能か、試してみる価値は十分にあるだろう。

・フォントのカーニング（タイポグラフィ）

カーニング（フォントの間隔を調整するテクニック）は、日本のWebデザイナーには特に注力してほしい作業だ。DTPデザインとは違い、テキストデータのカーニングに制限があるのは事実だが、画像としてデザインしたロゴや見出しには必須である。

なぜなら、日本のWebサイトでは和欧混植だけでなく、和文書体のなかにも「漢字」「ひらがな」「カタカナ」と、左右に異なる空白を持つ文字が混在するからだ。ベタ打ちのままでは不自然な空きができ、読みにくさや違和感を覚えさせることも多い。

また、カーニング以外のテクニックも併せて、フォントを総合的に整えることを「タイポグラフィ」という。タイポグラフィは、“言葉”を伝わりやすくするために生まれた歴史の長い技術だ。これを行うだけで、言葉の「伝わりやすさ」は、驚くほど確実に変わる。

この技術を磨くためのお手本としては、資生堂や紀ノ国屋のロゴを手掛けたことで有名なデザイナー、山名文夫（やまなあやお）氏の作品をおすすめしたい。

出典：紀ノ国屋楽天市場店

これを見ると、優れたタイポグラフィは、美しいデザイン性さえも兼ね備えることが分かるだろう。

それぞれの文字の特性を踏まえ、視覚的なバランスと可読性が良いか、俯瞰（ふかん）しながら調整する習慣を身につけよう。

その2：配色

色には、それぞれ“意味”がある。それを知ったうえで、オンラインマーケティングにおける色彩心理学の役割を理解しよう。

色がサイトの第一印象を作り出すことは、言うまでもない。

「色を知る」ことで、プロフェッショナルとして、Webデザインをスピーディーに考えるための、良き指針が得られるだろう。また、クライアントなどにデザインコンセプトを説明する際には、力強い説得材料にもなる。

・赤

ユーザーに行動するよう刺激を与え、アグレッシブな印象を表現する。だが、強烈な色なので、赤い服は交渉や対面には不向きだと言われている。

Webサイト上でも、インパクトを感じさせる色だ。だが、使いすぎると悪目立ちする場合も多いので、メインでは使わず、アクセントカラーとして控えめに使用するのが無難だろう。

有彩色を一番引き立てる“黒”と組み合わせると、よりドラスティックな印象になり、明度が最も高い“白”と合わせると、ロマンチックな配色になる。

・青 

繊細さや誠実さを表現する。また、穏やかで、落ち着いた印象を感じさせることから、「コーポレートブルー」として多くの企業が使用している。

赤とは反対の働きをする色で、気分の“沈静作用”がある。そのため、ゆっくりと過ごしたい寝室や、気分を集中させたい勉強部屋などに向く色だ。

また、海や空を連想させるので、すがすがしく好感度の高い色だが、涼しさも感じさせるため、Webサイト上で多用する際は、季節感を考慮しよう。

・緑 

自然を象徴し、目に最も優しい色である。癒しを感じさせ、気分をリラックスさせるので、医療関係で多く用いられている。

また、濃緑色は男性的で保守的、なおかつ富を意味する。また、緑自体がお金を象徴することから、銀行などでもよく使われる色だ。

だが、その安定感と穏やかさから、インパクトが少なく、あいまいな印象を与える場合がある。Webサイト上でCTAボタンなど重要な配置に使用する場合には、周りの色との対比を考えるなど、慎重に検証しよう。

・白 

純粋さや清らかさを表現する。最も明度が高い無彩色なので、クセがなく、何色とも組み合わせやすい。

また、ビジネス系のWebサイトでは、「プロフェッショナル」としてみなされ、即座に信頼性を引き上げる効果もある。

しかし、多用すると寂しい印象も与えるため、業種業態のイメージやユーザーのペルソナなどを考慮し、バランスの良い配分を心がけよう。

上記4点の画像出典：Color Psychology Quick Reference Cards

・視認性

心理的な観点だけではなく、「視認性」というポイントからも配色を考えよう。前景と背景の色の組み合わせによって、物理的な「見やすさ」は、格段に違ってくる。

客観的なチェックをするためには、「Colour Contrast Check」を使ってみよう。

左に前景色、中央に背景色を入力すると、それぞれの色の明度差・色差・色の組み合わせの良し悪し・コントラスト比が示され、その視認度を確認できるオンラインツールだ。

その3：ホワイトスペース（空白スペース）

文字通り、何もない「空きスペース」のことである。

グラフィックやカラムの間にあるスペースのほか、テキストの行間、マージン、フォントのサイズやウェイト（太さ）を変えることによって生じるものから、画像に沿って、テキストを回り込みさせるときのオフセット設定に至るまで、「余白」がどのくらいあるのか　―すなわち、ページの全体的な密度を指す。

そして、このホワイトスペースが単なる「余白」以上の意味を持つことを意識したWebデザインが、人気を集めている。

出典：8 Effective Web Design Principles You Should Know

「Made.com」のWebサイトは、ホワイトスペースを巧みに利用した好例だ。まず、十分なホワイトスペースから、清潔感や高級感のある印象が醸し出されている。

さらに、そのシンプルなデザインによって、メッセージや画像にユーザーの視線を集中させ、見やすく、読みやすいものに仕上がっているのが分かるだろう。

意図的に広いホワイトスペースを作り出すことによって、ユーザーの視線をコントロールし、うまくナビゲートしているのだ。

だが、DTPデザインとは違い、Webページのデザイン範囲には制限がない。そのため、クライアントからは、「紙媒体に入りきらなかった情報を、Webサイトにはすべて盛り込んでほしい」という声が多いのも事実である。

そこで言われるがまま情報を詰め込んでいると、ホワイトスペースどころの話ではなくなってしまう。開いただけで、すぐに閉じられるような「読みづらい」サイトになる危険性も高いのだ。

つまり、有効なホワイトスペースを作り出すためには、デザイナーは、勇気を持って大幅な情報削除を提案する必要がある。それによって生まれるホワイトスペースの“価値”をクライアントに説明できるよう、緻密なサイト構成を練らなければならないのだ。

では、常にホワイトスペースを十分に取り入れるのがベストなのだろうか？

例えば、「毎日、激安！　商品点数拡大中！」というキャッチフレーズのディスカウントストアが、ホワイトスペースを多く取り入れたWebサイトを制作したらどうなるだろう。激安のイメージは払拭され、Webサイトに物足りなさを感じたユーザーは、どんどん離れていくに違いない。

理想的なホワイトスペースの分量に正解はない。それを案件ごとに見極め、計算していくことは、「引き算のデザイン」とも言える、最も難しいテクニックになるだろう。

良いデザイナーを選ぶ条件とは？

最後に、Webマーケターとして非常に有名なニール・パテルの記事から、良いデザイナーを採用するためのポイントをご紹介する。

・スキルレベルが高い デザイナー登録サイトなどで、ほかのデザイナーから多くの評価を得ている人

・いかに論理的か 自分のデザインしたいものを作るのではなく、商業ベースでデザインを考えられる人

・分析力の重要性 Google アナリティクスの統計データやアンケート結果など、数字を読み取ることで、デザインを変えていける人

・コンバージョン率を最適化できる キレイなだけのWebデザインでは満足しない。コンバージョンという“結果”をたたき出せるデザインができる人

・自分の“軸”を持っている クライアントに対して、「イエスマン」ではない。「ノー」と言える強さと推進力があり、ビジネスに対して最善を尽くせる人

・ユーザビリティが高く、シンプルなデザインができるこの2点をしっかり押さえ、あなたのWebサイトに、トラフィック増加の可能性をもたらす人

まとめ

この条件をしっかり満たすデザイナーがいるとすれば……。

きっと「売れている」はずだし、「稼げている」はずだ。だが当然、デザイン費は高い。あなたの想像を超えるほど、高いかもしれない。

しかし、その対価と引き換えに、あなたのWebサイトを「売れる、稼げるデザイン」にしてくれるのも彼らだ。

ニール・パテルは、それを“コスト”ではなく、“投資”として考えるべきだと説いていることを付け加えておこう。

さてみなさんは、どう考えるだろうか？

参考元： Every Little Detail Color Psychology Quick Reference Cards 11 Essential Elements of a Perfect Blog Design (a Data Driven Answer) 8 Effective Web Design Principles You Should Know How Saving On Design Could Cost You More In The Long Term

関連記事： Webマーケティングのキーパーソン、UXデザイナーに必要な4つのスキルとは？ マーケターとWebデザイナーの共同作業はなぜうまくいかないのか？その理由と改善のヒント