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

    後藤大地  [2009/05/22]

    Smashing Magazine - WE SMASH YOU WITH THE INFORMATION THAT WILL MAKE YOUR LIFE EASIER, REALLY.

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

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

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

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

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

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

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

    関連記事

    関連サイト

    関連したタグ

    新着記事

    特設サイトの情報

      人気記事

      一覧

        イチオシ記事

        新着記事

        特別企画

        マイナビニュースマガジン