スマートフォン用にはコンテンツをミックスして表示させるレスポンシブWebデザインライブラリ「relocate.js」
relocate.jsはサイドメニューとメインコンテンツをミックスして表示できるレスポンシブWebデザイン用ライブラリです。
レスポンシブWebデザインの場合、PC向けで2カラムのコンテンツをスマートフォンで表示しようとした場合、メインでない方のコンテンツは一気に下に移動することが多いようです。これではユーザにとっては使い勝手が悪い可能性があります。そこで使ってみたいのがrelocate.jsです。
[](http://images.moongift.jp/2013/04/Screenshot 2013-04-01 10.30.34.1364821820.png)
PC並の幅の場合。左右にコンテンツが分かれています。
[](http://images.moongift.jp/2013/04/Screenshot 2013-04-01 10.30.46.1364821825.png)
これくらいの幅でもまだ同じ比率になっています。
[](http://images.moongift.jp/2013/04/Screenshot 2013-04-01 10.30.53.1364821828.png)
スマートフォンサイズまで縮めました。左右のコンテンツが混ざって表示されているのが分かるでしょうか。
relocate.jsの主な使いどころとしては、メニュー部がアンカーになっていてメインコンテンツの特定の場所に素早くアクセスできるようになっている場合でしょうか。混ざった状態を想定してコンテンツを組み上げるのは難しそうですが、使い方によってはとても便利そうです。
relocate.jsはJavaScript製、GPL v2のオープンソース・ソフトウェアです。
MOONGIFTはこう見る
レスポンシブWebデザインは決して悪い技術ではありませんが、工数の割にユーザ体験が引き上げられない印象があります。ユーザ体験だけを考えるならば、PC/スマートフォン/タブレットそれぞれに対して最適化されている方が理想です。
では利点は何かと言えば、更新時の工数が大幅に下がるということです。つまり頻度の高い更新を伴ってこその価値と言えるかも知れません。レスポンシブWebデザインは単なる手段でしかなく、そこからどんな価値を見いだすかはそれぞれの取り組みにかかっていると言えるでしょう。