こんな経験はないだろうか。せっせとウェブページのコンテンツを作り上げ、画像も修正し、レイアウトも調整したのに、いざ開いてみると、背景色がまるで十年前のQQスペースで適当に選んだような灰色地に白文字で、一瞬でページ全体を時代遅れの雰囲気に引き戻してしまう。正直言って、ウェブページの背景がダサいと、コンテンツが書けていない以上に心が痛む。でも、背景は単色か画像を貼るだけだと思っているなら、それはもったいない。
今日は、無料で使える便利なツール「CSSグラデーションジェネレーター」を紹介しよう。名前は技術っぽいが、実際は口紅を選ぶのと同じくらい簡単で、マウスをクリックするだけで高級感のある背景を作れる。ウェブページを開いて、2色を選ぶだけで、あとはツールがやってくれる。コードもその場で生成されるので、コピー＆ペーストですぐ使える。
なぜこれがあなたのウェブページを救えるのか、具体的な例を挙げよう。例えば、文芸風のブログを作りたいなら、背景を淡いベージュから淡いピンクへのグラデーションにすれば、ページ全体が優しい雰囲気になり、文字も目に優しい。また、製品紹介ページなら、ダークブルーからバイオレットへのグラデーションで、テクノロジー感が一気に高まり、顧客はあなたの製品が高価に見えるだろう。これは単なる白地に黒文字よりもはるかに良く、適当な高解像度画像を背景にして文字が読めなくなるよりずっとマシだ。
「グラデーションは派手になりすぎないか？」と心配する人もいるかもしれないが、実際にはそんなことはない。本当に美しいグラデーションは、一目見て「あ、気持ちいい」と思わせるが、どこが良いのかは説明できないものだ。このツールでは、角度やグラデーションの方向を調整でき、線形や放射状などの異なるモードも選べる。夕焼けのような水平線を作りたいなら、線形グラデーションを選び、上から下へオレンジから淡いピンクに移行させ、透明度を調整すれば、フィルターで加工した画像よりも自然な効果が得られる。
もう一つ小さなコツを教えよう。色の組み合わせに自信がないなら、ツールには通常プリセットがあるので、それを参考にしたり、カラーホイールを参照したりできる。色を選ぶときは、真っ赤や真っ緑を避け、彩度の低いモランディカラー、例えばグレーブルー、ダーティピンク、ライトカーキなどを試してみよう。どんな組み合わせでも失敗しない。しかも、このジェネレーターはリアルタイムで、色を変えると右側のプレビューが即座に変わるので、不安なら何組も試せば、必ずあなたに合ったものが見つかる。
重要なのは、このツールは無料で、登録もダウンロードも不要で、ブラウザで開くだけで使えることだ。朝の仕事中に10分間サボって背景を決め、コードをCSSファイルに貼り付ければ完了だ。一時間かけて画像を探したり、透明度を調整したり、異なる画面に合わせたりする手間が省ける。
最後に言いたいのは、ウェブページが美しいかどうかは、しばしば背景一つで決まるということだ。どんなに真剣にコンテンツを書いても、背景がダサいと、人は最初の一瞥で閉じてしまう。逆に、背景が心地よければ、人はあなたの文章をもう少し読んでみようと思う。だから、怠けずに、次回リニューアルするときは、まずこの無料カラーパレットを試してみてほしい。きっと「自分にも美的感覚があったんだ」という驚きがあるだろう。