「エラスティックレイアウト」の使い方や意味、例文や類義語を徹底解説！

エラスティックレイアウト(elastic layout)

「このサイトはエラスティックレイアウトで作っているよ」と言われてピンと来たあなたはデザインに関する勉強をしたり、興味がある方です。
サイトを制作するうえでのいくつかあるデザイン手法の1つとして、存在するものです。日本国内で見るとまだそれほど浸透は浸透していないですが、一通りどんな手法があるかを知る上では価値があるものです。せっかくの機会ですので、是非これを機に覚えてしまいましょう。

エラスティックレイアウトの意味とは

このレイアウト手法の特徴は表示される文字の大きさによってサイトの大きさが拡大・縮小するというものです。
仕組みとしては、「em」という文字のサイズを基準に定められる数値を使う事で、例えばそのサイトの基準値が16pxならば「1em＝16px」という具合に設定されます。そして、この基準値である16pxが例えば、12pxになるとそれに伴ってサイト全体の大きさが変わるというものです。

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

サイトによっては文字の大きさが小さくて見にくくなるというものもあるかと思いますが、そんな時にエラスティックレイアウトを施していると文字の大きさ変更に伴いサイト全体の大きさが変更します。日本では、Yahoo！ジャパンのサイトで使用されているのが代表的です。

エラスティックレイアウトの文章・例文

例文1.エラスティックレイアウトを使ったYahoo！のサイトでは、文字の大きさ変えるとサイト全体の大きさも変化する
例文2.目が悪い人にとっては文字サイズの大きさに応じてサイトの大きさも変更するエラスティックレイアウトはありがたい
例文3.エラスティックレイアウトを施しているサイトなので、自分の見やすい大きさの文字に変更してそれに合わせてサイトの大きさを変更出来る
例文4.日本ではエラスティックレイアウトを使ったサイトはそれほど多くは見受けられない
例文5.エラスティックレイアウトを使ったサイトでは写真は縮小が上手くされないので制作をするうえでは考慮する必要がある
実際に日本においてエラスティックレイアウトを使ったサイトを構築するとなるとデザイナーさんは数が限られてきますので、あまり実用的とは言えないかもしれません。

エラスティックレイアウトの類義語

エラスティックレイアウトの他に代表的なデザイン手法として「グリッドレイアウト」というものがあります。格子状の枠を張り巡らせ、それにそってコンテンツを配置していくというデザイン手法です。
また「リキッドレイアウト」というものがあります。これは表示されるデバイスごとにコンテンツの大きさが最適化されて切り替わる表示形式になります。

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

代表的なデザイン手法として、グリッドレイアウト、リキッドレイアウト、エラスティックレイアウトを覚えておけば一先ずは大丈夫でしょう。
制作の技術進歩はとどまる事はありませんが、基本をおさえておけば話が分からなくなることはないので、頑張りましょう。