Help us understand the problem. What is going on with this article?

エンジニアでも知っておきたいデザインの基礎知識

English

対象読者

ワイヤーフレームだけが渡されてコーディングしなければいいけないようなケースで役立つ知識を紹介します。

以下のような環境にいるエンジニアは読む必要はないと思います。

  • 毎回デザイナーからデザインデータが用意されて、それを忠実に再現すればよい
  • そもそもコーディングはコーダーがやってくれる

(デザインといっても、無からクリエイティブを生み出すような部分ではなく、あくまでエンジニアが実装段階で関与し得る範囲について言及します。)

概要

最近のWebデザインはシンプルなので、既存のWebサイトに新しいパーツを実装するような場合に、ワイヤーフレームだけが与えられ、デザインデータが用意されないことがあるかもしれません。

そのような場合、エンジニアにデザイン領域への多少の裁量が生じ、実装者によって仕上がりに差が出ます。

この記事では、ワイヤーフレームを元にエンジニアが実装した「ちょっと悪いデザイン」を例として、改善点を紹介していきます。

「デザインは感覚的なものだからセンスのない俺にはできない」と決めつける人がいますが、実際には「ここがこうだから汚く見える」と論理的に説明できる部分が多いと思います。

本編

あなたは、既存のWebサイトに新しいパーツを実装することになり、以下のようなワイヤーフレームをもらいました。デザインデータはなく、既存のデザインを踏襲してほしいとのことです。

既存のWebサイトはQiitaをイメージさせていただきました。

sample_ja.png

そして、以下がエンジニアが実装した「ちょっと悪いデザイン」です。

ss1.png

何が悪いか全くわからない人や、なんとなく汚く見えるけど具体的にどこを直せばいいかわからない人、などさまざまかと思います。

よければ読み進める前に直すべき部分を考えてみてください。

-

-

-

-

-

見えないラインを意識する

まず、全体的にガタガタして見えますが、それを整えるために「見えないライン」を意識しましょう。

ss1_fix.png

そもそもガタガタしているかどうか判断できないなら、実際に線を引いてしまえばいいと思います。

赤い破線部分がズレているので、それを実線のところに揃えます。

ss2.png

揃えました。もう赤い線はありませんが、どこにラインがあるのかイメージできるかと思います。

グルーピング意識する

ss2_fix1.png

「1つめの見出しとその本文」、「2つ目の見出しとその本文」はそれぞれグループですが、今は余白が適切でないため、以下のように見えてしまっています。

ss2_fix2.png

「グループ同士の余白」>「グループ内の要素同士の余白」となるように調整してみましょう。

ss3.png

要素一つ一つの余白を整えようとせず、まずはどこがグループになるべきか考えましょう。

強弱を意識する

例では、見出しが目立つように太字にしています。

ですが、もう少しメリハリをつけたほうが、見出しと本文の関係がはっきり視認できると思います。

ss3_fix.png

FontSizeを1px小さく、文字色を少し薄くしてみました。

見出しと本文の関係なら、「大きさ」、「太さ」、「色の強さ」を見出しに対して大体6〜8割に抑えたくらいがちょうど良さそうです。

色は必ずしも変えなくていいと思います。やりすぎると統一感を損なってしまいます。

ss4.png

本文の主張が抑えられたことで、見出しの内容が最初にすっと読み取れるようになりました。

色の差分を作るときの注意

画面下部の背景色、単体では決して駄目な色ではないと思いますが、「テーマカラーを薄くした色」としては正しくありません。

ss4_zoom.png

テーマカラーは緑なので、背景は明るい緑にすべきですが、緑といっても無数の緑が存在します。

具体的には、テーマカラーは黄色に少しだけ寄せた緑ですが、Badのほうは少しだけ青に寄った緑です。

ss4_fix.png

上記を見て、GoodとBadの調整ができないと感じた人は多いと思いますが、簡単な方法があるので心配いりません。

もしBadが悪いと感じられなくても、違いすら分からなくても問題ありません。

色には明度、彩度、色相といった要素がありますが、ある色の明るさ違いの色を作るときに、色相を変えないことがポイントです。

そのためには、このようなカラーピッカーを使いましょう。

color_picker.png

右の虹色のゲージが色相(色の種類)です。これさえ変えなければ基準の色と全く違う色ができあがることはありません。

左のマップは、上下が明度(上に行くほど明るい)、左右が彩度(右に行くほど鮮やか)です。

左のマップだけを調整しましょう。

元より弱い色をつくる場合、明度は高く、彩度は弱く、つまり元よりも左上方向に動かします。

あとは感覚で調整しても明らかに変な色にはならないと思います。

ss5.png

エフェクトはさり気なく

ワイヤーフレームにはドロップシャドウの指定がありますが、これでは強すぎます。

ss5_fix1.png

これくらいがくどくなくてよいと思います。

ss5_fix2.png

こうして並べてみるとすっきりしたことが分かると思いますが、自分でスタイルを当てている段階では、どうしても強くつけてしまいがちです。

基準は、「エフェクトがなんとなくついているのが分かるくらい」です。

※ ただし、これは最近のWebサイト向けの話であって、ゲームのプロモーションサイトのような派手なデザインでは話が変わってきます。

少し逸れますが、アニメーションでも同じです。デュレーションはアニメーションしていることがなんとなく分かる範囲で、可能な限り短く設定しましょう。

個人的には、ほとんどのケースで0.2秒が適切に思います。アニメーションも視認できつつ、操作のもっさり感もでません。

完成

ss6.png

今回はかなりシビアな調整をしました。

重要なのは、最初の例を「汚いと感じることができるかどうか」だと思います。

汚いと思えるなら、あとはよく観察して、「どこが、なぜ汚いか」を特定するだけです。

バグ修正と同じく、メインは修正作業自体ではなく、原因を特定することだと思います。

laineus
趣味で色々作ってます。 仕事ではマッチングアプリの開発チームマネージャーをやっています。
https://laineus.com
linkbal
街コンポータルサイト「machicon JAPAN」やマッチングサービス「CoupLink」などを開発・運営しています。
https://linkbal.co.jp
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした