Focal Pointは画面幅に応じて画像の表示場所を切り替えるJavaScriptライブラリです。

レスポンシブWebデザインの弱点とも言えるのが画像の表示です。単純に縮小して表示してしまえば良いという訳ではありません。そこで使ってみたいのが　です。

[![](http://images.moongift.jp/2012/12/Screenshot 2012-12-12 17.26.59_thumb.png)](http://images.moongift.jp/2012/12/Screenshot 2012-12-12 17.26.59.png)
デスクトップの場合。

[![](http://images.moongift.jp/2012/12/Screenshot 2012-12-12 17.27.09_thumb.png)](http://images.moongift.jp/2012/12/Screenshot 2012-12-12 17.27.09.png)
幅を少し小さくした場合。特に変わっていないと思います。

[![](http://images.moongift.jp/2012/12/Screenshot 2012-12-12 17.27.14_thumb.png)](http://images.moongift.jp/2012/12/Screenshot 2012-12-12 17.27.14.png)
さらに縮めました。一部が切り抜かれたのが分かるでしょうか。

[![](http://images.moongift.jp/2012/12/Screenshot 2012-12-12 17.27.21_thumb.png)](http://images.moongift.jp/2012/12/Screenshot 2012-12-12 17.27.21.png)
さらに小さく。顔の部分を中心にしています。

[![](http://images.moongift.jp/2012/12/Screenshot 2012-12-12 17.28.30_thumb.png)](http://images.moongift.jp/2012/12/Screenshot 2012-12-12 17.28.30.png)
こちらもデモ。Aチームです。

[![](http://images.moongift.jp/2012/12/Screenshot 2012-12-12 17.28.34_thumb.png)](http://images.moongift.jp/2012/12/Screenshot 2012-12-12 17.28.34.png)
幅を狭めると一気に拡大写真のように。

[![](http://images.moongift.jp/2012/12/Screenshot 2012-12-12 17.28.50_thumb.png)](http://images.moongift.jp/2012/12/Screenshot 2012-12-12 17.28.50.png)
さらに狭めると人がちゃんと収まっている状態まで縮まりました。

[![](http://images.moongift.jp/2012/12/Screenshot 2012-12-12 17.28.58_thumb.png)](http://images.moongift.jp/2012/12/Screenshot 2012-12-12 17.28.58.png)
こちらは右側のいすに注目。

[![](http://images.moongift.jp/2012/12/Screenshot 2012-12-12 17.29.09_thumb.png)](http://images.moongift.jp/2012/12/Screenshot 2012-12-12 17.29.09.png)
ほら、なくなったのが分かるでしょうか。

[![](http://images.moongift.jp/2012/12/Screenshot 2012-12-12 17.29.38_thumb.png)](http://images.moongift.jp/2012/12/Screenshot 2012-12-12 17.29.38.png)
こちらの写真も…

[![](http://images.moongift.jp/2012/12/Screenshot 2012-12-12 17.29.43_thumb.png)](http://images.moongift.jp/2012/12/Screenshot 2012-12-12 17.29.43.png)
上下が特に大きく変わっています。

[![](http://images.moongift.jp/2012/12/Screenshot 2012-12-12 17.29.52_thumb.png)](http://images.moongift.jp/2012/12/Screenshot 2012-12-12 17.29.52.png)
こちらの場合はどうでしょう。

[![](http://images.moongift.jp/2012/12/Screenshot 2012-12-12 17.29.59_thumb.png)](http://images.moongift.jp/2012/12/Screenshot 2012-12-12 17.29.59.png)
右上は固定で左側のコンテンツが大きく削られています。

[![](http://images.moongift.jp/2012/12/Screenshot 2012-12-12 17.30.43_thumb.png)](http://images.moongift.jp/2012/12/Screenshot 2012-12-12 17.30.43.png)
これは…ミサイル？

[![](http://images.moongift.jp/2012/12/Screenshot 2012-12-12 17.30.38_thumb.png)](http://images.moongift.jp/2012/12/Screenshot 2012-12-12 17.30.38.png)
上下左右ともに変化しています。

Focal Pointではあらかじめ画像をグリッドに分けて、ウィンドウサイズに応じてどのグリッド部分を表示するかを決めておく必要があります。自動で重要な場所にフォーカス、という訳ではありませんので注意してください。若干の手間はかかりますが、その手間に対するメリットは十分あると思われます。

Focal PointはJavaScript/CSS製のオープンソース・ソフトウェア（GPL/MIT License）です

MOONGIFTはこう見る

レスポンシブWebデザインではHTML上の見た目は変わっているもののソース全体のサイズや画像などのリソースサイズは変わっていません。そのためデスクトップ向けのソースをそのまま使うと表示が最適化されていてもサイズが大きくなってしまう傾向があります。

とは言えWebサイトをレスポンシブにデザイン、開発していくのは世の流れとも言えます。それだけにレスポンシブに開発するためのツールや、その周辺で求められるサービスを開発していくのは開発者にとってのチャンスと言えます。

via Cleverly Crop Your Images with Focal Point | Web Resources | WebAppers

Focal Point - Design Shack

Webster, Focal Point Demo | CDN Connect