Active contents design(アクティブコンテンツデザイン)

Active contents design(アクティブコンテンツデザイン)
というデザインの概念を提唱したい。
これは、ページ単位でユーザーが見ているコンテンツ、
見せたいコンテンツをページを見るフローの中で
細分化、最適化してユーザーに提供するデザインである。
具体的には、ユーザーがその瞬間見ている場所において
最適なコンテンツとインターフェイスを提供する。
デザイナーは、ユーザーが今見ている位置を
ブラウザのx軸、y軸から判別する。
例えば、1ページが長い場合、自分がページ全体のどの部分にいるかを示し、
あるいはページが終盤であれば次のステップをサジェストするような情報を
ユーザーに対しx軸、y軸によって動的にその時必要な情報だけを提供する。
レスポンシブwebデザインは、とても良い概念だが、
これはサイトとしてデバイスや画面サイズの違いに合わせ
コンテンツとインターフェイスを最適化する考え方だ。
一方でアクティブコンテンツデザインは、
ユーザーが見ている場所によって、
コンテンツとインターフェイスを最適化する概念だ。
技術的には、先にも述べたがブラウザのx軸、y軸のスクロール情報により
ユーザーの今見ている場所を判断してその時の処理を定義する。
これはjavascriptをメインとして行い、
onScrollイベントにより座標を取得する。
要は、「どこを見ているときに、何をするか」
を制御する必要がある。
実装については、これを実現するためのスクリプトを作成したので、
詳しくは以下の記事を参考にしていただきたい。
■sf_scroll_trick.js
/officer/%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%A0/100.html
Author Profile

HOSHINO
ECのことを中心に書きたいと思います。 ネタが無いときはプログラムやデザインのことも書きます。
SHARE