エラスティックレイアウト

エラスティックレイアウトin work

date:2009.02.06 posted by:sakuma

前回の記事では、ウェブサイトのレイアウト方法には固定幅レイアウトとリキッドレイアウトというものがある、という事を説明しましたが、今回はそれに続くもう一つのレイアウト法をご紹介したいと思います。

それは「エラスティックレイアウト」という手法です。

「エラスティック（elastic）」というのは「伸縮する」という意味の英単語ですが、このレイアウト法で作られたサイトは、ブラウザで指定された文字サイズを元にサイトのサイズを変更させます。実際に事例を見てもらった方が早いので、エラスティックレイアウトを採用している有名なサイトを2つ後紹介します。

・Yahoo!Japan
・みずほ証券

以上のいずれかのサイトを開いて、ブラウザの文字のサイズを変更してみてください。IEなら「表示」→「文字のサイズ」、FirefoxならCtrl+「+」、Ctrl+「-」で文字サイズを変更できます。

これらのサイトは基本固定幅のレイアウトですが、文字のサイズを大きくすることでサイト全体の幅が広く、小さくすることで狭くなるようになっています。これがエラスティックレイアウトの特徴です。

固定幅やリキッドレイアウトのサイトでは、文字サイズをデフォルトのサイズから変更させてしまうと、非常に読みづらくなってしまったり、酷い時にはデザインが崩れてしまったりするものもありますが、エラスティックレイアウトではデザインの印象を変えないままで文字サイズの変更が可能です。遠視、老眼の方など文字のサイズを大きくして読まれている方も居ますので、そのような方へのユーザビリティを考慮するなら大変有用な手法です。

技術的なことを言うと、普段HTMLやCSS使用している長さの単位は「px」ですが、これを全て「em」という単位に変換する、という事をしています。CSSの中で「px」で指定されているブロックや余白、文字のサイズなどを全て「em」指定に直してやることでエラスティックレイアウトのサイトが作れます。

「em」は文字のサイズを基準に定められる数値で、そのサイトの基準文字サイズが12pxならば1em=12px、16pxならば1em=16pxとなります。ブラウザの方で文字サイズが変更されると、サイトの基準文字サイズが大きく（小さく）なるので、それに合わせて1emの数値も大きく（小さく）なります。

例えばサイトの横幅が760pxで基準文字サイズが12pxの場合、em換算に直すと760÷12＝60なので、横幅は60emです。なので「760px」となっている箇所を「60em」と置き換えます。この作業を全てのプロパティに対して行なえば、エラスティックレイアウトの完成です（本当はいろいろ細かいことがあるのですが・・・）。

ただし、画像やFlashなどは文字サイズの変更についてきてくれないので、そのあたりはレイアウトを崩さないための考慮が必要になります。

この手法は最近（昨年あたりから）になって知られるようになった新しい技術なのですが、まだまだ馴染みがないため、特に日本ではこの手法を採っているサイトは少ないようです。

しかし、それもさもありなんというか、エラスティックレイアウトのサイトを構築する際には、デザインをかなりシンプルなものにしておかないと、文字サイズの変更時のデザインの整合性を保つのは難いです。特に背景に画像を貼っている場合などは、伸縮される場合のことを考慮しなければならないので、デザインの制約はかなり大きいです。正直商業レベルのサイトでこの方法を採用したサイトを作れるデザイナーは、日本国内で見てもかなり少ないのではないかと思います。3桁居ないかも知れません。

バリバリにデザインされたサイトをエラスティックレイアウトで作るのはかなり無理があるのですが、逆に言うと、ブログサイトなどのシンプルで、かつ文字情報の多いサイトで使うのは適切でしょう。個人でサイトを作るのを趣味とされている方は試してみてはいかがでしょうか。

・・・ただ、最近のブラウザ（IE7やFirefox、Opera）は、もう基本機能としてズーム機能が付いているので、拡大縮小したいならそちらを使えばいいんじゃない？という事情もあったりしますが・・・

デザイニウムの仕事では、日本料理技術専門学校のサイトで一部エラスティックレイアウトを取り入れています。ただ、完全にエラスティックではないので、やっぱり一部表示がおかしくなったりします。試す際はお手柔らかにお願いします・・・

"UI"で関連する記事一覧 (シーケンスで表示する)
•2010.06.06-The Css AwardsのSite of the Dayに選ばれました in work
•2010.02.16-JSパウワァ&ドラッグ機能の改善ついて in work
•2009.09.07-雑誌ウェブデザイニングに掲載されました！ in work
•2009.05.27-もっとがほしいDSN in work
•2009.03.02-みんなが大好きjQuery in work
•2009.02.20-ニールセンのユーザビリティ10原則 in work
•2009.02.06-エラスティックレイアウト in work
•2009.02.05-Jakob Nielsen博士 in work
•2009.01.30-固定幅レイアウト vs. リキッドレイアウトその2 in work
•2009.01.24-固定幅レイアウト vs. リキッドレイアウトその1 in work
•2009.01.23-WEBユーザビリティを学び始めて最初に抱く疑問 in work
•2009.01.15-webユーザビリティの世界に入門 in work

« prev post pagetop next post »

parmalink: http://www.thedesignium.com/work/504

Relative Keyword|lab socolab UI