デザインに関する疑問や悩みに答えてみました

2018年5月10日 18:36

※ 社内であがったデザインに関する疑問や悩みに回答してみました。
※ 個人的な解釈や見解を多く含みますので、あくまでも参考程度に見ていただければと思います。

Q1. ヘッダーには必ずロゴを入れた方が良いですか？

WEBサイトの場合「noindex」にしていない限りどのページもランディングの対象になります。そのため、常に表示してあるグローバルエリアにロゴやサイトの特性を置くのはブランディング効果があると思います。しかし、サービスや機能を理解したうえでダウンロードして使うアプリケーションなどではロゴは起動時にある程度で、あとは機能の使いやすさに特化したUIでも問題ないかと思います。（※ただし、最近は画面のスクリーンショットがユーザー間で共有されることが多いので、敢えてロゴを入れておくのはブランディング戦略のひとつと言えるかもしれません。）

Q2. 配色に悩むことがあります。メイン、サブ、アクセントとあるけど1画面にどれくらいの色をつかっていいものなのでしょうか。

一般的な配色設計においては、ベースカラー70%、メインカラー25％、アクセントカラー5％で構成するのがいいと言われていますが、特にこれといった「決まり」はありません。たとえば子供っぽい印象であったり、華やかな印象、イメージカラーやブランディングカラーを使用する場合などは、複数色をメインカラーやアクセントカラーとして使用する事もあります。配色が自由に決められる場合は色数にも制限がないので、「どういう印象を与えたいのか」や「どういう感情を持たせたいのか」などUXやブランディングの観点で色数や配色を決めるのがよろしいかと思います。ただし、複数色を使用する場合の配色割合としては、あくまでもメインカラーやアクセントカラーに使用する程度で、ベースカラーに複数色を使用することは視認性の観点からあまりオススメはしません。

Q3. 綺麗なデザインにしようとWEB上に配布・公開されているUIを参考に装飾するけど何か違って何度もリテイクしてしまいます。

理想のベンチマークサイトがあってそれを真似してるけどもどうやっても似ない場合、マージンやパディング、行間や字間を感覚で取っていませんか？グラフィックや配色は目に見えて真似やすいですが、何となく感覚で設定しがちなのが余白です。そこも全部真似してみると、「何か違う」っていうのは解消される可能性があります。
綺麗に設計されたデザインは余白の使い方が非常にうまく、そこでかなりの差が生まれます。余白は音楽にたとえると休符に似た役割を持ちます。メロディーにおいて重要な役割を担う休符と同じくらい、デザインでは重要な役割を担っています。

Q4. 「Q.2」の回答で配色の割合等はわかったのですが、例えば、エラーの文字色にサイトの配色で決めた色を使用したらエラーっぽく見えず違和感を持ちます。

機能の状況を示すエラーなどの配色とサイト全体の配色設計（サイトカラー）は別だと考えていただいて構わないかと思います。たまたまサイトで定めている色の中に危険色（エラーと知覚されやすい赤系の色）がある場合はそちらを使用する事はあるかと思いますが、基本的に注意を喚起する場合は無理してサイトカラーを使用するよりも危険色を使用した方が分かりやすいかと思います。それでもチームで、「使い勝手よりサイトイメージにプライオリティを置きたい」のであればサイトカラーの中で一番それらの色に近い色を使用するなどで調整してみてください。

Q5. 強調をしたいのですが、グレーの背景にパステルカラーの背景色が合いません。どうしたらいいですか？

グレーの背景にパステルカラーを用いる場合はコントラストに気を付けなければなりません。
パステルカラーは中間色のひとつで、明度は高いけど低彩度の色になります。そしてグレーもある程度明度は高いものの無彩色の色となるため、お互いの色距離が近くコントラストの差が低いと言えます。この2色を組み合わせることは視認性が悪くなるため、強調手法として表現するには向きません。
この場合の解決策としては、色と色の間にボーダーを入れて色同士を分離させる。もしくはどちらかの色をコントラストの差が高くなる色（この場合は低明度の色など）に変えるのが好ましいかと思います。
また、強調手法は背景色を変えること以外にも要素を膨張させたり、アイコンなどのアイキャッチを入れたりと他の手法もあるので、デザインに合ったより最適な手法も検討してみてはいかがでしょうか。

Q6. WEBサイトにおいてロゴや写真などの画像にリンクは貼るべきですか？ロゴや写真がボタンのように機能していることに違和感を持っています。

ロゴを押したら遷移したり、写真画像を押したら拡大するのは、ロジックではなくアフォーダンスと言えるかと思います。
WEBなどのデジタルデバイスにおいて画像は「押したら何かあるのかも」という誘発特性を持っています。これが紙に印刷されたロゴや画像を押さないのは印刷物そのものがそういった機能を持ったものではないと知覚してるからであり、「どの媒介でそれらを見ているのか」で変化するのではないかなと感じます。
WEBで「画像は押したくなる」というアフォーダンスが存在するのであれば、現状は対応した方がユーザービリティが向上するかと思います。
ただし、「画像であれば押せるのでボタンも敢えてボタンにしなくてもいい。すべて画像で代用できる」とは限りません。あくまでも、現在使っているデバイス上のアフォーダンスとして普及してる概念なので、普遍的なアフォーダンスとしてはボタン要素の方が「押す」動作を誘発させることにおいては向いていると言えるでしょう。

「デザインに関する疑問や悩みに答えてみた」の第一弾は以上です。

【緩募】デザインに関するFAQを募集したいと思います。
参考になるかは分かりませんが、私なりに回答させていただきます。

https://docs.google.com/forms/d/e/1FAIpQLSfPJ598myphyDeB8_PkbZAmumT_vsF1vE79cXLF-Ho85WgdbQ/viewform

※ 回答に関してはnoteにてさせていただきます。
※ 時間の都合上頂いた疑問や悩みすべてに回答できるかは分かりませんのでその点ご理解とご了承ください。