ウェブ制作のクラウドビジネスをはじめよう！

bingo!CMSニュースレター

配信：2019年6月26日

パートナー向けニュースレターのアーカイブです

 
bingo!CMSロゴ画像（ニュースレタートップ用）

サイドメニューレイアウトのメリットとは？
bingo!CMS導入事例

こんにちは！ bingo!CMS 広報担当の鈴木です。

世の中にWebサイトはたくさんありますが、グローバルメニューがページ上部にあるサイトデザインが圧倒的に多く、サイドにあるものはあまり見かけません。

そこで、グローバルメニューがサイドにあるbingo!CMS制作事例をピックアップし、そのメリットを考えてみました！
 
まずは事例からご紹介します！
 
 

株式会社コムプランニング様 制作事例
社会福祉法人 寿考会


社会福祉法人 寿考会

神奈川県二宮町を拠点に様々な社会福祉に関するサービスを提供する法人のサイトです。複数の施設をひとつのWebサイトで紹介していますが、施設の種類ごとにページが色分けされていて見やすいですね！
清潔感がありつつ、優しい雰囲気も感じられる配色です。
 
 

シーコム・ハクホー株式会社様 制作事例
広島県留学生活躍支援センター


広島県留学生活躍支援センター

広島県へ留学を希望する学生へ向けて、情報を発信するポータルサイトです。
グローバルメニューにホバーするとローカルメニューが横からスライドします。
楽しい学生生活が思い描ける充実した情報量ですが、ラップトップなどディスプレイが小さい環境でも、ストレスなく閲覧できるよう配慮が行き届いています！
 
 

シフトテック株式会社 制作事例
株式会社下田組


株式会社下田組

神奈川県南足柄市に本社を構え、注文住宅・リフォーム・大型建築工事・土木・塗装工事・公共工事を請け負う企業のコーポレートサイトです。
カバーを縦長に使うデザインが新鮮ですね！情報量が多いですが、住宅や現場、施工の様子などの写真が豊富に使われているので、視覚的にわかりやすいです。
 
 

グローバルメニューがサイドにある場合のメリットを考えてみると、
  • メニュー配置が縦積みなので、ユーザーの視線移動がラク
  • メニュー数の増減によるwidth調整が不要
  • メニューをたくさん配置できる
  • メニューやページの追加に対応しやすい
  • ディスプレイの高さを目一杯使えるので写真映えする
といった点が挙げられると思います。
 
個人的には、マニュアルサイトなど（bingo!CMSマニュアルサイト がまさにそうですが）ドキュメントがたくさんあるサイトの場合は、メニューが縦積みのほうが探しやすい印象です。
 
逆にデメリットとしては、
  • メニューが増えすぎるとウィンドウの下に隠れ視認されない
  • メニューの文字数が長いと途切れたりコンテンツを邪魔する
  • 人の視線は左から右に移るので左サイドのメニューは流し見されやすい
というような点も挙げられるので、適切なメニュー数にする、目に留まるようなデザインにするなど、一定の工夫も必要です。
 
bingo!CMS1.7からは PC7-AN-01-7 というスキンで、縦型メニューが簡単に構築できるようになりました。
このスキンは弊社 宮内によるデザインです。
どのような意図でデザインしたのか？ 本人に突撃インタビューしました！
 
シフトテック株式会社 シニアディレクター：宮内
サイドメニューレイアウト（2カラム）のスキン「PC7-AN-01-7」は、サイトを閲覧する方の目線の動き「F型」を意識しレイアウトを組み立てております。
このスキンをご利用いただくことで、読みやすく見やすいページを制作していただけると考えております。
また、ワイドディスプレイのパソコンが増えてきている中、通常はページ上部にあるヘッダーやグローバルナビゲーションがサイドにあることで、コンテンツエリアの表示領域を増やすことが可能となり、ファーストビューにより焦点を当てる効果が期待できます。

PC7-AN-01-7は、サイドメニューの欠点である「メニューの視認性」を考慮したデザインになっていますので、様々なサイトでご利用いただけます！
今までサイドメニューレイアウトにチャレンジしたことがない方も、挑戦してみてはいかがでしょうか？

以上、お役に立てば幸いです。


それでは！
 

アーカイブに関するご注意

この記事はbingo!CMS広報担当独自の見解を元に執筆しています。
また、記事公開時点での情報に基づいているため内容が最新でない場合があります。

ページトップ