ウェブレイアウトの教科書

ウェブレイアウトの教科書　PC・スマートフォン・タブレット時代の標準デザイン

• MdN

著者の境祐司氏は何度かセミナーでお話を聞く機会があり、その内容や公開されるプレゼン資料の情報量に毎回圧倒されます。その境氏による、これからのウェブレイアウトデザインの方向性を解説した本で、具体的なhtmlやcssテクニックはあまり書かれていません。

私自身はウェブデザインには詳しくないのですが、電子書籍ではマルチデバイス環境を考慮しなければならないでしょうし、そういう点でも勉強になりました。

ただ、デザイン思想というかレイアウト方法に関していろんなキーワードが出てきて、なんとなく聞いたことはあってもそれぞれがどう違うのか混乱しそうになります。整理する意味でも、紹介されている用語をリストアップしてみます。これで正解なのかどうかも今ひとつ不安なのですが…。

プリント・レプリカ

雑誌などページレイアウトされたものをそのまま再現したもの。固定レイアウトを拡大・縮小して表示。PDFや画像。

アダプティブ・ウェブデザイン

マルチデバイス、マルチスクリーンに対応させるための設計思想。あらゆる閲覧環境で視認性、可読性を保証するが、同じ見映えになることは考慮しない。

リキッドレイアウト（liquid layout）

リフロー処理の特性を生かしたレイアウト手法。

フルードレイアウト（fluid layout）

リキッドレイアウトと同義。…と言っていいのかな？

フィックスドレイアウト（fixed layout）

ボックス幅のサイズをすべてpxで指定。マルチデバイスには対応できない。

エラスティックレイアウト（elastic layout）

ボックス幅のサイズをすべてemで指定。文字サイズを変更しなければレイアウトは固定される。文字サイズを変更すればレイアウト全体が拡大縮小される。

ハイブリッドレイアウト（hybrid layout）

フィックスドレイアウトもしくはエラスティックレイアウトとリキッドレイアウトを組み合わせたレイアウト。サイドバー幅はemやpxで指定し、コンテンツ領域の幅は%で指定する。そうするとウインドウサイズを変えてもサイドバーの幅は変化しない。

レスポンシブ・ウェブデザイン（responsive web design）

イーサン・マルコッテ氏による造語。広義のアダプティブ・ウェブデザインに含まれる。

One Web Flexible

ひとつのウェブサイトで多種多様な環境に適応させる設計思想。

世の中のウェブデザイナーはこういうのを理解して仕事しているのでしょうか…大変だなぁ。