Focal Pointは画面幅に応じて画像の表示場所を切り替えるJavaScriptライブラリです。
レスポンシブWebデザインの弱点とも言えるのが画像の表示です。単純に縮小して表示してしまえば良いという訳ではありません。そこで使ってみたいのが です。
デスクトップの場合。
幅を少し小さくした場合。特に変わっていないと思います。
さらに縮めました。一部が切り抜かれたのが分かるでしょうか。
さらに小さく。顔の部分を中心にしています。
こちらもデモ。Aチームです。
幅を狭めると一気に拡大写真のように。
さらに狭めると人がちゃんと収まっている状態まで縮まりました。
こちらは右側のいすに注目。
ほら、なくなったのが分かるでしょうか。
こちらの写真も…
上下が特に大きく変わっています。
こちらの場合はどうでしょう。
右上は固定で左側のコンテンツが大きく削られています。
これは…ミサイル？
上下左右ともに変化しています。
Focal Pointではあらかじめ画像をグリッドに分けて、ウィンドウサイズに応じてどのグリッド部分を表示するかを決めておく必要があります。自動で重要な場所にフォーカス、という訳ではありませんので注意してください。若干の手間はかかりますが、その手間に対するメリットは十分あると思われます。
Focal PointはJavaScript/CSS製のオープンソース・ソフトウェア（GPL/MIT License）です
MOONGIFTはこう見る
レスポンシブWebデザインではHTML上の見た目は変わっているもののソース全体のサイズや画像などのリソースサイズは変わっていません。そのためデスクトップ向けのソースをそのまま使うと表示が最適化されていてもサイズが大きくなってしまう傾向があります。
とは言えWebサイトをレスポンシブにデザイン、開発していくのは世の流れとも言えます。それだけにレスポンシブに開発するためのツールや、その周辺で求められるサービスを開発していくのは開発者にとってのチャンスと言えます。
via Cleverly Crop Your Images with Focal Point | Web Resources | WebAppers
MOONGIFTの関連記事
