2006年11月24日（金）

知られざる、企業Webサイトの「メインメニュー（ナビゲーションメニュー）」への熱き思い

所属している制作チームが受注案件をガシガシ進めており、この営業日報ブログには久しぶりに投稿します。

今回の内容では、技術的な面にスポットを当てるべく、サイトの大事な部分であるメインメニューについて一言。

サイトをデザインする際に、初期段階で必ずクリアにしなければならないのが、サイトの中のページを回るために重要なメインメニュー。まずこれを決めなければ、サイトのレイアウトが固まりません。

ぱっと思いつく、べーシックなものとしては、


○左袖（右袖）縦メニュー
項目が増減しても対応しやすい反面、ページ内容のスペースが圧迫される。袖 or ボディ内容のどちらかが少ないと、余白がめだってもったいない。
増えすぎると超縦長になるので、折りたたんだりポップアップにしたりしないといけません。

ex：http://www.sapporo-tsuchiya.co.jp/　http://daimaru.e-medsol.com/　など


○ヘッダ付近に置く横一列メニュー
すべてのメニュー項目を、一番目につきやすい部分にまとめる手法。メインメニュー以下のエリアに余裕が生まれる。
第一階層のみ見せて、第二階層なんかはドロップダウン風にすると、結構見やすくなってレイアウトも圧迫しないのが良い。タブっぽく見せて、今どのコーナーにいるかがわかるようにもできたり。

ex：http://www.i-tasu.com/　http://www.ymh.co.jp/sapporo/　など


○その他変則的メニュー
第一階層を横一列に。第二階層やジャンルが異なる項目は袖に。

ex：http://www.i-tasu.co.jp/　http://www.wakariyasui-map.com/　など


があります。


ちなみに、現在進めている案件ではヘッダ付近に置く横一列メニューを使っています。

まだお見せすることが出来ないので、ささっと作った4コマ説明アニメGIFはこちら♪


navigation_info.gif
▲クリックでアニメ画像を再生します


企業Webサイトのメインメニュー1つでも、下記の要件を満たすにはどうしたら良いかを常に考えて、企業イメージ・企業担当者が更新しやすいもの・今後の拡張性を計画します。


1. CSSやJavaScriptを切っている状態でも稼働するか。その場合でも使いやすいか？

2. 第一階層のメニューが増減しやすいレイアウトか？

3. 第二階層もどこまでのばせるか？

4. 項目ごとの文字数が増減してもある程度対応できるか。

5. 「押せる」ことがわかる画像ボタンか？

6. 項目を増やすときの作業の手間はかからない？

7. マウスがロールオーバーした時に、ちょっとした変化を見せられないか？

8. アイコン付けられないかな～？

9. 目立って可読性のあるフォントはどれかなー？

10. サイトの質を高めるために良さげなフォントで画像化？　軽さ・汎用性を考えてテキストリンク使用？

（…以下続く）


と、一部おまけ的な要素も入り交じっていますが…。


見に来てくれたユーザーもサイトを活用しようとしている会社も袋小路に迷い込まないように、アイタスの制作現場では、通常の案件でもここまでのシチュエーションを想定して慎重にメインメニューを選定しています。

以上、現場からでした。


＜長崎＠アイタス＞


企業ホームページ活性化のデファクトスタンダード『Movable Type』（MT）を用いたカスタマイズサービス

→ サービス概要・料金体系
→MTカスタマイズＱ＆Ａ
→ デモサイトとその説明

  • Posted by アイタス

ご依頼・お問い合わせは、札幌 011-223-6322 までお気軽にお電話下さい。

受付時間
9:00-12:00/13:00-18:00

サイトからのご依頼

Comments（最近のコメント）