| 平凡でつまらない |
危険度：★ |
41 長方形のボックスにインパクトが足りないのを解決
文＝高津戸壮（zudolab）
お問い合わせ情報を強調したい、トピックスを強調したい、ブログのエントリをわかりやすく表現したい、広告エリアを分類したいなどというとき、borderをつけたり、backgroundでグラデーションを敷いたボックスを用意することはよくあるだろう。ただ、単純に装飾をしても、単純な長方形で、印象が弱い感じになってしまうことがないだろうか。背景画像を利用して、角にアクセントをつけたり、単純なボーダーにもこだわったりし、単純なボックスにアクセントを与えてみよう。何気ない要素でも、背景画像を少し工夫するだけで、ずっとこだわった感触に見せることができる。塗りつぶしやborderは楽だが、そのような箇所にもさりげない工夫を凝らすことで、インパクトのあるデザインを実現しよう。
【1】サンプルのデザインは、2枚の背景画像を使用している。1枚目は上部のボーダーを表現するための画像だ。立体感を出すため、ただborderを指定するのではなく、このように影をつけた線の画像を横に並べている。2枚目は、ボックス右下の、欠けている部分の画像だ。背景色と同じ色の画像を背景画像に指定することで、端の部分だけ、ボックスが欠けているように見える。このように、細かい部分にグラデーションを施したり、ボックスの形を崩すような背景画像を用意すると、「長方形のボックスがただ並んでいるだけ」という印象を崩すことができるだろう。
【2】影をつけたり、紙がめくれたような効果を出したりなど、背景画像の工夫次第で、自由なデザインが実現できる。デザイン考案時には、borderやbackground-colorでの塗りつぶしのことはいったん忘れ、自由な表現を心がけよう。背景画像を重ねれば、インパクトのある表現が可能だ。CSSの表現方法に縛られるあまり、デザインの幅を狭めて考えてしまわないように注意する。なお、この方法を実現するためには、背景画像を指定する要素が足りず、＜div＞を余分に重ねる必要があることがある。ソースコードが複雑になりすぎないように注意しよう。
［INDEX］
●整理されていない
>>> 03 リストマーカーと個条書きのバランスが悪いのを解決
>>> 04 大量の要素がびっしり詰まっていて全体的に見づらいのを解決
●やぼったい
>>> 33 表の背景がきれいに表示されないのを解決
>>> 34 写真を入れると文章が読みにくいのを解決
●平凡でつまらない
>>> 41 長方形のボックスにインパクトが足りないのを解決
>>> 42 枠にとらわれたデザインになるのを解決
●メリハリがない
>>> 75 画像とテキストの上辺の位置がそろわないのを解決
>>> 76 テキストリンクがパッとしないのを解決
