Webデザインを向上させる8つのレイアウト

Webデザインにおいて、コンテンツをどのようにまとめ、どのレイアウトで表現するかは大事な課題だ。すでによく使われているレイアウトと、それが何の目的で使われているのかは明かになっている。そうした人気のあるレイアウトとその目的を知ることは、Webページをデザインする際の資料として活用できる。

Matt Cronin氏がSmashing Magazineにおいて8 Layout Solutions To Improve Your Designsのタイトルのもと、使いやすい8つのレイアウトとテクニックについてまとめている。Webデザイナは一度チェックしておきたい内容だ。紹介されているレイアウトは次のとおり。

• スライダーおよび回転式スライドトレー: 扱いやすいレイアウト。大量のデータを特定のコンパクトなエリアに配置できる。また表示したい情報をオンデマンドで配信する場合にも使われる
• タブナビゲーション: スライダーとよく似たレイアウト。特定のエリアに多くの情報を盛り込む場合に使うが、スライダーとはことなり違い種類のコンテンツを配置する場合にもちいられる
• モーダルウィンドウ: 追加情報を表示する場合に別ウィンドウを表示するレイアウト。大きなサイズの画像を表示される場合や渓谷表示、ビデオコンテンツ表示、ログイン画面などで使われる
• ローラー: 最近人気が出てきているレイアウト。ボタンや画像、ラベルのうえにマウスをもってくると自動的に追加情報が表示される
• プログレッシブレイアウト: あまり一般的ではないものの、特定のコンテンツのつながりをきまった順序で表示するタイプのレイアウト。たとえば縦長のサイトを紙芝居をめくるように順次下にスクロールする効果を入れるといったもの
• グリッド: 簡素でバランスのいいデザインを考える場合によくもちいられるレイアウト
• アコーディオン: スライダーと同じようなコンセプトのレイアウトだが、ラジオボタンのように常に1箇所だけが表示されるその動きがアコーディオンに似ている
• メガドロップダウンメニュー: ドロップダウンで表示されるウィンドウのなかにいくつものメニューやリンクを含めるレイアウト

レイアウトごとに採用しているサイトの紹介と、そのレイアウトを実現するために活用できるスクリプトやチュートリアルが紹介されている。説明を読んでもピンとこない場合には、紹介されているサイトを訪れてUIを使ってみるといい。

〔それぞれの紹介サイト〕

• スライダーおよび回転式スライドトレー: Coda site、SourceBits、QuickSnapper
• タブナビゲーション: Mac Pro website、Atebits、Fontcase
• モーダルウィンドウ: Grooveshark、KissMetrics、RealMacSoftware
• ローラー: Miro’s homepage、TaoEffect、OneHub、SquaredEye
• プログレッシブレイアウト: Sursly.com、Danny Blackman
• グリッド: Neutron Creations、Valley Creek
• アコーディオン: Alex Cohaniuc、Jason Reed、Marius Roosendaal
• メガドロップダウンメニュー: Ruby On Rails Guide、Porsche、Media Temple Knowledge Base、Gateway.com

〔実現するためのスクリプトやチュートリアル〕

• スライダーおよび回転式スライドトレー Slick Accessible Slideshow using jQuery、Coda-Slider 1.1.1、jquery.scrollable 1.0.2 、Create an Amazon Books Widget with jQuery and XML、Agile Carousel、Easy Image or Content Slider、Slider Gallery、Coda Slider Effect、iCarousel
• タブナビゲーション: Create a Slick Tabbed Content Area using CSS & jQuery、JavaScript tabifier、Yetii - A JavaScript Tab Interface、Tabbed Page Interface、Updated JQuery Nested Tab Set、Scriptaculous Tabs、Accordian Tabs
• モーダルウィンドウ: Fancy Lightbox、Lightbx 2、Facebook Image/Content Viewer、Woork Mootools Lightbox、nyroModal JQuery Plugin、JQuery Alert Dialog、LightWindow、ThickBox 3.1、
• ローラー: Prototip 2、Coda Popup Bubbles、Build a Better Tooltip with jQuery Awesomeness、jQuery plugin: Tooltip、Create a Simple, Powerful Product Highlighter with MooTools、Easiest Tooltip and Image Preview Using jQuery
• プログレッシブレイアウト: ScrollTo
• グリッド: Grid System Generator、Variable Grid Systems Generator、960 Grid System、Grid Designer、Grid Calculator、50 Useful Design Tools For Beautiful Web Typography
• アコーディオン: Create a Simple, Intelligent Accordion Effect Using Prototype and Scriptaculous、Apple.com Downoads Page Slide out and drawer effect、UI/API/1.7.1/Accordion JQuery Plugin、JQuery UI Accordion、Simple JQuery Accordion menu、JQuery Accordion Madness、jQuery Examples - Horizontal Accordion
• メガドロップダウンメニュー: Animated Drop Down Menu with jQuery、Superfish v1.4.8 - JQuery Drop Down Menu、Make a Mega Drop-Down Menu with jQuery、How to Make a Smooth Animated Menu with jQuery、Designing the Digg Header: How To & Download、Create a multilevel Dropdown menu with CSS and improve it via jQuery

プログレッシブレイアウトはあまり見ないレイアウトだが、ほかのレイアウトはどれも人気の高いものだ。メガドロップダウンメニューについてはこれから人気が出るとみる向きもある。