ホームページを魅せる!【第6回】

ホーム > ワンポイント講座 > ホームページを魅せる!【第6回】

よくある背景色の失敗例 〜奥行きを生む背景デザインの仕方

今回は「見栄えのいい背景作成のコツ」をご紹介していきたいと思います。

ホームページ作成にある程度慣れてくると、ページの背景色を変更するなどして、自分なりにいろいろと工夫をしたくなってくるものです。しかし、ただ単に色をつけただけでは、下の例のようになんとなく「ベタッ」とした印象のチープなデザインになってしまうことがあります。

  

上記の例がなんとなく素人っぽく見えてしまう理由はいくつかありますが、何の工夫もなく背景を有彩色でべた塗りしてしまっていることが原因の一つです。白や黒、グレーなどの無彩色と比べると、赤・青・黄などの色みを持った有彩色は強い印象を与えるため、不用意に広い面積で使ってしまうと色のバランスが崩れてしまい、安っぽいデザインになってしまうことが多いのです。

自分の会社や組織のイメージに合ったカラーを上手に取り入れながらスマートなデザインを実現するためには、「奥行きのある背景」を意識するのがコツです

 

ステップ1:デザインに自信がない場合は白の面積を多くする

デザインにあまり自信がない場合は有彩色の面積を減らし、白の面積を多くするように心がけると、すっきり見栄えの良いデザインになります。

例えば、下記の例では、オレンジの背景色の上に、それよりも少し狭い面積で白い背景色を設定し、メニュー部分の文字や背景も白とグレーの濃淡だけでデザインしています。使用している色数はあまり多くありませんが、有彩色を控えめに使用することで、清潔感のある雰囲気になっています。

 

ステップ2:グラデーションを活用する

グラフィックソフトを利用すると、簡単な操作でグラデーションをかけることが可能です。グラデーションはプロのデザイナーもよく使うデザインテクニックの一つです。グラデーションを効果的に利用すると、背景に「奥行き」を出すことができます。タイトルやメニューまわりなど、画像で作成するパーツについては、うまくグラデーションを活用してみましょう。 

  

 

ステップ3:WebPilotでテキスト(文字部分)の背景色を変更してみよう

最後に、WebPilotでテキストの背景色を変更する方法をご紹介します。

WebPilotでテキストの背景色を変更するには、変更したいテキストを選択し、ツールバーのカラーバリエーションから変更したい色を選択するだけで完了です。ただし、多用すると逆に読みにくくなりますので、気をつけましょう。 

このページの先頭へ