CD内にHPを構築するメリット

Pocket

CDのコンテンツが論文であろうが、動画であろうが、デジタルエイドでは必ずホームページ(Webサイト)を構築している。
どのパソコンもホームページを閲覧・印刷する機能を持っているからだ。加えてホームページなら、PDFや動画など多様なファイルを扱える。さらに、デジタルエイドが提供するCD内論文検索システムも、ホームページをベースにしている。

「動画ならDVD」と思われがちだが、最近では、動画の圧縮技術の進展とWeb技術の進化で、ホームページ上で高画質の動画を閲覧できるようになった。こうした技術を使わない手はない。

とはいうものの、CD内にホームページを構築する最大のメリットは、何といっても、CDを使い勝手を格段に向上させるナビゲーションシステムを自在に設計できる点である。
ナビゲーション・システムは、はじめてCDを開くユーザーでも直観的に、自分が閲覧したいコンテンツに行き着けるように設計されなければならない。通常は各コンテンツにリンクを張ったメニューページを作る。しかし分量が多く、内容が多岐にわたる場合、メニューページは膨大になり、使い勝手が悪くなる。
そのためコンテンツを整理・分類し、階層化していく。階層構造になると、各階層ごとを階層を辿る垂直方向のナビゲーションと、階層を横断する水平方向のナビゲーションが必要となる。複雑なコンテンツではナビゲーションは何種類にもなる。こうした高度なナビゲーション・システムとページデザインは、ビデオDVDのチャプター機能では到底作れない。
だからこそ、ホームページ制作技術が必要なるのである。

さて、ここでデジタルエイドがサポートした学術CDを例に、ナビゲーション・システムがどう設計され、それがホームページ全体でどうデザインされているか確認することで、ホームページを構築するメリットを実感してもらいたい。

動画で見る一般撮影マニュアル 上肢・下肢編

これは公益社団法人日本放射線技術学会が2009年と2010年に制作した2枚のディスクを統合したもので、新人放射線技師のためのトレーニング教材である。

内容は、全身18部位の撮影方向ごとにテクニックを解説したテキストと動画とX線写真、それに撮影上チェックポイントをパワーポイントにまとめたもの(パワーポイントはFlashで再制作した)ものからなり、本編コンテンツだけで221本ある。これに索引ページや企業広告ページなどを加えて階層構造にしたのが、図1である。

ホームページの構造
図1

トップから階層が深くなるにつれ、全部で4種のナビゲーションが必要だった。階層間を自在に横断できるよう、下層ページにもトップナビゲーションを配置した。(図2)

サムネイル画面のデザイン1
図2

しかし、最下層はもっとも重要なコンテンツそのものがくるので、関連コンテンツのナビゲーションだけにして、閉じるボタン(×)で画面を閉じることにより、一つ上の階層(各カテゴリーのサムネイル)に戻れるようにした。(図3)

詳細ページのデザイン
図3

ところで上のサムネイル画面左の(2)のサムネイルのカテゴリーは上肢の11部位しか表示されていない。残りの下肢7部位は、一番下の「下肢」というボタンをクリックすると、上肢のカテゴリーが閉じ、下肢のカテゴリーが出てくる。(図4)

サムネイル画面のデザイン2
図4

カデゴリーの開閉にはアコーディオンというやや高度な技術を使っている。ここまでしなくても、ふつうのホームページのように、(2)のサンネイルのカテゴリーを長く伸ばすとか、ボタンを小さくするとか、2列に配置するとか、他にもデザインのしようがあった。しかしそのいずれの方法でもなく、アコーディオンを採用したのは、できるだけスクロールなしに、1画面で見せたかったからだ。しかもサムネイルやタイトルなどを小さくするなど、コンテンツ部分を犠牲にしたくなかった。
スクロールのあるなし、つまり一目で全体が見て取れるかということはユーザーの使い勝手に影響する。また、サムネイルやタイトルがしっかり読めるということも学術CDでは重要である。
標準的なパソコンでブラウザを最大化すれば、このCDのすべての画面がスクロールなしの1画面で見えるようになっている。
パソコンに不慣れな人も安心して閲覧できるように、同じ階層のページはほぼ同じデザインにし、全体として整然とした印象が生まれるように配慮した。またページデザインもコンテンツに集中できるように、できるだけシンプルにした。

まとめ

論理的なナビゲーションとシンプルなデザインはユーザーにとって見やすく、わかりやすい。こうしたことはホームページを構築することで提供できる。

Pocket

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA