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

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

サイトのクオリティを高めるパーツデザイン(1) 〜ボタンのデザインテクニック

今回からホームページでよく使われる「画像パーツ」の制作テクニックについてご紹介していきます。 1回目は「ボタン」を題材として取り上げます。

まずは、下の例をご覧ください。 
 
 
これらは「べべル」や「エンボス」というデザイン効果を使用したもので、一昔前までは多用されていましたが、最近ではやや古臭く感じられるデザインかもしれません。 ボタンの形状にも流行があり、さらにはデザインの表現方法も年々進化していますので、数年もたつとすぐに「時代遅れ」になってしまうことがあります。上のような「厚みのあるボタン」は少し時代を感じさせるデザインですね。 自社のホームページでこのようなボタンが残っていて、「もっと今風のデザインにしたい」と考えている方も多いのではないでしょうか。
 
最近人気があるボタンデザインの例としては、以下のようなものがあります。
     
 「光沢感がある」「あまり厚みがない」という点が特長ですが、今回はこのようなボタンの作り方をご紹介したいと思います。
 

ステップ1:グラデーションのかけ方を工夫する

(1)の例のようなボタンを作成するには、「グラデーション」を利用します。 ここで、濃色から単色へのグラデーションの階調を均一にするのではなく、下図のように濃淡の境目がくっきりわかるようにグラデーションを設定すると、光沢感のあるボタンを表現することができます。

        

ステップ2:シャドウと境界線の活用

次に、(2)の例のようなボタンの作り方を見ていきましょう。 まず、ベースとなる長方形にグラデーションをかけます(下図左)。 これだけでもなんとなくボタンらしくはなりますが、さらにシャドウ(影)を設定してみます(下図中央)。シャドウの効果でかなり立体感が出てきました。これで完成としても良いのですが、ここではさらに白色で「境界線」を加えてみます(下図右)。 こうすることで、ボタンのエッジがはっきりすると同時にシャドウも強調され、よりボタンらしくなります。

 

以上のようなポイントに沿って改善した一例が下のタイトルです。 いかがでしょうか? 上から下、左から右に視線が自然と流れ、ステップ1で設計した優先順位に沿って情報が眼に入ってくることを実感して頂けると思います。

 

ステップ3:WebPilotで画像をアップロードしてみよう

最後に、WebPilotで画像をアップロードする方法をご紹介します。

WebPilotで画像をアップロードするにはまず、ツールバーの「イメージ挿入/編集」アイコンを選択し、「イメージプロパティ」ウィンドウを開きます。 次に、「アップロード」タブを選択して「参照」ボタンをクリック。 アップロードするファイルを選択するウィンドウが表示されるので、アップしたい画像を選択し、最後に「サーバーに送信」ボタンをクリックすれば完了です。

 

このページの先頭へ