Vol.16 白と黒のコントラストを生かしたデザイン

飽きさせないレイアウトやちょっとした一工夫で、デザインをよくするテクニックをビジュアル重視で紹介。実践的なWebデザインを通して、デザインを構成していくための考え方を学ぼう。
制作・文＝佐藤好彦

Vol.16

白と黒のコントラストを生かしたデザイン

Webサイトは印刷物と違って、色を使ってもコストに違いは生じない。しかし、あえて色を減らすことによっても、デザイン的な効果が出ることは知っておきたい。モノトーンでまとめられたデザインは、うまく使えばシャープなイメージになるし、ワンポイントで使った色も目立ちやすい。白と黒はもっとも明度の差が大きく、目に入りやすいというメリットもある。デザインのパターンのひとつとして、白と黒を基調にするという選択肢を持っていることは有効だ。また、白黒の写真はカラー写真とは違った雰囲気を持っている。白黒写真はデジタルカメラ以前の、フィルムで撮影された銀塩写真で長い歴史を持っている。白と黒でひとつの世界を表現するために、闇や光を強調したコントラストの強い写真が数多く撮られてきた。強いコントラストによって被写体の形が強調され、カラー写真以上に伝えたいことが伝わるということもある。今回は、コントラストを強めた写真を使って、白と黒のコントラストを生かしたモノトーンのデザインを考える。

CREATIVE POINT A

カラー写真を白黒に変換する

CREATIVE POINT B

周辺光量の低下した画像を作成する

CREATIVE POINT C

文字のアンチエイリアスをコントロールする

CREATIVE POINT D

デザイン的にも白と黒のコントラストを生かす

CREATIVE POINT E

ナビゲーションを配置する

CREATIVE POINT F

Dreamweaverで要素を配置する