エラスティックレイアウト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)は、もう基本機能としてズーム機能が付いているので、拡大縮小したいならそちらを使えばいいんじゃない?という事情もあったりしますが・・・

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

 
"lab"で関連する記事一覧 (シーケンスで表示する)
•2010.07.05-iPadアプリ「Twin Striker」をリリース in news
•2010.06.06-The Css AwardsのSite of the Dayに選ばれました in work
•2010.06.06-iPhoneアプリ「TWIN STRIKER」をリリース! in news
•2010.06.04-each関数を使ったテキスト上下中央揃え in work
•2010.05.31-オフィシャルサイトで使う予定だった技術 in work
•2010.05.31-オフィシャルサイトで使った技術その3 in work
•2010.05.31-オフィシャルサイトで使った技術その2 in work
•2010.05.28-Androidアプリ「Twin Striker」をリリース! in news
•2010.05.26-リンク集 in development
•2010.05.26-事例(Twin Strikerのワークフロー) in development
•2010.05.26-Coronaトラブル対策 in development
•2010.05.26-Coronaと他Projectの比較 in development
•2010.05.26-Tips4. iPhone3GSとAndroid1.6の動作の違い in development
•2010.05.26-Tips3. iPhoneで気をつけるべきこと in development
•2010.05.26-Tips2. Androidで気をつけるべきこと in development
•2010.05.26-Tips1. Flashからの変換 in development
•2010.05.26-Coronaの環境構築編 in development
•2010.05.26-Coronaの紹介編 in development
•2010.05.26-『日本代表に応援メッセージを送ろう!』携帯版リリース in news
•2010.05.25-オフィシャルサイトで使った技術その1 in work
•2010.05.25-おっぱいw-cup携帯版をリリースしました! in news
•2010.05.24-会津大学 ソフトウェアスタジオ キックオフ編 in work
•2010.05.24-会津大学 ソフトウェアスタジオ 準備編 in work
•2010.05.22-サッカー日本代表に応援メッセージを送ろう! in news
•2010.05.21-DSNオフィシャルサイトリニューアル in news
•2010.05.17-Processing.jsを使った万華鏡デモ in work
•2010.05.14-CSS3のアニメーション機能 in development
•2010.05.07-複数打ったはずのマーカーが1つしか表示されない in work
•2010.05.07-TwitterSearchAPIのフィードをパースする in work
•2010.04.24-HTML5&CSS3のデモを作成しました in work
•2010.02.16-JSパウワァ&ドラッグ機能の改善ついて in work
•2010.01.08-Processingおもしろい&使えるライブラリ10 in work
•2010.01.04-HTML5を学ぶつもりならスマートフォンを買おう in work
•2009.12.02-マルチタッチディスプレイ vol.02 in work
•2009.10.23-「くままり」で使用したBox2D AS3テクニック in work
•2009.10.22-mixiアプリモバイル作成前に見ておくべき10のまとめ in work
•2009.10.21-mixiアプリの公開手順 in work
•2009.10.15-mixiアプリ「鉄血王女と待受騎士団」をリリース in news
•2009.10.14-mixiアプリのパズルゲームについて in work
•2009.09.07-雑誌ウェブデザイニングに掲載されました! in work
•2009.08.27-mixiアプリ「くままり」をリリース in news
•2009.08.26-くままるのmixiアプリ『くままり』登場 in work
•2009.05.27-もっとがほしいDSN in work
•2009.04.16-Webページで角丸のボックスを作る方法あれこれ in work
•2009.03.02-みんなが大好きjQuery in work
•2009.02.27-マルチタッチディスプレイ vol.01 in work
•2009.02.20-ニールセンのユーザビリティ10原則 in work
•2009.02.11-センサー講座 Spe.001 Wiimote Whiteboard in work
•2009.02.06-センサー講座 Lec.003 Phidgetsインストール in work
•2009.02.06-エラスティックレイアウト in work
•2009.02.05-Jakob Nielsen博士 in work
•2009.01.30-固定幅レイアウト vs. リキッドレイアウト その2 in work
•2009.01.29-センサー講座 Lec.002 phidgetsの購入 in work
•2009.01.24-固定幅レイアウト vs. リキッドレイアウト その1 in work
•2009.01.20-センサー講座 Lec.001 どれを選ぶ? in work
 
 
"socolab"で関連する記事一覧 (シーケンスで表示する)
•2010.07.05-iPadアプリ「Twin Striker」をリリース in news
•2010.06.06-The Css AwardsのSite of the Dayに選ばれました in work
•2010.06.06-iPhoneアプリ「TWIN STRIKER」をリリース! in news
•2010.05.28-Androidアプリ「Twin Striker」をリリース! in news
•2010.05.26-リンク集 in development
•2010.05.26-事例(Twin Strikerのワークフロー) in development
•2010.05.26-Coronaトラブル対策 in development
•2010.05.26-Coronaと他Projectの比較 in development
•2010.05.26-Tips4. iPhone3GSとAndroid1.6の動作の違い in development
•2010.05.26-Tips3. iPhoneで気をつけるべきこと in development
•2010.05.26-Tips2. Androidで気をつけるべきこと in development
•2010.05.26-Tips1. Flashからの変換 in development
•2010.05.26-Coronaの環境構築編 in development
•2010.05.26-Coronaの紹介編 in development
•2010.05.26-『日本代表に応援メッセージを送ろう!』携帯版リリース in news
•2010.05.25-おっぱいw-cup携帯版をリリースしました! in news
•2010.05.24-会津大学 ソフトウェアスタジオ キックオフ編 in work
•2010.05.24-会津大学 ソフトウェアスタジオ 準備編 in work
•2010.05.22-サッカー日本代表に応援メッセージを送ろう! in news
•2010.05.21-DSNオフィシャルサイトリニューアル in news
•2010.05.17-Processing.jsを使った万華鏡デモ in work
•2010.05.17-位置情報サービスに必要な技術まとめ in work
•2010.05.17-Message Bottleをリリースしました in news
•2010.05.13-おっぱいW-cupをリリースしました in news
•2010.05.07-TwitterSearchAPIのフィードをパースする in work
•2010.05.05-メッセージボトル in services
•2010.05.05-おっぱいワールドカップ in services
•2010.05.05-DJ Turndroid in services
•2010.05.05-勇者マイミク in services
•2010.05.05-くままり。 in services
•2010.04.24-HTML5&CSS3のデモを作成しました in work
•2010.04.01-Androidアプリ「DJ Turndroid」をリリース! in news
•2010.02.16-JSパウワァ&ドラッグ機能の改善ついて in work
•2010.01.08-Processingおもしろい&使えるライブラリ10 in work
•2010.01.04-HTML5を学ぶつもりならスマートフォンを買おう in work
•2009.12.02-マルチタッチディスプレイ vol.02 in work
•2009.10.23-「くままり」で使用したBox2D AS3テクニック in work
•2009.10.22-mixiアプリモバイル作成前に見ておくべき10のまとめ in work
•2009.10.21-mixiアプリの公開手順 in work
•2009.10.21-mixiアプリの登録手順 in work
•2009.10.15-mixiアプリ「鉄血王女と待受騎士団」をリリース in news
•2009.10.14-mixiアプリのパズルゲームについて in work
•2009.09.14-Googleサーバー活用法[ファイル置き場] in work
•2009.09.07-雑誌ウェブデザイニングに掲載されました! in work
•2009.08.27-mixiアプリ「くままり」をリリース in news
•2009.08.26-くままるのmixiアプリ『くままり』登場 in work
•2009.05.27-ブログ向け音楽プレイヤー「DSN Player」 in news
•2009.05.27-もっとがほしいDSN in work
•2009.03.20-会津しこんがasahi.comの動画に in news
•2009.03.02-みんなが大好きjQuery in work
•2009.02.28-居酒屋“会津しこん”がasahi.comで紹介されました in work
•2009.02.27-マルチタッチディスプレイ vol.01 in work
•2009.02.20-ニールセンのユーザビリティ10原則 in work
•2009.02.11-センサー講座 Spe.001 Wiimote Whiteboard in work
•2009.02.06-センサー講座 Lec.003 Phidgetsインストール in work
•2009.02.06-エラスティックレイアウト in work
•2009.02.05-Jakob Nielsen博士 in work
•2009.01.30-固定幅レイアウト vs. リキッドレイアウト その2 in work
•2009.01.29-センサー講座 Lec.002 phidgetsの購入 in work
•2009.01.24-固定幅レイアウト vs. リキッドレイアウト その1 in work
•2009.01.20-センサー講座 Lec.001 どれを選ぶ? in work
•2009.01.17-会津しこんで取材 in work
•2008.12.22-地域SNSから生まれた居酒屋「会津しこん」 in news
 
 
"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
 
 
Copyright © TheDesignium inc. powered by WordPress & mootools.
Relative Keyword|lab socolab UI