→ English
対象読者
ワイヤーフレームだけが渡されて、それを元にコーディングしなければいけないようなケースで役立つ知識を紹介します。
以下のような環境にいるエンジニアは読む必要はないと思います。
- 毎回デザイナーからデザインデータが用意されて、それを忠実に再現すればよい
- そもそもコーディングはコーダーがやってくれる
（デザインといっても、無からクリエイティブを生み出すような部分ではなく、あくまでエンジニアが実装段階で関与し得る範囲について言及します。）
概要
最近のWebデザインはシンプルなので、既存のWebサイトに新しいパーツを実装するような場合に、ワイヤーフレームだけが与えられ、デザインデータが用意されないことがあるかもしれません。
そのような場合、エンジニアにデザイン領域への多少の裁量が生じ、実装者によって仕上がりに差が出ます。
この記事では、ワイヤーフレームを元にエンジニアが実装した「ちょっと悪いデザイン」を例として、改善点を紹介していきます。
「デザインは感覚的なものだからセンスのない俺にはできない」と決めつける人がいますが、実際には「ここがこうだから汚く見える」と論理的に説明できる部分が多いと思います。
本編
あなたは、既存のWebサイトに新しいパーツを実装することになり、以下のようなワイヤーフレームをもらいました。デザインデータはなく、既存のデザインを踏襲してほしいとのことです。
既存のWebサイトはQiitaをイメージさせていただきました。
そして、以下がエンジニアが実装した「ちょっと悪いデザイン」です。
何が悪いか全くわからない人や、なんとなく汚く見えるけど具体的にどこを直せばいいかわからない人、などさまざまかと思います。
よければ読み進める前に直すべき部分を考えてみてください。
-
-
-
-
-
見えないラインを意識する
まず、全体的にガタガタして見えますが、それを整えるために「見えないライン」を意識しましょう。
そもそもガタガタしているかどうか判断できないなら、実際に線を引いてしまえばいいと思います。
赤い破線部分がズレているので、それを実線のところに揃えます。
揃えました。もう赤い線はありませんが、どこにラインがあるのかイメージできるかと思います。
それが「見えないライン」です。
グルーピング意識する
「1つめの見出しとその本文」、「2つ目の見出しとその本文」はそれぞれグループですが、今は余白が適切でないため、以下のように見えてしまっています。
「グループ同士の余白」よりも、「グループ内の要素同士の余白」が小さくなるように調整してみましょう。
要素一つ一つの余白を整えようとせず、まずはどこがグループになるべきか考えましょう。
強弱を意識する
例では、見出しが目立つように太字にしています。
ですが、もう少しメリハリをつけたほうが、見出しと本文の関係がはっきり視認できると思います。
FontSizeを1px小さく、文字色を少し薄くしてみました。
見出しと本文の関係なら、「大きさ」、「太さ」、「色の強さ」を見出しに対して大体6〜8割に抑えたくらいがちょうど良さそうです。
色は必ずしも変えなくていいと思います。やりすぎると統一感を損なってしまいます。
本文の主張が抑えられたことで、見出しの内容が最初にすっと読み取れるようになりました。
色の差分を作るときの注意
画面下部の背景色、単体では決して駄目な色ではないと思いますが、「テーマカラーを薄くした色」としては正しくありません。
テーマカラーは緑なので、背景は明るい緑にすべきですが、緑といっても無数の緑が存在します。
具体的には、テーマカラーは黄色に少しだけ寄せた緑ですが、Badのほうは少しだけ青に寄った緑です。
上記を見て、GoodとBadの調整ができないと感じた人は多いと思いますが、簡単な方法があるので心配いりません。
もしBadが悪いと感じられなくても、違いすら分からなくても問題ありません。
色には明度、彩度、色相といった要素がありますが、ある色の明るさ違いの色を作るときに、色相を変えないことがポイントです。
そのためには、このようなカラーピッカーを使いましょう。
右の虹色のゲージが色相（色の種類）です。これさえ変えなければ基準の色と全く違う色ができあがることはありません。
左のマップは、上下が明度（上に行くほど明るい）、左右が彩度（右に行くほど鮮やか）です。
左のマップだけを調整しましょう。
元より弱い色をつくる場合、明度は高く、彩度は弱く、つまり元よりも左上方向に動かします。
あとは感覚で調整しても明らかに変な色にはならないと思います。
エフェクトはさり気なく
ワイヤーフレームにはドロップシャドウの指定がありますが、これでは強すぎます。
これくらいがくどくなくてよいと思います。
こうして並べてみるとすっきりしたことが分かると思いますが、自分でスタイルを当てている段階では、どうしても強くつけてしまいがちです。
基準は、「エフェクトがなんとなくついているのが分かるくらい」です。
※ ただし、これは最近のWebサイト向けの話であって、ゲームのプロモーションサイトのような派手なデザインでは話が変わってきます。
少し逸れますが、アニメーションでも同じです。デュレーションはアニメーションしていることがなんとなく分かる範囲で、可能な限り短く設定しましょう。
個人的には、ほとんどのケースで0.2秒が適切に思います。アニメーションも視認できつつ、操作のもっさり感もでません。
完成
今回はかなりシビアな調整をしました。
重要なのは、最初の例を「汚いと感じることができるかどうか」だと思います。
汚いと思えるなら、あとはよく観察して、「どこが、なぜ汚いか」を特定するだけです。
バグ修正と同じく、メインは修正作業自体ではなく、原因を特定することだと思います。