1. TOP
  2. COLUMN
  3. デザイナーが、1pxにまでこだわる理由

デザイナーが、1pxにまでこだわる理由

ある程度経験を積んだデザイナーであれば、ページデザインを行う際に、1px単位で要素の並びにズレが無いように気を使い、色彩&トーンが調和しているか、見出し文字の字間は整えられているか等、細かい単位までこだわりを持ってデザインを仕上げていると思います。

デザイナー以外の、デザインに疎い人や、定量的な数値を重視する人の視点からすれば、このこだわりは非効率的なもののようにも感じてしまうと思います。

「こだわるのはいいけど、そこに時間をかけて、実際どれだけ効果があるのか?本当に意味はあるのか?」と。

たしかに、

キャッチ文言のカーニングを1px単位で整えたところで、バナーのCTRは変わらないかも知れない。

色彩調和における、要素と要素の色の調和を調整したところで、LPでのCVRは変わらないかも知れない。

レイアウトにおける隣接・整列・反復・コントラストがあまり加味されていなかったところで、商品の売上は変わらないかもしれない。

少し粗さは目立つけど、突飛なデザインで目を引くほうがCTR等は伸びるかもしれません。実際そのような事例はあると思います。
また、CVRなどの数値を向上させるのは、コンテンツの置き方だったり、UX的な観点でのページ設計に基づく結果だと思われます。

では、見た目における細部を神経質なまでに整える意味ははたしてあるのでしょうか?

その問いに対し、本記事ではあえて主張したいと思います。

デザインを1pxにまでこだわる意味はある」と。

その根拠はなんなのか。

今回は、上記の主張ついての考察を行っていこうと思います。

『デザイン原則』という言葉の定義

まずは考察を始める前に、本記事で使用させていただく『デザイン原則』という言葉の定義を明確にしておきます。
本記事における『デザイン原則』とは、デザインにおける基本原則となる「タイポグラフィ」「色彩調和」「レイアウト」の3つの概念を主に含みます。具体的な項目で言えば、以下の内容になるかと思います。

  • カーニングはしっかり整えられているか
  • 文字の位置や大きさは揃っているか
  • 明度対比、色相対比、彩度対比が設定されているか
  • 色彩調和から外れてた配色になっていないか
  • 全体のトーンは合わせられているか
  • レイアウトにおける隣接・整列・反復・コントラストのルールは守られているか

上記の項目をひっくるめて、本記事では便宜的に『デザイン原則』と呼称させて頂きます。

ページデザインやUI作成において、この『デザイン原則』をしっかり守ることで、全体の佇まいはより整うことになります。

デザイン原則がもたらすもの

ではプロダクトにおいて、デザイン原則はどういった効果をもたらすものなのでしょうか。

結論から言ってしまうと、デザイン原則がもたらすのは、目先の定量的な部分ではなく、いわゆる定性的な、「第一印象」や「信頼感」の部分であると考えます。

デザイン原則が適用されていない・ないがしろにされているデザインというのはどうも野暮ったく、そこに記載された内容がいくらしっかりしていたとしても、パッと見の印象としてどこか稚拙で、ひどいものでは俗悪さすら感じてしまうものもあります。

この「デザイン原則に気を使っていないデザイン」の例で多いのが、いわゆる詐欺サイト等の胡散臭いLPページに多いと思います。
これだけWebページが当たり前になった時代なので、一般の閲覧者も目が肥えてきて胡散臭さを無意識下で嗅ぎ取り、警戒します。

コンテンツがしっかりしているのに、見た目の第一印象で敬遠されがちになってしまうのは、とても勿体無いことでしょう。

バナーにせよ、LPにせよ、そのサービスを享受するための入り口、まずは第一印象での「信頼感」を担保するということ。
これがデザイン原則を適用することの大きな意味であると思います。

ではなぜ、デザイン原則を適用することでそのモノに対する第一印象や信頼感が担保されることになるのでしょうか?

その点に関して、例を見ながら解説していきます。

服装に置き換えて考える

乱暴な例えになるかもしれませんが、デザイン原則を服装に置き換えて考えてみましょう。

デザイン原則を適用することで佇まいが整うという話が出ましたが、これらは人の服装に置き換えて見ることも出来ます。

人は普段、他人の佇まいを見て、「なんかこの人オシャレだな」「カッコイイな」「可愛いな」「キマってるな」といったルックスの雰囲気を、無意識の中で感じ取っています。
細かいところまでは見なくても、全体の佇まいで「ちゃんとしている」とか「なんかだらしない」と感じ取ることが出来ると思います。

それを踏まえて、下記の例を見てみましょう。

どちらが信頼できる? 〜二種類のセールスマン〜

あなたのもとに、二種類のセールスマンが商談を持ちかけてきたとします。

AとBの2パターンありますが、中の人物は全く同じで、商談の内容も全く同じだと考えてください。

A:綺麗にセットされた髪型、自分の体型に合ったスーツ、磨かれた革靴、小物の雰囲気の組み合わせ等がしっかり整えられたセールスマン。

B:寝癖が直しきれてない髪型、ネクタイが微妙にズレている、体のサイズに合ってないスーツ、全体的に締まりのない格好、服装に合わないカバンを持ったセールスマン。

さて、あなたはどちらセールスマンの話を聞こうと思いますか?どちらの話が信頼できそうと感じるでしょうか?

よほど穿った見方をしなければ、大抵の人はAのセールスマンの第一印象に信頼感や安心感を持つはずです。したがって、Aのセールスマンの話す内容には、信憑性を感じられるのではないかと思います。

その理由は、ルックスに細かい配慮が行き届いており、「見た目」に関わる部分で、不自然なノイズとなるような要素をしっかり排除しているので、クリーンで安全な印象を受けるためです。

「見た目」が整っているかそうでないかを比べることで、そのヒトやモノ、サービスや発信内容の信頼度に差が生じてしまうことが確認できたと思います。

極端な例になったかもしれませんが、これを踏まえて次はデザインにおける例をみていきましょう。

どちらが信頼できる? 〜二種類のデザイン〜

服装における細かい配慮は、デザインに置き換えていてば、デザイン原則がちゃんと適用されているかどうかに置き換えて考えることができます。

セールスマンにせよクリエイティブにせよ、どちらも情報を伝え、最終的にはコンバージョンにつなげるという使命を持っています。
セールスマンにおける「服装」が第一印象を左右するように、クリエイティブにおけるデザイン原則の有無は、その対象のモノやサービスの「入り口」での第一印象・信頼感を担保する要素になります。

下記のような2種類の勉強会のチラシが手元に届いたとしましょう。

左は文字を打ち込んだだけで、文字やレイアウトの整頓などは加味されていないチラシ。
右はタイポグラフィ・レイアウトの原則がちゃんと適用されたものになります。

内容はどちらも同じですが、どちらの勉強会のほうが信頼できそうと感じましたか?どちらの勉強会ほうが「ちゃんと学べそう」と思いましたでしょうか?
答えはもう言わずもがなかと思います。

他にも例を上げているとキリが無くなるので一旦このあたりにしておこうと思いますが、このように、デザイン原則が1pxほど細かい単位までチューニングされているかどうかで、そのモノに対する第一印象が変わってくることが見てとれたかと思います。

もちろん「入り口」だけの話ではなく、しっかりデザイン原則が適用されているということは、長い目で見てもそのモノやサービスの信頼感を担保し、ひいては企業やブランドのブランディングにつながっていくものになります。

スタンフォード大学の実験結果

以下はWebサイトのデザインに関する記事の抜粋ですが、ビジュアルの美しさが重要であることが伝わる内容だと思います。

スタンフォード大学は、人が何によってWebサイトの信頼性を判断するかという実験を2,500人を超える参加者に対して行いました。その結果は、ビジュアルデザインの大切さを証明するものでした。
「およそ半分の消費者(46.1%)は、レイアウトやタイポグラフィ、フォントサイズや色使いといったビジュアルデザインを基準にしてサイトが信頼できるかどうかを判断していました。(中略)美しいグラフィックデザインは、サイトに足りていない機能を補うわけではありません。それでも、デザインの良さとWebサイトの信頼性は関係しているということが明らかになっています。」―Stanford Credibility Project

Webサイトの見た目については下記の記事にも海外の文献がまとめられていて参考になります。

▼美しい見た目は不要?ユーザビリティとデザイン
http://uxmilk.jp/60200

「見た目」はプロダクトにおける一要素にすぎない

ここまで見た目におけるデザイン原則の必要性について考察してきましたが、一点注意したいのは、あくまで見た目はプロダクトにおける一要素でしかないということです。

Webサイトでいえば、まずは美しいデザインで見た目で入り口の信頼感を担保はするのですが、そこから先の、ストレスを感じさせないサイトパフォーマンス、的確なユーザーストーリーの中で配置されたコンテンツ、また、デベロッパー側でいえばサイトのリテンションを加味したマーケティング施策など…考慮すべき大切な要素は他にもあります。

見た目の信頼感 ✕ サイトパフォーマンス ✕ ユーザビリティ ✕ マーケティングこれらがバランスよくまとまったものが本当に優秀なプロダクトだと思います。

そんな素敵なプロダクトを作っていきたいですね!

今回のまとめ

  • 1pxに至るまで細かく見た目を整えることは、Webサイトやクリエイティブ、プロダクトの第一印象での信頼感を担保することになる。
  • 「見た目」の第一印象や信頼感を担保するのは他ならぬデザイナーの使命。
  • 見た目はあくまでプロダクトの一要素であることは留意しておくべき。