画像を使わない場合のwebデザインの魅せ方について
webデザインにおいてコントラスを確保することはサイト全体にリズムをつけ、素人感や飽きっぽさを払拭することができる傾向にあります。画像や動画は要素間のコントラストの比重が高く、簡単に実装できます。しかし、中には画像を使うまでもない情報や、伝えたい情報に適した画像が見つからない、用意できないことが多々あると思われます。その際にwebデザインでどのようにコントラストを確保するのか整理しました。
タイポグラフィを工夫する
前回の記事でタイポグラフィには以下6つの属性を組み合わせることでコントラスを確保できることを整理しました。
- 大きさ
- 太さ
- 方向
- 構造
- フォーム
- 色
これらは単一の属性だけ使用しても十分なコントラストが得られることは稀です。
現在私が個人的に作成しているデザインを例にそれぞれの属性を組み合わせてみます。
case1 大きさ・太さ・色
まず初めにコントラスを確保していない例から。
見出しは本文と比べて若干大きく太いですが、「いわれてみれば気づく」程度のコントラストとなっています。これでは各要素の情報に変化がなく、退屈な印象となります。
続いて見出しを本文と比べて、大きく、太く、色をつけてコントラスを確保した例です。
見出しは上がる、下がる、なしのいずれかの状態で表すことができるため、見出しの隣にそれらを表すアイコンを配置しました。
- 脂肪分、環境負荷：下がる
- タンパク質、鉄分：上がる
- 飼料・薬剤：なし
さらにそれぞれの見出しの重要な箇所をアイコンと同様の色とすることでイメージを持ちやすくすることを意識しました。
- 脂肪分：脂肪
- タンパク質：タンパク
- 鉄分：鉄
- 飼料・薬剤：薬
- 環境負荷：負荷
これらを適用することでコントラストを確保していない例の状態と比べてデザインを魅せることができ、情報の伝わりやすさも向上したことが確認できます。
case2 方向・フォーム
続いて見出しに方向とフォームによってコントラストを確保した例です。
日本語の見出しはキーワードとなる箇所を大きく、色を変えています。
見出しの中でキーワードとなる箇所を大きくすることで一定だったフォントサイズにコントラストがつきます。
- 健康志向：健康
- アウトドア派：アウトドア
- 料理好き：料理
もう一つ、英語表記で右側に縦方向に配置しています。これは方向によるコントラストです。キーワードだけの単語を配置することでイメージしやすくなります。
一定だったフォームに変化をつけることで強調すべきキーワードに目線を誘導させる効果があります。
さらに大きさ、太さ、色によるコントラストも加わっています。
case3 構造
続いて構造によってコントラストを確保した例です。
見出しは明朝体、本文はゴシック体となっています。
画像の隣にある動物名はセリフ体、明朝体のため、それに合わせるようにしてます。
また、英語表記の見出しには方向のコントラストも加わっています。
画像を使用しなくてもタイポグラフィの工夫次第である程度のコントラストを確保し、サイト全体を魅せることができます。
また、背景色によってコントラストを表現することに関しては次回投稿予定となります。
今回はここまでとなります。
Discussion