文字と画像のジャンプ率
ページ内に配置されている最も小さい文字と最も大きい文字の大小比が大きいほど、変化に富み、活動的なイメージがある。
その大小比を文字ジャンプ率と呼ぶ。
エンターテイメント系や若者向けWebページでは高めのジャンプ率を設定することで、楽しげな雰囲気や親しみやすさを演出できる。
また、高級感、信頼感が必要なページではジャンプ率を低めに設定すると、求めるイメージに近づきやすい。
・写真のジャンプ率
写真の場合は少し、趣が異なり、ジャンプ率を上げることで必ずしも活動的になるというわけではない。
例えば、クールな写真を大小つけてレイアウトすると、写真の持つクール感が強調される。
つまり、写真のジャンプ率を上げることは、写真がもつ元々持っているイメージをより強調する効果がある。
そのため、質の低い写真を大小織り交ぜてレイアウトしてしまうと、逆に質の低さが際立ってしまうことにもつながるので注意したい。
写真の質が低い場合は、大きさをそろえて整然と並べておいた方が無難で失敗が少ない。
写真の質が高ければ、メインとサブをうまく分けてレイアウトすることで、よりメインの写真の個性を印象づけられて効果的だ。
さらに詳しく見るなら
レイアウトのコントラスト
Contrast(コントラスト)は画面のメリハリを生む重要な要素だ。コントラストが低いとあいまいで、退屈な印象になる。
・パっとしないときはコントラスト
デザインがいまいちパっとしないと感じたら、コントラストを上げることを考えると解決する場合が多い。
コントラストを上げるとは、揃え、バランスを整えた後に、崩していく作業といえる。
さらに詳しく見るなら
IDとclassを効率よく使い分ける
CSSでレイアウトしていると属性の優先順位が邪魔をしてCSS指定が意図したとおり表示に反映されないことがある。
こういった場合は、あらかじめIDとclassの使い分けを意識してレイアウトしておくとよい。
・レイアウトに関するもの(ブロックの位置や大きさ)をIDで指定。
ヘッダー( #header )
メインコンテンツ( #main_contents )
(ブロックの大きさ)
width
height
(位置指定)
margin
padding
・それ以外(文字スタイルなど)はclassで指定。
文字( .contents )
font-size
line-height
属性の優先順
ID = 100
class = 10
要素タイプ(pなど) = 1
さらに詳しく見るなら