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

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

サイトのクオリティを高めるパーツデザイン(2) 〜メニューのデザインバリエーション

「画面パーツ」の制作テクニック第2弾は「メニュー」を題材として取り上げます。  

左のような「テキストリンク」のみでメニューを構成しているホームページもたまに見かけますが、メンテナンスが容易な半面、デザイン的にはやや物足りなさを感じてしまうことは否めません。それほど高度なデザインテクニックを駆使しなくとも、ちょっとした一工夫で「見栄えのする」メニューを作成することができますので、その手順をご紹介します。


 

ステップ1:どのようなメニュータイプにするかを決める

まずは、メニューのタイプにはどのような種類があるのか、代表的なものを順に見てきましょう。
 

(1)メニュータイトルのみ

もっとも多くみられるスタンダードなメニューです。 要素としてはテキストのみですが、罫線や矢印アイコンなどを効果的に使うだけで立派なメニュー画像になります。
  
(2)メニュータイトル + 補足説明タイトル
 
タイトルだけではないようがわかりにくい商品名やサービス名などをメニューに表記する場合は、補足説明を添えるとわかりやすくなります。
 
(3)メニュータイトル + アイコン/写真
 
ページ自体にビジュアル要素が少ない場合や、メニュー項目が少ない場合には、メニュータイトルにアイコンや写真などを加えることで直観的にわかりやすくなり、視認性の高いメニュー画像になります。


 

ステップ2:メニューデザインのコツ

 

メニューのタイプが決まったら、実際にメニュー画像を作成します。 ここでのポイントは「デザインし過ぎない」ことです。 左の上の例のようにシャドウやエンボス、グラデーションなどを強くかけ過ぎると重苦しくなってしまいます。 逆に、左の下の例のように控えめにデザイン処理するのがスマートに仕上げるコツです。

 

ステップ3:WebPilotで画像を挿入してみよう

前回は画像をアップロードするところまでをご紹介しましたので、今回はその続きをご説明します。

WebPilotで画像のアップロードに成功すると「イメージプロパティ」ウィンドウの「イメージ情報」タブの「URL」欄に、アップロードした画像のファイル名が表示されます。次に「代替テキスト」欄に画像の説明テキスト入力。最後に「OK」ボタンをクリックすれば、ページ挿入されます。

このページの先頭へ