>ホーム [1] >ユーザビリティ論考:トップ [9] >フレームの使用について サイト情報 資料請求・お問合せ
     ホーム [1]       新着情報 [2]       KeyNavi [3]       技術紹介 [4]       FAQ [5]       サイトマップ [6]     
−ホームページユーザビリティ論考−
   

フレームの使用について

− フレームの有用性と問題点、その解決法について。
フレームについて

普通のページでは移動の度にページ全体を書き替えてしまいますが フレームを使ったページでは一貫性のある表示が可能です。

しかしフォーカスやURLなど特有の問題があります。 このページの後半ではその解決法について考えてみます。

  フレームの有用性

一貫性のあるナビゲーションは便利
ホームページは普通のソフトウェアと異なり 表示エリア(=操作エリア)のスクロールが可能です。 しかしながらスクロールのたびにリンクなどオブジェクトの位置が変わるため 毎回探すハメになります。

フレームを使ったページではスクロール位置に関係なく 指定位置にオブジェクトを固定表示できるので便利です。

ナビレイヤー このサイトではフレームを使っていませんが 「V」キーでページ内トピックや関連リンクを記述した レイヤーをウィンドウの中心に表示できます(2004/06/01)。

position:fixedもあるけど...
スタイルシートの指定で「position:fixed」 とするとオブジェクトの位置を固定できます。 スクロールしてもウィンドウ内の指定位置に表示され続けます。

とても重宝する機能なのですがWinIEでサポート外であるため 事実上使用が困難になっています。

一方、 JavaScriptのonScrollハンドラを使い レイヤー位置を固定することもできます。 しかしスクロールするたびにカクカク微小振動する問題が発生します。

フレームの場合はそういった問題がありません。

またフレームを使った場合、ページ移動時のチラツキがある程度 押さえられる点も優れています。 例えばメニューと本文の2つのフレームからなるページを考えます。 本文フレームが別ページに移動してもメニューフレームは そのまま表示されつづけチラツキが起きません。 ページ移動中も一貫して表示され続けます。

サーバ(制作)側のコスト低減
フレームを使わないページでは本文の内容以外にも 各ページごとにメニューリンクやBreadCrumbなどナビゲーション用オブジェクトを 作り直す必要があります。

そのためページを動的に作成しているケースではサーバ側の負担が増えます。 また通信量もその分増えることになります。

フレームを使うと本文フレームの内容だけ合成して送信すればいいので 負担を減らすことができます。

  フォーカスをどうするか

フレームを使ったページではフォーカスの扱いが ユーザビリティに関わってきます。
キー入力はフォーカス中のフレームで有効
キー入力中心でナビゲーションする場合に重要です。 一般に全てのキー入力はフォーカスされているフレームに対して行われます。

矢印キーでスクロールする、Tabでフォーカスを移す場合など 目的のフレームがフォーカスされている必要があります。

ロード時に本文フレームにフォーカスさせよう!
一般にフレームのページは表示時点では どのフレームもフォーカスされていません。 矢印キーを押してもスクロールしません。 マウスクリックやTabでフォーカスを移す必要があります。

JavaScriptで本文フレームにフォーカスさせると ページロード後、特に何もしなくても本文フレームに対し キー操作が可能になります。

フォーカスの切り替え
一般に「Ctrl-Tab/Ctrl-Shift-Tab」 によりフォーカスするフレームを順番に切り替えられます。 アドレスバー、ページ全体、各フレーム の順にフォーカスが移動していきます。

KeyNaviのフォーカス移動機能
一方、KeyNaviのフォーカス移動機能「Ctrl-矢印・I/K/J/L」では 異なるフレームにあるオブジェクトにも透過的にフォーカスを移せます。 ユーザはフレームを使っているか否かを意識せずに済むのでラクです。

アプリケーションサーバZopeでの活用 [Shift-S] では3つのフレームから成るページを扱っていますが これによりフォーカスをスムーズに移動可能です。

また現在フォーカスされているフレームが何であっても 「Shift-英数字」で本文フレーム内で該当する英数字で始まる リンクやボタンにフォーカスするように工夫されています。

なお、 この技術はフレームに限らず複数の独立したウィンドウ に対しても適用可能です。 「Ctrl-矢印・I/K/J/L」でフォーカス対象のオブジェクトが無くなったら 指定したウィンドウにフォーカスを移すことができます。 その結果マウスクリックや「ALT-Tab」など 特別な入力無しに常に一貫した方法でフォーカスを移動できます。

  URLをどうするか

フレームを使ったページの問題点として頻繁に取り上げられるのがURLです。
トップページのURLしか得られない理由
フレームを使ったページは 全体の親ページとそれに含まれる各フレームのページで構成されます。 アドレスバーに表示されるのは親ページのURLであり 各フレームページのURLと関連していません。

そのためフレームにどのページが表示されていても アドレスバーに表示されるURLはトップページのものになります。

各フレームのURLも指定するには以下のような工夫をします。

JavaScriptを使った解法例
親フレームのURLに子フレームのURL情報を表す パラメータをつければ解決できます。

例えば「parent.html#menu1_body1」というURLだったら メニューフレームには「menu1.html」 本文フレームには「body1.html」を展開するなどと決めます。

そしてページロード時に 対応する親フレームのHTMLをJavaScriptのdocument.write() で出力すればOKです。

ユーザがJavaScriptを無効にしている場合には対応できません。 「<noscript>」要素内にトップページ用のHTMLを書いておきます。


 上位ページ[Shift-U] 先頭へ [W or O] 

リンククリック [Shift-B] | 次のページへ [Shift-C] | Tabフォーカス [Shift-D] | スクロール [Shift-E]
2点間往復 [Shift-F] | 任意位置指定 [Shift-G] | AccessKey [Shift-H] | フレームの使用について | どこから読むか [Shift-J]
フォーム入力 [Shift-K] | 現在位置把握 [Shift-L] | お年よりにとって [Shift-M] | その他 [Shift-O]

ユーザビリティ論考:トップ [Shift-A]

ホーム [1]